doughnutoffset included in chart-js

[Ayush1234567434324]

Doughnut Offset

Manipulated offset via on visiting canvas

Main changes 1

const chartRef = useRef(null);

Handle Chart Click function

const handleChartClick = (e) => {
    const chart = chartRef.current;
    const points = chart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);

    if (points.length) {
      const firstPoint = points[0];

      // Apply the offset effect
      chart.data.datasets[firstPoint.datasetIndex].offset[firstPoint.index] = 60;
      chart.update();

      // Reset the offset after a brief delay
      setTimeout(() => {
        chart.data.datasets[firstPoint.datasetIndex].offset[firstPoint.index] = 0;
        chart.update();
      }, 1000); // Adjust the delay time as needed
    }
  };  

Doughnut Component

  <Doughnut
      data={data}
      options={{
        maintainAspectRatio: true,
        responsive: true,
        onClick: (e) => handleChartClick(e), // Call the function for chart click events
        plugins: {
          legend: {
            onClick:  handleLegendClick// Call the function for legend item click events
          },
        },
      }}
      ref={chartRef}
    /> 

Doughnut canvas simulation(visiting chart)

Manipulated offset via on visiting labels

Main changes 2

Legend click handler

 const handleLegendClick = (e, legendItem,legend) => {
    const chart = legend.chart;
    const index = legendItem.index;

    // Apply the offset effect
    chart.data.datasets[0].offset[index] = 60;
    chart.tooltip.setActiveElements([{ datasetIndex: 0, index }]);
    chart.update();

    // Reset the offset after a brief delay
    setTimeout(() => {
      chart.data.datasets[0].offset[index] = 0;
      chart.update();
    }, 1000); // Adjust the delay time as needed
  };

Doughnut component

<Doughnut
      data={data}
      options={{
        maintainAspectRatio: true,
        responsive: true,
        onClick: (e) => handleChartClick(e), // Call the function for chart click events
        plugins: {
          legend: {
            onClick:  handleLegendClick// Call the function for legend item click events
          },
        },
      }}
      ref={chartRef}
    />

Doughnut canvas simulation(visiting label)