All Projects → TradingPal → React Native Highcharts

TradingPal / React Native Highcharts

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Native Highcharts

scalajs-highcharts
Scala.js static typed facades for Highcharts library
Stars: ✭ 30 (-87.85%)
Mutual labels:  charts, highcharts
Chartkick
Create beautiful JavaScript charts with one line of Ruby
Stars: ✭ 5,903 (+2289.88%)
Mutual labels:  charts, highcharts
React Jsx Highcharts
Highcharts built with proper React components
Stars: ✭ 336 (+36.03%)
Mutual labels:  charts, highcharts
Chartkick.py
Create beautiful Javascript charts with minimal code
Stars: ✭ 695 (+181.38%)
Mutual labels:  charts, highcharts
Aachartcore
📈📊☕️☕️☕️An elegant modern declarative data visualization chart framework for Android. Extremely powerful, supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types.极其精美而又强大的 Android 数据可视化图表框架,支持柱状图、条形图、折线图、曲线图、折线填充图、曲线填充图、气泡图、扇形图、环形图、散点图、雷达图、混合图等各种类型的多达几十种的信息图图表,完全满足工作所需.
Stars: ✭ 424 (+71.66%)
Mutual labels:  charts, highcharts
Highcharts Ng
AngularJS directive for Highcharts
Stars: ✭ 1,741 (+604.86%)
Mutual labels:  charts, highcharts
Helmfiles
Comprehensive Distribution of Helmfiles for Kubernetes
Stars: ✭ 205 (-17%)
Mutual labels:  charts
Angular Material Dashboard
Angular Material Dasshboard using Angular Material, highcharts and flexbox
Stars: ✭ 227 (-8.1%)
Mutual labels:  highcharts
Squid
A Ruby library to plot charts in PDF files
Stars: ✭ 205 (-17%)
Mutual labels:  charts
Angular Highcharts
Highcharts directive for Angular
Stars: ✭ 202 (-18.22%)
Mutual labels:  highcharts
Covid 19
📈 Coronavirus (COVID-19) dashboard to show the dynamics of Сoronavirus distribution per country
Stars: ✭ 245 (-0.81%)
Mutual labels:  charts
Charts.css
Open source CSS framework for data visualization.
Stars: ✭ 4,595 (+1760.32%)
Mutual labels:  charts
Bitcoin Chart Cli
Bitcoin chart for the terminal as command line util
Stars: ✭ 221 (-10.53%)
Mutual labels:  charts
Angular Chartist.js
Angular directive for Chartist.js
Stars: ✭ 206 (-16.6%)
Mutual labels:  charts
Cedar
JavaScript Charts for ArcGIS
Stars: ✭ 230 (-6.88%)
Mutual labels:  charts
React Financial Charts
Charts dedicated to finance.
Stars: ✭ 201 (-18.62%)
Mutual labels:  charts
Kubernetic
Kubernetic - Supercharge your Kubernetes clusters
Stars: ✭ 243 (-1.62%)
Mutual labels:  charts
Chartmuseum
Host your own Helm Chart Repository
Stars: ✭ 2,650 (+972.87%)
Mutual labels:  charts
Reaviz
📊 Data visualization library for React based on D3
Stars: ✭ 215 (-12.96%)
Mutual labels:  charts
Expenso Ios
A Simple Expense Tracker App built to demonstrate the use of SwiftUI, CoreData, Charts, Biometrics (Face & Touch ID) and MVVM Architecture.
Stars: ✭ 191 (-22.67%)
Mutual labels:  charts

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:

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].