Quick start

Create a ChartBuddy Insight on an HTML page.

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>ChartBuddy</title>
  <style>
    html, body { margin: 0; height: 100%; }
    #chart { width: 100%; height: 100%; min-height: 480px; }
  </style>
</head>
<body>
  <div id="chart"></div>
  <script type="module">
    import { Insight } from 'https://unpkg.com/@chartbuddy.io/embed';

    const insight = new Insight('#chart', {
      persist: false,
      chartData: {
        chartType: 'clusteredBar',
        isDataTransposed: true,
        seriesData: [
          ['', 'Q1', 'Q2', 'Q3', 'Q4'],
          ['Revenue', 100, 112, 125, 140],
          ['Costs', 60, 66, 70, 78],
        ],
        title: { visible: true, text: 'Revenue vs Costs' },
        subtitle: { visible: false, text: '' },
      },
    });

    await insight.ready;
  </script>
</body>
</html>

What you get

A rendered chart in #chart
View mode by default (no spreadsheet)
Hover the ChartBuddy ball (top-left) for Download (PNG), Drag to slide, and Edit

Installation — npm and CDN
First Insight — update and destroy
Data model — seriesData layouts

Quick start ​

What you get ​

Next ​

Quick start

What you get

Next