highcharts-react-native

Thank's to TradingPal but got blanck screen on our project.

📊Implementation of Highcharts in React Native via WebView API.

Instalation

npm i -S highcharts-react-native

Usage

import React from 'react';
import HighchartsWebView from 'highcharts-react-native';

export default class App extends React.PureComponent {
  render() {
    const configuration = {
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },
      series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
      }],
    };

    return (
      <HighchartsWebView
        style={{ height: 300 }}
        config={configuration} />
    );
  }
}

Props

| Name | Required | Type | | ------------- | ------------- | ------------- | | config | true | Object| | options | false | Object| | style | false | Object | | debug | false | boolean |

Known issues

Blanck screen :

• Why did that happens ?

Blank screen appears when injected Javascript is invalid. Usually due to new Javascript features not supported by JSON.stringify, also due to babel compiler.

• How to solve this ?
  • Code directly into ES5.
  • Put your code into string.
  • Add the 'debug' prop (the debug's prop allow you to know how injected JS looks like, if previous steps resolve blank screen, remove it).
• Example :

Before

const configuration = {
  tooltip: {
    formatter() {
      return `
        <table style="width:100px;">
          <tr><td style="color:#bc9c69;">
            $${Math.round(this.y)}
          </td></tr>
          <tr><td style="text-align:center;color:#bc9c69;">
          ${Highcharts.dateFormat('%y/%m/%d', this.x)}
          </td></tr>
        </table>
      `;
    },
    positioner(a, b, point) {
      return {
        y: 0,
        x: point.plotX,
      };
    },
  },
  // ...
};

After

const my_variable = 'something';
const configuration = `{
  tooltip: {
    formatter: function() {
      return (
        '<table style="width:100px;">'
        + '<tr><td style="color:#bc9c69;">'
        + '$' + Math.round(this.y)
        + '</td></tr>'
        + '<tr><td style="text-align:center;color:#bc9c69;">'
        + Highcharts.dateFormat('%y/%m/%d', this.x)
        + '</td></tr>'
        + '</table>'
      );
    },
    positioner: function (a, b, point) {
      return {
        y: 0,
        x: point.plotX,
      };
    },
  },
  // ...
}`;