How can I extend onClick event for Doughnut legend in react-chartjs-2?

60 views Asked by At

I have to extend the onClick implementation for Doughnut labels. The documentation says, that onClick for labels has following functionality by default:

function(e, legendItem, legend) {
    const index = legendItem.datasetIndex;
    const ci = legend.chart;
    if (ci.isDatasetVisible(index)) {
        ci.hide(index);
        legendItem.hidden = true;
    } else {
        ci.show(index);
        legendItem.hidden = false;
    }
}

but when I trying copy-paste it to my project it doesn't work at all. I tried to put toggleDataVisibility to this example, but it doesn't help. It's strange, that legendItem doesn't have datasetIndex property.

So, what I need: save default functionality of onClick event and add my custom functionality to it. How can I do it?

This is my code:

<Doughnut
ref={chartRef}
options={{
  responsive: true,
  maintainAspectRatio: false,
  layout: {
    padding: {
      bottom(ctx) {
        return resizeChart(ctx);
      },
      left(ctx) {
        return resizeChart(ctx);
      },
      right(ctx) {
        return resizeChart(ctx);
      },
    },
  },
  plugins: {
    tooltip: {
      xAlign: 'center',
    },
    legend: {
      position: 'top',
      labels: {
        color: cssvar('--textfield-standard'),
      },
      onClick: function (e, legendItem, legend) {
        const { index } = legendItem;
        const ci = legend.chart;
        console.log(legendItem);
        ci.toggleDataVisibility(index );
        if (ci.getDataVisibility(index )) {
          ci.hide(index );
          legendItem.hidden = false;
        } else {
          ci.show(index );
          legendItem.hidden = true;
        }
      },
    },
  },
}}
data={{
  labels: [
    `${translate(language, 'Free')}, ${hddData?.statistic?.unit_size}`,
    `${translate(language, 'Used')}, ${hddData?.statistic?.unit_size}`,
    `${translate(language, 'Logs')}, ${hddData?.statistic?.unit_size}`,
  ],
  datasets: [
    {
      data: [hddData?.statistic?.free, hddData?.statistic?.used, hddData?.log_used],
      backgroundColor: [
        cssvar('--dashboard-doughuny-free'),
        cssvar('--dashboard-doughuny-used'),
        'red',
      ],
      borderColor: ['rgba(67, 137, 137, 1)', 'rgba(249, 168, 37, 1)', 'green'],
      borderWidth: 1,
      hoverOffset: 15,
      hoverBackgroundColor: [
        cssvar('--dashboard-doughuny-used-hover'),
        'orange',
        cssvar('--dashboard-doughuny-free-hover'),
      ],
    },
  ],
}}
/>
0

There are 0 answers