Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

131
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda