Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

Marimekko charts are stacked column charts with columns of variable width. They are primarily used for marketing analysis.

The following three dimensions of marketing data can be represented using a Marimekko chart:

  • Total value of a market segment

  • Combined share of all competitors in a particular market segment

  • Individual share of competitors in each of the market segments

FusionCharts Suite XT allows you to customize the appearance of the Marimekko chart.

In this section, you will be shown how you can:

  • Display actual values

  • Customize column widths

  • Hide the sum total of the market segments

  • Remove the percentage labels between two stacked columns

Displaying Actual Values

The stacked columns in a Marimekko chart can be rendered in the following ways:

  • Using actual data values

  • Using percentage values

A Marimekko chart rendered with actual values instead of percentage values looks like this:

FusionCharts will load here..

Given below is a brief description of the attribute used to display actual values:

Attribute Description

usePercentDistribution

It is used to specify whether percentage distribution will be used on the y-axis to plot data. Setting this attribute to 0 disables the use of percentage distribution, setting it to 1 (default) enables it.

The data structure needed to render actual values instead of percentage values is given below:

{ "chart": { "caption": "Top 3 Electronic Brands in Top 3 Stores", "subcaption": "Last month", "aligncaptiontocanvas": "0", "yaxisname": "Statewise Sales (in %)", "xaxisname": "Brand", "numberprefix": "$", "showPlotBorder": "1", "plotBorderThickness": "0.25", "showxaxispercentvalues": "0", "showsum": "1", "usePercentDistribution": "0", "theme": "fint" }, "categories": [ { "category": [ { "label": "Bose" }, { "label": "Dell" }, { "label": "Apple" } ] } ], "dataset": [ { "seriesname": "California", "data": [ { "value": "335000" }, { "value": "225100" }, { "value": "164200" } ] }, { "seriesname": "Washington", "data": [ { "value": "215000" }, { "value": "198000" }, { "value": "120000" } ] }, { "seriesname": "Nevada", "data": [ { "value": "298000" }, { "value": "109300" }, { "value": "153600" } ] } ] }
{
    "chart": {
        "caption": "Top 3 Electronic Brands in Top 3 Stores",
        "subcaption": "Last month",
        "aligncaptiontocanvas": "0",
        "yaxisname": "Statewise Sales (in %)",
        "xaxisname": "Brand",
        "numberprefix": "$",
        "showPlotBorder": "1",
        "plotBorderThickness": "0.25",
        "showxaxispercentvalues": "0",
        "showsum": "1",
        "usePercentDistribution": "0",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Bose"
                },
                {
                    "label": "Dell"
                },
                {
                    "label": "Apple"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "California",
            "data": [
                {
                    "value": "335000"
                },
                {
                    "value": "225100"
                },
                {
                    "value": "164200"
                }
            ]
        },
        {
            "seriesname": "Washington",
            "data": [
                {
                    "value": "215000"
                },
                {
                    "value": "198000"
                },
                {
                    "value": "120000"
                }
            ]
        },
        {
            "seriesname": "Nevada",
            "data": [
                {
                    "value": "298000"
                },
                {
                    "value": "109300"
                },
                {
                    "value": "153600"
                }
            ]
        }
    ]
}

Customizing the Column Width

The horizontal distribution which is represented by the column width is based on the percentage values. The chart automatically calculates the horizontal width of columns by summing up the market share of competitors in each of the market segments. Following this, the width of each segment is determined by calculating the ratio of its sum to the total sum.

However, the width of the columns can also be customized.

A Marimekko chart with the column width customized looks like this:

FusionCharts will load here..

Given below is a brief description of the attribute used to customize the width of the columns:

Attribute Description

widthPercent

It is used to manually set the width of the columns in percentage. This attribute belongs to the category object which in turn belongs to the categories object.

The data structure needed to customize the width of the columns is given below:

{ "chart": { "caption": "Top 3 Electronic Brands in Top 3 Stores", "subcaption": "Last month", "aligncaptiontocanvas": "0", "yaxisname": "Statewise Sales (in %)", "xaxisname": "Brand", "numberprefix": "$", "showPlotBorder": "1", "plotBorderThickness": "0.25", "showxaxispercentvalues": "1", "showsum": "1", "theme": "fint" }, "categories": [ { "category": [ { "label": "Bose", "widthPercent": "40" }, { "label": "Dell", "widthPercent": "30" }, { "label": "Apple", "widthPercent": "30" } ] } ], "dataset": [ { "seriesname": "California", "data": [ { "value": "335000" }, { "value": "225100" }, { "value": "164200" } ] }, { "seriesname": "Washington", "data": [ { "value": "215000" }, { "value": "198000" }, { "value": "120000" } ] }, { "seriesname": "Nevada", "data": [ { "value": "298000" }, { "value": "109300" }, { "value": "153600" } ] } ] }
{
    "chart": {
        "caption": "Top 3 Electronic Brands in Top 3 Stores",
        "subcaption": "Last month",
        "aligncaptiontocanvas": "0",
        "yaxisname": "Statewise Sales (in %)",
        "xaxisname": "Brand",
        "numberprefix": "$",
        "showPlotBorder": "1",
        "plotBorderThickness": "0.25",
        "showxaxispercentvalues": "1",
        "showsum": "1",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Bose",
                    "widthPercent": "40"
                },
                {
                    "label": "Dell",
                    "widthPercent": "30"
                },
                {
                    "label": "Apple",
                    "widthPercent": "30"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "California",
            "data": [
                {
                    "value": "335000"
                },
                {
                    "value": "225100"
                },
                {
                    "value": "164200"
                }
            ]
        },
        {
            "seriesname": "Washington",
            "data": [
                {
                    "value": "215000"
                },
                {
                    "value": "198000"
                },
                {
                    "value": "120000"
                }
            ]
        },
        {
            "seriesname": "Nevada",
            "data": [
                {
                    "value": "298000"
                },
                {
                    "value": "109300"
                },
                {
                    "value": "153600"
                }
            ]
        }
    ]
}

While setting the width of each segment manually, the values of each category must be specified such that they sum up to 100. If the values of all categories do not sum up to 100, then the chart will calculate the width of the columns based on the actual values.

Hiding the Total Value of Market Segments

A Marimekko chart with the total value of market segments not displayed at the top of each column looks like this:

FusionCharts will load here..

Given below is a brief description of the attribute used to hide the total value of market segments:

Attribute Description

showSum

FusionCharts Suite XT allows you to show the sum of all data plots stacked above each other. The sum is shown above the stacked columns. This attribute is used to specify whether the sum of all stacked data plots will be shown. Setting this attribute to 1 will show the sum, setting it to 0 (default) will hide it.

The data structure needed to hide the total value of market segments shown at the top of each column is given below:

{ "chart": { "caption": "Top 3 Electronic Brands in Top 3 Stores", "subcaption": "Last month", "aligncaptiontocanvas": "0", "yaxisname": "Statewise Sales (in %)", "xaxisname": "Brand", "numberprefix": "$", "showPlotBorder": "1", "plotBorderThickness": "0.25", "showxaxispercentvalues": "1", "showSum": "0", "theme": "fint" }, "categories": [ { "category": [ { "label": "Bose", "widthPercent": "45" }, { "label": "Dell", "widthPercent": "30" }, { "label": "Apple", "widthPercent": "25" } ] } ], "dataset": [ { "seriesname": "California", "data": [ { "value": "335000" }, { "value": "225100" }, { "value": "164200" } ] }, { "seriesname": "Washington", "data": [ { "value": "215000" }, { "value": "198000" }, { "value": "120000" } ] }, { "seriesname": "Nevada", "data": [ { "value": "298000" }, { "value": "109300" }, { "value": "153600" } ] } ] }
{
    "chart": {
        "caption": "Top 3 Electronic Brands in Top 3 Stores",
        "subcaption": "Last month",
        "aligncaptiontocanvas": "0",
        "yaxisname": "Statewise Sales (in %)",
        "xaxisname": "Brand",
        "numberprefix": "$",
        "showPlotBorder": "1",
        "plotBorderThickness": "0.25",
        "showxaxispercentvalues": "1",
        "showSum": "0",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Bose",
                    "widthPercent": "45"
                },
                {
                    "label": "Dell",
                    "widthPercent": "30"
                },
                {
                    "label": "Apple",
                    "widthPercent": "25"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "California",
            "data": [
                {
                    "value": "335000"
                },
                {
                    "value": "225100"
                },
                {
                    "value": "164200"
                }
            ]
        },
        {
            "seriesname": "Washington",
            "data": [
                {
                    "value": "215000"
                },
                {
                    "value": "198000"
                },
                {
                    "value": "120000"
                }
            ]
        },
        {
            "seriesname": "Nevada",
            "data": [
                {
                    "value": "298000"
                },
                {
                    "value": "109300"
                },
                {
                    "value": "153600"
                }
            ]
        }
    ]
}

Hiding Percentage Labels from Between Two Stacked Columns

A Marimekko chart with the percentage labels on the x-axis hidden looks like this:

FusionCharts will load here..

Given below is a brief description of the attribute used to remove the percentage label on x-axis:

Attribute Description

showAxisPercentValues

It is used to specify whether percentage values will be shown along the x-axis. Setting this attribute to 0 will hide the percent values, setting it to 1 (default) will show them.

The data structure needed to hide the percentage label on the x-axis is given below:

{ "chart": { "caption": "Top 3 Electronic Brands in Top 3 Stores", "subcaption": "Last month", "aligncaptiontocanvas": "0", "yaxisname": "Statewise Sales (in %)", "xaxisname": "Brand", "numberprefix": "$", "showPlotBorder": "1", "plotBorderThickness": "0.25", "showxaxispercentvalues": "0", "showsum": "1", "theme": "fint" }, "categories": [ { "category": [ { "label": "Bose", "widthPercent": "45" }, { "label": "Dell", "widthPercent": "30" }, { "label": "Apple", "widthPercent": "25" } ] } ], "dataset": [ { "seriesname": "California", "data": [ { "value": "335000" }, { "value": "225100" }, { "value": "164200" } ] }, { "seriesname": "Washington", "data": [ { "value": "215000" }, { "value": "198000" }, { "value": "120000" } ] }, { "seriesname": "Nevada", "data": [ { "value": "298000" }, { "value": "109300" }, { "value": "153600" } ] } ] }
{
    "chart": {
        "caption": "Top 3 Electronic Brands in Top 3 Stores",
        "subcaption": "Last month",
        "aligncaptiontocanvas": "0",
        "yaxisname": "Statewise Sales (in %)",
        "xaxisname": "Brand",
        "numberprefix": "$",
        "showPlotBorder": "1",
        "plotBorderThickness": "0.25",
        "showxaxispercentvalues": "0",
        "showsum": "1",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Bose",
                    "widthPercent": "45"
                },
                {
                    "label": "Dell",
                    "widthPercent": "30"
                },
                {
                    "label": "Apple",
                    "widthPercent": "25"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "California",
            "data": [
                {
                    "value": "335000"
                },
                {
                    "value": "225100"
                },
                {
                    "value": "164200"
                }
            ]
        },
        {
            "seriesname": "Washington",
            "data": [
                {
                    "value": "215000"
                },
                {
                    "value": "198000"
                },
                {
                    "value": "120000"
                }
            ]
        },
        {
            "seriesname": "Nevada",
            "data": [
                {
                    "value": "298000"
                },
                {
                    "value": "109300"
                },
                {
                    "value": "153600"
                }
            ]
        }
    ]
}

There! You have now seen how you can configure a Marimekko chart.

Top