Is it possible to load tooltip with external data with React-Native-HighCharts?

Question

Good Morning,

Is it possible to read an external variable containing a list within the settings of a HighCharts chart for React-Native?

I'm using the component: "react-native-highcharts".

My code:

import ChartView from 'react-native-highcharts';

render() {

    this.state.dadosApi = [10, 10, 1, 3, 4, 6, 5, 7, 18, 19, 2, 13];

    var exData = ['2h 30m','1h 30m','4h 30m','5h 30m','6h 30m','4h 30m','1h 30m','7h 30m','15h 30m','2h 13m','12h 30m','00h 30m'];

    var Highcharts='Highcharts';
    var conf={
        chart: {
            type: 'line',
            animation: Highcharts.svg,
            marginRight: 10,
            tooltipArr: exData,
        },
        yAxis: {
            title: {
                useHTML: true,
                text: null, 
            },
        },
        navigation: {
            buttonOptions: {
                enabled: false
            }
        },
        colors: 
            ['#DA6AFF']
        ,
        title: {
            text: null
        },
        xAxis: {
            categories: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'], 
        },
        credits: {
            enabled: false
        },
        series: [{
            type: 'line',
            name: 'Linha 1',
            data: this.state.dadosApi,
            marker: {
            enabled: false,
            },
            tooltip: {
                pointFormatter: function() {
                    var toolTip = this.series.chart.options.chart.tooltipArr;
                    return toolTip[this.x];
                }
            }
        }

        tooltip: 
        {
            headerFormat: '',
        }

    };

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


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

The variable "exData" is coming as "undefined". So I can not load in the "tooltip" the value of the hours of each point in the graph.

Is there any way to do this?

I need to load Tooltip values from another list. I load the line with the values from list1. But when I click on the line I want to open a tooltip containing not the value of "line1" but the corresponding value in "list2".

Example: If I click on the "4" position, the value of the line is "6", but I want to show in the tooltip the text of "list2" that is equal to "Test 4".

But the setting says that the value of list2 is empty. How should I proceed to create tooltip this way?

javascript
const tooltips = ['Teste 1','Teste 2','Teste 3','Teste 4','Teste 5','Teste 6','Teste 7','Teste 8','Teste 9','Teste 10','Teste 11','Teste 12'];

        var conf = {
            chart: {
                type: 'spline',
            },
            title: {
                text: 'Live random data'
            },
            tooltip: {
                formatter: function () {
                    return this.y > 0 ? this.series.name : tooltips[0];
                }
            },
            navigation: {
                buttonOptions: {
                    enabled: false
                }
            },
            colors: 
                ['#DA6AFF']
            ,
            title: {
                text: null
            },
            xAxis: {
                categories: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'] 
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Random data',
                data: this.state.dataAcionamentos, 
                marker: {
                    enabled: false,
                },
            }]
        };

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

Answer 1

I got it!

My solution just for contribution.

First I create my 2 arrays for the two Series:

for (i in myObj) {

    var Label1 = 'Teste 1';
    valueP = myObj[i].value;

    dataList1.push({
        name: Label1,
        y: ValueP
    });

    valueAux1 = myObj[i].value;
    valueAux2 = myObj[i].unit;

    dataList2.push({
        name: valueAux2,
        y: valueAux1
    });
}

The results:

dataList1 = 
[
    { name: 'Teste 1', y: 61.41 },
    { name: 'Teste 1', y: 51.35 },
    { name: 'Teste 1', y: 41.00 },
    { name: 'Teste 1', y: 31.29 },
    { name: 'Teste 1', y: 21.23 },
    { name: 'Teste 1', y: 11.16 },
    { name: 'Teste 1', y: 16.19 },
    { name: 'Teste 1', y: 26.87 },
    { name: 'Teste 1', y: 36.65 },
    { name: 'Teste 1', y: 31.44 },
]

dataList2 = 
[
    { name: '1h', y: 61.41 },
    { name: '2h 30m', y: 41.35 },
    { name: '2h 30m', y: 51.00 },
    { name: '22h 30m', y: 36.29 },
    { name: '4h 30m', y: 31.23 },
    { name: '12h 30m', y: 21.16 },
    { name: '4h 30m', y: 18.19 },
    { name: '6h 30m', y: 46.87 },
    { name: '7h 30m', y: 37.65 },
    { name: '9h 30m', y: 30.44 },
]

So I load the graph configuration:

var conf = {
    chart: {
        type: 'column',
    },
    title: {
        text: null
    },
    navigation: {
        buttonOptions: {
            enabled: false
        }
    },
    colors: 
        ['#DA6AFF', 'rgb(76, 43, 228)']
    ,
    title: {
        text: null
    },
    yAxis: {
        title: {
            useHTML: true,
            text: null
        }
    },
    xAxis: {
        categories: [1, 2, 3, 4, 5, 6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]
    },
    credits: {
        enabled: false
    },
    series: [{
        type: 'column', 
        name: 'Bar Chart',
        data: dataList1, 
        marker: {
            enabled: false,
        },
        tooltip: {
            pointFormat: '<b>{this.series.data.y}</b>'
        },
    },{
        type: 'line', 
        name: 'Line 1',
        data: dataList2, 
        marker: {
            enabled: false,
        },
        tooltip: {
            pointFormat: '<b>{this.series.data.name}</b>'
        },
    }]
};

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

In this way the bar chart loads the value {this.series.data.y} in the tooltip and in the line graph loads the value {this.series.data.name}.

For example:

• Clicking on position "4" of the bar, loads the value of "31.29" on Tooltip.
• Clicking on position "4" of the line, loads the value of "22h 30m" on Tooltip.

Answer 2

Please take a look at the example provided here. In your case, you defined the config as follows:

var conf = {
  chart: {
    tooltipArr: exData,
  },
  series: [{
    tooltip: {
      pointFormatter: function() {
        var toolTip = this.series.chart.options.chart.tooltipArr;
        return toolTip[this.x];
      }
    }
  }]
}

In your example, you take the tooltip data from:

var toolTip = this.series.chart.options.chart.tooltipArr;

what might quickly result in one of the accessors being undefined. If you want to customise your tooltip based on the values you receive, I would go with the formatter function. You can check, what is the x and y value, using this.x or this.y.

If you know, what do you want to display in tooltips, I would simply declare a const outside conf object and access in inside tooltip formatter function, as the author of the package does.

const tooltips = ['Tooltip1', 'Tooltip2'];

var conf = {
  chart: {
    type: 'spline',
  },
  title: {
    text: 'Live random data'
  },
  tooltip: {
    formatter: function () {
      return this.y > 0 ? this.series.name : tooltips[0];
    }
  },
  series: [{
    name: 'Random data'
  }]
}