What config and options do I need for react-native-highcharts to make a highstock OHLC graph?

Question

I've been going through HighStock API to try and find which config and options I need to pass to the ChartView component in react-native-highcharts to draw my graph. I'm having a hard time finding what combination of config and options will get my desired result, things like series, dataGrouping, etc... . My data is a 2 dimensional array with 4 values for OHLC. My desired result is the photo at the top of this stackoverflow.

Here is my code so far.

class OHLC extends React.Component {

static navigationOptions = ({ navigation }) => ({
    title: "OHLC",
    headerLeft: (
        <TouchableOpacity
            style={NavStyles.headerButton}
            onPress={() => navigation.openDrawer()}>
            <Icon name="bars" size={20} />
        </TouchableOpacity>
    ),
})
render() {
    var Highcharts='Highcharts';
    var conf={
        title: {
            text: 'Stock Name'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150
        },
        yAxis: {
            title: {
                text: 'Price'
            },
            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: [{
            type: 'ohlc',
            name: 'AAPL Stock Price',
            data: (function () {
                let arrays = aExtractFromJson(data,'data', null,null);
                arrays = ohlcExtractor(arrays);
                return arrays;
                // look at toFixed method for number to limit decimal point
            }()),
            dataGrouping: {
                units: [[
                    'week', // unit name
                    [1] // allowed multiples
                ], [
                    'month',
                    [1, 2, 3, 4, 6]
                ]]
            }
        }]
    };

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

    return (
        <View>
            <ChartView style={{height:300}} config={conf} options={options} stock={true} ></ChartView>
            //To see if anything gets rendered.
            <Text>HELLO DAVID!</Text>
        </View>
    );
}

}

score 0 · Answer 1 · answered Jan 27 '20 at 07:03

After further research, I was able to find the config and options needed to create an OHLC Graph using the ChartView component in react-native-highcharts. I encountered some issues with rendering a blank screen so I added javaScriptEnabled={true} domStorageEnabled={true} originWhitelist={['']} to my ChartView.

In the config the essentials:

series with type: 'ohlc' and data: [[1,2,3,4],[2,3,4,5]] inside.

In options, no arguments are required, I left it as options='' in the ChartView.

Don't forget to add stock={true} in ChartView My code, basic example:

import React, {Component} from 'react';
import {View} from 'react-native';
import ChartView from 'react-native-highcharts';
class OHLC extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        var Highcharts='Highcharts';
        var conf={
            chart: {
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 10,
            },
            title: {
                text: 'Live random data'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150
            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                type: 'ohlc',
                name: 'Random data',
                /*Open, high,low,close values in a two dimensional array(two days)*/
                data: [[1,2,3,4],[2,3,4,5]],
            }]
        };

        return (
            <View style={{borderRadius: 4, marginTop: 30,}}>
                <ChartView style={{height:500}} config={conf} javaScriptEnabled={true} domStorageEnabled={true} originWhitelist={['']} stock={true} options=''></ChartView>
            </View>
        );
    }
}

What config and options do I need for react-native-highcharts to make a highstock OHLC graph?

1 Answers1