[Chartjs]-Chart.js click on labels, using bar chart

by

2👍

✅

I solve the problem with

document.getElementById("chart").onclick = function(e) 
{
    var activeElement = weatherMainChart.lastTooltipActive;
    console.log(activeElement[0]._index);
};

this solution register clicks on chart and label, then I restricted it with e.layerY to register only clicks on label section.

document.getElementById("chart").onclick = function(e) 
{
    var activeElement = weatherMainChart.lastTooltipActive;
    if(e.layerY > 843 && e.layerY < 866 && activeElement[0] !== undefined)
        console.log(activeElement[0]._index);
};

2👍

If you add a click handler through the onClick option you can use the following code using the getElementsAtEventForMode() call:

function handleClick(evt) {
    var col;
    switch(chartType) {
        case "horizontalBar":
            this.getElementsAtEventForMode(evt, "y", 1).forEach(function(item) { col = item._index });
            break;

        case "bar":
            this.getElementsAtEventForMode(evt, "x", 1).forEach(function(item) { col = item._index });
            break;
    }

    if (!col) {
        return;
    }

    alert("Column " + col + " was selected");
};

You’ll probably need to add extra switch checks for other chart types but I’m sure you get the idea.

1👍

Using version 2.4.0, i created an onClick Event, and inside it

var activeIndex = localChart.tooltip._lastActive[0]._index;
var clickCoordinates = Chart.helpers.getRelativePosition(e, localChart.chart);
if (clickCoordinates.y >= 530) { //custom value, depends on chart style,size, etc
    alert("clicked on " + localChart.data.labels[activeIndex]);
}

0👍

I Solved this problem with single or multiple label click you will be find using true/false

First you need to set your chartJs Id click 

below code SessionChart = Your ChartJs ID e.g. ("myChart") I was replace it for my Id

document.getElementById("SessionChart").onclick = function (evt) {
var meta = SubscriberSessionChart.getDatasetMeta(0);
  if (meta.$filler.chart.legend.legendItems[0].text.toLowerCase() "sessions") 
  {
      if (meta.$filler.chart.legend.legendItems[0].hidden) {
             sessionHidden = true;
      }
   }
}

here "sessions" = first label text

meta.$filler.chart.legend.legendItems[0].text.toLowerCase() = is your first label 
from Array so you can get multiple label's click here true / false

if (meta.$filler.chart.legend.legendItems[0].hidden) = your label is not active then 
you will get hidden true otherwise you will get false if not tick on label 
by default label tick hidden is false in chart js

Leave a comment