I'm currently using highcharts stock in my react app to create a stock graph. I have 3 data series (2 area types, 1 line) to be shown on the same graph. I want an individual tooltip to be displayed when I hover on a datapoint for any of the series. The problem I'm facing is all 3 tooltips show up I hover over a single series as can be seen in the attached image.
I want a single tooltip to show up when hovering over a series with one point highlighted not all 3. The tooltip shared setting will not work as it still highlights all points. An interesting thing to note is the logic works when using scatter plot series over line series. Another point I found was if I pass in a 'chart' type in the constructor over 'stockchart' an individual tooltip will also show for each series, so the problem seems to be related to stockchart type.
Thanks for any help!
Ill share some code below:
Code: Select all
const target = calculations.map(row => row.EPS_target);
const [targetSeries] = useState(target);
const divPos = calculations.map(row => [ row.dividendPayOutRate]);
const [dividendSeries] = useState(divPos);
const dividendPos = calculations.map(row => [ row.target_and_dividend]);
const [dividendAndTargetSeries] = useState(dividendPos);
const options = {
title: {
text: 'IBM Stock Price chart'
},
legend: {
enabled: true
},
tooltip: {
useHTML: true,
shared: false
},
xAxis: {
type: 'Time',
labels: {
format: '{value:%m/%y}',
style: {
fontSize: '9px'
}
},
tickPositioner: function () {
var positions = [];
props.graphData.map(row => positions.push(new Date(row.x_time).getTime()));
return positions;
}
},
yAxis: {
min: 0
},
plotOptions: {
line: {
marker: {
enabled: true
},
series: {
stickyTracking: false
}
}
},
series: [{
name: 'target',
data: targetSeries,
type: 'line',
color: '#2E8B57'
},
{
name: 'dividendPayoutRate',
data: dividendSeries,
type: 'line',
color: '#000000'
},
{
name: 'dividend',
data: dividendAndTargetSeries,
type: 'scatter',
lineWidth: 2,
color: '#99ff99'
}]
}
}
return(
<div>
<div>
<HighchartsReact
highcharts={Highcharts}
constructorType={'stockChart'}
options={options}
containerProps={{ className: 'chartContainer' }}
/>
</div>
</div>
);