[Chartjs]-Chart.js doughnut chart with links if onclick

0👍

You onClick function does not work because you define an options object within your options object and put the onClick in there. This is not supported. When you remove the inner options layer it will work:

const options = {
  borderWidth: 4,
  hoverOffset: 6,
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      enabled: false,

    },
    datalabels: {
      formatter: (value, ctx) => {
        let sum = 0;
        let dataArr = ctx.chart.data.datasets[0].data;

        dataArr.map(data => {
          sum += data;
        });
        let percentage = (value * 100 / sum).toFixed(2) + "%";

        return [ctx.chart.data.labels[ctx.dataIndex],
          percentage,
          '$' + value
        ];
      },
      textAlign: 'center',
      color: '#fff',
      borderRadius: 50,
      padding: 10,
      labels: {
        title: {
          font: {
            weight: 'bold',
            size: '16px'
          }
        },
      }
    }
  },
  onClick: (e, activeEls) => {
    let datasetIndex = activeEls[0].datasetIndex;
    let dataIndex = activeEls[0].index;
    let datasetLabel = e.chart.data.datasets[datasetIndex].label;
    let value = e.chart.data.datasets[datasetIndex].data[dataIndex];
    console.log("In click", datasetLabel, value);
    //link to url with:[chartIds]
  }
};

Leave a comment