{"id":16329,"date":"2018-04-11T13:01:52","date_gmt":"2018-04-11T13:01:52","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=16329"},"modified":"2026-01-12T09:49:42","modified_gmt":"2026-01-12T09:49:42","slug":"highcharts-react-wrapper","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/integration\/highcharts-react-wrapper\/","title":{"rendered":"Highcharts React Wrapper"},"content":{"rendered":"

 <\/p>\n

I like React<\/a>. It is a simple and powerful JavaScript library for building user interfaces. It offers many advantages such as fast dynamic web pages (thanks to the virtual DOM), reusable components, easy to write with JSX, etc.<\/p>\n

Given how many Highcharts users are also React users, we decided to create a Highcharts React wrapper<\/a> to make developers\u2019 lives even easier.<\/p>\n

Here is a short tutorial on how it works!<\/p>\n

This tutorial has two sections. In the first section, I will set up the demo and run it, and then I will explain how the demo\u2019s code works.<\/p>\n

Remark<\/b><\/i><\/p>\n

Basic knowledge of NodeJS<\/strong> and ES6<\/strong> is recommended to follow along.<\/em><\/p>\n

 <\/p>\n

Part 1. Setting up the demo<\/h2>\n

The first thing to do is to create a folder to save the demo, e.g., I created HighchartsReactDemo<\/i>, then clone or download the demo from this Github link<\/a> and save it to the folder created earlier. Navigate to your folder (e.g., HighchartsReactDemo<\/i>), and write the following command to install the dependencies:<\/p>\n

npm install<\/code><\/p>\n

\"picture<\/p>\n

Use this command to build the demo<\/p>\n

npm run build-demo<\/code><\/p>\n

\"command<\/p>\n

Now, it is time to see the result. Go to the demo folder, then click on the index.html<\/code>.<\/p>\n

\"Folder<\/p>\n

The result should be as shown in this GIF:<\/p>\n

\"highcharts<\/p>\n

Part 2. Explanations<\/h2>\n

The main file that you have to care about is the demo.jsx under the folder demo.<\/p>\n

The first section of the file is to import react and the highcharts library:<\/p>\n

import React from 'react'\r\nimport { render } from 'react-dom'\r\nimport Highcharts from 'highcharts\/highstock'\r\nimport HighchartsReact from 'highcharts-react'<\/pre>\n
The second section holds the main options of the charts, such as the title, data set, etc.<\/p>\n
const options = {\r\n  title: {\r\n    text: 'My stock chart'\r\n  },\r\n    \r\n  series: [{\r\n    data: [[Date.UTC(2013,5,2),0.7695],\r\n[Date.UTC(2013,5,3),0.7648],\r\n...\r\n[Date.UTC(2013,5,24),0.7623],]\r\n  }]\r\n}<\/pre>\n
And finally, I use a container and the API to wrap the chart:<\/p>\n
const App = () => <div>\r\n   <HighchartsReact\r\n    highcharts={Highcharts}\r\n    constructorType={'stockChart'}\r\n    options={options}\r\n  \/>\r\n<\/div><\/pre>\n
That is it! Now you know how to use Highcharts React wrapper \ud83d\ude42<\/p>\n
If you have any questions or you want more details, feel free to share it in the comments below.<\/p>\n","protected":false},"excerpt":{"rendered":"
Learn how to use Highcharts React Wrapper to create interactive charts in this step by step tutorial.<\/p>\n","protected":false},"author":32,"featured_media":21952,"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-16329","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\/16329","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=16329"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/16329\/revisions"}],"predecessor-version":[{"id":29126,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/16329\/revisions\/29126"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/21952"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=16329"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=16329"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=16329"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=16329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}