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'
;... { var Highcharts='Highcharts'; var conf= chart: type: 'spline' animation: Highchartssvg // don't animate in old IE marginRight: 10 events: { // set up the updating of the chart each second var series = thisseries0; ; } title: text: 'Live random data' xAxis: type: 'datetime' tickPixelInterval: 150 yAxis: title: text: 'Value' plotLines: value: 0 width: 1 color: '#808080' tooltip: { return '<b>' + thisseriesname + '</b><br/>' + Highcharts + '<br/>' + Highcharts; } legend: enabled: false exporting: enabled: false series: name: 'Random data' data: { // generate an array of random data var data = time = i; for i = -19; i <= 0; i += 1 data; 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=truedomStorageEnabled=true
Stuff used to make this:
- Highcharts for making the chart