Highcharts React

Official Highcharts for React

Highcharts for React makes integrating Highcharts data visualizations into your React projects intuitive and aligned with your React workflow, built from the ground up with an API refined for React patterns.

Why Highcharts React?

• JSX-Native API - An API built for React with clean syntax and patterns
• Supports All Chart Types - From basic charts to advanced Stock, Gantt, and Maps: covering a wide range of visualizations
• Custom Component Integration - Easily use custom React components in your charts without workarounds
• Full ES Module Support - Built for ESM and tree shaking
• Big Data Ready - WebGL-powered Boost Module lets you render millions of data points if needed
• Accessibility First - World class accessibility features help you reach the widest audience possible.
• Zero Dependencies - Lightweight, and written from scratch with ZERO external dependencies

License

Getting licensed for commercial use makes you production-ready: license, updates and support for business-critical charts. To learn more, please contact our sales team at sales@highcharts.com. You can also review our Standard License Terms and our Annual License at the links below:

• Standard License Terms
• Terms & Conditions for Annual Subscription

Installation

Install Highcharts from npm:

npm install highcharts @highcharts/react

Or using yarn:

yarn add highcharts @highcharts/react

@highcharts/react requires react and react-dom as peer dependencies. If they are not already part of your project, you can add them:

npm install react react-dom

Quick Start

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Chart, Title, Series } from '@highcharts/react';
import { ColumnSeries } from '@highcharts/react/series/Column';
import { AreaSeries } from '@highcharts/react/series/Area';

export function Application() {
  return (
    <Chart>
      <Title>Chart with multiple series types</Title>
      <Series
        data={[2, 4, 3, 1, 5]}
        options={{ name: 'Line series', color: 'red' }}
      />
      <ColumnSeries
        data={[3, 5, 1, 2, 4]}
        options={{ name: 'Column series', color: 'yellow' }}
      />
      <AreaSeries
        data={[4, 2, 1, 5, 3]}
        options={{ name: 'Area series', color: 'blue' }}
      />
    </Chart>
  );
}

const root = createRoot(document.getElementById('root'));

root.render(<Application />);

Container props

The chart is rendered inside a <div> container. You can pass props directly to that container using containerProps (for example, to set width/height, add a className, or attach data attributes):

<Chart
  containerProps={{
    className: 'chart-shell',
    style: { width: '100%', height: '100%' }
  }}
>
  <Title>Full-width chart</Title>
  <Series data={[1, 2, 3]} />
</Chart>

Documentation

For comprehensive guides and API documentation, visit the Highcharts React documentation.

Support and feedback

We love to learn how you are using Highcharts, and what you would like to see from us in the future.

Join our vibrant community on GitHub, Stack Overflow, Discord, and the Highcharts Forums.

Commercial support packages are available, see Highcharts Advantage.