Marimekko charts – an overview

What is it for?

Marimekko charts allow you to compare categorical variables through columns of changing widths or bars of changing heights depending on the orientation. The chart also allows stacking, meaning that you can compare main categories and sub-categories easily. They can be used to show market maps, abatement curves, energy consumption metrics and more.

NOTE: In this help doc, we use the term "bar" to describe both bars and columns.

Modes in the Marimekko template

Marimekko charts have two modes:

1

Classic marimekko chart: here both axes are set to be percentages. This means that the chart occupies the full extent of the canvas. In this mode, the stacks of each bar or column represent a part of a whole, similar to what happens with stacked percent chart types in our Line, bar, pie template. This mode is particularly useful to show and compare proportions.

2

Bar mekko: in this mode, the axis containing the secondary metric is not treated as a percentage. This means that the height of the bars and their segments scale up according to their absolute values. The result is a column chart with variable widths or a bar chart with variable heights depending on the orientation. This chart is good to understand the relation between two numeric variables with a categorical dimension.

How to get started

1

Your data should be in long format, meaning that each row represents a single bar and each column represents a stack in a bar. For example:

TIP: If your data isn't in this format, you can use the unpivoting function to reformat it.

2

Once you upload data in the right format, you need to select your columns. This template comes with an auto column binding option, so after uploading your data you will see some columns added to the bindings automatically. However, here's a quick summary of what each of the binding is set to do:

• Name: the identifier of each bar. Will appear as a label in the chart.
• Primary metric: the baseline of the chart. The bars cannot be stacked by these values. In the example above, the Population column would be the primary metric.
• Secondary metric: represents the stackable value(s). You can bind one or several columns. If you add multiple columns to this binding, the bars will be split into stacks. In the data above, the columns Low-carbon sources and Fossil fuel sources could be bound as a secondary metric separately or together.
• Grid of charts: splits the chart into smaller subsets based on a categorical column.
• Color category: a categorical column to color the bars by. If this binding is left blank, then the template will color the bars by stack.
• Filter by: adds a categorical or a chronological filter to the chart.
• Info for popups: information to appear through popups or panels.

3

That's it! You should now have a basic Marimekko chart that you can carry on customizing and improving. Continue to the next section to learn how.

Further customization and settings

Once you add the column bindings, you can customize your chart in the Preview tab. You can add custom popups, annotations and other things to your chart. Here we'll focus on the settings specific to this template, specially on the Chart setup and Colors settings.

Chart set up: sorting and orientation

Under the Marimekko settings you can choose the orientation and sorting of the bars and the spacing between the stacks.

1

You can choose how to sort your data with the Sort by section. Select either None, Primary metric or Secondary metric. Remember that the Secondary metric binding supports multiple columns. When sorting by this metric, note that if you only have one column bound the sorting will work as you expected: the bars will be ordered from highest to lowest based on their total values.

However, if you have multiple columns within your data bound to the secondary metric, the sorting logic changes a little. Here's how it works:

• If you have stacked bars but your axis is not set to be a percentage, then the bars will be sorted based on the total value of the bar, meaning the sum of the stacks.
• If you have stacked bars and an axis set to percentage, then the bars will be sorted based on the value of the first column bound to the secondary metric. See the story below to understand this better with an example.

2

Choose between the Horizontal or Vertical mode. On Horizontal, the bars will generate from left to right and will stack next to each other. On Vertical, your bars will grow from the bottom upwards and the stacks will appear on top of each other.

3

Lastly, in this section you can define the space between the stacks in each bar and the space between the bars themselves.

Color

Moving on to the Colors settings:

1

If there is no column added to the Color category binding, you will only be able to color by Stack or Bar. Keep in mind that when coloring by bar, the template will assign the same color to all the stacks within the bar and change the opacity of each to distinguish them.

2

If there is a column bound to Color category then you will be able to color by that as well.

3

As with other Flourish templates, you can customize your color palette to give the desired look and feel to your chart.

Labels

On the Labels settings you can position your labels at the edge of the chart, meaning at the top of your canvas, or at the edge of the bar, right above each bar. Here you can also set a specific distance between the labels and the chart so they are more or less separated. You can also choose to show only specified labels.

You can also decide what to do with overlapping labels. There are three options:

1

Spread them out will distribute the labels in the available space. This option will automatically add a connector line between the bar and the label.

2

Hide them will remove any overlaps.

3

Do nothing will leave the labels as they are. Keep in mind that this might bring legibility issues.

You can add connector lines to your labels and customize how they look.

NOTE: Labels in Marimekko will get cropped if they are wider than the bars on vertical mode. You can sort this by positioning the labels on the edge of the chart and adding the name of series you want to show to the Only display specific labels setting.

Axes modes

Axes in the Marimekko template work similar to other charts with the notable exception that they include a toggle to treat them as a percentage. By default, both axis will be set as a percentage. Turning the toggle off on the axis containing the secondary metric will result in a bar mekko.

That's it! Now that you know the basics, it's time to experiment using this template. Click the button below to get started.