Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

130
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda