In Chapter 4, Creating Charts, we used a simple plugin to add labels to pie slices. In this section, we will show you two others that allow a lot more customization. They are listed in the official documentation for Chart.js but are developed by third parties and should be installed or downloaded from their own repositories.

The chart-plugin-datalabels plugin offers the highly customizable labeling of values in all types of charts, with support for scripting and event handling. You can see several samples in chartjs-plugin-datalabels.netlify.com/samples/, where there is also a link to the documentation and the GitHub repository. The easiest way install it is with a CDN. Include the following code in your page:

 <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels">  
 </script>

Configurations can be made per dataset, per chart, or globally, using one of the three contexts as follows:

• In datasets: dataset.datalabels.*
• In a chart instance: options.plugins.datalabels.*
• Globally, for all charts: Chart.defaults.global.plugins.datalabels.*

The local settings override the global ones. Details are beyond the scope of this chapter, but the plugin is very well documented. The following is a simple example, using the line chart we used in the previous sections. All the configuration was done in the options.plugins.datalabels object, which adds nice labels inside rounded rectangles over the data points (see Text/text-4-datalabels.html):

options: {
    plugins: {
        datalabels: {
            backgroundColor: function(context) {
                return context.dataset.borderColor;
           },
          borderRadius: 4,
          color: 'white',
          font: { weight: 'bold'},
          formatter: Math.round
     }
 },
}

The result is shown in the following screenshot:

There's a lot more that can be done with this plugin. Try it on other charts and check out the samples.

A second labeling plugin is chart-plugin-outlabels. It allows for better visualization of the data values in pie and doughnut charts, displaying the labels outside the slices. You can see a sample in piechart-outlabels.netlify.com/sample/, where you will also find a link to the documentation and the GitHub repository. To use it on your page, include the following:

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-
 outlabels"> </script>

As in many other plugins, configurations can be made per dataset, per chart, or globally, using one of the three contexts as follows:

• In datasets: dataset.outlabels.*
• In a chart instance: options.plugins.outlabels.*
• Globally, for all charts: Chart.defaults.global.plugins.outlabels.*

The plugin also introduces a new chart type: outlabeledPie. It can be used in place of pie or doughnut and is simpler to configure.

The following is a simple example of the doughnut chart we used in previous examples, using an outlabeledPie (see Text/text-5-outlabels.html for the full code):

 const data = {
     labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
     datasets: [
         {
             label: 'Week 1',
             data: [20, 5, 2, 20, 30, 51],
             backgroundColor: palette('tol', 6).map(n=>'#'+n),
         }
     ]
 };
 
 new Chart('canvas', {
     type: 'outlabeledPie',
     data: data,
     options: {
         zoomOutPercentage: 30,
         plugins: {
             legend: false,
             outlabels: {
                 text: '%l %p',
                 color: 'white',
                 stretch: 45,
                 font: {
                     resizable: true,
                     minSize: 12,
                     maxSize: 18
                 }
             }
         }
     }
 });

The result is shown in the following screenshot:

Check the documentation for more options, and try to use this plugin in other charts.