show percent value in the middle

[sadden3194]

Hi everyone !

I would like to create a doughnut chart like this example:
https://www.chartjs.org/docs/latest/samples/other-charts/doughnut.html

Is there a way to show the percent value of a selected data in the middle ?

[LeeLenaleee]

No, not by default, you will need to use/write a custom plugin to achieve this.

You can see my stack answer here for an indication of it: https://stackoverflow.com/questions/67486126/how-to-add-text-inside-the-doughnut-chart-using-chart-js-version-3-2-1

const plugin = {
  id: 'text',
  beforeDraw: function(chart, a, b) {
    var width = chart.width,
      height = chart.height,
      ctx = chart.ctx;

    ctx.restore();
    var fontSize = (height / 114).toFixed(2);
    ctx.font = fontSize + "em sans-serif";
    ctx.textBaseline = "middle";

    var text = "75%",
      textX = Math.round((width - ctx.measureText(text).width) / 2),
      textY = height / 2;

    ctx.fillText(text, textX, textY);
    ctx.save();
  }
}

[sadden3194]

yes the way is not bad, but I need each percent value in the middle, if I click on a data element. can we realize this ?

[Udemology]

Hi Ghost108,

I have tried to build a plugin to get a click effect so I have something but not fully functional. Somehow if you click on the segments the console.log shows the value but the canvas does not draw it in the center. And when you click (somehow you need to click twice) outside the segment on any of the white space while the value is NaN% but it draws it in the canvas with the matching color.

In other words it does exactly the opposite of what it should do -_-

If it was hover effect it would be easier. But clickable version is a real struggle. See code below. Just add those blocks perhaps you or someone might be able to solve the final part. I will try to look for something and update if I got it working. Hope it helps.

    // clickLabel plugin block
    const clickLabel = {
      id: 'clickLabel',
      afterDraw(chart, args, options){
        const { ctx, chartArea: { left, right, top, bottom, width, height } } = chart;
        ctx.save();

        const sum = chart._metasets[0].total;

        chart.canvas.onclick = function() { 
          let index;
          for(let i = 0; i < chart.getDatasetMeta(0).data.length; i++) {
            if(chart.getDatasetMeta(0).data[i].active === true) {
              index = i;
              break;
            }
          }
          console.log(index)

          const numberLabel = chart.config.data.datasets[0].data[index];
          const color = chart.config.data.datasets[0].borderColor[index];
          const percentage = numberLabel / sum * 100;

          console.log(percentage.toFixed(1) + '%')

          ctx.font = 'bolder 60px Arial';
          ctx.fillStyle = color;
          ctx.textBaseline = 'middle';
          ctx.textAlign = 'center';

          ctx.fillText(percentage.toFixed(1) + '%', width / 2, height / 2 + top)
        }
        ctx.restore();
      }
    }

    // config 
    const config = {
      type: 'doughnut',
      data,
      options: {
        plugins: {
          tooltip: {
            enabled: false
          }
        }
      },
      plugins: [clickLabel]
    };

[stockiNail]

@Ghost108 maybe a plugin is not really needed.

I have done a prototype leveraging onClick option: https://codepen.io/stockinail/pen/GRMLqOd

Clicking on the dataset item, the percentage is shown in the middle.

[sadden3194]

Thats very gopd !
But can we realize it, hat the percent value will not be hide after I left my mouse from the dataset item ?

[stockiNail]

@Ghost108 sample has been updated. Have a look now. https://codepen.io/stockinail/pen/GRMLqOd
Due to that you don't want to hide it when the cursor is leaving the dataset element, a plugin is needed.
The sample is leveraging on onClick and a simple plugin which is drawing the percentage at the end of chart drawing.

[sadden3194]

Wow !!! Thats great ! LAST wish: Is it possible to show a default percent value at the beginning without clicking?
for example of detest item 1

[stockiNail]

detest item 1

Do you mean dataset 1? Maybe you would like the first dataset (index 0).
In the sample, there is row 2:

let selectedDatasetIndex, selectedIndex;

Instead to start as undefined, it's enough to set to 0 (both).
Have a look to the sample again, and the first value is the data at datasetIndex: 0 and index: 0.

[stockiNail]

@Ghost108 I have done some updates/checks in order to show a right percentage even if the dataset index is not visible.
https://codepen.io/stockinail/pen/GRMLqOd

[sadden3194]

Thank you very much !!