1

I need to add a glow effect on hover to the doughnut chart I created. An example of the same can be found here - https://nagix.github.io/chartjs-plugin-style/samples/doughnut.html

The above link plugin works only with chart.js V2, but not with chart.js v3.

Does anyone know how can I achieve this?

I have created a doughnut chart using the following code snippet:

const myChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    datasets: [
      {
        label: 'My First Dataset',
        data: chartData,
        borderWidth: 0,
        backgroundColor: [
          '#2BB3FF',
          '#59DDAA',
          '#FDC23C',
          '#FF622D',
          '#AB6CFE',
          '#C4C7CF',
          '#F67CF2',
        ],
      },
    ],
  },
  options: {
    hoverBorderWidth: 2.84,
    spacing: 20,
    hoverBorderColor: [
      '#2BB3FF',
      '#59DDAA',
      '#FDC23C',
      '#FF622D',
      '#AB6CFE',
      '#C4C7CF',
      '#F67CF2',
    ],
    elements: {
      arc: {
        angle: 360,
        borderWidth: 18,
      },
    },
    layout: {
      padding: {
        left: 15,
        right: 15,
        top: 10,
        bottom: 15,
      },
    },
    responsive: true,
    cutout: '90%',
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        enabled: false,
      },
    },
  },
});
sjathin
  • 11
  • 3

0 Answers0