doughnutoffset included in chart-js #1216

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)

doughnutoffset canvas

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}
 />