---
url: https://chartbuddy.io/embed/docs/samples/bar-mekko.md
---
# Sample: Bar Mekko

## Live preview

## Code

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

  new Insight('#chart', {
    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](/chart-types/bar-mekko) for the width/height grid rules and how this differs from [Marimekko](/chart-types/mekko).