🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

This is a react native component that uses highchart where you send the configuration as a prop and the chart is created with a WebView.

Chart_Graph React Native

Documentation

React-Native Highcharts

This is a react-native component for IOS and Android that uses Highcharts where you send the configuration as a prop and the chart is rendered within a WebView

Getting Started

npm install react-native-highcharts --save

Demo

Basic example

REMEMBER to declare the variable Highcharts='Highcharts'

import ChartView from 'react-native-highcharts'; ... render() {     var Highcharts='Highcharts';     var conf={             chart: {                 type: 'spline',                 animation: Highcharts.svg, // don't animate in old IE                 marginRight: 10,                 events: {                     load: function () {                          // set up the updating of the chart each second                         var series = this.series[0];                         setInterval(function () {                             var x = (new Date()).getTime(), // current time                                 y = Math.random();                             series.addPoint([x, y], true, true);                         }, 1000);                     }                 }             },             title: {                 text: 'Live random data'             },             xAxis: {                 type: 'datetime',                 tickPixelInterval: 150             },             yAxis: {                 title: {                     text: 'Value'                 },                 plotLines: [{                     value: 0,                     width: 1,                     color: '#808080'                 }]             },             tooltip: {                 formatter: function () {                     return '<b>' + this.series.name + '</b><br/>' +                         Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +                         Highcharts.numberFormat(this.y, 2);                 }             },             legend: {                 enabled: false             },             exporting: {                 enabled: false             },             series: [{                 name: 'Random data',                 data: (function () {                     // generate an array of random data                     var data = [],                         time = (new Date()).getTime(),                         i;                      for (i = -19; i <= 0; i += 1) {                         data.push({                             x: time + i * 1000,                             y: Math.random()                         });                     }                     return data;                 }())             }]         };      const options = {         global: {             useUTC: false         },         lang: {             decimalPoint: ',',             thousandsSep: '.'         }     };      return (       <ChartView style={{height:300}} config={conf} options={options}></ChartView>     ); }

Props

Prop Required Description
config true Highcharts configuration See the docs.>>
stock false Default false; use Highstock
more false Default false; use Highstock-more
heatMap false Default false; use HeatMap
style false Style object to be passed onto the WebView
options false Pass global and lang options from Highcharts
guage false Import gauge library from highcharts

props added to WebView

NOTE

if not rendering in real device add this two props to the component

javaScriptEnabled={true} domStorageEnabled={true}

Stuff used to make this:


You May Also Like