{"id":27241,"date":"2025-10-13T12:35:26","date_gmt":"2025-10-13T12:35:26","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=27241"},"modified":"2026-02-11T15:19:00","modified_gmt":"2026-02-11T15:19:00","slug":"how-to-migrate-to-the-new-highcharts-for-react","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/integration\/how-to-migrate-to-the-new-highcharts-for-react\/","title":{"rendered":"How to migrate to the new Highcharts for React"},"content":{"rendered":"<p>As you might have heard in our <a href=\"https:\/\/www.highcharts.com\/blog\/news\/improved-highcharts-for-react\/\" target=\"_blank\" rel=\"noopener\">beta announcement<\/a>, we rebuilt our React integration to make using Highcharts in React much more intuitive and inline with your React workflow.<\/p>\n<p>Well,\u00a0 it\u2019s officially out of beta, and if you&#8217;re using the old integration, it\u2019s time to switch.<\/p>\n<p>Don\u2019t worry. Migration is quick and straightforward. Here\u2019s what you need to do:<\/p>\n<h2><b>Step 1: Uninstall the old package<\/b><\/h2>\n<pre>npm uninstall highcharts-react-official<\/pre>\n<h2><b>Step 2: Install the new package<\/b><\/h2>\n<pre>npm install @highcharts\/react<\/pre>\n<h2><b>Step 3: Update your imports<\/b><\/h2>\n<p>Replace all import statements in your React components.<\/p>\n<pre>\/\/ Replace this\nimport Highcharts from 'highcharts';\nimport HighchartsReact from 'highcharts-react-official';<\/pre>\n<pre>\/\/ With this\nimport { Chart, Series, Title } from '@highcharts\/react';<\/pre>\n<h2><b>Step 4: Check your dependencies<\/b><\/h2>\n<p>Make sure you have compatible versions of required dependencies:<\/p>\n<ul style=\"margin-left: 24px;\">\n<li>highcharts@^12.2.0<\/li>\n<li>react@^18.0.0<\/li>\n<li>Node.js@^14.0.0<\/li>\n<\/ul>\n<p><b>Important:<\/b> The @highcharts\/react package requires Highcharts v12.2 or newer, so make sure that your Highcharts version meets this requirement before migrating.<\/p>\n<p>If you\u2019re not sure about your Highcharts version, you can check by running:<\/p>\n<pre>npm list highcharts<\/pre>\n<p>And update with:<\/p>\n<pre>npm install highcharts@latest<\/pre>\n<h2><b>Step 5: Clean your build cache (recommended)<\/b><\/h2>\n<p>This helps avoid module resolution issues.<\/p>\n<h3><b>For standard React projects<\/b><\/h3>\n<pre>npm cache clean --force\nrm -rf node_modules\nnpm install<\/pre>\n<h3><b>For Vite projects<\/b><\/h3>\n<pre>npm cache clean --force\nrm -rf node_modules .vite\nnpm install<\/pre>\n<h3><b>For Next.js projects<\/b><\/h3>\n<pre>npm cache clean --force\nrm -rf node_modules .next\nnpm install<\/pre>\n<h2><b>Breaking Changes You Should Know About<\/b><\/h2>\n<p>There aren\u2019t many, but a few things will need updating.<\/p>\n<h3><b>Update all <code>import<\/code> statements<\/b><\/h3>\n<p>As mentioned in Step 3, all of your import statements need to change from this:<\/p>\n<pre>\/\/ Old\nimport HighchartsReact from 'highcharts-react-official';<\/pre>\n<p>To this:<\/p>\n<pre>\/\/ New - chart and its options as dedicated React components\nimport { Chart, Series, Title } from '@highcharts\/react';\n<\/pre>\n<h3><b>The <code>highcharts<\/code> prop is now optional<\/b><\/h3>\n<p>You no longer need to pass the highcharts prop unless you\u2019re using a custom Highcharts instance or accessing Highcharts directly in your code.<\/p>\n<pre>\/\/ Old\n&lt;HighchartsReact\n\u00a0\u00a0\u00a0\u00a0highcharts={Highcharts}\n\u00a0\u00a0\u00a0\u00a0options={chartOptions}\n\u00a0\u00a0\u00a0\u00a0ref={chartRef}\n\/&gt;<\/pre>\n<pre>\/\/ New\n&lt;HighchartsReact\n\u00a0\u00a0options={chartOptions}\n\u00a0\u00a0ref={chartRef}\n\/&gt;<\/pre>\n<h3><b>Module Resolution Issues<\/b><\/h3>\n<p>Some bundlers may require configuration updates. If you run into troubles:<\/p>\n<ol>\n<li style=\"margin-bottom: 4px;\" aria-level=\"1\"><b>Clear your cache<\/b> as described in Step 5 above.<\/li>\n<li style=\"margin-bottom: 4px;\" aria-level=\"1\"><b>Update your bundler config<\/b> to make sure it\u2019s using the new package name <code>@highcharts\/react<\/code><\/li>\n<li style=\"margin-bottom: 4px;\" aria-level=\"1\"><b>Check for explicit aliases<\/b> that reference the old package (<code>highcharts-react-official<\/code>)<\/li>\n<\/ol>\n<h2><b>Conclusion<\/b><\/h2>\n<p>That\u2019s it for basic migration to our new Highcharts React integration.<\/p>\n<p>Be sure to check out our<a href=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2025\/10\/13122109\/Highcharts-React-Migration-Guide.pdf\" target=\"_blank\" rel=\"noopener\"> complete migration guide<\/a> 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.<\/p>\n<p>And as always, if something doesn\u2019t work the way you expect, <a href=\"https:\/\/github.com\/highcharts\/highcharts-react\/issues\" target=\"_blank\" rel=\"noopener\">let us know<\/a>. We\u2019re here to help.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to migrate to the new Highcharts for React<\/p>\n","protected":false},"author":250,"featured_media":26215,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[1105],"tags":[1063,1094,1031,824],"coauthors":[786],"class_list":["post-27241","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integration","tag-data-visualization","tag-highcharts-core","tag-javascript","tag-react"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/27241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/250"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=27241"}],"version-history":[{"count":2,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/27241\/revisions"}],"predecessor-version":[{"id":29584,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/27241\/revisions\/29584"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/26215"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=27241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=27241"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=27241"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=27241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}