repository·master·Indexed 22 days ago
https://github.com/highcharts/highcharts-reactOfficial Highcharts integration for React providing a JSX-native API for building visualizations. It includes a declarative syntax with components like <Chart>, <Title>, and specialized series components such as <LineSeries>, <ColumnSeries>, and <AreaSeries>. The library supports TypeScript via ChartOptions and SeriesOptions types and provides module integrations for extending Highcharts functionality.
Install the Highcharts React package using npm or yarn. Note that highcharts, react, and react-dom are peer dependencies and are automatically installed with npm v7+.
npm install @highcharts/reactyarn add @highcharts/reactHighcharts React includes a Claude skill to assist with development. You can automatically add it to your .claude/skills/ directory by running the provided script from your node_modules.
node node_modules/@highcharts/react/scripts/highcharts-react-skillThe <Chart> component renders inside a <div>. You can pass props directly to this container using the containerProps object. This is useful for setting className, style (like width and height), or data attributes.
<Chart
containerProps={{
className: 'chart-shell',
style: { width: '100%', height: '100%' }
}}
>
<Title>Full-width chart</Title>
<Series data={[1, 2, 3]} />
</Chart>Highcharts React provides a JSX-native API where charts are composed of components like <Chart>, <Title>, and specific series components (e.g., <LineSeries>, <ColumnSeries>, <AreaSeries>). This allows for a clean, declarative syntax for building visualizations.
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Chart, Title } from '@highcharts/react';
import { LineSeries } from '@highcharts/react/series/Line';
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>
<LineSeries data={[2, 4, 3, 1, 5]} name="Line series" color="red" />
<ColumnSeries
data={[3, 5, 1, 2, 4]}
name="Column series"
color="yellow"
/>
<AreaSeries data={[4, 2, 1, 5, 3]} name="Area series" color="blue" />
</Chart>
);
}
const root = createRoot(document.getElementById('root'));
root.render(<Application />);Highcharts React provides specialized types for better developer experience in TypeScript:
ChartOptions for the options prop on the <Chart> component.SeriesOptions<'type'> to type an options object for a specific series component (e.g., SeriesOptions<'line'>).SeriesProps<'type'> to type the props of a series component. It defaults to 'line' if no generic is provided.import { useState } from 'react';
import { Chart, type ChartOptions } from '@highcharts/react';
export function App() {
const [options] = useState<ChartOptions>({
series: [{ type: 'line', data: [1, 2, 3] }]
});
return <Chart options={options} />;
}import { useState } from 'react';
import { Chart, type SeriesOptions } from '@highcharts/react';
import { LineSeries } from '@highcharts/react/series/Line';
export function App() {
const [options] = useState<SeriesOptions<'line'>>({
color: 'red'
});
return (
<Chart>
<LineSeries options={options} />
</Chart>
);
}The modules/index.js entrypoint provides named exports for various Highcharts module integrations. These modules allow you to extend Highcharts functionality (such as Accessibility, Exporting, or Boost) within a React environment. You can import these specific integrations to ensure the corresponding Highcharts modules are correctly initialized or available for use with your React components.
import { Accessibility, Exporting, Boost } from '@highcharts/react/modules';
// Use these imports to integrate specific Highcharts modules into your applicationThe series/index.js entrypoint provides individual React components for specific Highcharts series types. Instead of configuring a generic chart, you can import and use these specialized components to represent specific data visualizations like Line, Bar, or Pie directly within your React application.
import { Line, Bar, Pie, Area } from '@highcharts/react/series';
// These components can then be used in your React component tree
// to render specific series types.The options entrypoint exports several components used to define and structure Highcharts configuration objects within a React environment. These components correspond to specific parts of a Highcharts configuration, such as axes, titles, and legends. You can import these to build structured option objects for the Highcharts React component.
import { Title, Subtitle, XAxis, YAxis, Legend, Tooltip, Credits, PlotOptions } from './options';
// These can be used to construct or type your Highcharts configuration objectsThe main entrypoint for the library exports the HighchartsReact component and related options. You can import everything from the package root to access the React component and its associated types or configuration structures.
import HighchartsReact from '@highcharts/react';The following series components are exported from the series entrypoint:
Area: Area seriesAreaSpline: Area spline seriesBar: Bar seriesColumn: Column seriesLine: Line seriesPie: Pie seriesScatter: Scatter seriesSpline: Spline seriesStack: Stack seriesexport { default as Area } from "./Area.js";
export { default as AreaSpline } from "./AreaSpline.js";
export { default as Bar } from "./Bar.js";
export { default as Column } from "./Column.js";
export { default as Line } from "./Line.js";
export { default as Pie } from "./Pie.js";
export { default as Scatter } from "./Scatter.js";
export { default as Spline } from "./Spline.js";
export { default as Stack } from "./Stack.js";