Highcharts® React

Full TypeScript declarations are bundled in the npm package, no @types/ package needed. Get autocomplete for every option, prop, and event in VS Code and other TS-aware editors. Fully compatible with strict mode and modern moduleResolution: bundler settings.

Explore our TypeScript docs.

Works out of the box with Next.js App Router and Pages Router. Add 'use client' to your chart file, fetch data in Server Components, and render charts client-side. No special configuration needed.

Read more about SSR in our Next.js docs.

Use your design-system components directly inside tooltips, data labels, and point renderers , rendered as real React, not injected HTML. No dangerouslySetInnerHTML, no DOM escape hatches.

Read more about configuring components in our Format Components docs.

Deep imports like @highcharts/react/series/ Line tell bundlers like Vite, Webpack and Turbopack exactly what to include. Tree-shake down to only what your app needs.

Learn how to optimize Highcharts bundles in our Bundle and Treeshaking docs.

Every Highcharts chart type has a dedicated JSX entry point, from <Series type="line">, <StockChart>, <MapChart>, <GanttChart> and more. Your import maps directly to your intent.

Take a look at our demos to see the full list of data visualization types.