Sample: Bar Mekko

Live preview

Code

<div id="chart" style="width:800px;height:480px"></div>
<script type="module">
  import { Insight } from 'https://unpkg.com/@chartbuddy.io/embed';

  new Insight('#chart', {
    persist: false,
    chartData: {
      chartType: 'barMekko',
      isDataTransposed: true,
      seriesData: [
        ['', 'Enterprise', 'Mid-market', 'SMB', 'Startup'],
        ['Accounts', 120, 85, 200, 350],
        ['Core revenue', 48, 16, 8, 3],
        ['Add-ons', 14, 12, 10, 6],
      ],
      title: { visible: true, text: 'Revenue by customer segment' },
      subtitle: {
        visible: true,
        text: 'Bar height = revenue (€m) · width = number of accounts',
      },
    },
  });
</script>

See Bar Mekko chart type for the width/height grid rules and how this differs from Marimekko.