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

168
Views
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 answers
Answer question

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 Report
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!