{"id":27397,"date":"2025-11-11T07:16:53","date_gmt":"2025-11-11T07:16:53","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?post_type=integrations&#038;p=27397"},"modified":"2026-06-22T12:33:36","modified_gmt":"2026-06-22T12:33:36","slug":"react","status":"publish","type":"integrations","link":"https:\/\/www.highcharts.com\/blog\/integrations\/react\/","title":{"rendered":"React"},"content":{"rendered":"\n<section class=\"wp-block-highsoft-section neutral-0-light transparent hero-section page-section\">\n<div class=\"wp-block-group content-container has-global-padding is-layout-constrained wp-container-core-group-is-layout-4c56c5a7 wp-block-group-is-layout-constrained\">\n<div class=\"hero-columns\"> \n<div class=\"wp-block-columns hero-col is-layout-flex wp-container-core-columns-is-layout-52aa4162 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center hero-column-left is-layout-flow wp-container-core-column-is-layout-ff829c44 wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group hero-section-header is-vertical is-layout-flex wp-container-core-group-is-layout-dc0c0d66 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group hero-heading is-vertical is-layout-flex wp-container-core-group-is-layout-dc0c0d66 wp-block-group-is-layout-flex\">\n<h1 class=\"wp-block-heading hero-column-heading\">Highcharts\u00ae React<\/h1>\n<\/div>\n\n\n\n<div class=\"wp-block-group hero-paragraph-group is-layout-flow wp-container-core-group-is-layout-4d639961 wp-block-group-is-layout-flow\">\n<p class=\"hero-column-paragraph wp-block-paragraph\">A first-class, JSX-native charting library built for the way you write React today: components, hooks, state, TypeScript, and Next.js included.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-9ba6dbca wp-block-group-is-layout-flex\">\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>npm install @highcharts\/react<\/code><\/pre>\n\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\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group hero-column-buttons is-layout-flex wp-container-core-group-is-layout-a1ffe908 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-highsoft-hs-button\"><a href=\"https:\/\/www.npmjs.com\/package\/@highcharts\/react\" class=\"hc-button hc-button--brand hc-button--size-400\" target=\"_blank\" rel=\"noopener noreferrer\" data-link-template=\"https:\/\/www.npmjs.com\/package\/@highcharts\/react\" aria-label=\"Highcharts React on NPM\">Highcharts React on NPM<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"20\" height=\"20\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m4 17 6-6-6-6m8 14h8\"><\/path><\/svg><\/a><\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><a href=\"https:\/\/www.highcharts.com\/docs\/react\/getting-started\" class=\"hc-button hc-button--transparent hc-button--size-400\" target=\"_blank\" rel=\"noopener noreferrer\" data-link-template=\"https:\/\/www.highcharts.com\/docs\/react\/getting-started\" aria-label=\"Highcharts React docs\">Highcharts React docs<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 21 20\" width=\"20\" height=\"20\"><path fill=\"currentColor\" d=\"M17.17 6.833q-.317-.108-.633-.205.051-.222.097-.446c.48-2.394.164-4.319-.902-4.953-1.027-.607-2.703.024-4.398 1.542a11 11 0 0 0-.489.462 12 12 0 0 0-.324-.31C8.744 1.302 6.962.619 5.896 1.258c-1.023.61-1.328 2.422-.898 4.688q.064.335.144.671c-.25.072-.496.153-.726.237C2.33 7.596.833 8.77.833 9.983c0 1.253 1.594 2.511 3.762 3.274q.263.092.532.173c-.06.241-.11.478-.157.723-.41 2.23-.09 3.998.934 4.605 1.055.626 2.828-.017 4.555-1.571q.204-.187.41-.39.26.258.53.498c1.673 1.478 3.325 2.077 4.345 1.47 1.054-.626 1.398-2.527.953-4.84a18 18 0 0 0-.117-.543 10 10 0 0 0 .367-.117c2.254-.767 3.887-2.008 3.887-3.282 0-1.217-1.54-2.399-3.665-3.15m-5.286-3.41c1.453-1.303 2.809-1.813 3.426-1.447.66.39.914 1.964.5 4.034q-.039.204-.09.401a19.5 19.5 0 0 0-2.629-.426 20 20 0 0 0-1.664-2.133c.153-.149.301-.29.457-.43m-4.52 8.645c.2.35.403.7.618 1.04a17 17 0 0 1-1.812-.3 19 19 0 0 1 .636-1.788c.18.353.363.703.559 1.048M6.182 7.235a19 19 0 0 1 1.782-.314q-.312.502-.602 1.021c-.191.341-.379.691-.555 1.045a20 20 0 0 1-.625-1.752m1.07 2.768a24.33 24.33 0 0 1 1.79-3.194 24 24 0 0 1 3.585 0q.499.759.95 1.555t.847 1.623a27 27 0 0 1-1.789 3.206c-.582.044-1.187.064-1.8.064q-.921-.001-1.782-.056a24.5 24.5 0 0 1-1.8-3.198m7.055 2.057c.2-.354.387-.711.57-1.073q.375.874.66 1.78-.909.212-1.835.322a27 27 0 0 0 .605-1.029m.563-3.073a34 34 0 0 0-.567-1.053q-.287-.513-.597-1.013.903.114 1.793.322-.27.889-.63 1.744m-4.028-4.52q.615.688 1.157 1.438a25 25 0 0 0-2.325 0c.383-.518.778-1 1.168-1.438m-4.53-2.463c.655-.394 2.112.169 3.648 1.567.097.088.195.185.297.281A20 20 0 0 0 8.58 5.985q-1.326.122-2.625.418-.075-.309-.137-.623c-.367-1.944-.125-3.41.492-3.776m-.958 10.59a10 10 0 0 1-.484-.156 7.9 7.9 0 0 1-2.461-1.254 1.8 1.8 0 0 1-.487-.523 1.8 1.8 0 0 1-.248-.678c0-.735 1.235-1.675 3.016-2.314q.336-.12.676-.221.398 1.309.957 2.555-.565 1.264-.969 2.591m4.555 3.938a7.1 7.1 0 0 1-2.203 1.418 1.7 1.7 0 0 1-1.38.052c-.62-.37-.878-1.788-.527-3.696q.064-.338.145-.671 1.313.29 2.652.394.776 1.129 1.688 2.145-.188.188-.375.358m.957-.977a19 19 0 0 1-1.184-1.458 27 27 0 0 0 2.34-.004q-.54.764-1.156 1.462m5.105 1.206a1.8 1.8 0 0 1-.195.697c-.111.217-.264.407-.45.56-.62.37-1.945-.112-3.374-1.374a17 17 0 0 1-.496-.462 20 20 0 0 0 1.648-2.153 19 19 0 0 0 2.664-.422q.059.249.106.49c.19.874.223 1.777.097 2.664m.711-4.32q-.164.056-.332.105a21 21 0 0 0-.996-2.563q.56-1.231.957-2.527.305.09.586.189c1.82.642 3.098 1.599 3.098 2.33 0 .787-1.364 1.804-3.313 2.467m-5.847-.602c.353 0 .7-.108.994-.31s.523-.49.658-.826a1.9 1.9 0 0 0 .102-1.063 1.86 1.86 0 0 0-.49-.942 1.78 1.78 0 0 0-.916-.504 1.74 1.74 0 0 0-1.033.105 1.8 1.8 0 0 0-.803.678 1.88 1.88 0 0 0 .222 2.323 1.748 1.748 0 0 0 1.265.539\"><\/path><\/svg><\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column hero-column-media is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-highsoft-hs-box hs-box transparent\" style=\"padding:var(--wp--preset--spacing--20);--hs-box-width:auto;--hs-box-min-width:100%;--hs-box-max-width:500px;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:0;--hs-box-border-style:none;--border-color-light:transparent;--border-color-dark:transparent;--hs-box-border-radius:0;--hs-box-overflow:hidden\">\n<div class=\"wp-block-group hs-blank-box-group is-vertical is-content-justification-stretch is-nowrap is-layout-flex wp-container-core-group-is-layout-ba83adad wp-block-group-is-layout-flex\">\n<div class=\"wp-block-highsoft-hs-iframe hs-iframe\" style=\"height:500px\"><div class=\"hs-iframe__container\"><iframe src=\"https:\/\/www.highcharts.com\/samples\/nonav\/highcharts\/website\/homepage-react-demo\" class=\"hs-iframe__main\" title=\"\" loading=\"lazy\" allowfullscreen scrolling=\"no\"><\/iframe><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n <\/div>\n<\/div>\n<\/section>\n\n\n\n<section class=\"wp-block-highsoft-section neutral-50-light transparent feature-section page-section\">\n<div class=\"wp-block-group content-container has-global-padding is-layout-constrained wp-container-core-group-is-layout-4c56c5a7 wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-text-align-center\">Highcharts for React Key Features<\/h2>\n\n\n\n<div class=\"wp-block-highsoft-feature-group-innerblock\">\n<div class=\"wp-block-group feature-group-container is-layout-grid wp-container-core-group-is-layout-70fc5fb0 wp-block-group-is-layout-grid\">\n<div class=\"wp-block-highsoft-feature-single-innerblock\">\n<div class=\"wp-block-highsoft-hs-box hs-box neutral-0-light neutral-900-dark feature-single-card\" style=\"padding:var(--containers-inner-padding-400, 16px);--hs-box-width:auto;--hs-box-min-width:260px;--hs-box-max-width:100%;--hs-box-height:100%;--hs-box-min-height:100%;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--HS-surface-ui-border-100);--border-color-dark:var(--HS-surface-ui-border-100);--hs-box-border-radius:var(--border-radius-size-12, 12px);--hs-box-overflow:hidden\">\n<div class=\"wp-block-group feature-content-group is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-7979462f wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group feature-image-wrapper wp-container-content-9cfa9a5a is-layout-flow wp-block-group-is-layout-flow\" style=\"min-height:0px\">\n<div class=\"wp-block-highsoft-hs-image has-dark-mode-image feature-image\" data-dark-src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2026\/05\/28084131\/code-react-dark.jpg\" data-has-dark=\"true\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2026\/05\/28084118\/code-react.jpg\" alt=\"\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group feature-text-button-group wp-container-content-9cfa9a5a is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-7979462f wp-block-group-is-layout-flex\" style=\"min-height:0px\">\n<div class=\"wp-block-group feature-text-content is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading feature-heading\">Reactive by design<\/h3>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-454a3f84 wp-block-group-is-layout-flex\">\n<p class=\"feature-description wp-block-paragraph\">Charts respond to state and prop changes automatically. Bind data to <strong><code>useState<\/code><\/strong>, <strong><code>useReducer<\/code><\/strong>, or any state manager (Redux, Zustand, Jotai) and the chart re-renders only what changed. No imperative <strong><code>chart.update()<\/code><\/strong> calls.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Read about <a href=\"https:\/\/www.highcharts.com\/docs\/react\/options#reactive-updates\">Reactive updates<\/a> in the docs.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-highsoft-feature-single-innerblock\">\n<div class=\"wp-block-highsoft-hs-box hs-box neutral-0-light neutral-900-dark feature-single-card\" style=\"padding:var(--containers-inner-padding-400, 16px);--hs-box-width:auto;--hs-box-min-width:260px;--hs-box-max-width:100%;--hs-box-height:100%;--hs-box-min-height:100%;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--HS-surface-ui-border-100);--border-color-dark:var(--HS-surface-ui-border-100);--hs-box-border-radius:var(--border-radius-size-12, 12px);--hs-box-overflow:hidden\">\n<div class=\"wp-block-group feature-content-group is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-7979462f wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group feature-image-wrapper wp-container-content-9cfa9a5a is-layout-flow wp-block-group-is-layout-flow\" style=\"min-height:0px\">\n<div class=\"wp-block-highsoft-hs-image has-dark-mode-image feature-image\" data-dark-src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2026\/05\/28084130\/typescript-img-react-dark-1.jpg\" data-has-dark=\"true\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2026\/05\/28084121\/typescript-img-react.jpg\" alt=\"\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group feature-text-button-group wp-container-content-9cfa9a5a is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-7979462f wp-block-group-is-layout-flex\" style=\"min-height:0px\">\n<div class=\"wp-block-group feature-text-content is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading feature-heading\">TypeScript-first<\/h3>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-ff8448f7 wp-block-group-is-layout-flex\">\n<p class=\"feature-description wp-block-paragraph\">Full TypeScript declarations are bundled in the npm package, no <strong><code>@types\/<\/code><\/strong> 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Explore our <a href=\"https:\/\/www.highcharts.com\/docs\/advanced-chart-features\/highcharts-typescript-declarations\">TypeScript docs<\/a>.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-highsoft-feature-single-innerblock\">\n<div class=\"wp-block-highsoft-hs-box hs-box neutral-0-light neutral-900-dark feature-single-card\" style=\"padding:var(--containers-inner-padding-400, 16px);--hs-box-width:auto;--hs-box-min-width:260px;--hs-box-max-width:100%;--hs-box-height:100%;--hs-box-min-height:100%;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--HS-surface-ui-border-100);--border-color-dark:var(--HS-surface-ui-border-100);--hs-box-border-radius:var(--border-radius-size-12, 12px);--hs-box-overflow:hidden\">\n<div class=\"wp-block-group feature-content-group is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-7979462f wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group feature-image-wrapper wp-container-content-9cfa9a5a is-layout-flow wp-block-group-is-layout-flow\" style=\"min-height:0px\">\n<div class=\"wp-block-highsoft-hs-image has-dark-mode-image feature-image\" data-dark-src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2026\/05\/28084130\/nextjs-react-dark.jpg\" data-has-dark=\"true\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2026\/05\/28084120\/typescript-img-react-dark.jpg\" alt=\"\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group feature-text-button-group wp-container-content-9cfa9a5a is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-7979462f wp-block-group-is-layout-flex\" style=\"min-height:0px\">\n<div class=\"wp-block-group feature-text-content is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading feature-heading\">Next.js &amp; SSR ready<\/h3>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-ff8448f7 wp-block-group-is-layout-flex\">\n<p class=\"feature-description wp-block-paragraph\">Works out of the box with Next.js App Router and Pages Router. Add <code><strong>'use client'<\/strong><\/code> to your chart file, fetch data in Server Components, and render charts client-side. No special configuration needed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Read more about SSR in our <a href=\"https:\/\/www.highcharts.com\/docs\/react\/nextjs\">Next.js docs<\/a>.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-highsoft-feature-single-innerblock\">\n<div class=\"wp-block-highsoft-hs-box hs-box neutral-0-light neutral-900-dark feature-single-card\" style=\"padding:var(--containers-inner-padding-400, 16px);--hs-box-width:auto;--hs-box-min-width:260px;--hs-box-max-width:100%;--hs-box-height:100%;--hs-box-min-height:100%;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--HS-surface-ui-border-100);--border-color-dark:var(--HS-surface-ui-border-100);--hs-box-border-radius:var(--border-radius-size-12, 12px);--hs-box-overflow:hidden\">\n<div class=\"wp-block-group feature-content-group is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-7979462f wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group feature-image-wrapper wp-container-content-9cfa9a5a is-layout-flow wp-block-group-is-layout-flow\" style=\"min-height:0px\">\n<div class=\"wp-block-highsoft-hs-image has-dark-mode-image feature-image\" data-dark-src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2026\/05\/28084128\/component-react-dark.jpg\" data-has-dark=\"true\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2026\/05\/28084120\/component-react.jpg\" alt=\"\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group feature-text-button-group wp-container-content-9cfa9a5a is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-7979462f wp-block-group-is-layout-flex\" style=\"min-height:0px\">\n<div class=\"wp-block-group feature-text-content is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading feature-heading\">Custom Component Integration<\/h3>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-ff8448f7 wp-block-group-is-layout-flex\">\n<p class=\"feature-description wp-block-paragraph\">Use your design-system components directly inside tooltips, data labels, and point renderers , rendered as real React, not injected HTML. No <strong><code>dangerouslySetInnerHTML<\/code><\/strong>, no DOM escape hatches.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Read more about configuring components in our <a href=\"https:\/\/www.highcharts.com\/docs\/react\/options-component-format\">Format Components docs<\/a>.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-highsoft-feature-single-innerblock\">\n<div class=\"wp-block-highsoft-hs-box hs-box neutral-0-light neutral-900-dark feature-single-card\" style=\"padding:var(--containers-inner-padding-400, 16px);--hs-box-width:auto;--hs-box-min-width:260px;--hs-box-max-width:100%;--hs-box-height:100%;--hs-box-min-height:100%;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--HS-surface-ui-border-100);--border-color-dark:var(--HS-surface-ui-border-100);--hs-box-border-radius:var(--border-radius-size-12, 12px);--hs-box-overflow:hidden\">\n<div class=\"wp-block-group feature-content-group is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-7979462f wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group feature-image-wrapper wp-container-content-9cfa9a5a is-layout-flow wp-block-group-is-layout-flow\" style=\"min-height:0px\">\n<div class=\"wp-block-highsoft-hs-image has-dark-mode-image feature-image\" data-dark-src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2026\/05\/28084128\/code-module-react-dark.jpg\" data-has-dark=\"true\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2026\/05\/28084119\/code-module-react.jpg\" alt=\"\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group feature-text-button-group wp-container-content-9cfa9a5a is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-7979462f wp-block-group-is-layout-flex\" style=\"min-height:0px\">\n<div class=\"wp-block-group feature-text-content is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading feature-heading\">Full Support for ES Modules<\/h3>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-ff8448f7 wp-block-group-is-layout-flex\">\n<p class=\"feature-description wp-block-paragraph\">Deep imports like: <br><strong><code>@highcharts\/react\/series\/Line<\/code><\/strong> tell bundlers like Vite, Webpack and Turbopack exactly what to include. Tree-shake down to only what your app needs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Learn how to optimize Highcharts bundles in our <a href=\"https:\/\/www.highcharts.com\/docs\/react\/bundling-and-tree-shaking\">Bundle and Treeshaking docs<\/a>.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-highsoft-feature-single-innerblock\">\n<div class=\"wp-block-highsoft-hs-box hs-box neutral-0-light neutral-900-dark feature-single-card\" style=\"padding:var(--containers-inner-padding-400, 16px);--hs-box-width:auto;--hs-box-min-width:260px;--hs-box-max-width:100%;--hs-box-height:100%;--hs-box-min-height:100%;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--HS-surface-ui-border-100);--border-color-dark:var(--HS-surface-ui-border-100);--hs-box-border-radius:var(--border-radius-size-12, 12px);--hs-box-overflow:hidden\">\n<div class=\"wp-block-group feature-content-group is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-7979462f wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group feature-image-wrapper wp-container-content-9cfa9a5a is-layout-flow wp-block-group-is-layout-flow\" style=\"min-height:0px\">\n<div class=\"wp-block-highsoft-hs-image has-dark-mode-image feature-image\" data-dark-src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2026\/05\/28084129\/all-chart-types-react-dark.png\" data-has-dark=\"true\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2026\/05\/28084118\/all-chart-types-react.png\" alt=\"\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group feature-text-button-group wp-container-content-9cfa9a5a is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-7979462f wp-block-group-is-layout-flex\" style=\"min-height:0px\">\n<div class=\"wp-block-group feature-text-content is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading feature-heading\">Supports All Chart Types<\/h3>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-ff8448f7 wp-block-group-is-layout-flex\">\n<p class=\"feature-description wp-block-paragraph\">Every Highcharts chart type has a dedicated JSX entry point, from <strong><code>&lt;Series type=\"line\"&gt;<\/code><\/strong>, <strong><code>&lt;StockChart&gt;<\/code><\/strong>, <strong><code>&lt;MapChart&gt;<\/code><\/strong>, <strong><code>&lt;GanttChart&gt;<\/code><\/strong> and more. Your import maps directly to your intent.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Take a look at our <a href=\"https:\/\/www.highcharts.com\/demo\">demos<\/a> to see the full list of data visualization types.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n\n\n\n<section class=\"wp-block-highsoft-section neutral-0-light transparent main-features-section page-section\">\n<div class=\"wp-block-group content-container has-global-padding is-layout-constrained wp-container-core-group-is-layout-4c56c5a7 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns content-section is-layout-flex wp-container-core-columns-is-layout-bb0b90bd wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<div class=\"wp-block-group info-heading is-horizontal is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-c5d35ec4 wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading has-font-size-900-font-size\">Frequently Asked Questions<\/h2>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-57626911 wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<div class=\"wp-block-group info-content is-vertical is-content-justification-stretch is-nowrap is-layout-flex wp-container-core-group-is-layout-843c8383 wp-block-group-is-layout-flex\">\n\n<div class=\"wp-block-highsoft-hs-box hs-box var(--accordian-background-default) accordion-wrapper\" style=\"padding:22px;--hs-box-width:100%;--hs-box-min-width:100%;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--HS-surface-ui-border-100);--border-color-dark:var(--HS-surface-ui-border-100);--hs-box-border-radius:8px;--hs-box-overflow:hidden\">\n<div data-wp-context=\"{ &quot;autoclose&quot;: false, &quot;accordionItems&quot;: [] }\" data-wp-interactive=\"core\/accordion\" role=\"group\" class=\"wp-block-accordion is-layout-flow wp-block-accordion-is-layout-flow\">\n<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-1&quot;, &quot;openByDefault&quot;: false }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-layout-flow wp-container-core-accordion-item-is-layout-57626911 wp-block-accordion-item-is-layout-flow\">\n<h3 class=\"wp-block-accordion-heading\" style=\"font-size:var(--typography-size-400)\"><button aria-expanded=\"false\" aria-controls=\"accordion-item-1-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" data-wp-on--keydown=\"actions.handleKeyDown\" id=\"accordion-item-1\" type=\"button\" class=\"wp-block-accordion-heading__toggle\"><span class=\"wp-block-accordion-heading__toggle-title\">Is <code>@highcharts\/react<\/code> a replacement for <code>highcharts-react-official<\/code>?<\/span><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><\/button><\/h3>\n\n\n\n<div inert aria-labelledby=\"accordion-item-1\" data-wp-bind--inert=\"!state.isOpen\" id=\"accordion-item-1-panel\" role=\"region\" class=\"wp-block-accordion-panel is-layout-flow wp-container-core-accordion-panel-is-layout-65f7533b wp-block-accordion-panel-is-layout-flow\" style=\"padding-right:var(--wp--preset--spacing--80)\">\n<p class=\"wp-block-paragraph\" style=\"font-size:var(--typography-size-300)\">Yes. <strong><code>@highcharts\/react<\/code><\/strong> is the new official Highcharts React integration, built from scratch with a JSX-native API. If you&#8217;re starting a new project, use <strong><code>@highcharts\/react<\/code><\/strong>. If you&#8217;re migrating an existing project, see our <a href=\"https:\/\/www.highcharts.com\/docs\/react\/v4-migration-guide\">v4 migration guide<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><a href=\"https:\/\/www.highcharts.com\/docs\/react\/v4-migration-guide\" class=\"hc-button hc-button--brand hc-button--size-300\" data-link-template=\"https:\/\/www.highcharts.com\/docs\/react\/v4-migration-guide\" aria-label=\"v4 Migration guide\">v4 Migration guide<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 9V3m0 0h-6m6 0-8 8m-3-6H7.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C3 7.28 3 8.12 3 9.8v6.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311C5.28 21 6.12 21 7.8 21h6.4c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C19 18.72 19 17.88 19 16.2V14\"><\/path><\/svg><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n\n\n<div class=\"wp-block-highsoft-hs-box hs-box var(--accordian-background-default) accordion-wrapper\" style=\"padding:22px;--hs-box-width:100%;--hs-box-min-width:100%;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--HS-surface-ui-border-100);--border-color-dark:var(--HS-surface-ui-border-100);--hs-box-border-radius:8px;--hs-box-overflow:hidden\">\n<div data-wp-context=\"{ &quot;autoclose&quot;: false, &quot;accordionItems&quot;: [] }\" data-wp-interactive=\"core\/accordion\" role=\"group\" class=\"wp-block-accordion is-layout-flow wp-block-accordion-is-layout-flow\">\n<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-2&quot;, &quot;openByDefault&quot;: false }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-layout-flow wp-container-core-accordion-item-is-layout-57626911 wp-block-accordion-item-is-layout-flow\">\n<h3 class=\"wp-block-accordion-heading\" style=\"font-size:var(--typography-size-400)\"><button aria-expanded=\"false\" aria-controls=\"accordion-item-2-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" data-wp-on--keydown=\"actions.handleKeyDown\" id=\"accordion-item-2\" type=\"button\" class=\"wp-block-accordion-heading__toggle\"><span class=\"wp-block-accordion-heading__toggle-title\">What are the compatibility requirements?<\/span><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><\/button><\/h3>\n\n\n\n<div inert aria-labelledby=\"accordion-item-2\" data-wp-bind--inert=\"!state.isOpen\" id=\"accordion-item-2-panel\" role=\"region\" class=\"wp-block-accordion-panel is-layout-flow wp-container-core-accordion-panel-is-layout-65f7533b wp-block-accordion-panel-is-layout-flow\" style=\"padding-right:var(--wp--preset--spacing--80)\">\n<p class=\"wp-block-paragraph\" style=\"font-size:var(--typography-size-300)\"><strong><code>@highcharts\/react<\/code><\/strong> requires React 18.3.1 or newer, and Highcharts 12.2 or newer. It works out of the box with Vite, Webpack, and Turbopack, and is fully compatible with Next.js App Router and Pages Router.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n\n\n<div class=\"wp-block-highsoft-hs-box hs-box var(--accordian-background-default) accordion-wrapper\" style=\"padding:22px;--hs-box-width:100%;--hs-box-min-width:100%;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--HS-surface-ui-border-100);--border-color-dark:var(--HS-surface-ui-border-100);--hs-box-border-radius:8px;--hs-box-overflow:hidden\">\n<div data-wp-context=\"{ &quot;autoclose&quot;: false, &quot;accordionItems&quot;: [] }\" data-wp-interactive=\"core\/accordion\" role=\"group\" class=\"wp-block-accordion is-layout-flow wp-block-accordion-is-layout-flow\">\n<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-3&quot;, &quot;openByDefault&quot;: false }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-layout-flow wp-container-core-accordion-item-is-layout-57626911 wp-block-accordion-item-is-layout-flow\">\n<h3 class=\"wp-block-accordion-heading\" style=\"font-size:var(--typography-size-400)\"><button aria-expanded=\"false\" aria-controls=\"accordion-item-3-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" data-wp-on--keydown=\"actions.handleKeyDown\" id=\"accordion-item-3\" type=\"button\" class=\"wp-block-accordion-heading__toggle\"><span class=\"wp-block-accordion-heading__toggle-title\">Do I need to install a separate TypeScript package?<\/span><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><\/button><\/h3>\n\n\n\n<div inert aria-labelledby=\"accordion-item-3\" data-wp-bind--inert=\"!state.isOpen\" id=\"accordion-item-3-panel\" role=\"region\" class=\"wp-block-accordion-panel is-layout-flow wp-container-core-accordion-panel-is-layout-65f7533b wp-block-accordion-panel-is-layout-flow\" style=\"padding-right:var(--wp--preset--spacing--80)\">\n<p class=\"wp-block-paragraph\" style=\"font-size:var(--typography-size-300)\">No. TypeScript declarations are bundled directly in the npm package \u2014 no <strong><code>@types\/ <\/code><\/strong>install needed. You get full autocomplete for every prop, option, and event in VS Code and other TS-aware editors automatically.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n\n\n<div class=\"wp-block-highsoft-hs-box hs-box var(--accordian-background-default) accordion-wrapper\" style=\"padding:22px;--hs-box-width:100%;--hs-box-min-width:100%;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--HS-surface-ui-border-100);--border-color-dark:var(--HS-surface-ui-border-100);--hs-box-border-radius:8px;--hs-box-overflow:hidden\">\n<div data-wp-context=\"{ &quot;autoclose&quot;: false, &quot;accordionItems&quot;: [] }\" data-wp-interactive=\"core\/accordion\" role=\"group\" class=\"wp-block-accordion is-layout-flow wp-block-accordion-is-layout-flow\">\n<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-4&quot;, &quot;openByDefault&quot;: false }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-layout-flow wp-container-core-accordion-item-is-layout-57626911 wp-block-accordion-item-is-layout-flow\">\n<h3 class=\"wp-block-accordion-heading\" style=\"font-size:var(--typography-size-400)\"><button aria-expanded=\"false\" aria-controls=\"accordion-item-4-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" data-wp-on--keydown=\"actions.handleKeyDown\" id=\"accordion-item-4\" type=\"button\" class=\"wp-block-accordion-heading__toggle\"><span class=\"wp-block-accordion-heading__toggle-title\">Does Highcharts for React work with Next.js and server-side rendering?<\/span><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><\/button><\/h3>\n\n\n\n<div inert aria-labelledby=\"accordion-item-4\" data-wp-bind--inert=\"!state.isOpen\" id=\"accordion-item-4-panel\" role=\"region\" class=\"wp-block-accordion-panel is-layout-flow wp-container-core-accordion-panel-is-layout-65f7533b wp-block-accordion-panel-is-layout-flow\" style=\"padding-right:var(--wp--preset--spacing--80)\">\n<p class=\"wp-block-paragraph\" style=\"font-size:var(--typography-size-300)\">Yes. Add <code><strong>'use client'<\/strong><\/code> to your chart file, fetch data in Server Components, and render charts client-side. Both App Router and Pages Router are fully supported with no additional configuration.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n\n\n<div class=\"wp-block-highsoft-hs-box hs-box var(--accordian-background-default) accordion-wrapper\" style=\"padding:22px;--hs-box-width:100%;--hs-box-min-width:100%;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--HS-surface-ui-border-100);--border-color-dark:var(--HS-surface-ui-border-100);--hs-box-border-radius:8px;--hs-box-overflow:hidden\">\n<div data-wp-context=\"{ &quot;autoclose&quot;: false, &quot;accordionItems&quot;: [] }\" data-wp-interactive=\"core\/accordion\" role=\"group\" class=\"wp-block-accordion is-layout-flow wp-block-accordion-is-layout-flow\">\n<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-5&quot;, &quot;openByDefault&quot;: false }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-layout-flow wp-container-core-accordion-item-is-layout-57626911 wp-block-accordion-item-is-layout-flow\">\n<h3 class=\"wp-block-accordion-heading\" style=\"font-size:var(--typography-size-400)\"><button aria-expanded=\"false\" aria-controls=\"accordion-item-5-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" data-wp-on--keydown=\"actions.handleKeyDown\" id=\"accordion-item-5\" type=\"button\" class=\"wp-block-accordion-heading__toggle\"><span class=\"wp-block-accordion-heading__toggle-title\">How does licensing work, and can I try it for free?<\/span><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><\/button><\/h3>\n\n\n\n<div inert aria-labelledby=\"accordion-item-5\" data-wp-bind--inert=\"!state.isOpen\" id=\"accordion-item-5-panel\" role=\"region\" class=\"wp-block-accordion-panel is-layout-flow wp-container-core-accordion-panel-is-layout-65f7533b wp-block-accordion-panel-is-layout-flow\" style=\"padding-right:var(--wp--preset--spacing--80)\">\n<p class=\"wp-block-paragraph\" style=\"font-size:var(--typography-size-300)\"><strong><code>@highcharts\/react<\/code><\/strong> is free for non-commercial use. For commercial projects, a Highcharts license covers the integration. <a href=\"https:\/\/shop.highcharts.com\/\">See pricing<\/a> or <a href=\"https:\/\/shop.highcharts.com\/contact\">contact sales<\/a> if you need help choosing the right plan.<\/p>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><a href=\"https:\/\/shop.highcharts.com\/\" class=\"hc-button hc-button--brand hc-button--size-300\" data-link-template=\"https:\/\/shop.highcharts.com\/\" aria-label=\"See license pricing\">See license pricing<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 9V3m0 0h-6m6 0-8 8m-3-6H7.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C3 7.28 3 8.12 3 9.8v6.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311C5.28 21 6.12 21 7.8 21h6.4c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C19 18.72 19 17.88 19 16.2V14\"><\/path><\/svg><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n\n\n\n<section class=\"wp-block-highsoft-section neutral-0-light transparent promo-section page-section\">\n<div class=\"wp-block-group content-container has-global-padding is-layout-constrained wp-container-core-group-is-layout-4c56c5a7 wp-block-group-is-layout-constrained\">\n\n<div class=\"wp-block-columns promo-cards-container is-layout-flex wp-container-core-columns-is-layout-1653e3f1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column column-promo is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-highsoft-promo-single greenCard promo-card\">\n<div class=\"wp-block-group container-promo is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-1d06d9db wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group heading-p-group is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-cd31d58c wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading has-text-align-center promo-card-title\">Join Our <br>Discord Server<\/h2>\n\n\n\n<p class=\"has-text-align-center promo-card-content has-font-size-200-font-size wp-block-paragraph\">Got a question about your React integration? The official Highcharts Discord is where developers share what they&#8217;re building, get help from the community, and hear directly from the Highsoft team. Come say hi.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group promo-button is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-35e27d09 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-highsoft-hs-button\"><a href=\"\/highcharts-discord\/\" class=\"hc-button hc-button--success hc-button--size-400\" data-link-template=\"\/highcharts-discord\/\" aria-label=\"Join the community\">Join the community<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column column-promo is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-highsoft-promo-single blueCard promo-card\">\n<div class=\"wp-block-group container-promo is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-1d06d9db wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group heading-p-group is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-cd31d58c wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading has-text-align-center promo-card-title\">Migrating from highcharts-react-official?<\/h2>\n\n\n\n<p class=\"has-text-align-center promo-card-content has-font-size-200-font-size wp-block-paragraph\">The new <strong><code>@highcharts\/react package<\/code><\/strong> replaces highcharts-react-official with a JSX-native API that&#8217;s faster, cleaner, and built for how React developers actually work. Migration takes minutes. Swap the package, update your imports, and you&#8217;re done.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group promo-button is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-35e27d09 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-highsoft-hs-button\"><a href=\"https:\/\/www.highcharts.com\/docs\/react\/v4-migration-guide\" class=\"hc-button hc-button--brand hc-button--size-400\" data-link-template=\"https:\/\/www.highcharts.com\/docs\/react\/v4-migration-guide\" aria-label=\"Read the migration guide\">Read the migration guide<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<\/div>\n<\/section>\n\n\n\n<section class=\"wp-block-highsoft-section neutral-50-light transparent robustify-section page-section\">\n<div class=\"wp-block-group content-container has-global-padding is-layout-constrained wp-container-core-group-is-layout-4c56c5a7 wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Robustify Highcharts<\/h2>\n\n\n\n<div class=\"product-cards-outer-container\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-b324816d wp-block-columns-is-layout-flex\" style=\"margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-highsoft-navigation-card-single hs-navigation-card-single hs-navigation-card-single--big hs-navigation-card-single--clickable\" data-link=\"\/products\/stock\" data-target=\"_blank\" tabindex=\"0\" role=\"button\" aria-label=\"Clickable card - press Enter to navigate\">\n<div class=\"wp-block-highsoft-hs-box hs-box neutral-0-light neutral-900-dark\" style=\"padding-top:32px;padding-right:32px;padding-bottom:32px;padding-left:32px;--hs-box-width:100%;--hs-box-min-width:auto;--hs-box-max-width:100%;--hs-box-height:100%;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--primitives-neutral-100);--border-color-dark:var(--primitives-neutral-800);--hs-box-border-radius:8px;--hs-box-overflow:hidden\">\n<div class=\"wp-block-group hs-blank-box-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-0e1aff24 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns is-not-stacked-on-mobile navigation-card-single-columns is-layout-flex wp-container-core-columns-is-layout-e995ef1c wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-c800a773 wp-block-group-is-layout-flex\">\n<p class=\"has-success-700-color has-text-color has-link-color wp-elements-3cd1f639d40a625f992b0de955734204 wp-block-paragraph\">ADDITIONAL PRODUCT<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-font-size-800-font-size\" style=\"font-style:normal;font-weight:500\">Highcharts Stock<\/h3>\n\n\n\n<p class=\"has-font-size-300-font-size wp-block-paragraph\">Create stock or general timeline charts for any web and mobile project.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\">\n<div class=\"wp-block-group icon-container is-vertical is-content-justification-right is-layout-flex wp-container-core-group-is-layout-5d81f398 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-highsoft-hs-icon icon-display\"><span class=\"hc-icon-background hc-icon-border\" style=\"padding:16px\"><span class=\"hc-icon hc-icon--size-xxxl\" aria-hidden=\"true\"><span class=\"hc-icon-light\"><img decoding=\"async\" src=\"\/wp-content\/plugins\/wordpress-plugin-highcharts-blocks\/assets\/icons\/products\/stock.svg\" alt=\"\" aria-hidden=\"true\" class=\"hc-icon-img\"\/><\/span><span class=\"hc-icon-dark\"><img decoding=\"async\" src=\"\/wp-content\/plugins\/wordpress-plugin-highcharts-blocks\/assets\/icons\/products\/stock.svg\" alt=\"\" aria-hidden=\"true\" class=\"hc-icon-img\"\/><\/span><\/span><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-highsoft-navigation-card-single hs-navigation-card-single hs-navigation-card-single--big hs-navigation-card-single--clickable\" data-link=\"\/products\/maps\" data-target=\"_blank\" tabindex=\"0\" role=\"button\" aria-label=\"Clickable card - press Enter to navigate\">\n<div class=\"wp-block-highsoft-hs-box hs-box neutral-0-light neutral-900-dark\" style=\"padding-top:32px;padding-right:32px;padding-bottom:32px;padding-left:32px;--hs-box-width:100%;--hs-box-min-width:auto;--hs-box-max-width:100%;--hs-box-height:100%;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--primitives-neutral-100);--border-color-dark:var(--primitives-neutral-800);--hs-box-border-radius:8px;--hs-box-overflow:hidden\">\n<div class=\"wp-block-group hs-blank-box-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-0e1aff24 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns is-not-stacked-on-mobile navigation-card-single-columns is-layout-flex wp-container-core-columns-is-layout-e995ef1c wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-c800a773 wp-block-group-is-layout-flex\">\n<p class=\"has-success-700-color has-text-color has-link-color wp-elements-3cd1f639d40a625f992b0de955734204 wp-block-paragraph\">ADDITIONAL PRODUCT<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-font-size-800-font-size\" style=\"font-style:normal;font-weight:500\">Highcharts Maps<\/h3>\n\n\n\n<p class=\"has-font-size-300-font-size wp-block-paragraph\">Create stock or general timeline charts for any web and mobile project.ontent text<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\">\n<div class=\"wp-block-group icon-container is-vertical is-content-justification-right is-layout-flex wp-container-core-group-is-layout-5d81f398 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-highsoft-hs-icon icon-display\"><span class=\"hc-icon-background hc-icon-border\" style=\"padding:16px\"><span class=\"hc-icon hc-icon--size-xxxl\" aria-hidden=\"true\"><span class=\"hc-icon-light\"><img decoding=\"async\" src=\"\/wp-content\/plugins\/wordpress-plugin-highcharts-blocks\/assets\/icons\/products\/maps.svg\" alt=\"\" aria-hidden=\"true\" class=\"hc-icon-img\"\/><\/span><span class=\"hc-icon-dark\"><img decoding=\"async\" src=\"\/wp-content\/plugins\/wordpress-plugin-highcharts-blocks\/assets\/icons\/products\/maps.svg\" alt=\"\" aria-hidden=\"true\" class=\"hc-icon-img\"\/><\/span><\/span><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-b324816d wp-block-columns-is-layout-flex\" style=\"margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-highsoft-navigation-card-single hs-navigation-card-single hs-navigation-card-single--big hs-navigation-card-single--clickable\" data-link=\"\/products\/gantt\" data-target=\"_blank\" tabindex=\"0\" role=\"button\" aria-label=\"Clickable card - press Enter to navigate\">\n<div class=\"wp-block-highsoft-hs-box hs-box neutral-0-light neutral-900-dark\" style=\"padding-top:32px;padding-right:32px;padding-bottom:32px;padding-left:32px;--hs-box-width:100%;--hs-box-min-width:auto;--hs-box-max-width:100%;--hs-box-height:100%;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--primitives-neutral-100);--border-color-dark:var(--primitives-neutral-800);--hs-box-border-radius:8px;--hs-box-overflow:hidden\">\n<div class=\"wp-block-group hs-blank-box-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-0e1aff24 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns is-not-stacked-on-mobile navigation-card-single-columns is-layout-flex wp-container-core-columns-is-layout-e995ef1c wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-c800a773 wp-block-group-is-layout-flex\">\n<p class=\"has-success-700-color has-text-color has-link-color wp-elements-3cd1f639d40a625f992b0de955734204 wp-block-paragraph\">ADDITIONAL PRODUCT<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-font-size-800-font-size\" style=\"font-style:normal;font-weight:500\">Highcharts Gantt<\/h3>\n\n\n\n<p class=\"has-font-size-300-font-size wp-block-paragraph\">Create interactive charts for allocating and displaying tasks, events, and resources along a timeline.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\">\n<div class=\"wp-block-group icon-container is-vertical is-content-justification-right is-layout-flex wp-container-core-group-is-layout-5d81f398 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-highsoft-hs-icon icon-display\"><span class=\"hc-icon-background hc-icon-border\" style=\"padding:16px\"><span class=\"hc-icon hc-icon--size-xxxl\" aria-hidden=\"true\"><span class=\"hc-icon-light\"><img decoding=\"async\" src=\"\/wp-content\/plugins\/wordpress-plugin-highcharts-blocks\/assets\/icons\/products\/gantt.svg\" alt=\"\" aria-hidden=\"true\" class=\"hc-icon-img\"\/><\/span><span class=\"hc-icon-dark\"><img decoding=\"async\" src=\"\/wp-content\/plugins\/wordpress-plugin-highcharts-blocks\/assets\/icons\/products\/gantt.svg\" alt=\"\" aria-hidden=\"true\" class=\"hc-icon-img\"\/><\/span><\/span><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-highsoft-navigation-card-single hs-navigation-card-single hs-navigation-card-single--big hs-navigation-card-single--clickable\" data-link=\"\/products\/dashboards\" data-target=\"_blank\" tabindex=\"0\" role=\"button\" aria-label=\"Clickable card - press Enter to navigate\">\n<div class=\"wp-block-highsoft-hs-box hs-box neutral-0-light neutral-900-dark\" style=\"padding-top:32px;padding-right:32px;padding-bottom:32px;padding-left:32px;--hs-box-width:100%;--hs-box-min-width:auto;--hs-box-max-width:100%;--hs-box-height:100%;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--primitives-neutral-100);--border-color-dark:var(--primitives-neutral-800);--hs-box-border-radius:8px;--hs-box-overflow:hidden\">\n<div class=\"wp-block-group hs-blank-box-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-0e1aff24 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns is-not-stacked-on-mobile navigation-card-single-columns is-layout-flex wp-container-core-columns-is-layout-e995ef1c wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-c800a773 wp-block-group-is-layout-flex\">\n<p class=\"has-success-700-color has-text-color has-link-color wp-elements-3cd1f639d40a625f992b0de955734204 wp-block-paragraph\">ADDITIONAL PRODUCT<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-font-size-800-font-size\" style=\"font-style:normal;font-weight:500\">Highcharts Dashboards<\/h3>\n\n\n\n<p class=\"has-font-size-300-font-size wp-block-paragraph\">Development library pre-loaded with time-saving features that will save you hours of development time on your dashboard projects.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\">\n<div class=\"wp-block-group icon-container is-vertical is-content-justification-right is-layout-flex wp-container-core-group-is-layout-5d81f398 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-highsoft-hs-icon icon-display\"><span class=\"hc-icon-background hc-icon-border\" style=\"padding:16px\"><span class=\"hc-icon hc-icon--size-xxxl\" aria-hidden=\"true\"><span class=\"hc-icon-light\"><img decoding=\"async\" src=\"\/wp-content\/plugins\/wordpress-plugin-highcharts-blocks\/assets\/icons\/products\/dashboard.svg\" alt=\"\" aria-hidden=\"true\" class=\"hc-icon-img\"\/><\/span><span class=\"hc-icon-dark\"><img decoding=\"async\" src=\"\/wp-content\/plugins\/wordpress-plugin-highcharts-blocks\/assets\/icons\/products\/dashboard.svg\" alt=\"\" aria-hidden=\"true\" class=\"hc-icon-img\"\/><\/span><\/span><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-b324816d wp-block-columns-is-layout-flex\" style=\"margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-highsoft-navigation-card-single hs-navigation-card-single hs-navigation-card-single--big hs-navigation-card-single--clickable\" data-link=\"\/products\/advantage\" data-target=\"_blank\" tabindex=\"0\" role=\"button\" aria-label=\"Clickable card - press Enter to navigate\">\n<div class=\"wp-block-highsoft-hs-box hs-box neutral-0-light neutral-900-dark\" style=\"padding-top:32px;padding-right:32px;padding-bottom:32px;padding-left:32px;--hs-box-width:100%;--hs-box-min-width:auto;--hs-box-max-width:100%;--hs-box-height:100%;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--primitives-neutral-100);--border-color-dark:var(--primitives-neutral-800);--hs-box-border-radius:8px;--hs-box-overflow:hidden\">\n<div class=\"wp-block-group hs-blank-box-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-0e1aff24 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns is-not-stacked-on-mobile navigation-card-single-columns is-layout-flex wp-container-core-columns-is-layout-e995ef1c wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-c800a773 wp-block-group-is-layout-flex\">\n<p class=\"has-success-700-color has-text-color has-link-color wp-elements-59d4a312abda1849c4b991cf4a2e5c0f wp-block-paragraph\">SUPPORT<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-font-size-800-font-size\" style=\"font-style:normal;font-weight:500\">Highcharts Advantage+<\/h3>\n\n\n\n<p class=\"has-font-size-300-font-size wp-block-paragraph\">Highcharts Advantage+ gives you access to the resources and expertise you need to make your Highcharts implementation fast and frustration free.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\">\n<div class=\"wp-block-group icon-container is-vertical is-content-justification-right is-layout-flex wp-container-core-group-is-layout-5d81f398 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-highsoft-hs-icon icon-display\"><span class=\"hc-icon-background hc-icon-border\" style=\"padding:16px\"><span class=\"hc-icon hc-icon--size-xxxl\" aria-hidden=\"true\"><span class=\"hc-icon-light\"><img decoding=\"async\" src=\"\/wp-content\/plugins\/wordpress-plugin-highcharts-blocks\/assets\/icons\/products\/support.svg\" alt=\"\" aria-hidden=\"true\" class=\"hc-icon-img\"\/><\/span><span class=\"hc-icon-dark\"><img decoding=\"async\" src=\"\/wp-content\/plugins\/wordpress-plugin-highcharts-blocks\/assets\/icons\/products\/support.svg\" alt=\"\" aria-hidden=\"true\" class=\"hc-icon-img\"\/><\/span><\/span><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-highsoft-navigation-card-single hs-navigation-card-single hs-navigation-card-single--big hs-navigation-card-single--clickable\" data-link=\"\/products\/highcharts-editor\/\" data-target=\"_blank\" tabindex=\"0\" role=\"button\" aria-label=\"Clickable card - press Enter to navigate\">\n<div class=\"wp-block-highsoft-hs-box hs-box neutral-0-light neutral-900-dark\" style=\"padding-top:32px;padding-right:32px;padding-bottom:32px;padding-left:32px;--hs-box-width:100%;--hs-box-min-width:auto;--hs-box-max-width:100%;--hs-box-height:100%;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--primitives-neutral-100);--border-color-dark:var(--primitives-neutral-800);--hs-box-border-radius:8px;--hs-box-overflow:hidden\">\n<div class=\"wp-block-group hs-blank-box-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-0e1aff24 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns is-not-stacked-on-mobile navigation-card-single-columns is-layout-flex wp-container-core-columns-is-layout-e995ef1c wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-c800a773 wp-block-group-is-layout-flex\">\n<p class=\"has-success-700-color has-text-color has-link-color wp-elements-f0535f7d03e47a86d1444b1dfcf039b2 wp-block-paragraph\">ADD-ON<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-font-size-800-font-size\" style=\"font-style:normal;font-weight:500\">Export Server<\/h3>\n\n\n\n<p class=\"has-font-size-300-font-size wp-block-paragraph\">Allow your users to download the chart as PDF, PNG, JPG or SVG vector images, and more.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\">\n<div class=\"wp-block-group icon-container is-vertical is-content-justification-right is-layout-flex wp-container-core-group-is-layout-5d81f398 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-highsoft-hs-icon icon-display\"><span class=\"hc-icon-background hc-icon-border\" style=\"padding:16px\"><span class=\"hc-icon hc-icon--size-xxxl\" aria-hidden=\"true\"><span class=\"hc-icon-light\"><img decoding=\"async\" src=\"\/wp-content\/plugins\/wordpress-plugin-highcharts-blocks\/assets\/icons\/products\/exporter.svg\" alt=\"\" aria-hidden=\"true\" class=\"hc-icon-img\"\/><\/span><span class=\"hc-icon-dark\"><img decoding=\"async\" src=\"\/wp-content\/plugins\/wordpress-plugin-highcharts-blocks\/assets\/icons\/products\/exporter.svg\" alt=\"\" aria-hidden=\"true\" class=\"hc-icon-img\"\/><\/span><\/span><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n","protected":false},"author":281,"featured_media":0,"parent":0,"menu_order":0,"template":"","meta":{"meta_title":"Highcharts for React | Official integration and examples","meta_description":"Use Highcharts to add interactive charts to React apps. Includes setup, examples, and common patterns for interactive, accessible charts.","hc_selected_options":[],"footnotes":""},"coauthors":[1073],"class_list":["post-27397","integrations","type-integrations","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/integrations\/27397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/integrations"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/integrations"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/281"}],"version-history":[{"count":4,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/integrations\/27397\/revisions"}],"predecessor-version":[{"id":31143,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/integrations\/27397\/revisions\/31143"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=27397"}],"wp:term":[{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=27397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}