Product Updates

Highcharts React v5: ESM Support, Cleaner Components, Better DX

by

Nancy Dillon

4 minutes read

We’re excited to announce the release of Highcharts React v5, a major update focused on improving the developer experience of using Highcharts in modern React applications.

This release introduces a pure ESM module system, improved compatibility with modern build tools like Vite, expanded component APIs, and more declarative React props for common chart and series options.

Read on to learn more about the new features and improvements in v5.

Important: Highcharts React v5 introduces several breaking changes. Before upgrading, please review the v5 migrationguide.

Modern ESM support and improved tree shaking

Highcharts React v5 now uses a pure ES Module (ESM) module system.

Because ESM makes dependencies easier for bundlers to analyze, tools such as Webpack, Vite and Rollup can better identify and remove unused code from production bundles.

This helps developers build leaner applications while aligning Highcharts React more closely with modern JavaScript build tools and workflows.

Learn more in our documentation on bundling and treeshaking.

More Declarative and Flexible React Components

Highcharts React v5 expands the number of commonly used chart and series options that can be passed directly as component props, making chart configuration more declarative and easier to work with in React applications.

Common chart options exposed as props

The Chart component now exposes a wide range of commonly used chart options directly as props, including:

subtitle
caption
credits
type
height
width
inverted
animation
styledMode
backgroundColor
borderColor
margin
spacing
colors

This reduces the need to place commonly used settings inside larger configuration objects, making chart configuration easier to read, compose, and maintain in React applications.

Learn more in our documentation on the Chart component.

More series options exposed as props

Series components now also support commonly used options as props, including:

id
index
name
className
color
events
data

By exposing these options directly on components, v5 makes series configuration easier to compose and reuse within React component structures.

Learn more in our documentation on Series types.

Cleaner Code with Component Wrapping

Highcharts React v5 introduces support for component wrapping, making it easier to organize and reuse complex chart elements in React applications.

For example, instead of defining a large custom tooltip directly inside a Chart component, developers can move that logic into a reusable component such as FinancialTooltip.

function FinancialTooltip() {
 return (
   <Tooltip shared>
     <div data-hc-option="headerFormat">
       <b>{"{point.key}"}</b>
     </div>
     <div data-hc-option="pointFormat">
       {"{series.name}: "}
       <b>{"${point.y}"}</b>
     </div>
   </Tooltip>
 );
}

The custom component can then be used directly inside the main chart structure:

<Chart>
     <Title>Financials</Title>
     <FinancialTooltip />
     <XAxis categories={MONTHS} />
     <ColumnSeries data={data.revenue} name="Revenue" />
     <ColumnSeries data={data.costs} name="Costs" />
     <ProfitSeries revenue={data.revenue} costs={data.costs} />
</Chart>

This helps keep chart code cleaner and easier to maintain while making shared chart patterns easier to reuse across components and applications.

Learn more in our documentation on component wrapping.