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 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 data={[1, 2, 3, 4, 5]} />
    </Chart>
  );
}

For more in-depth information on configuring your chart, see the Components documentation.

The result should look like this:

Edit this page