{"id":18017,"date":"2019-05-15T16:07:12","date_gmt":"2019-05-15T16:07:12","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=18017"},"modified":"2026-01-12T11:30:15","modified_gmt":"2026-01-12T11:30:15","slug":"creating-mobile-charts-with-highcharts-react-native","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/integration\/creating-mobile-charts-with-highcharts-react-native\/","title":{"rendered":"Creating Mobile Charts with Highcharts & React Native"},"content":{"rendered":"

 
\n <\/p>\n

The React Native wrapper package is no longer actively maintained<\/b>.<\/div>\n

 <\/p>\n

In this tutorial, we will show you how to get started with the official Highcharts wrapper for React Native<\/a>. We will begin with setting up the environment, then jump to create a simple demo of Highcharts.<\/p>\n

Set up the environment<\/h4>\n

For this project, we will use Expo<\/a> App tool to create a simple app and focus only on the code.<\/p>\n

Installation<\/b><\/p>\n

Since the Expo App tool is used regularly, it is a good practice to install it globally. To do so, open the terminal and run the following command line with the option -g<\/code> for global: $npm install -g expo-cli<\/code><\/p>\n

To create our application \u201chcreact,\u201d run this command $expo init hcreact<\/code><\/p>\n

The previous command line creates a folder with a default project.
\nLet\u2019s run the project, as is, to be sure that everything is correctly set up before making changes to the project.
\nReturn to the terminal and run these commands:
\n$ cd hcreact\/<\/code>
\n$ npm start<\/code><\/p>\n

The npm start command will launch a server on port 19000, and you may test your app in a iOS \/ Android emulator or use your mobile phone.<\/p>\n

To learn more about expo, you go here<\/a>.<\/p>\n

\"\"<\/p>\n

Next step is to setup Highcharts React Wrapper. First, stop the running project on the terminal using Ctrl+c<\/code>, then run this command line to install the Highcharts React Native wrapper:<\/p>\n

$ npm install @highcharts\/highcharts-react-native<\/code><\/p>\n

Now, we are ready to add our own code.<\/p>\n

Highcharts chart<\/h4>\n

In the App.js file, import highcharts-react-native-official.<\/p>\n

import HighchartsReactNative from '@highcharts\/highcharts-react-native';<\/code><\/p>\n

A simple chart to start with is a line chart with the following data:[1, 3, 2]<\/code>. To achieve that, we need to create an object (options) then pass the data:<\/p>\n

this.state = {\r\n            chartOptions: {\r\n                series: [{\r\n                    data: [1, 3, 2]\r\n                }]\r\n            }\r\n        };<\/pre>\n
The last step is to initialize Highcharts.<\/p>\n
<HighchartsReactNative\r\n                    styles={styles.container}\r\n                    options={this.state.chartOptions}\r\n                    modules={modules}\r\n\/>\r\n<\/pre>\n
Code of App.js<\/b><\/p>\n
import React from 'react';\r\nimport {\r\n    StyleSheet,\r\n    View\r\n} from 'react-native';\r\nimport HighchartsReactNative from '@highcharts\/highcharts-react-native';\r\nexport default class App extends React.Component {\r\n    constructor(props) {\r\n        super(props);\r\n        this.state = {\r\n            chartOptions: {\r\n                series: [{\r\n                    data: [1, 3, 2]\r\n                }]\r\n            }\r\n        };\r\n    }\r\n    render() {\r\n        return (\r\n            <View>\r\n                <HighchartsReactNative\r\n                    styles={styles.container}\r\n                    options={this.state.chartOptions}\r\n                    modules={modules}\r\n                \/ >\r\n            <\/View >\r\n        );\r\n    }\r\n}\r\nconst styles = StyleSheet.create({\r\n    container: {\r\n        \/\/ height: 200,\r\n        \/\/ width: 200,\r\n        backgroundColor: '#fff',\r\n        justifyContent: 'center'\r\n    }\r\n});<\/pre>\n
\"\"<\/p>\n
That is it, now you know how to set up a project using Highchart wrapper React Native. Feel free to share your experience, questions and comments below.<\/p>\n","protected":false},"excerpt":{"rendered":"
Step by step tutorial to learn how to create Mobile Charts with Highcharts & React Native<\/p>\n","protected":false},"author":223,"featured_media":21421,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[1105],"tags":[1094],"coauthors":[737],"class_list":["post-18017","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integration","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/18017","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\/223"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=18017"}],"version-history":[{"count":2,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/18017\/revisions"}],"predecessor-version":[{"id":29199,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/18017\/revisions\/29199"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/21421"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=18017"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=18017"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=18017"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=18017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}