Chart JS Pie Chart

How to Make A Pie Chart in Chart JS

This video shows you how to make a pie chart in Chart JS. It will create a pie chart example with default values. A pie chart displays the data in slices and the total sum is the whole pie. In Chart.js the pie chart and doughnut chart are almost identical in coding with only one difference. The whole or cutout percentage that the doughnut chart has.

Have a circular chart in Chart js like a pie or doughnut chart is useful for presentation percentages. Visually it is more striking it conveys the message better compare to a bar or line chart.

Add Chartjs Plugin Datalabels for Pie Chart or Doughnut Chart

The datalabels plugin for Chart.JS or the chartjs-plugin-datalabels is a nice plugin that can enhance the pie or doughnut chart even further. This datalabels plugin allows to add descriptive data labels which are instantly visible. There are two plugins available the Chartjs Plugin Datalabels is one of them. There is an entire video series available here: https://www.youtube.com/playlist?list=PLc1g3vwxhg1W4bPr3UrM_7xfzJr1O08cZ

Add Chartjs Plugin Labels for Pie Chart or Doughnut Chart

The second plugin is the labels plugin for Chart JS or the chartjs-plugin-labels. The name is very similar compare to the upper datalabels but there is a big distinction. This plugin is more pie and doughnut chart friendly. It allows to convert values into percentages or absolute numbers.

Secondly, it allows to draw the data labels in or our outside of the pie segment or doughnut slice / ring. Finally, the best of all it being able to add images. This is a very neat plugin that has some bugs but is suitable for basic use. Watch this playlist: https://www.youtube.com/playlist?list=PLc1g3vwxhg1Uaa-3Qt08HJ7btahVCEmth

How to Create Doughnut Chart with Labels Outside with Connecting Line in Chart js

The upper options might not always be what you want. In that case a custom option is better. For that I have a video showing you how to create data labels with connecting lines in a doughnut chart. However, this works also perfectly with a pie chart. It is a more advance matter but we will create here additional lines based on the original colors and show the values. Watch this video:

How to add a value in the center of a doughnut chart in Chart js

Often people might ask for how to add a value in the center of a doughnut chart in Chart js.

For this I recommend to watch this video on https://www.chartjs3.com/blog/2022/08/26/how-to-show-text-in-center-onhover-in-doughnut-chart-in-chart-js/