Is there a way to set the selected row of data points on a Apexcharts line chart and also make the tooltip move there with the correct data?
It should look somewhat like this (but without the mouse having to move there):
I know there is a way to do it with Google charts (setSelection-function) but there does not seem to be a corresponding function for Apexcharts.
Can one maybe emulate mouse clicks and do it that way?
I also managed to implement a hacky way to do it by manually moving and changing the tooltip and using an annotation as the selector but this probably is not the best way to do it. But anyway here is my code. (The tooltip of the Apex chart is constantly visible which I did using css.)
async function setSelection(row) {
let xValue = chartArray[row];
if (xValue !== undefined) {
// new red annotation line
let time = xValue[0].getTime() // is the time of the date object for that data point
chart.clearAnnotations();
chart.addXaxisAnnotation({
x: time,
borderColor: 'red',
strokeDashArray: 0,
opacity: 1
});
// rewrite tooltip (new data)
let tooltip = chartDiv.getElementsByClassName('apexcharts-tooltip')[0];
tooltip.firstChild.innerHTML = dateLongFormat(xValue[0]); // format for the date
let values = xValue.slice(1);
let children = tooltip.children;
for (let i = 0; i < values.length; i++) {
children[i + 1].getElementsByClassName('apexcharts-tooltip-text-y-value')[0].innerHTML = values[i];
}
// move tooltip
tooltip.classList.add('apexcharts-active');
let annotationPos = chartDiv.getElementsByClassName('apexcharts-xaxis-annotations')[0].firstChild['x2'].animVal.value,
chartWidth = chartDiv.getElementsByClassName('apexcharts-svg')[0].width.baseVal.value - 20,
annotationWidth = tooltip.clientWidth;
if (annotationPos < 0 || annotationPos > chartWidth) {
return; // selection is out of screen on zoomed in chart
}
tooltip.style.left = (annotationPos < chartWidth / 2 ? annotationPos + 60 : annotationPos + 32 - annotationWidth) + 'px';
}
}