chart
한국어Get started

Docs › Start

Getting started

Draw your first chart in five minutes.

82chart is a dependency-free SVG chart component. A page without a build step needs two CDN lines; an npm project needs one package. No license key, no watermark, no sign-up, no payment.

Live example

Code for this example

createChart('#chart', {
  type: 'bar',
  title: 'Monthly sales',
  prefix: '₩',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    series: [{ name: 'Sales', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
  },
});

Axis labels are short (32M, 52M) and the tooltip shows the exact number (₩32,000,000). On Korean pages (<html lang="ko">) the axis uses 만·억 units instead.

From the CDN

The quickest path. The script defines the global Chart82 and registers the <chart-82> tag.

<link rel="stylesheet" href="https://82chart.com/cdn/v0.2.0/82chart.css">
<script src="https://82chart.com/cdn/v0.2.0/82chart.min.js"></script>

<div id="chart"></div>
<script>
  Chart82.createChart('#chart', {
    type: 'bar',
    title: 'Monthly sales',
    prefix: '₩',
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
      series: [{ name: 'Sales', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
    },
  });
</script>

From npm

npm i @82chart/core
import { createChart } from '@82chart/core';
import '@82chart/core/styles.css';

const chart = createChart('#chart', {
  type: 'bar',
  title: 'Monthly sales',
  prefix: '₩',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    series: [{ name: 'Sales', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
  },
});

chart.on('click', (point) => console.log(point.x, point.y));

The first argument of createChart is an element or a selector; whatever it holds is replaced by the chart. The chart takes its parent's width and redraws when that changes.

Changing the data

chart.update({
  labels: ['Jul', 'Aug'],
  series: [{ name: 'Sales', data: [64000000, 70500000] }],
});
chart.setOptions({ type: 'line', smooth: true }); // change some options
chart.destroy();                                  // remove it

Next