[Chartjs]-Chart.js: Pie chart legend "onclick" gets overwritten by "options.onclick" if both are present

by

5👍

✅

one can only differ the click-event by their coordinates …where the conditions are:

  • event.clientY >= chart.boxes[0].height, when the legend is on top.

  • event.clientX <= chart.boxes[0].left, when the legend is to the right.

similar conditions could also be used, when the legend is to the left or at the bottom.

var chart;
var config = {
    type: 'pie',
    data: {
        datasets: [{
            data: [
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100)
            ],
            backgroundColor: [
                "rgb(255, 99, 132)",
                "rgb(255, 159, 64)",
                "rgb(255, 205, 86)",
                "rgb(75, 192, 192)",
                "rgb(54, 162, 235)"
            ],
            label: 'Dataset 1'
        }],
        labels: [
            'Red',
            'Orange',
            'Yellow',
            'Green',
            'Blue'
        ]
    },
    options: {
        responsive: true,
        onClick: function (event) {
            
            /* checking where the click actually happens */
            var box = chart.boxes[0];
            if((box.position === "top" && event.clientY >= box.height) || (box.position === "right" && event.clientX <= box.left)) {
                console.log("chart click  @ x: " + event.clientX + ", y:" + event.clientY);
            }
        },
        legend: {
            position: 'top',
            onClick: function (event, elem) {
                console.log("legend click @ x: " + event.clientX + ", y:" + event.clientY);
            }
        }
    }
};

$(function() {
  chart = new Chart($('#chart-area')[0].getContext('2d'), config);
});
html, body {height: 100%; width: 100%; margin: 0;}
canvas#chart-area {height: 100px; width: 100px;}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<div id="canvas-holder"><canvas id="chart-area"></canvas></div>

2👍

The click on the legend seems to be blocked off by the hidden iframe, that chartjs is creating to detect resize events. You can set the chartjs instance to unresponsive if it is not important to you that the chart automatically resizes.

var options = {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1
    }]
  },
  options: {
    responsive: false,
    onClick: function(event) {
      alert("onClickGraph");
    },
    legend: {
      onClick: function(event) {
        alert("onClickLegend");
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
canvas {
  background-color: #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

You can also make the parent container relatively positioned, which will also allow the chartjs instance to be responsive even though the flag “responsive” is set to false and therefore the iframe is not displayed: http://www.chartjs.org/docs/latest/general/responsive.html#important-note

1👍

If you add the following condition it will work. It seems if you return from the function, it will execute the legend one

options: {
            responsive: true,
            legend: {
                position: 'right',
                onClick: function (event, elem) {
                    graph_legend_click(elem.text);
                },
            },
            onClick: function (event, item) {
                if(item.length == 0)
                   return;

                graph_click( event);
            }
        }

this also works

var chart = new Chart(ctx, config);

chart.options.legend.onClick = function(ev, legendItem){
     alert(legenItem.text);
}
chart.options.onClick = function(ev, item){
     if (item.length == 0)
        return;
     // TODO
}

Leave a comment