Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

129
Views
Apexcharts move selection and tooltip using JavaScript

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):

Example

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';
    }
}
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!