Chartjs-Can we remove bar chart line on click on pie chart legend label?

0👍

use below code on legend in chart2 that is Horizontal bar(legend onClick event)

legend: { 
              display : true,
              onClick: function(e, legendItem) {
                  var index = legendItem.index;
                  var chart = this.chart;
                  console.log(legendItem);
                  var i, ilen, meta;
                  for (i = 0, ilen = (chart.data.datasets || []).length; i < ilen; ++i) {
                  meta = chart.getDatasetMeta(i);
                  // toggle visibility of index if exists

                  if (meta.data[index]) {
                  meta.data[index].hidden = !meta.data[index].hidden;
                  }
                  }

                  chart.update();
                  //if legend is hidden hide the below data from the list also remove the data from the list items

                  var __text = legendItem.text;
                  var __split_text = __text.split(" ").join('_').toLowerCase();


                  var checked_unchecked_data_value        = myChart2.data['datasets'][0]['data'][legendItem.index];
                  var checked_unchecked_date_label_value  = myChart2.data['labels'][legendItem.index];

                  /* 
                  my chart index and label value getting for the delete purpose
                  becz on delete index value is changed so doing the same
                  */
                  //var __delete_checked_unchecked_data_value        = myChart.data['datasets'][0]['data'][legendItem.index];
                  //var __delete_checked_unchecked_date_label_value  = myChart.data['labels'][legendItem.index];

                  if(!legendItem.hidden){
                    $(".serial_"+legendItem.index).hide();
                    $(".section_"+__split_text).hide();
                    addSerialNumberAPCSUSelect();
                    /*var index_dataset =  myChart.data.datasets[0].data.indexOf(__delete_checked_unchecked_data_value);
                    if(index_dataset > -1){
                      myChart.data.datasets[0].data.splice(index_dataset,1);
                    }
                    var index_label = myChart.data.labels.indexOf(__delete_checked_unchecked_date_label_value);

                    console.log("index data at " + index_dataset + " label index at " + index_label);
                    if(index_label > -1){
                    myChart.data.labels.splice(index_label,1);
                    }*/
                    myChart.data.datasets[0].data[legendItem.index] = 0;
                    myChart.data.labels[legendItem.index] = '';

                    myChart.update();
                    //console.log(" bar chart index changed at after remove" );  
                    //console.log(myChart.data);
                  }else{
                    $(".serial_"+legendItem.index).show();
                    $(".section_"+__split_text).show();
                    addSerialNumberAPCSUSelect();
                    //myLineChart.data.datasets[0].data[2] = 50;
                    /*var data = [];
                    label = legendItem.text;
                    data[checked_unchecked_data_value] = checked_unchecked_date_label_value;
                    addData(myChart, label, data);*/
                    //myChart.data.datasets[0].data[checked_unchecked_data_value] = checked_unchecked_date_label_value;


                    myChart.data.datasets[0].data[legendItem.index] = checked_unchecked_data_value;
                    myChart.data.labels[legendItem.index] = checked_unchecked_date_label_value;
                    myChart.update();
                  }


              }

             }

Leave a comment