tradingpal / react-native-highcharts Goto Github PK

📈 Add Highcharts charts to react-native app for IOS and Android

Home Page: https://github.com/TradingPal/react-native-highcharts

JavaScript 100.00%

react-native highcharts javascript charts ios android

react-native-highcharts's Introduction

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

react-native-highcharts's People

Contributors

Stargazers

Watchers

Forkers

magojiro infinity0106 tomerf8 okbody39 vincent-ren007 nkov adamonkey 635958997 shmck fangjuncheng phpsmarter jonrh atcjasonhzh bradparks vtoupet jinlonzhang nikkilovegod wuyangrui gusbueno duyphambhtech luisfmsouza praba1989 naing9 andoshin11 jkhedani hibbem arekkusuva ahvetskovich korob93 gucs miguelramosfdz wealthy shinichi52 nachojusticia huokedu ufolux long241191 cyberstackover msevestre novellizator amitstockpile hasyee jordaaash vodanh109 wonderchendd irbmfq hanselsen suveshagnihotri docccontrol takumibv martinchristov dmitrymironchenko tuanduongdn1504 rahmanmarija yptech max-zu jbelke gawema phamtuanchip jyapi nikenvy thevobos adacahq bernalang kosintop t0m0120 carlosmolano 2linziyi2 timelessgroup tcruz3009 r-bman goodylabs memelie san10694 deceive3w saeedzhiany polarcape mukeshsingh geekruchika socialdog-inc ikbalmoh deepyadav6094 taskdotio agtlucas kumargaurav-tudip auiii24 marcelopaula yali812 usmanfaisal60 pepe-ves victorrseloy jigs611989 yonatan-m-onoapps manohargunduboina-gep velugho-valentine chungw51993 prediktas okanisildar lissettebm smartcover-systems

react-native-highcharts's Issues

How to set transparent background?

I have a background with linear gradient on which I render a chart with white color. I was looking to make the background of chart transparent so that it syncs with the background.

I tried giving following:-

backgroundColor: "transparent"
backgroundColor: null"
backgroundColor: "rgba(255,255,255,0)"

But none of the above works and just gives me a white background.

Attaching image for reference.

Is the a bug or am I doing something wrong? On web similar configuration of high charts works as can be seen here

Update:

I was just trying to go through the code and I see following as the the style config

var styles = StyleSheet.create({
    full: {
        flex: 1,
        // background color is missing
    }
});

I tried installing using npm again but got the same old style config. Is the new version with these changes not updated on npm . Can someone please it check it once?

Zoomtype for pinch to zoom working

Does setting zoomtype for zooming in chart work for anybody or is it not supported in this library yet?

Cannot use Highcharts.setOptions

I am trying to set global Option to Highcharts
Highcharts.setOptions({ global: { useUTC: false } });

I get the following error: Highcharts.setOptions is not a function

What am I doing wrong

No datapoints on first time loading app

I am finding a weird issue where the first time I install my app on the device and view a chart, the chart shows no datapoints. The legend, title, and axis are all visible but no datapoints are visible. If I close and restart my app, then it works fine. Uninstalling and reinstalling my app will cause the issue to return on the first run until I close and restart the app.

Any ideas what could be the issue?

Webview show blank after build apk

I use Expo to deploy my app using this highchart. I can run it without any error when deployment, but after I build to apk file using Expo, the chart component is blank. I wonder if any <script> tag using url from https may be blocked when we run apk file

show charts

i use it on android,but i cant find chart on my app,it just blank,

In the Android emulator 4.1, html can not be resolved only show html characters

Package version confusion

Previous version was 1.0.1 but new version this morning is 0.2.1. Mistake?

not work?

/**

created by liuhanlin 07/02/2017
*/
'use strict'
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
ActivityIndicator
} from 'react-native';
import ChartView from 'react-native-highcharts';

export default class Dash extends Component {
constructor() {
super();
}
render() {
var Highcharts = 'Highcharts';
var conf = {
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},

        title: {
            text: 'Speedometer'
        },

        pane: {
            startAngle: -150,
            endAngle: 150,
            background: [{
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#FFF'],
                        [1, '#333']
                    ]
                },
                borderWidth: 0,
                outerRadius: '109%'
            }, {
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#333'],
                        [1, '#FFF']
                    ]
                },
                borderWidth: 1,
                outerRadius: '107%'
            }, {
                // default background
            }, {
                backgroundColor: '#DDD',
                borderWidth: 0,
                outerRadius: '105%',
                innerRadius: '103%'
            }]
        },

        // the value axis
        yAxis: {
            min: 0,
            max: 200,

            minorTickInterval: 'auto',
            minorTickWidth: 1,
            minorTickLength: 10,
            minorTickPosition: 'inside',
            minorTickColor: '#666',

            tickPixelInterval: 30,
            tickWidth: 2,
            tickPosition: 'inside',
            tickLength: 10,
            tickColor: '#666',
            labels: {
                step: 2,
                rotation: 'auto'
            },
            title: {
                text: 'km/h'
            },
            plotBands: [{
                from: 0,
                to: 120,
                color: '#55BF3B' // green
            }, {
                from: 120,
                to: 160,
                color: '#DDDF0D' // yellow
            }, {
                from: 160,
                to: 200,
                color: '#DF5353' // red
            }]
        },

        series: [{
            name: 'Speed',
            data: [80],
            tooltip: {
                valueSuffix: ' km/h'
            }
        }]

    };
    return (
        <ChartView style={{ height: 300 }} config={conf}></ChartView>
    );
}

}

The responsing speed of click event is very slow.

When the amount of series is large, clicking the legend item will get a slow response, especially on real device. Is there any way can improve the performance?

The font on ios is too small

on Android	on IOS

About last viewport commit and main file on package.json

Hi dude!,

Thanks for your last commit adding the viewport meta but there is a problem. The problem is that you only added this meta on App/index.js but your package.json define your react-native-highcharts.js as the main file and this file hasn't the meta tag.

Could you add the meta tag in the react-native-highcharts.js, please?
and can we disable the resize of the webview with user-scalable=0?

the meta would be:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Thanks a lot!

How do you add dynamic chart data (android)

Using the basic example provided in your README docs, I can't quite figure out how to add real life chart data; all I seem to get back is a blank screen. I've console logged the async request from axios and it's returning an object from highcharts, so I know that works. The only change in the render method is data: this.state.data and stock={true}

Here's what I have so far:

import React, {Component} from 'react';
import {View, Text, Platform} from 'react-native';
import ChartView from 'react-native-highcharts';
import axios from 'axios';

export default class StockCharts extends Component {
  constructor(props) {
    super(props);
    this.state = {data: null};
  }

  async componentDidMount() {
    let data = await axios.get('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?')
    this.setState({data: data})
  }

  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: this.state.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;
                  // }())
              }]
          };
      return (
        <ChartView style={{height:300}} config={conf} stock={true} ></ChartView>
      );
  }
}

the horizontal line , not work, help,

it is my first time to write the issues in github and also first time writing in english,,,

  .then((responseData) => {
        let data = JSON.parse(responseData.data).data,arrX = [],arrY = [], dataXY = [];
        data.forEach(function(v, i) {
           if (i > 0) {
              arrX.push(v[3]);
              arrY.push(v[5]);
              dataXY.push([v[3],v[5]])
           }
        })
        that.setState({
           dataX: arrX,
           dataY: arrY,
           dataXY: dataXY,
        })
     })

'this.state.dataX' and 'this.state.dataY' the the right data,

      chart: {
           type: 'bar',
           height: 3000,
        },
        xAxis: {
           categories: this.state.dataX,
        },
        yAxis: {
           title: {
               text: '数量'
           }
        },
        series: [
          {
              name: '提车数量',
              data: this.state.dataY, //[1,2,34,]
              dataLabels: {
                  enabled: true,
                  rotation: -90,
                  color: '#FFFFFF',
                  align: 'right',
                  format: '{point.y:.1f}', // one decimal
                  y: 10, // 10 pixels down from the top
                  style: {
                      fontSize: '13px',
                      fontFamily: 'Verdana, sans-serif'
                  }
              }
          },
        ],

but when i use the chartView con , I like that, i try to use 'this.state.dataY' to show the series[0].data, it not work, but data like this '[1,2,3,4]' , it work well, 'this.state.dataX' in xAxis.categories works well too,

so, I donot know how to update the datas when i get the responseDate from fetch,

Export the last version to npm

Is it possible to export the master version to npm registry?

I noticed that npm version is a way outdated.

Let me know if you need some help.

can't find tooltip

on the debug version,when i touch the point of line,it show tooltip, but on the release version,it can't show the tooltip when i touch the point of line, did i forgot something to add ?or what i should watch out,Do I need purchase any license for using it ?

Chart is scrolling while trying to select some values

I have my charted configured so I have crosshair enabled on xAxis and plotSeries like they wrote in the docs - jsfiddle below:
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-point-events-mouseover/

My problem is that if I try to point my finger over the chart it scrolls and highlights xAxis labels instead of displaying the label properly. What might be causing the scroll and how to fix it? I have been trying for a few hours with no results

Not working on real device

Hi,
I am evaluating react-native-highcharts. It works fine in emulator however its not working on real device. I tried with Samsung-Android.
Could you please suggest how to make it work on real device..

Best regards,
Puru

type is invalid

HI,

Much appreciation for what you've created since it will make my life easy on my project!

I'm probably missing something obvious in trying run a simple example but...

At display of my chart per your readme.md example I get this warning:

ExceptionsManager.js:73 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
Check your code at AVDaypart.js:115

My code to make the chart is below:

  myChart () {
    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;
            }())
        }]
    };

    return (
      <ChartView style={{height:300}} conf={conf}></ChartView> <--- line 115
    );

    //return (<Text style={styles.whiteText}>junk</Text>);
}

render () {
    return (
      <View style={{flex: 1}}>
        {this.myChart()}
      </View>
    )
  }
}

Line width issue

Post version 0.1.1 I am seeing a strange issue with line width.

I have following configuration for my chart

const DEFAULT_CHARTS_CONFIG = {
  "legend": {
    "enabled": false
  },
   "series": [
          {
            "data": slicedData,
            "enableMouseTracking": false,
            "lineWidth": 4
          }
  "plotOptions": {
    "series": {
      "marker": {
        "enabled": false
      }
    }
  },
  "xAxis": {
    "visible": false
  },
  "yAxis": {
    "visible": false
  },
  "title": {
    "text": null
  },
  "credits": {
    "enabled": false
  },
  "navigation": {
    "buttonOptions": {
      "enabled": false
    }
  }
};

In my application I have 4 tabs and I show graphs on my first tab which is my dashboard.

After signing in I land on dashboard. Here is a view of chart from dashboard:-

As you can see the lineWidth parameter is not getting applied as the chart looks really thin. Now, after sign in it takes few seconds to load dashboard, in between that time if i press another tab from tabview and then come back to dashboard, I see that line width is applied(surprising) and my graph looks something like this:-

This works fine in 0.1.1. in 0.1.1 the only issue I was facing was with backgroundColor: transparent. So for now I just added that to css and create my own common module to make it work.

I will try looking into this issue and if i find something I would create a PR but in the meantime if someone else has any insights on this, it would really help :)

Line chart is not correct size when using the chart component in a loop

Code

const items = [  
  {id: 1,chartData:[  
    {x: new Date().getTime() + 0*86400000, y: 1},  
    {x: new Date().getTime() + 1*86400000, y: 1},  
    {x: new Date().getTime() + 2*86400000, y: 1},  
    {x: new Date().getTime() + 4*86400000, y: 2},  
    {x: new Date().getTime() + 5*86400000, y: 2},  
    {x: new Date().getTime() + 6*86400000, y: 2},  
    {x: new Date().getTime() + 7*86400000, y: 3},  
    {x: new Date().getTime() + 8*86400000, y: 1},  
    {x: new Date().getTime() + 9*86400000, y: 3}  
  ]},  
  {id: 2,chartData:[  
    {x: new Date().getTime() + 0*86400000, y: 1},  
    {x: new Date().getTime() + 1*86400000, y: 1},  
    {x: new Date().getTime() + 2*86400000, y: 1},  
    {x: new Date().getTime() + 4*86400000, y: 2},  
    {x: new Date().getTime() + 5*86400000, y: 2},  
    {x: new Date().getTime() + 6*86400000, y: 2},  
    {x: new Date().getTime() + 7*86400000, y: 3},  
    {x: new Date().getTime() + 8*86400000, y: 1},  
    {x: new Date().getTime() + 9*86400000, y: 3}  
  ]},  
  {id: 3,chartData:[  
    {x: new Date().getTime() + 0*86400000, y: 1},  
    {x: new Date().getTime() + 1*86400000, y: 1},  
    {x: new Date().getTime() + 2*86400000, y: 1},  
    {x: new Date().getTime() + 4*86400000, y: 2},  
    {x: new Date().getTime() + 5*86400000, y: 2},  
    {x: new Date().getTime() + 6*86400000, y: 2},  
    {x: new Date().getTime() + 7*86400000, y: 3},  
    {x: new Date().getTime() + 8*86400000, y: 1},  
    {x: new Date().getTime() + 9*86400000, y: 3}  
  ]},  
]  

const ChartCard = ( {data} ) => {
  var Highcharts = 'Highcharts'
  const conf = {...} //Quoted from readme sample. but changed line color and point color 
  return <ChartView style={{height:80}} config={conf}></ChartView>
}

<View>
  {
    items.map(item => <ChartCard key={item.id} data={item.chartData} />)
  }
</View>

Result

Line chart is not correct size when using the chart component in a loop.
First chart size is too big. (or Is it only the first graph correct?)
Can I use this chart component correctly in a loop?
Please give me addvice.

No Charts to Show

I used “npm install react-native-highcharts --save” and Getting Start;
But there is no chart show on my app,it just return blank,
No ERR report;（I use WebStorm to compile the react-native project for android）
And when i move the mouse on the word "ChartView",the WebStorm tell me like this:

Default export is not declared in imported module

AND THERE IS MY CODE BELOW：
'use strict';

import React, {Component} from 'react'
import ChartView from 'react-native-highcharts';

export default class Hcharts extends Component {
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;
            }())
        }]
    };
    return (
        <ChartView style={{height: 300}} config={conf} />
    );
}

}

Implementing HighStock example

I'm trying to implement the HighCharts demo at:
https://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/

In this example there are 2 series of data, styling is a bit different

I'm using a local data file.

I'm getting a blank screen

Can't access this.props in load

render(){
            let conf={
                chart: {
                    type: 'spline',
                    animation: Highcharts.svg, // don't animate in old IE
                    marginRight: 10,
                    events: {
                        load:function(){
                            var series = this.series[0];
                            setInterval(() =>{
                                var x = new Date().getTime() // current time
                                y = this.props.y
                                series.addPoint([x,y], true, true);
                            }, 900);
                        }
                    }
                },
                title: {
                    text: 'Live random data'
                }
}
}

Cant access this.props.y in load function and I cant even access constructor variable.
Thanks for the help in advance.

Commercial application with Highcharts

Do I need purchase any license for using react-native-highcharts in my application which I develop for both iOS and Android devices?

Column events not firing

Thanks for your work on this. Very helpful!

In the code below I can't get the console.log events to fire.

` // Configure the HighCharts chart
barChart (title) {

// Populate data for bars, color as indicated
let data = new Array()
var i, c
for (i=0; i<24; i++) {
  var r = Math.random()
  var val = 8 + (r * 2)
  if (val > 9.4) {
    c = '#4283BE' // Good
  } else if (val > 9.0) {
    c = '#FDA555' // Ok
  } else {
    c = '#F80207' // Bad
  }
  data.push({y: val, color: c})
}

var categories = [
    '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12',
    '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '23'
]


// Required line if using Highcharts methods below
//let Highcharts='Highcharts';


let conf={
    chart: {
        type: 'column',
        backgroundColor: '#000000'
    },
    title: {
      text: title,
      style: {
        color: Colors.snow
      }
    },
    exporting: {
      buttons: {
          contextButton: {
            enabled: false
          }
      }
    },

    credits: false,

    xAxis: {
        categories: categories,
        labels: {
          style: {
            color: '#FFFFFF'
          }
        }
    },
    yAxis: {
        min: 0,
        max: 10,
        visible: false
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0,
        },
        series: {
          cursor: 'pointer',
          point: {
            events: {
              click: (o) => {
                console.log(o)
                console.log("It's alive!")
              }
            }
          }

        }
    },

    series: [
      {
        name: title,
        data: data,
        showInLegend: false,
        style: {
          color: '#ffffff'
        },
        pointWidth: 12,
      }
    ]
};

return (
  <ChartView style={{flex:1}} config={conf}></ChartView>
);

}
`

Allow import of highcharts and jquery from local assets

Feature: I'm not positive but I think the initial use of a chart requires a time-consuming http request for highcharts.js and jquery.js. I'm guessing load time would be reduced if the scripts can be loaded locally. Perhaps props could be used to pass in the local urls for Android and IOS

How to pass a parameter to Load() function on events in chart part of the config?

Hello All,

Based on a passed parameter I need to take different action in the load function in events. How do I do that? It seems I cannot access any passed parameter in the load function. Has anyone done this before?

Thanks,
Farshid

Here is my code , events is part of the config.chart that is being passed to ChartView.

I would greatly appreciate your help.

type:this.props.chartType,
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
shadow:true,
zoomType:"xy",
pinchType:"xy",
spacingTop: 10,
panning:true,
events: {

                load: function() {
                  
                     if(passParamterHereToChartView == false) {
                        for (var i = 0; i < this.series.length; i++) {
                            if (i == 0) {
                                var series = this.series[i];
                                if (series != null) {
                                        series.show();
                                }
                            } else {
                                var series = this.series[i];
                                if (series != null) {
                                    series.hide();
                                }
                            }
                        }
                     }

                }
            }

does not work with android release apk

Has anyone been able to get the webview to render on an android release apk? It only works in debug mode for me :(

Implement synchronized chart in React Native

Hello.

Please check this: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/synchronized-charts/

I wanna make chart works like this.
The only problem is I cannot use jquery in React Native.
Is there anyway to use the synchronized chart?

How do I access Highcharts functions from other components

Hello all,

I wanted to know if I can control specific functions within the Highcharts object, such as series visibility and adding a series from buttons/components outside the Highcharts component.

An example of what I am trying would be an external legend with toggle functionality to hide and show certain series.

Thanks!

index.js

Hi,
I am new to programming world. So had a question. Is index.js created when we do npm install or is it required for us to write the entire code the way you have written it.

-- Thanks

Expo compatibility

Hi - I really struggled to get this to install and work with Expo - so I created a very simple Webview oriented app that seems to work well.

https://github.com/BenjaminWatts/react-native-highchart-webview

Comments much appreciated!

Testing with WKWebview

Have you considered trying this in https://github.com/CRAlpha/react-native-wkwebview

It should provide a lot better performance

Unexpected token error with latest build.

Hi, I was using react-native-chart-view for some time on an app I've been developing for a few months now. A problem came up when I tried to do a release build, the charts would not show up and I saw in your closed issues list, that was a previous problem. So I updated to react-native-highcharts, latest version. I am also on React-Native build 0.42, but my app fails immediately with this error:

This happens immediately when the App runs. I do not believe it to be my config, although my config does contain a function (but it comes from an outside source, the function must remain in).

Any help?

Tooltip not visible

When i see on simulator, i am able to see tooltip as expected on cursor click. But when with same build on device i touch , pint gets highlighted but does not show any tooltip.

Chart sizing is completely different on iOS vs Android

On any iOS device simulator, the chart text and axis are all very very tiny (no real device to test on). The chart with the exact same code and data looks fine on any Android I try. The first picture is on an iPhone 7 (simulator) and second screenshot is on a Galaxy S6.

Has anybody else run into this issue? Any ideas how to fix it? I could not find a scaling option.

Chart rendering different each time

On first load of my application the chart will render at the correct view. However if i refresh the app it will render weird and almost like its zoomed in... happens on simulator and real device. Please help!!

how to add gradient for the sections in pie chart

Getting undefined for the Highcharts.Color
colors:
{
radialGradient: {cx: 0.5, cy: 0.3, r: 0.7},
stops: [
[0, globals.legendColor],
[1, Highcharts.Color(globals.legendColor).brighten(-0.3).get('rgb')]
]
}

Two or more Charts not intelligible

Hello All,

First of all, kudos to you all, great job on this module, it really makes life easy for the react-native community. Thanks a lot.

I was using the very old version of your code (0.1.1) but then I learned that a newer version supports the highchart-more and I switched to version 1.0.1. The issue I am facing is that when I have more than one series the charts and labels become so thin that they are not intelligible. I have attached two pictures one shows the charts with older version and one with the newer version. Is there a setting that I need to use ? Please see the pictures. Thanks. Farshid

How to use `highcharts-more`

It's not obvious how to include and require the highcharts-more package to be used with react-native-highcharts. Is it possible to add some instructions on how to do so?

0 length array not handled correctly by flattenText

Error can be seen running the following javascript

var flattenObject = function (obj, str='{') {
    Object.keys(obj).forEach(function(key) {
        str += `${key}: ${flattenText(obj[key])}, `
    })
    return `${str.slice(0, str.length - 2)}}`
};

var flattenText = function(item) {
    var str = ''
    if (item && typeof item === 'object' && item.length == undefined) {
        str += flattenObject(item)
    } else if (item && typeof item === 'object' && item.length !== undefined) {
        str += '['
        item.forEach(function(k2) {
            str += `${flattenText(k2)}, `
        })
        str = str.slice(0, str.length - 2)
        str += ']'
    } else if(typeof item === 'string' && item.slice(0, 8) === 'function') {
        str += `${item}`
    } else if(typeof item === 'string') {
        str += `\"${item.replace(/"/g, '\\"')}\"`
    } else {
        str += `${item}`
    }
    return str
};

var testJson = {
  happyJsonArray: ['one', 'deux', 'tres'],
  incorrectlyHandledJsonArray: []
};

console.log(flattenText(testJson));
// VM207:34 {happyJsonArray: ["one", "deux", "tres"], incorrectlyHandledJsonArray: ]}

Is there a reason y'all use flattenText() & flattenObject() instead of just keeping config from JSON.stringify?

Support for range series

Range series needs to load additional highcharts-more.js per: https://www.highcharts.com/docs/chart-and-series-types/range-series

Code cleanup

Hi there, thanks for the library.
I noticed that the code of the lib can be simplified/cleaned up a lot, if you're interested here is a solution similar to the one I adopted in my current project (I used Flowtype in my project, so I stripped it from this example).
Let me know if you're interested in a PR.

// ./index.js
import React, { Component, PropTypes } from 'react';
import { StyleSheet, WebView, Dimensions } from 'react-native';
import { flattenObject } from './utils';
import html from './page.html';

const DEVICE_HEIGHT = Dimensions.get('window').height;
const DEVICE_WIDTH = Dimensions.get('window').width;

export default class ReactNativeHighcharts extends Component {
  static propTypes = {
    configuration: PropTypes.object.isRequired,
    style: PropTypes.any,
  };

  state = {
    visible: true,
    height: DEVICE_HEIGHT,
    width: DEVICE_WIDTH,
  };

  // Used to resize on orientation of display
  _reRenderWebView = e => {
    this.setState({
      height: e.nativeEvent.layout.height,
      width: e.nativeEvent.layout.width,
    });
  };

  // Created the javascript that will be injected in the webview
  _createInjectedJavascript = configuration => {
    const stringConfiguration = JSON.stringify(configuration, (key, value) => {
      return typeof value === 'function' ? value.toString() : value;
    });
    const parsedConfiguration = JSON.parse(stringConfiguration);
    const injectedJavascript = `
      var chart = Highcharts.chart('container', ${flattenObject(parsedConfiguration)});
      chart.reflow();
      setTimeout(function() {chart.reflow()}, 0);
      setTimeout(function() {chart.reflow()}, 100);
    `;
    return injectedJavascript;
  };

  render() {
    const { configuration, style, ...otherProps } = this.props;
    return (
      <WebView
        onLayout={this._reRenderWebView}
        style={[styles.webView, style]}
        source={html}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        scalesPageToFit={false}
        scrollEnabled={false}
        automaticallyAdjustContentInsets={false}
        injectedJavaScript={this._createInjectedJavascript(configuration)}
        {...otherProps}
      />
    );
  }
}

const styles = StyleSheet.create({
  webView: {
    flex: 1,
    backgroundColor: 'transparent',
  },
});

// ./utils.js
export const flattenObject = (obj: Object, str: string = '{') => {
  Object.keys(obj).forEach(function(key) {
    str += `${key}: ${flattenText(obj[key])}, `;
  });
  return `${str.slice(0, str.length - 2)}}`;
};

const flattenText = (item: any) => {
  var str = '';
  if (typeof item === 'object' && item.length == undefined) {
    str += flattenObject(item);
  } else if (typeof item === 'object' && item.length !== undefined) {
    str += '[';
    item.forEach(function(k2) {
      str += `${flattenText(k2)}, `;
    });
    str = str.slice(0, str.length - 2);
    str += ']';
  } else if (typeof item === 'string' && item.slice(0, 8) === 'function') {
    str += `${item}`;
  } else if (typeof item === 'string') {
    str += `\"${item.replace(/"/g, '\\"')}\"`;
  } else {
    str += `${item}`;
  }
  return str;
};

export default {
  flattenObject,
};

<!-- ./html -->
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style media="screen" type="text/css">
      html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
      #container {
        width:100%;
        height:100%;
        top:0;
        left:0;
        right:0;
        bottom:0;
        position:absolute;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
  </body>
</html>

Add bubble up of highcharts events to react-native level

It would be great to be able to receive events in React-Native via a bridge such as is found with react-native-webview-bridge. For example if I have a column chart, I'd like to be able to define an event for onPress for the data series and have the event be detectable at the app level.

Chart 3d view

I used following code to view the 3d chart in mobile but it's not working. Can anyone help me..
options3d: {
enabled: true,
alpha: 15,
beta: 10,
depth: 50,
viewDistance: 15
}

Thanks in advance,

Use downloaded libraries instead of online libraries

When I inspect code of react-native-chartView.js, I saw that we use online libraries

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

that make the rendering slower. I'm not sure that are they cache or not, but the render delay 1s.

Can we use local libraries instead of online?