Previous All demos Next
  • Open in:

Mekko Chart

Mekko or Marimekko chart is a variation of stacked area charts with varied-width categories.

This demo uses XYChart with StepLineSeries.

Related tutorials

Demo source

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}
</style>

<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>

<!-- Chart code -->
<script>
am5.ready(function() {

// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");


// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
  am5themes_Animated.new(root)
]);


// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
  panX: false,
  panY: false,
  wheelX: "panX",
  wheelY: "zoomX",
  layout: root.verticalLayout
}));


// Add legend
// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
var legend = chart.children.push(
  am5.Legend.new(root, {
    centerX: am5.p50,
    x: am5.p50
  })
);


// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
  min: 0,
  max: 100,
  renderer: am5xy.AxisRendererX.new(root, {})
}));

var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  min: 0,
  renderer: am5xy.AxisRendererY.new(root, {})
}));


// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
function createSeries(name, data) {
  var series = chart.series.push(am5xy.StepLineSeries.new(root, {
    name: name,
    xAxis: xAxis,
    yAxis: yAxis,
    baseAxis: xAxis,
    valueYField: "ay",
    valueXField: "ax",
    stacked: true
  }));

  series.strokes.template.setAll({
    strokeWidth: 3
  });
  
  series.fills.template.setAll({
    fillOpacity: 0.2,
    visible: true
  });

  series.data.setAll(data);

  // Make stuff animate on load
  // https://www.amcharts.com/docs/v5/concepts/animations/
  series.appear();
  
  var bulletSeries = chart.series.push(am5xy.ColumnSeries.new(root, {
    name: name,
    xAxis: xAxis,
    yAxis: yAxis,
    baseAxis: xAxis,
    valueYField: "ay",
    valueXField: "ax",
    stacked: true
  }));
  
  bulletSeries.columns.template.setAll({
    //width: 50,
    forceHidden: true
  });
  
  var bulletSeriesData = [];
  for(var i = 1; i < data.length; i++) {
    bulletSeriesData.push({
      "ax": data[i].ax - (data[i].ax - data[i-1].ax) / 2,
      "ay": data[i-1].ay
    })
  }
  
  bulletSeries.data.setAll(bulletSeriesData);

  bulletSeries.bullets.push(function () {
    return am5.Bullet.new(root, {
      locationX: 0.5,
      locationY: 0.5,
      sprite: am5.Label.new(root, {
        text: "{valueY}",
        centerY: am5.p50,
        centerX: am5.p50,
        populateText: true,
        background: am5.RoundedRectangle.new(root, {
          fill: root.interfaceColors.get("background")
        })
      })
    });
  });
  
  series.on("visible", function(visible, series) {
    if (visible) {
      bulletSeries.show();
    }
    else {
      bulletSeries.hide();
    }
  })

  legend.data.push(series);
}


var series1 = createSeries(
  "Trucks",
  [
    { "ax": 0, "ay": 20 },
    { "ax": 30, "ay": 10 },
    { "ax": 40, "ay": 35 },
    { "ax": 55, "ay": 43 },
    { "ax": 80, "ay": 33 },
    { "ax": 100, "ay": 33 }
  ]
);

var series2 = createSeries(
  "SUVs",
  [
    { "ax": 0, "ay": 10 },
    { "ax": 30, "ay": 39 },
    { "ax": 40, "ay": 22 },
    { "ax": 55, "ay": 26 },
    { "ax": 80, "ay": 15 },
    { "ax": 100, "ay": 15 }
  ]
);

var series3 = createSeries(
  "Cars",
  [
    { "ax": 0, "ay": 25 },
    { "ax": 30, "ay": 25 },
    { "ax": 40, "ay": 22 },
    { "ax": 55, "ay": 19 },
    { "ax": 80, "ay": 30 },
    { "ax": 100, "ay": 30 }
  ]
);


// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
chart.appear(1000, 100);

}); // end am5.ready()
</script>

<!-- HTML -->
<div id="chartdiv"></div>