How to migrate to the new Highcharts for React

As you might have heard in our beta announcement, we rebuilt our React integration to make using Highcharts in React much more intuitive and inline with your React workflow.

Well,  it’s officially out of beta, and if you’re using the old integration, it’s time to switch.

Don’t worry. Migration is quick and straightforward. Here’s what you need to do:

Step 1: Uninstall the old package

npm uninstall highcharts-react-official

Step 2: Install the new package

npm install @highcharts/react

Step 3: Update your imports

Replace all import statements in your React components.

// Replace this
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

// With this
import { Chart, Series, Title } from '@highcharts/react';

Note that there’s no longer any need to import Highcharts.

Step 4: Check your dependencies

Make sure you have compatible versions of required dependencies:

• highcharts@^12.2.0
• react@^18.0.0
• Node.js@^14.0.0

Important: The @highcharts/react package requires Highcharts v12.2 or newer, so make sure that your Highcharts version meets this requirement before migrating.

If you’re not sure about your Highcharts version, you can check by running:

npm list highcharts

And update with:

npm install highcharts@latest

Step 5: Clean your build cache (recommended)

This helps avoid module resolution issues.

For standard React projects

npm cache clean --force
rm -rf node_modules
npm install

For Vite projects

npm cache clean --force
rm -rf node_modules .vite
npm install

For Next.js projects

npm cache clean --force
rm -rf node_modules .next
npm install

Breaking Changes You Should Know About

There aren’t many, but a few things will need updating.

Update all import statements

As mentioned in Step 3, all of your import statements need to change from this:

// Old
import HighchartsReact from 'highcharts-react-official';

To this:

// New
import HighchartsReact from '@highcharts/react';

The highcharts prop is now optional

You no longer need to pass the highcharts prop unless you’re using a custom Highcharts instance or accessing Highcharts directly in your code.

// Old
<HighchartsReact
    highcharts={Highcharts}
    options={chartOptions}
    ref={chartRef}
/>

// New
<HighchartsReact
  options={chartOptions}
  ref={chartRef}
/>

Module Resolution Issues

Some bundlers may require configuration updates. If you run into troubles:

1. Clear your cache as described in Step 5 above.
2. Update your bundler config to make sure it’s using the new package name @highcharts/react
3. Check for explicit aliases that reference the old package (highcharts-react-official)

Conclusion

That’s it for basic migration to our new Highcharts React integration.

Be sure to check out our complete migration guide that includes migration strategies for advanced Highcharts features including custom modules, themes, and plugins. The guide also offers plenty of code examples to get you started.

And as always, if something doesn’t work the way you expect, let us know. We’re here to help.