CODEWITHSUNDEEP
javascriptchart.js
Karim Pazoki
Karim Pazoki

Reputation: 969

How to know which bar is clicked on chart.js bar chart with multiple data?

I have used chart.js to create some charts. I add a click event to a bar chart with multiple bars(multiple data) in each column like below:

html

<canvas id="myChart" width="400" height="200"></canvas>

js

var canvas = document.getElementById('myChart');
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 2,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: [65, 59, 20, 81, 56, 55, 40],
        },
        {
            label: "My second dataset",
            backgroundColor: "rgba(99,255,132,0.2)",
            borderColor: "rgba(99,255,132,1)",
            borderWidth: 1,
            hoverBackgroundColor: "rgba(99,255,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: [35, 29, 10, 50, 70, 33, 65],
        },
    ]
};
var option = {
    scales: {
    yAxes:[{
        gridLines: {
            display:true,
          color:"rgba(255,99,132,0.2)"
        }
    }],
    xAxes:[{
            gridLines: {
            display:false
        }
    }]
  }
};

var myBarChart = Chart.Bar(canvas,{
    data:data,
  options:option
});

canvas.onclick = function(e) {
    console.log(e);
  var bars = myBarChart.getElementsAtEvent(e);
  console.log(bars)
}

you can see the result here in jsfiddle. My problem is I want to add link to each bar. So I should know whish bar is clicked. getElementsAtEvent(e) returns an array with size of dataset(in my example with size 2). For example when I click on bars of April both two bars in April returnd. but I want to know which of them is clicked exactly.

Upvotes: 0

Views: 519

Answers (1)

Daniel W Strimpel
Daniel W Strimpel

Reputation: 8470

You should instead use getElementAtEvent(e) (notice the singular form of element). This will get you the single item clicked on, whereas the method you are using will return the list of items at the same data index.

From the docs for .getElementAtEvent(e):

Calling getElementAtEvent(event) on your Chart instance passing an argument of an event, or jQuery event, will return the single element at the event position. If there are multiple items within range, only the first is returned. The value returned from this method is an array with a single parameter. An array is used to keep a consistent API between the get*AtEvent methods.

From the docs for .getElementsAtEvent(e):

Looks for the element under the event point, then returns all elements at the same data index. This is used internally for 'label' mode highlighting.

Calling getElementsAtEvent(event) on your Chart instance passing an argument of an event, or jQuery event, will return the point elements that are at that the same position of that event.

Upvotes: 1

Related Questions