How to create a donut chart like this in chart.js

๐Ÿ‘:3

Since the chart generation has changed a lot from Chart 1.X (docs) to 2.X (docs), it all depend on the version you are currently using for your project :

Version 1.X

Not available for Doughnut charts

If you are working with Pie charts, it is built in in the data you are passing to the chart.

See this jsFiddle for more information and a full result.


Version 2.X

Two methods :

  • You can create a new chart type using .extend() method.

    Then during the creation of the new type, you draw the percentage in the section.
    Check this jsFiddle to see the result (better than the first version, IMHO).

  • You can force the tooltip to always be enabled (as asked in this other question).

    You will just have to edit what is displayed in the tooltip to put the percentage instead of the value. And also move (edit X and Y positions) the tooltip to appear where it should be.

    The image displays a Pie chart, but you can make it work for a Doughnut.

    enter image description here

Leave a comment