Getting started

Requirements

The release has been tested with:

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 basic components

In your JSX file, import the components that you need:

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

4. Loading modules (optional)

If you wish to load additional Highcharts modules, use the setHighcharts function:

import { Chart, setHighcharts } from '@highcharts/react';
import Highcharts from 'highcharts/highcharts';
import 'highcharts/modules/exporting';
import 'highcharts/modules/accessibility';
setHighcharts(Highcharts);
export function ChartWithCustomHC () {
  return (
      <Chart>
        <Series
          type="line"
          data={[1, 2, 3, 4, 5]}
        />
      </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:

Edit this page