{"id":30491,"date":"2026-05-12T14:36:40","date_gmt":"2026-05-12T14:36:40","guid":{"rendered":"urn:uuid:a41b1507-ccb5-48de-bb7c-5aa503a8e4df"},"modified":"2026-05-12T14:54:33","modified_gmt":"2026-05-12T14:54:33","slug":"highcharts-react-v5-esm-support-cleaner-components-better-dx","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/post\/highcharts-react-v5-esm-support-cleaner-components-better-dx\/","title":{"rendered":"Highcharts React v5: ESM Support, Cleaner Components, Better DX"},"content":{"rendered":"\n<p>We\u2019re 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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Read on to learn more about the new features and improvements in v5.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column hs-code-container brand-50-light brand-800-dark is-layout-flow wp-block-column-is-layout-flow\" style=\"border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-left-radius:8px;border-bottom-right-radius:8px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\">\n<p><strong>Important:<\/strong> Highcharts React v5 introduces several breaking changes. Before upgrading, please review the <a href=\"https:\/\/www.highcharts.com\/docs\/react\/v5-migration-guide\" target=\"_blank\" rel=\"noreferrer noopener\">v5 migrationguide<\/a>.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Modern ESM support and improved tree shaking<\/strong><\/h2>\n\n\n\n<p>Highcharts React v5 now uses a pure ES Module (ESM) module system.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>This helps developers build leaner applications while aligning Highcharts React more closely with modern JavaScript build tools and workflows.<\/p>\n\n\n\n<p>Learn more in our documentation on <a href=\"https:\/\/www.highcharts.com\/docs\/react\/bundling-and-tree-shaking\" target=\"_blank\" rel=\"noreferrer noopener\">bundling and treeshaking<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>More Declarative and Flexible React Components<\/strong><\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Common chart options exposed as props<\/strong><\/h3>\n\n\n\n<p>The <code>Chart<\/code> component now exposes a wide range of commonly used chart options directly as props, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>subtitle<\/code><\/li>\n\n\n\n<li><code>caption<\/code><\/li>\n\n\n\n<li><code>credits<\/code><\/li>\n\n\n\n<li><code>type<\/code><\/li>\n\n\n\n<li><code>height<\/code><\/li>\n\n\n\n<li><code>width<\/code><\/li>\n\n\n\n<li><code>inverted<\/code><\/li>\n\n\n\n<li><code>animation<\/code><\/li>\n\n\n\n<li><code>styledMode<\/code><\/li>\n\n\n\n<li><code>backgroundColor<\/code><\/li>\n\n\n\n<li><code>borderColor<\/code><\/li>\n\n\n\n<li><code>margin<\/code><\/li>\n\n\n\n<li><code>spacing<\/code><\/li>\n\n\n\n<li><code>colors<\/code><\/li>\n<\/ul>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Learn more in our documentation on the <a href=\"https:\/\/www.highcharts.com\/docs\/react\/components\/chart\" target=\"_blank\" rel=\"noreferrer noopener\">Chart component<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>More series options exposed as props<\/strong><\/h3>\n\n\n\n<p>Series components now also support commonly used options as props, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>id<\/code><\/li>\n\n\n\n<li><code>index<\/code><\/li>\n\n\n\n<li><code>name<\/code><\/li>\n\n\n\n<li><code>className<\/code><\/li>\n\n\n\n<li><code>color<\/code><\/li>\n\n\n\n<li><code>events<\/code><\/li>\n\n\n\n<li><code>data<\/code><\/li>\n<\/ul>\n\n\n\n<p>By exposing these options directly on components, v5 makes series configuration easier to compose and reuse within React component structures.<\/p>\n\n\n\n<p>Learn more in our documentation on <a href=\"https:\/\/www.highcharts.com\/docs\/react\/components\/series-types?utm_source=chatgpt.com#dedicated-series-options\" target=\"_blank\" rel=\"noreferrer noopener\">Series types<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Cleaner Code with Component Wrapping<\/strong><\/h2>\n\n\n\n<p>Highcharts React v5 introduces support for component wrapping, making it easier to organize and reuse complex chart elements in React applications.<\/p>\n\n\n\n<p>For example, instead of defining a large custom tooltip directly inside a <code>Chart<\/code> component, developers can move that logic into a reusable component such as <code>FinancialTooltip<\/code>.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" role=\"region\" aria-label=\"Code block\">\n\n<pre class=\"wp-block-code\"><code>function FinancialTooltip() {\n return (\n   &lt;Tooltip shared&gt;\n     &lt;div data-hc-option=\"headerFormat\"&gt;\n       &lt;b&gt;{\"{point.key}\"}&lt;\/b&gt;\n     &lt;\/div&gt;\n     &lt;div data-hc-option=\"pointFormat\"&gt;\n       {\"{series.name}: \"}\n       &lt;b&gt;{\"${point.y}\"}&lt;\/b&gt;\n     &lt;\/div&gt;\n   &lt;\/Tooltip&gt;\n );\n}\n<\/code><\/pre>\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\">Copy<\/button><\/div>\n\n<\/div><\/div>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<p>The custom component can then be used directly inside the main chart structure:<br><br><\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" role=\"region\" aria-label=\"Code block\">\n\n<pre class=\"wp-block-code\"><code>&lt;Chart&gt;\n     &lt;Title&gt;Financials&lt;\/Title&gt;\n     &lt;FinancialTooltip \/&gt;\n     &lt;XAxis categories={MONTHS} \/&gt;\n     &lt;ColumnSeries data={data.revenue} name=\"Revenue\" \/&gt;\n     &lt;ColumnSeries data={data.costs} name=\"Costs\" \/&gt;\n     &lt;ProfitSeries revenue={data.revenue} costs={data.costs} \/&gt;\n&lt;\/Chart&gt;<\/code><\/pre>\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\">Copy<\/button><\/div>\n\n<\/div><\/div>\n\n\n\n<p>This helps keep chart code cleaner and easier to maintain while making shared chart patterns easier to reuse across components and applications.<\/p>\n\n\n\n<p>Learn more in our documentation on <a href=\"https:\/\/www.highcharts.com\/docs\/react\/component-wrapping\" target=\"_blank\" rel=\"noreferrer noopener\">component wrapping<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Expanded Module Components<\/strong><\/h2>\n\n\n\n<p>Additional Highcharts modules are now available as React components, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Boost<\/li>\n\n\n\n<li>BrokenAxis<\/li>\n\n\n\n<li>DraggablePoints<\/li>\n\n\n\n<li>StockTools<\/li>\n<\/ul>\n\n\n\n<p>This makes advanced Highcharts functionality easier to integrate directly into React applications.<\/p>\n\n\n\n<p>For a full list of fixes and improvements, check out the <a href=\"https:\/\/github.com\/highcharts\/highcharts-react\/blob\/master\/CHANGELOG.md#v500\" target=\"_blank\" rel=\"noreferrer noopener\">changelog<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Get started with Highcharts React v5<\/strong><\/h2>\n\n\n\n<p>Highcharts React v5 is available now on npm.<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" role=\"region\" aria-label=\"Code block\">\n\n<pre class=\"wp-block-code\"><code>npm i @highcharts\/react<\/code><\/pre>\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\">Copy<\/button><\/div>\n\n<\/div><\/div>\n\n\n\n<p>Remember,&nbsp; v5 introduces several breaking changes to module import paths, ESM bundling, Vite compatibility, and type naming.&nbsp;<\/p>\n\n\n\n<p>For upgrade instructions and migration examples, see the <a href=\"https:\/\/www.highcharts.com\/docs\/react\/v5-migration-guide\" target=\"_blank\" rel=\"noreferrer noopener\">v5 migration guide<\/a>.<\/p>\n\n\n\n<p>If you have any questions, open a <a href=\"https:\/\/github.com\/highcharts\/highcharts-react\/issues\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub issue<\/a>, or <a href=\"https:\/\/discord.com\/invite\/xHxxcyyy6K\" target=\"_blank\" rel=\"noreferrer noopener\">hit us up on Discord<\/a> and start a discussion.&nbsp;&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019re 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 [&hellip;]<\/p>\n","protected":false},"author":250,"featured_media":30506,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"Highcharts React v5: ESM Support, Better DX, Cleaner Components","meta_description":"Explore Highcharts React v5, featuring pure ESM support, improved tree shaking, Vite compatibility, declarative component props, and reusable chart components for modern React applications.","hc_selected_options":[],"footnotes":""},"categories":[224,1103],"tags":[824],"coauthors":[786],"class_list":["post-30491","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-post","category-product-updates","tag-react"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/30491","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=30491"}],"version-history":[{"count":2,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/30491\/revisions"}],"predecessor-version":[{"id":30512,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/30491\/revisions\/30512"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/30506"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=30491"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=30491"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=30491"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=30491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}