{"id":17264,"date":"2019-01-09T01:11:37","date_gmt":"2019-01-09T01:11:37","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=17264"},"modified":"2026-01-12T10:03:52","modified_gmt":"2026-01-12T10:03:52","slug":"highcharts-wrapper-for-react-101","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/integration\/highcharts-wrapper-for-react-101\/","title":{"rendered":"Highcharts wrapper for React 101"},"content":{"rendered":"\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-d3543a3b wp-block-group-is-layout-constrained\">\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>The new <a href=\"https:\/\/github.com\/highcharts\/highcharts-react\">Highcharts wrapper for React<\/a> is now available, and it is compatible with <a href=\"https:\/\/reactjs.org\/\">React 16.4+<\/a>.<\/p>\n\n\n\n<p>In this tutorial, we will show you how to get started with the official <a href=\"https:\/\/github.com\/highcharts\/highcharts-react\">Highcharts wrapper for React<\/a>.<br>we will start with setting up the environment, then jump to create three demos for each Highcharts library: Highcharts, Highstock, and Highmaps.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-346627ba wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-font-size-600-font-size\">Set up the environment<\/h2>\n\n\n\n<p>For this project, we will use:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/facebook\/create-react-app\">Create React App<\/a> tool to focus only on the code and to get the pre-configuration of Webpack and Babel.<\/li>\n\n\n\n<li><a href=\"https:\/\/code.visualstudio.com\/\">Visual Studio Code<\/a> as the main editor to benefit from its awesome features that make writing the code easier.<\/li>\n\n\n\n<li>The extension <b>Simple React Snippets<\/b> to help write fast React code.<\/li>\n\n\n\n<li>The extension <b>Prettier<\/b> to better reformat the code.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading has-font-size-300-font-size\"><b>Installation<\/b><\/h3>\n\n\n\n<p>We prefer to install the Create React App tool globally since we use it regularly. To do so, open the terminal and run the following command line with the option <code>-g<\/code> for global:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code><code>$npm install -g create-react-app<\/code><\/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\" aria-label=\"Copy\" data-copy-code=\"true\"><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\n\n\n<p>To create our application <b>\u201chcreact\u201d<\/b>, enter into the terminal window:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code><code>$create-react-app hcreact<\/code><\/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\" aria-label=\"Copy\" data-copy-code=\"true\"><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\n\n\n<p>The previous command line creates a folder with a default project. To install Visual Studio code and the extensions feel free to refer the <a href=\"https:\/\/code.visualstudio.com\/docs\">official documentation<\/a>. Once the Visual Studio Code installed, open it, drag and drop the folder <b>\u201chcreact\u201d<\/b> into the editor.<\/p>\n\n\n\n<p>Let\u2019s run the project as it is to be sure that everything is well set up before starting to change the project.<\/p>\n\n\n\n<p>Return to the terminal to run these command lines:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code><code>$ cd hcreact\/<\/code>\n<code>$ npm start<\/code><\/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\" aria-label=\"Copy\" data-copy-code=\"true\"><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\n\n\n<p>The npm start will launch a server on port 3000.<\/p>\n\n\n\n<p>If your result is as the picture below, that means that the basic configuration is working.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1160\" height=\"650\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/01\/09002707\/default-result.jpg\" alt=\"\" class=\"wp-image-17271\" srcset=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/01\/09002707\/default-result.jpg 1160w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/01\/09002707\/default-result-560x314.jpg 560w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/01\/09002707\/default-result-768x430.jpg 768w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/01\/09002707\/default-result-760x426.jpg 760w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/01\/09002707\/default-result-360x202.jpg 360w\" sizes=\"auto, (max-width: 1160px) 100vw, 1160px\" \/><\/figure>\n\n\n\n<p>Next install Highcharts and the Highcharts React Wrapper. First, stop the running project on the terminal using <code>Ctrl+c<\/code>, then run this command lines:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code><code>$ npm install highcharts<\/code>\n<code>$ npm install highcharts-react-official<\/code><\/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\" aria-label=\"Copy\" data-copy-code=\"true\"><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\n\n\n<p>Now, let\u2019s prepare our project by removing the default files. Go back to the editor then delete these files:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>App.css<\/li>\n\n\n\n<li>App.js<\/li>\n\n\n\n<li>App.test.js<\/li>\n\n\n\n<li>index.js<\/li>\n\n\n\n<li>index.css<\/li>\n\n\n\n<li>logo.svg<\/li>\n\n\n\n<li>serviceWorker.js<\/li>\n\n\n\n<li>.gitignore<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"781\" height=\"391\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/01\/09003019\/delete-files.jpg\" alt=\"\" class=\"wp-image-17273\" srcset=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/01\/09003019\/delete-files.jpg 781w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/01\/09003019\/delete-files-560x280.jpg 560w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/01\/09003019\/delete-files-768x384.jpg 768w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/01\/09003019\/delete-files-760x380.jpg 760w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/01\/09003019\/delete-files-360x180.jpg 360w\" sizes=\"auto, (max-width: 781px) 100vw, 781px\" \/><\/figure>\n\n\n\n<p>With that out of the way, we are ready to start writing our own code.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-346627ba wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-font-size-600-font-size\">Highcharts chart<\/h2>\n\n\n\n<p>Inside the folder src, create index.js, open it and import <code>react<\/code>, <code>react-dom<\/code>, <code>highcharts<\/code>, and <code>highcharts-react-official<\/code>.<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>import React from 'react';\nimport { render } from 'react-dom';\nimport Highcharts from 'highcharts';\nimport HighchartsReact from 'highcharts-react-official';<\/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\" aria-label=\"Copy\" data-copy-code=\"true\"><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\n\n\n<p>A simple chart to generate to start with is a spline chart with the following <code>data:[1, 2, 1, 4, 3, 6]<\/code>. To achieve that, we need to create an object (options) then pass the information:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>const options = {\n  chart: {\n    type: 'spline'\n  },\n  title: {\n    text: 'My chart'\n  },\n  series: &#91;\n    {\n      data: &#91;1, 2, 1, 4, 3, 6]\n    }\n  ]\n};<\/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\" aria-label=\"Copy\" data-copy-code=\"true\"><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\n\n\n<p>The JSX includes the information created above, and here\u2019s how to do it:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>const App = () =&gt; (\n  &lt;div&gt;\n    &lt;HighchartsReact highcharts={Highcharts} options={options} \/&gt;\n  &lt;\/div&gt;\n);<\/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\" aria-label=\"Copy\" data-copy-code=\"true\"><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\n\n\n<p>Finally, render the whole code using the react render method:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>render(&lt;App \/&gt;, document.getElementById('root'));<\/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\" aria-label=\"Copy\" data-copy-code=\"true\"><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\n\n\n<p>The required code is now complete. Go back to the terminal, and run the project:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code><code>$ npm start<\/code><\/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\" aria-label=\"Copy\" data-copy-code=\"true\"><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\n\n\n<p>The result should be an interactive spline chart:<\/p>\n\n\n\n<p><!--img class=\"alignnone size-full wp-image-17279\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/01\/09004614\/Highcharts-chart.jpg\" alt=\"\" width=\"781\" height=\"390\" \/--><\/p>\n\n\n\n<p class=\"demo-container\"><iframe style=\"width: 100%; height: 540px; border: 0; border-radius: 4px; overflow: hidden;\" src=\"https:\/\/codesandbox.io\/embed\/zn1j00v1wx?view=preview\" sandbox=\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\"><\/iframe><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-346627ba wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-font-size-600-font-size\">Highstock chart<\/h2>\n\n\n\n<p>The same process applies to charts generated using the Highstock library.<\/p>\n\n\n\n<p>Here is an example of a simple interactive stock chart:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>import React from 'react';\nimport { render } from 'react-dom';\nimport Highcharts from 'highcharts\/highstock';\nimport HighchartsReact from 'highcharts-react-official';\n\nconst options = {\n  title: {\n    text: 'My stock chart'\n  },\n  series: &#91;\n    {\n      data: &#91;1, 2, 1, 4, 3, 6, 7, 3, 8, 6, 9]\n    }\n  ]\n};\n\nconst App = () =&gt; (\n  &lt;div&gt;\n    &lt;HighchartsReact\n      highcharts={Highcharts}\n      constructorType={'stockChart'}\n      options={options}\n    \/&gt;\n  &lt;\/div&gt;\n);\n\nrender(&lt;App \/&gt;, document.getElementById('root'));<\/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\" aria-label=\"Copy\" data-copy-code=\"true\"><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\n\n\n<p>Notice the import of Highstock using this import <code>import Highcharts from 'highcharts\/highstock';,<\/code> and the use of <code>constructorType={'stockChart'} <\/code>in the <b>JSX<\/b>.<\/p>\n\n\n\n<p>The result is the demo below:<\/p>\n\n\n\n<p class=\"demo-container\"><iframe style=\"width: 100%; height: 540px; border: 0; border-radius: 4px; overflow: hidden;\" src=\"https:\/\/codesandbox.io\/embed\/jzjzr57jw?view=preview\" sandbox=\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\"><\/iframe><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-346627ba wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-font-size-600-font-size\">Highmaps chart<\/h2>\n\n\n\n<p>The process for rendering maps using Highmaps is almost similar to the previous demos, except for a few things:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>We have to import the map data to display and save it as <code>mapDataAsia.js<\/code>, in my case the <a href=\"http:\/\/code.highcharts.com\/mapdata\/custom\/asia.js\">javascript map of Asia<\/a> from the <a href=\"http:\/\/code.highcharts.com\/mapdata\/\">Highcharts map collection<\/a>.<\/li>\n\n\n\n<li>Replace the object <code>Highcharts.maps[\"custom\/asia\"]<\/code> by <code>const mapDataAsia<\/code>.<\/li>\n\n\n\n<li>Export the object <code>export default mapDataAsia;<\/code><\/li>\n\n\n\n<li>Import the object in my <code>index.js<\/code> using <code>import mapDataAsia from '.\/mapDataAsia.js';<\/code><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"781\" height=\"391\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/01\/09005542\/mapDataAsia.jpg\" alt=\"\" class=\"wp-image-17284\" srcset=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/01\/09005542\/mapDataAsia.jpg 781w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/01\/09005542\/mapDataAsia-560x280.jpg 560w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/01\/09005542\/mapDataAsia-768x384.jpg 768w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/01\/09005542\/mapDataAsia-760x380.jpg 760w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/01\/09005542\/mapDataAsia-360x180.jpg 360w\" sizes=\"auto, (max-width: 781px) 100vw, 781px\" \/><\/figure>\n\n\n\n<p>And voila, we are ready to use the map and display it.<\/p>\n\n\n\n<p>The index.js will look like the following:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>import React from 'react';\nimport { render } from 'react-dom';\nimport Highcharts from 'highcharts';\nimport HighchartsReact from 'highcharts-react-official';\nimport mapDataAsia from '.\/mapDataAsia';\n\n\/\/ Load Highcharts modules\nrequire('highcharts\/modules\/map')(Highcharts);\n\nvar data = &#91;\n  &#91;'ae', 37],\n  &#91;'af', 44],\n  &#91;'am', 20],\n  &#91;'az', 19],\n  &#91;'bd', 9],\n  &#91;'bh', 12],\n  &#91;'bn', 43],\n  &#91;'bt', 26],\n  &#91;'cn', 70],\n  &#91;'cnm', 33],\n  &#91;'cy', 48],\n  &#91;'ge', 27],\n  &#91;'id', 65],\n  &#91;'il', 29],\n  &#91;'in', 65],\n  &#91;'iq', 36],\n  &#91;'ir', 70],\n  &#91;'jk', 40],\n  &#91;'jo', 31],\n  &#91;'jp', 100],\n  &#91;'kg', 52],\n  &#91;'kh', 25],\n  &#91;'kp', 45],\n  &#91;'kr', 70],\n  &#91;'kw', 35],\n  &#91;'kz', 28],\n  &#91;'la', 38],\n  &#91;'lb', 46],\n  &#91;'lk', 51],\n  &#91;'mm', 13],\n  &#91;'mn', 34],\n  &#91;'my', 18],\n  &#91;'nc', 47],\n  &#91;'np', 50],\n  &#91;'om', 5],\n  &#91;'ph', 1],\n  &#91;'pk', 39],\n  &#91;'qa', 41],\n  &#91;'ru', 70],\n  &#91;'sa', 2],\n  &#91;'sg', 65],\n  &#91;'sh', 17],\n  &#91;'sp', 10],\n  &#91;'sy', 30],\n  &#91;'th', 4],\n  &#91;'tj', 22],\n  &#91;'tl', 24],\n  &#91;'tm', 32],\n  &#91;'tr', 65],\n  &#91;'tw', 49],\n  &#91;'uz', 23],\n  &#91;'vn', 21],\n  &#91;'ye', 6]\n];\n\nconst mapOptions = {\n  title: {\n    text: ''\n  },\n  colorAxis: {\n    min: 0,\n    stops: &#91;&#91;0.4, '#ffff00'], &#91;0.65, '#bfff00'], &#91;1, '\t#40ff00']]\n  },\n\n  series: &#91;\n    {\n      mapData: mapDataAsia,\n      name: 'Asia',\n      data: data\n    }\n  ]\n};\n\n\/\/ Render app with demo chart\nclass App extends React.Component {\n  render() {\n    return (\n      &lt;div&gt;\n        &lt;h1&gt;Demos&lt;\/h1&gt;\n\n        &lt;h2&gt;Highmaps&lt;\/h2&gt;\n        &lt;HighchartsReact\n          options={mapOptions}\n          constructorType={'mapChart'}\n          highcharts={Highcharts}\n        \/&gt;\n      &lt;\/div&gt;\n    );\n  }\n}\nrender(&lt;App \/&gt;, document.getElementById('root'));<\/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\" aria-label=\"Copy\" data-copy-code=\"true\"><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\n\n\n<p>The end result is the demo below:<\/p>\n\n\n\n<p class=\"demo-container\"><iframe style=\"width: 100%; height: 670px; border: 0; border-radius: 4px; overflow: hidden;\" src=\"https:\/\/codesandbox.io\/embed\/v318454060?view=preview\" sandbox=\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\"><\/iframe><\/p>\n\n\n\n<p>Now, you know how to use Highcharts React wrapper to create and display charts using the three main Highcharts libraries. Next, we will tackle the Highcharts Gantt library. Stay tuned.<\/p>\n\n\n\n<p>Feel free to share your experience, questions, and comments below.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A step by step tutorial to learn how to use the new Highcharts wrapper React to create interactive charts with Highcharts, Highstock and Highmaps.<\/p>\n","protected":false},"author":32,"featured_media":21615,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[1105],"tags":[1094,1031,824],"coauthors":[699],"class_list":["post-17264","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integration","tag-highcharts-core","tag-javascript","tag-react"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/17264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=17264"}],"version-history":[{"count":2,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/17264\/revisions"}],"predecessor-version":[{"id":28701,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/17264\/revisions\/28701"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/21615"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=17264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=17264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=17264"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=17264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}