I am currently utilizing vue3-highcharts in conjunction with Highcharts. My goal is to replicate a similar functionality as shown in this example: https://codepen.io/lzl124631x/pen/KLEdby?editors=1010. However, I am unsure about the correct syntax for implementing those functions within Vue 3.
Thus far, I have successfully synchronized x-Axis zooming, hovering, and displaying crosshairs across multiple charts. Despite this, I am encountering difficulties in getting the tooltip to appear on all the charts. To achieve the xAxis zoom, I utilized the following code:
xAxis: {
events: {
afterSetExtremes: function (e) {
if (e) {
Highcharts.charts.forEach((chart) => {
if (chart && chart.index !== e.chartId) {
chart.xAxis[0].setExtremes(e.min, e.max);
}
})
}
}
}
},
To synchronize hovers and crosshairs, I implemented the following code:
plotOptions: {
series: {
point: {
events: {
mouseOver: function (e) {
let series = e.target.series;
let index = series.xData.indexOf(e.target.index);
Highcharts.charts.forEach((chart) => {
if (chart && chart.index !== e.chartId) {
let event = chart.pointer.normalize(e)
let data = chart.series[0].data[index];
if (data) {
data.setState('hover');
chart.xAxis[0].drawCrosshair(event, data);
chart.tooltip.refresh(data);
}
}
})
},
}
}
}
},
To display the tooltip, I attempted:
chart.tooltip.refresh(data);
Unfortunately, this resulted in an error.
Edit: For future reference, the solution is:
chart.tooltip.refresh([data]);