Korean numbers.
Free charts.

만/억 axis units, "unit: million won" and change badges out of the box. Zoom, crosshairs and export, paid elsewhere, are free here with no key.

Get started Open the demo

FreeMIT, no key, no watermark

0dependencies

29KBgzip, all eight chart types

만/억Korean number units built in

The charts you use, one call each

Every chart below is live. Hover, click the legend, and drag across the visitors chart to zoom.

Area · zoom

Stacked bars

Donut

Horizontal bars

Gauge

Line · compare

One chart library for every dashboard

Paid-tier features by defaultZoom and pan, crosshairs, reference lines, PNG/SVG/CSV export: features other libraries put behind a commercial license.
MIT with no keyNo license key, no watermark, no revenue threshold. Free on company sites too.
Korean numbers and datesAxes read 1,500만 and 3.4억, tooltips 48,250,000원; dates read 1월, 10.21, 2026.10.21(화).
Good-looking defaultsA card header, wide rounded bars, faint dashed grid, and an eight-color palette checked for color-vision deficiency.
Keyboard and screen readersArrow keys read values one by one; a hidden data table and an automatic summary come along.
The same picture everywhereOne SVG for the screen, server rendering and exports. React, Vue, Svelte, Angular and a web component.

Made for the places Korean products show numbers

Admin dashboards

Metric name, headline number, change vs last month and a target line: one card is a KPI screen.

createChart('#sales', {
  type: 'bar', title: 'Monthly revenue',
  value: 48250000, prefix: '₩ ', delta: 18.2,
  scale: 1e6, unit: 'M',
  data,
});

Reports

"Unit: million won" and comma numbers. The export menu saves PNG, SVG and CSV.

createChart('#report', {
  type: 'line', footnote: 'Unit: million won',
  scale: 1e6, unit: 'M',
  data,
});

Store analytics

Top products as horizontal bars, payment methods as a donut, daily sales as bars with a line.

createChart('#top', {
  type: 'bar', horizontal: true,
  dataLabels: true,
  data,
});

Render on the server

An SVG string without a DOM: Cloudflare Workers, Node or Astro, for OG images or email.

import { renderToSVG } from '@82chart/core';

const svg = renderToSVG(options, {
  width: 1200, height: 630,
});

Korean units without the plumbing

Short axes, exact tooltipsTicks shrink to 1,500만 or 3.4억; tooltips and tables keep the full comma number.
The "unit: million won" report stylescale: 1e6 with a unit puts 60M on the axis while the headline keeps the exact amount.
Your choice of change colorsGood is green and bad is red by default, or switch to the Korean stock style: up red, down blue (▲▼).

Another library (example)

// Chart.●s: Korean 만/억 units are up to you
scales: { y: { ticks: { callback: (v) =>
  v >= 1e8 ? (v / 1e8).toFixed(1) + '억'
  : v >= 1e4 ? (v / 1e4).toFixed(0) + '만'
  : v.toLocaleString() } } }

82chart

// 82chart: one option
createChart('#el', {
  type: 'bar', numberFormat: 'korean', data,
});
// axis 0 · 1,500만 · 3,000만 · 4,500만

Coming from To●●t UI Chart or Apex●●●rts

To●●t UI Chart was archived in September 2026 and no longer gets fixes. Data shapes are close: labels and series carry over almost as they are.

<link rel="stylesheet" href="https://uicdn.toast.com/chart/latest/to●●tui-chart.min.css">
<script src="https://uicdn.toast.com/chart/latest/to●●tui-chart.min.js"></script>
<div id="chart"></div>
<script>
  // columnChart = vertical bars (barChart is horizontal there)
  const chart = to●●tui.Chart.columnChart({
    el: document.getElementById('chart'),
    data: {
      categories: ['1월', '2월', '3월'],
      series: [{ name: '매출', data: [32000000, 41000000, 38500000] }],
    },
    options: { chart: { title: '월별 매출', width: 600, height: 400 }, yAxis: { title: '원' } },
  });
</script>

<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>
  const chart = Chart82.createChart('#chart', {
    type: 'bar',
    title: '월별 매출',
    unit: '원',
    height: 400,
    data: {
      labels: ['1월', '2월', '3월'],
      series: [{ name: '매출', data: [32000000, 41000000, 38500000] }],
    },
  });
</script>

const chart = new Apex●●●rts(document.querySelector('#chart'), {
  chart: { type: 'line', height: 350, zoom: { enabled: true } },
  series: [{ name: 'Visitors', data: [120, 180, 150, 220] }],
  xaxis: { categories: ['Mon', 'Tue', 'Wed', 'Thu'] },
  yaxis: { labels: { formatter: (v) => v.toLocaleString() } },
});
chart.render();

const chart = createChart('#chart', {
  type: 'line',
  height: 350,
  zoom: true,
  numberFormat: 'comma',
  data: {
    labels: ['Mon', 'Tue', 'Wed', 'Thu'],
    series: [{ name: 'Visitors', data: [120, 180, 150, 220] }],
  },
});

<canvas id="chart"></canvas>
<script>
  new Chart(document.getElementById('chart'), {
    type: 'bar',
    data: { labels: ['1월', '2월', '3월'], datasets: [{ label: '매출', data: [12, 19, 14] }] },
  });
</script>

<div id="chart"></div>
<script>
  Chart82.createChart('#chart', {
    type: 'bar',
    data: { labels: ['1월', '2월', '3월'], series: [{ name: '매출', data: [12, 19, 14] }] },
  });
</script>

To●●t UI Chart guide Apex●●●rts and Chart.●s guide Feature and license comparison

React, Vue, Svelte and Angular too

<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>

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));

import { Chart82 } from '@82chart/react';
import '@82chart/core/styles.css';

const data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  series: [{ name: 'Sales', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
};

export function SalesChart() {
  return (
    <Chart82
      type="bar"
      data={data}
      options={{ title: 'Monthly sales', prefix: '₩' }}
      onClick={(point) => console.log(point)}
    />
  );
}

<script setup>
import { Chart82 } from '@82chart/vue';
import '@82chart/core/styles.css';

const data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  series: [{ name: 'Sales', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
};
const options = { title: 'Monthly sales', prefix: '₩' };
</script>

<template>
  <Chart82 type="bar" :data="data" :options="options" @click="(p) => console.log(p)" />
</template>

<script>
  import { Chart82 } from '@82chart/svelte';
  import '@82chart/core/styles.css';

  const data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    series: [{ name: 'Sales', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
  };
</script>

<Chart82 type="bar" {data} options={{ title: 'Monthly sales', prefix: '₩' }} />

import { Component } from '@angular/core';
import { Chart82Component } from '@82chart/angular';
import type { ChartData, ChartOptions, ChartPoint } from '@82chart/core';

@Component({
  selector: 'app-sales',
  standalone: true,
  imports: [Chart82Component],
  template: `<chart-82 type="bar" [data]="data" [options]="options" (pointClick)="onPoint($event)"></chart-82>`,
})
export class SalesComponent {
  data: ChartData = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    series: [{ name: 'Sales', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
  };
  options: Partial<ChartOptions> = { title: 'Monthly sales', prefix: '₩' };
  onPoint(p: ChartPoint) { console.log(p); }
}
// angular.json → "styles": ["node_modules/@82chart/core/dist/styles.css"]

<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>

<chart-82
  type="bar"
  title="Monthly sales"
  options='{"prefix":"₩"}'
  data='{"labels":["Jan","Feb","Mar"],"series":[{"name":"Sales","data":[32000000,41000000,38500000]}]}'
></chart-82>

Questions people ask

Can I use it for free in a commercial product?

Yes. It is MIT licensed: free for commercial sites, internal tools and client projects. No license key, no watermark, no revenue threshold, no paid tier. Keep the license text, that is all.

Does it work in Internet Explorer?

No. It supports current Chrome, Edge, Safari, Firefox and Samsung Internet, desktop and mobile. IE11 is out of support from Microsoft and lacks the SVG and ResizeObserver features 82chart uses.

How big is it?

82chart.min.js is about 30KB gzipped and the CSS about 3KB. There are no dependencies: no date library, no jQuery.

How do I get Korean units (만·억) on the axis?

Nothing to do: on Korean pages (<html lang="ko">) or with language: 'ko' the axis reads 1.2만 and 3.4억 while tooltips show the full number with commas. For report-style "in millions of won", use scale: 1000000, unit: '백만원'.

Is there a dual y axis?

Overlaying two values with different units (revenue and order count) lets the choice of ranges make the same data look correlated or opposed. It is the most misread kind of chart, so since 0.2.0 it exists only as an opt-in: give a series axis: 'right' and set the unit and title with y2Axis (see Combo). When the point is comparison, two stacked charts sharing the x axis with crosshairs linked by group are more honest.

How many points can it handle?

A few thousand draw smoothly as SVG. Lines and areas above 2,000 points are thinned with LTTB to about the plot width, so tens of thousands stay light (Large data; CSV and the table keep every value). Aggregate thousands of bars, or hundreds of thousands of points, first.

Are there candlestick charts?

Not in the core. Candles, volume and indicators such as moving averages are coming as a separate package on top of it, @82chart/stock.

Does 82chart send my data anywhere?

No. Chart data and visitor data are never sent. Once a day it tells 82chart.com the domain and version it runs on; telemetry: false turns that off, and localhost, intranet hosts and IP addresses never report.

Can it replace To●●t UI Chart?

Yes. The To●●t UI Chart repository was archived in September 2026 and no longer gets fixes. 82chart aims at the same Korean use cases (만·억 units, Hangul labels, admin dashboards); the option-by-option map is in Moving from To●●t UI Chart.

How is it different from Apex●●●rts or Chart.●s?

Apex●●●rts moved off the MIT license from 5.0, and Chart.●s needs separate plugins for zoom and annotations. 82chart ships zoom, crosshair, annotations, PNG/SVG/CSV export and Korean units in its MIT core. See the comparison.

Try it in the screen you are building.

No sign-up, no key. Free for company sites too.

Get started

Korean numbers.Free charts.