# React

> Use 82chart as a React component.

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

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