Sample: Multi-chart dashboard

Live preview

Code

<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
  <div id="a" style="height:320px"></div>
  <div id="b" style="height:320px"></div>
</div>
<script type="module">
  import { Insight } from 'https://unpkg.com/@chartbuddy.io/embed';

  new Insight('#a', {
    persist: false,
    chartData: {
      chartType: 'clusteredBar',
      isDataTransposed: true,
      seriesData: [['', 'A', 'B'], ['X', 3, 5]],
      title: { visible: true, text: 'Bars' },
      subtitle: { visible: false, text: '' },
      legend: { visible: false },
    },
  });

  new Insight('#b', {
    persist: false,
    chartData: {
      chartType: 'line',
      isDataTransposed: true,
      seriesData: [['', 'A', 'B', 'C'], ['Y', 2, 4, 3]],
      title: { visible: true, text: 'Line' },
      subtitle: { visible: false, text: '' },
      legend: { visible: false },
    },
  });
</script>