Good Morning,
I have a question regarding reading an external variable that contains a list in the settings of a HighCharts chart for React-Native. Specifically, I am using the "react-native-highcharts" component.
In my code snippet below, I am trying to access data from an API and display it on a line chart. However, I am encountering an issue with the 'exData' variable being undefined when attempting to load its values into the tooltip of the chart.
Is there a way to achieve this functionality? Essentially, I want to display tooltips on the chart with values from a separate list ('list2') corresponding to each point on the graph instead of the actual data points from 'line1'.
For example, if the user clicks on position 4 where the value of the line is 6, I would like the tooltip to show the corresponding text 'Teste 4' from 'list2'.
Currently, the setting suggests that 'list2' is empty. How should I proceed to implement tooltips in this manner?
Please find the modified JavaScript snippet below:
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'],
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: '.'
}
};