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

169
Visualizações
How to get the label value from bar chart in javascript?

So I've got a bar chart which has two different bars for supply and demand and I want it to tell me which one it is when I click on the bar. Because right now it just gives me the same index and x axis when I click on the bars. So how can I fix this problem? Here is my code :

var canvas = document.getElementById('myChart');
var data = {
    labels: ["iOS", "Android", "React", "Angular", "SA", "BA", "Backbase"],
    datasets: [
        {
            label: "supply",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 5,
            grouped: true,
            pointHitRadius: 10,
            data: [1, 2, 3, 4, 5, 6, 7],
        },
                {
            label: "demand",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(75,29,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 5,
            grouped: true,
            pointHitRadius: 10,
            data: [5, 9, 8, 1, 6, 5, 4],
        }
        
    ]
};

var option = {
    showLines: true,
  onClick: function(evt) {
  
   console.log(myLineChart.getElementAtEvent(evt));
   alert(data.datasets[0].data[myLineChart.getElementAtEvent(evt)[0]._index]);
   alert(data.labels[myLineChart.getElementAtEvent(evt)[0]._index]);
  
    
    }
};
var myLineChart = Chart.Bar(canvas,{
    data:data,
  options:option
});
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Hey guys I figured it out here is the code :

alert(data.labels[myLineChart.getElementAtEvent(evt)[0]._index])
alert(data.datasets[myLineChart.getElementAtEvent(evt)[0]._datasetIndex].label)
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