Custom outer shadow on pie/doughnut charts

[alpercun]

Hello,
I'm trying to create a pie/doughnut in ChartJS and I just want to put a shadow onto the outer region it should be appearing on hover over a piece on the doughnut chart. Is it possible with normal features?

[LeeLenaleee]

Yes you could make a second dataset with the shadow colors and the same values as your original one and then use the onHover config to make them appear or hide (note I used same colors but if you pass in lighter versions it will look more like a shadow):

const options = {
  type: 'doughnut',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        radius: 0
      },
      {
        label: '# of Points',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
      }
    ]
  },
  options: {
    onHover: (evt, activeEls, chart) => {
      chart.getDatasetMeta(0).data.forEach(dp => {
        dp.innerRadius = 0;
        dp.outerRadius = 0;
      });

      if (activeEls.length === 0 || activeEls[0]?.datasetIndex === 0) {

        return;
      }

      const hovered = activeEls[0];
      const dpPointToEnlarge = chart.getDatasetMeta(0).data[hovered.index];

      dpPointToEnlarge.innerRadius = hovered.element.outerRadius;
      dpPointToEnlarge.outerRadius = hovered.element.outerRadius + (hovered.element.outerRadius - hovered.element.innerRadius) / 2;
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

Fiddle: https://jsfiddle.net/Leelenaleee/x2wz57Lo/17/