{"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-03-27T11:57:09","modified_gmt":"2026-03-27T11:57:09","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-bdcbbb17 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-67c09cde 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-369f67fb 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-fe9cc265 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-fe9cc265 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-215ed0c7 wp-block-group-is-layout-flow\">\n<p class=\"hero-column-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\n\n\n<p><strong><code>npm install highcharts @highcharts\/react<\/code><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group hero-column-buttons is-layout-flex wp-container-core-group-is-layout-b56ea84c 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-a9ce5701 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-bdcbbb17 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-56aa632b 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-5ab2d64d 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:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/03\/cod-react-dark.png\" data-has-dark=\"true\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/03\/code-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-5ab2d64d 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-187baabe wp-block-group-is-layout-flex\">\n<p class=\"feature-description\">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>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-5ab2d64d 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:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/03\/typescript-img-react-dark.png\" data-has-dark=\"true\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/03\/typescript-img-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-5ab2d64d 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-355c4241 wp-block-group-is-layout-flex\">\n<p class=\"feature-description\">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>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-5ab2d64d 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:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/03\/nextjs-react-dark.png\" data-has-dark=\"true\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/03\/nextjs-img-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-5ab2d64d 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-355c4241 wp-block-group-is-layout-flex\">\n<p class=\"feature-description\">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>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-5ab2d64d 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:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/03\/component-react-dark.png\" data-has-dark=\"true\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/03\/component-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-5ab2d64d 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-355c4241 wp-block-group-is-layout-flex\">\n<p class=\"feature-description\">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>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-5ab2d64d 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:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/03\/code-module-react-dark.png\" data-has-dark=\"true\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/03\/code-module-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-5ab2d64d 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-355c4241 wp-block-group-is-layout-flex\">\n<p class=\"feature-description\">Deep imports like <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>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-5ab2d64d 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:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/03\/all-chart-types-react-dark.png\" data-has-dark=\"true\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/03\/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-5ab2d64d 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-355c4241 wp-block-group-is-layout-flex\">\n<p class=\"feature-description\">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>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-bdcbbb17 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns content-section is-layout-flex wp-container-core-columns-is-layout-828b44bc 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-23a5daed 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-343acf9e 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-65ea3c3e 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-343acf9e 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-097b0256 wp-block-accordion-panel-is-layout-flow\" style=\"padding-right:var(--wp--preset--spacing--80)\">\n<p 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-343acf9e 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-097b0256 wp-block-accordion-panel-is-layout-flow\" style=\"padding-right:var(--wp--preset--spacing--80)\">\n<p 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-343acf9e 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-097b0256 wp-block-accordion-panel-is-layout-flow\" style=\"padding-right:var(--wp--preset--spacing--80)\">\n<p 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-343acf9e 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-097b0256 wp-block-accordion-panel-is-layout-flow\" style=\"padding-right:var(--wp--preset--spacing--80)\">\n<p 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-343acf9e 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-097b0256 wp-block-accordion-panel-is-layout-flow\" style=\"padding-right:var(--wp--preset--spacing--80)\">\n<p 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-bdcbbb17 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-14cf5ab5 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-0a8086ad 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-e65b8d57 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\">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-23441af8 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-0a8086ad 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-e65b8d57 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\">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-23441af8 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-bdcbbb17 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-7255d826 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-da70f3a0 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-430f08e6 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-90752e8f wp-block-group-is-layout-flex\">\n<p class=\"has-success-700-color has-text-color has-link-color wp-elements-3cd1f639d40a625f992b0de955734204\">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\">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-5458dd13 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-da70f3a0 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-430f08e6 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-90752e8f wp-block-group-is-layout-flex\">\n<p class=\"has-success-700-color has-text-color has-link-color wp-elements-3cd1f639d40a625f992b0de955734204\">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\">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-5458dd13 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-7255d826 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-da70f3a0 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-430f08e6 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-90752e8f wp-block-group-is-layout-flex\">\n<p class=\"has-success-700-color has-text-color has-link-color wp-elements-3cd1f639d40a625f992b0de955734204\">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\">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-5458dd13 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-da70f3a0 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-430f08e6 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-90752e8f wp-block-group-is-layout-flex\">\n<p class=\"has-success-700-color has-text-color has-link-color wp-elements-3cd1f639d40a625f992b0de955734204\">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\">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-5458dd13 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-7255d826 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-da70f3a0 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-430f08e6 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-90752e8f wp-block-group-is-layout-flex\">\n<p class=\"has-success-700-color has-text-color has-link-color wp-elements-59d4a312abda1849c4b991cf4a2e5c0f\">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\">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-5458dd13 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-da70f3a0 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-430f08e6 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-90752e8f wp-block-group-is-layout-flex\">\n<p class=\"has-success-700-color has-text-color has-link-color wp-elements-f0535f7d03e47a86d1444b1dfcf039b2\">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\">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-5458dd13 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":30001,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/integrations\/27397\/revisions\/30001"}],"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}]}}