React chart library: making charts with 82chart

@82chart/react wraps 82chart as the <Chart82> React component. It works with React 18 and newer, draws the data object you pass and redraws when a new one arrives. The chart is created after mount, so server rendering (Next.js) is safe.

Choosing a React chart library

Common React choices are Re●●arts (compose axes and lines in JSX, SVG, MIT), react-chart●s-2 around Chart.●s (canvas, MIT) and wrappers around EC●●rts (canvas or SVG, Apache-2.0). 82chart takes one options object and ships zoom, crosshair, annotations, PNG/SVG/CSV export, Korean units and keyboard access without plugins (MIT). For tens of thousands of points or maps, a canvas library fits better. See the comparison.

npm i @82chart/core @82chart/react

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

• <Chart82 type data options theme onClick onReady />; options holds every other option.
• data redraws when it is a new object; build a new one rather than mutating the array.
• options is compared key by key and changed keys go through setOptions.
• ref gives you the chart instance. It is created after mount, so it is safe with SSR and Next.js.

Export through ref

import { useRef } from 'react';
import { Chart82, type Chart } from '@82chart/react';

function Report({ data }) {
  const ref = useRef<Chart>(null);
  return (
    <>
      <Chart82 ref={ref} type="line" data={data} />
      <button onClick={() => ref.current?.download('png', 'report')}>PNG</button>
    </>
  );
}

Frequently asked questions

Which React chart library should I use?

If composing charts in JSX suits you and basic charts are enough, Re●●arts; for very many points on a canvas, Chart.●s or an EC●●rts wrapper. For Korean admin screens and reports that need 만·억 units, zoom, export and accessibility at no extra cost, 82chart. All four are open source and free for commercial use (license guide).

Next.js says "window is not defined".

@82chart/core touches neither window nor document on import, and <Chart82> creates the chart after mount. In the App Router, put 'use client' at the top of the file that uses <Chart82> (it uses hooks, so it cannot be a server component). If the error stays, check that createChart is not called at module top level. To render a picture on the server, see Charts in Next.js and SSR.

How do I make a realtime chart?

Turn on realtime and call chart.append(points) on the instance from ref: new points join, old ones leave the window. That is lighter than rebuilding the whole array in state each time. To replace all values, pass a new data object and the chart glides from the old values (Realtime charts).