[Chartjs]-Remove slice onClick events on Pie Charts in Chart.js

by

2👍

This can be achieved using the functions: getSegmentsAtEvent(event) and removeData( index ) Chart.js API

With getSegmentsAtEvent you can recover the segment that has been clicked.

The next step, is to find the index of the slice in the chart. To do the search, you can iterate through all the current segments of the chart and call removeData when it’s found. (I think there is no way to directly know the index)

var segments = myChart.segments;
for (var index = 0; index < segments.length; index++) {
    if (activeLabel == segments[index].label) {
        myChart.removeData(index);
    }
}

Full demo:

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"></script>
        <script type="text/javascript" src="Chart.js"></script>
        <script type="text/javascript">
            var data = [
                {
                    value: 300,
                    color:"#F7464A",
                    highlight: "#FF5A5E",
                    label: "Red"
                },
                {
                    value: 50,
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: "Green"
                },
                {
                    value: 100,
                    color: "#FDB45C",
                    highlight: "#FFC870",
                    label: "Yellow"
                }
            ];

            $(document).ready( 
                function () {
                    var ctx = document.getElementById("myChart").getContext("2d");
                    var myChart = new Chart(ctx).Pie(data);

                    $("#myChart").click( 
                        function(evt){
                            var activePoints = myChart.getSegmentsAtEvent(evt);
                            var activeLabel = activePoints[0].label;
                            var segments = myChart.segments;
                            for (var index = 0; index < segments.length; index++) {
                                if (activeLabel == segments[index].label) {
                                    myChart.removeData(index);
                                }
                            }
                        }
                    );
                }
            );
        </script>
    </head>
    <body>
        <canvas id="myChart" width="400" height="400"></canvas>
    </body>
</html>

0👍

  1. Get the onclick property in options of chart.
  2. This onclick event will trigger even when you click outside of pie (anywhere in canvas), so you have to filter it out by using myChart.getElementsAtEvent(event);
  3. Get data of chart and then remove an item using checks(In the following snippet you can only remove china or any country with value less than 50).
  4. Update the chart by using .update() method

Following is the required working snippet

var chart_click_event = function(event) {
  debugger;
  let activePoints = myChart.getElementsAtEvent(event);

  //If you click on empty area this if check will not pass.
  if (activePoints[0]) {
    let chartData = activePoints[0]['_chart'].config.data;
    let idx = activePoints[0]['_index'];
    let label = chartData.labels[idx];
    let value = chartData.datasets[0].data[idx];

    if (label == 'China' || value < 50) {
      chartData.labels.splice(idx, 1);
      chartData.datasets[0].data.splice(idx, 1);
      myChart.update();
    }

  }

}

var data = [{
  data: [50, 55, 60, 33],
  backgroundColor: [
    "#4b77a9",
    "#5f255f",
    "#d21243",
    "#B27200"
  ],
  borderColor: "#fff"
}];

var options = {
  tooltips: {
    enabled: true
  },
  plugins: {
    datalabels: {
      color: '#fff',
    }
  },
  onClick: chart_click_event
};


var ctx = document.getElementById("pie-chart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['Pakistan', 'China', 'US', 'Canada'],
    datasets: data
  },
  options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
<canvas id="pie-chart"></canvas>

Leave a comment