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

81
Visualizações
Highcharts complex tooltip formatting issue with embedded html link

I am trying to format the tooltip in a highcharts bubble chart

There is a lot of information I'd like to display with custom formats etc so I'm using the formatter function. It is all working fine except for the last line which is a html link (href tag). I want to be able to click on this link in the tooltip and be redirected to the new page however, currently, even though I can see the row highlighted with a link, I'm not being able to click on the link when it renders in the tooltip

Here's the code

const chartOptions  = {
        chart: {
            type: 'bubble',
            plotBorderWidth: 1,
            zoomType: 'xy',
            height: 600,
        },
        title: {text: null},
        legend: {
            enabled: true
        },
        
        tooltip: { 
                useHTML: true,
                formatter: function () {
                    return '<b>' + Highcharts.dateFormat('%e-%b', new Date(this.x)) + ' ' + this.y + '</b><br/>' +
                        '<b>' + 'ACV: ' + '</b>'+ '$' + Math.round(this.point.ACV / 1000).toFixed(1) + 'K' + '<br/>' +
                        'Type: ' + this.point.OPP_COB +  '<br/>' + 'Name: ' + this.point.REP_NAME + '<br/>' + 
                        'Link: ' + '<a href="http://www.mywebsite.com/"' + this.point.customID + ' target="_blank"> Click here </a>'
                        
                }
        },
}

I've tried lots of options for a while but haven't had any luck. Any help would be much appreciated. Thanks

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

You need to set pointerEvents property to 'auto':

tooltip: {
    style: {
        pointerEvents: 'auto'
    }
}

Live demo: http://jsfiddle.net/BlackLabel/7nrvsp5y/

API Reference: https://api.highcharts.com/highcharts/tooltip.style

about 4 years ago · Juan Pablo Isaza Relatório
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