Getting started

** Note: version 4 of our React integration is currently in beta. Features described may change at any time **

Requirements

The beta release has been tested with:

• The Highcharts npm package  version 11.4.8 and newer
• Vite  with plugin-react  version 4.3.3
• React and react-dom version 18.3.1

1. Install Highcharts and highcharts-react from npm

Install the Highcharts package along with our React integration  from npm by running:

npm install highcharts @highcharts/react

2. Add Chart, Series and Title components

In your JSX file, import the necessary components:

import {
    Chart,
    Series,
    Title
} from '@highcharts/react';

3. Create your chart

Now, you can create a simple chart like this:

function ChartComponent () {
  return (
    <Chart>
      <Title>Line chart</Title>
      <Series type="line" data={[1, 2, 3]} />
    </Chart>
  )
}

For more in-depth information on configuring your chart, see the documentation for the Chart and Series  components, and how to set options .

The result should look like this: