Ed-highcharts-pro NPM

React-Native Highcharts Pro

Este é um componente nativo do React para IOS e Android que utiliza Highcharts onde você envia a configuração como um prop e o gráfico é renderizado dentro de uma WebView.

Começando

npm install ed-highcharts-pro --save

Exemplo básico

LEMBRAR Para declarar a variável: Highcharts='Highcharts'

import EDChartView from 'ed-highcharts-pro';
...
render() {
    var Highcharts='Highcharts';
    var conf={
            chart: {
                type: 'bar', //tipo de gráfico utilizado,
                animation: Highcharts.svg, 
                marginRight: 10,
                events: {
                    load: function () {

                        var series = this.series[0];
                        setInterval(function () {
                            var x = (new Date()).getTime(), 
                                y = Math.random();
                            series.addPoint([x, y], true, true);
                        }, 1000);
                    }
                }
            },
            title: {
                text: 'Dados aleatórios por segundo'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150
            },
            yAxis: {
                title: {
                    text: 'Valor'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#0000A0'
                }]
            },
            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: 'Dados aleatórios',
                data: (function () {
                    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 (
      <EDChartView style={{height: 300}} config={conf} options={options}></EDChartView>
    );
}

NOTA

Se não renderizar no dispositivo real, adicione este dois props ao componente

javaScriptEnabled={true}
domStorageEnabled={true}

Exemplo de Gráfico em 3D

import EDChartView from 'ed-highcharts-pro';
...
render() {
    var conf={
        chart: {
            type: 'column',
            options3d: {
                enabled: true,
                alpha: 30, // configure o alpha
                beta: 0, // configure o beta
                depth: 100, // configure o depth
                viewDistance: 25 // configure a distancia
            }
        },
        
        plotOptions: {
            series: {
                states: {
                    inactive: {
                        opacity: 1 // evita a mudança de opacidade ao clicar em outra barra
                    }
                }
            }
        },
    
        credits: {
            enabled: false // desabilita link
        },
    
        title: {
            text: 'Gráfico em 3D' // título do gráfico
        },
    
        xAxis: {
            categories: ['JAN', 'FEV', 'MAR', 'ABR', 'MAI', 'JUN', 'JUL', 'AGO', 'SET', 'OUT', 'NOV', 'DEZ'], // eixo X
        },

        yAxis: {
            title: {
                useHTML: true,
                text: '<b>Unidades em $</b>' // unidade lateral do gráfico no eixo Y
            }
        },

        navigation: {
            buttonOptions: {
                enabled: false // desabilita botões de navegação
            }
        },

        colors: 
            ['#BFBC04', '#67C708', '#088EC7', '#B36014'] // cores das barras e da linha
        , 

        tooltip: {
            headerFormat: '' // remove o cabeçalho do tooltip
        },
    
        series: [{
            type: 'column',
            name: 'Euros',
            data: [1, 5, 10, 15, 20, 25, 30, 30.5, 40, 40.5, 50, 100], // valores da primeira barra
            marker: {
                enabled: false, //desabilita a marcação nos pontos do tooltip
            },
            tooltip: {
                pointFormatter: function() {
                    return '<b>€ ' + this.y + '</b>'; // formação do tooltip
                }
            }
        }, {
            type: 'column',
            name: 'Dólares',
            data: [1.9, 5.46, 10.92, 16.39, 21.85, 27.31, 32.77, 33.32, 43.70, 44.24, 54.62, 109.24], // valores da segunda barra
            marker: {
                enabled: false, //desabilita a marcação nos pontos do tooltip
            },
            tooltip: {
                pointFormatter: function() {
                    return '<b>U$ ' + this.y + '</b>'; // formatação do tooltip
                }
            }
        }, {
            type: 'column',
            name: 'Reais',
            data: [4.55, 22.75, 45.49, 68.24, 90.98, 113.73, 136.47, 138.75, 181.96, 184.24, 227.46, 454.91], // valores da terceira barra
            marker: {
                enabled: false, //desabilita a marcação nos pontos do tooltip
            },
            tooltip: {
                pointFormatter: function() {
                    return '<b>R$ ' + this.y + '</b>'; // formatação do tooltip
                }
            }
        }, {
            type: 'line',
            name: 'Gastos',
            data: [50, 59, 60, 62, 65, 70, 10, 26, 45, 45, 90, 120], // valores da linha
            marker: {
                enabled: false, //desabilita a marcação nos pontos do tooltip
            },
            tooltip: {
                pointFormatter: function() {
                    return '<b>Limite de gastos: ' + this.y + '</b>'; // formatação do tooltip
                }
            }
        }]
    };

    const options = {
        global: {
            useUTC: false
        },
        lang: {
            decimalPoint: ',',
            thousandsSep: '.'
        }
    };

    return (
      <EDChartView style={{height: 400}} config={conf} options={options}></EDChartView>
    );
}