# React chart library: making charts with 82chart

> Bar, line and pie charts with the <Chart82> React component; works in Next.js, Korean units built in.

Source: https://82chart.com/en/docs/react/

`@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](https://82chart.com/en/compare/).

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

```js
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](https://82chart.com/en/docs/options/).
- `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

```js
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](https://82chart.com/en/docs/chart-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](https://82chart.com/en/docs/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](https://82chart.com/en/docs/realtime/)).