react-native-highcharts-wraped
v2.2.1
Published
Implementation of react-native-highcharts with scroll issue fixed for mobile devices, week number and ranges added for date formats and webView white screen onLoad fixed to have same background color as chart
Downloads
12
Maintainers
Readme
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:
- Highcharts for making the chart