Docs › Frameworks and server

React

Use 82chart as a React component.

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