Chart.js Doughnut plugin to allow for lines of text in the middle

Chart.js plugin module that allows to display multiple lines of text centered in the middle area of the doughnut charts. This plugin is forked from https://github.com/ciprianciurea/chartjs-plugin-doughnutlabel to provide support for Chart.js v3 as well as some other improvements and bug fixes. This is a BREAKING change meaning this plugin will NOT work with Chart.js v3.

Demo

Have a look at the Demo page.

Table of contents

• Installation
• Usage example
• Development
• License

Installation

Install through yarn:

yarn add chartjs-plugin-doughnutlabel-rebourne

Don't forget to install v3 of Chart.js:

yarn add chart.js

After that, you need to activate the plugin, either globally :

Chart.plugins.register(DoughnutLabel);

or for each chart separately:

new Chart(ctx, {
  plugins: [DoughnutLabel],
});

Usage

Below is a table with available options:

Option	Default Value	Description	Label Scope	Plugin Scope	Global Scope
paddingPercentage	10	add padding when scaling text larger than inner circle (defaults to 10)		✓	✓
labels		array of labels (objects)		✓
color	#000000	css property	✓	✓	✓
font.family	undefined	css property	✓	✓	✓
font.lineHeight	1.2	css property	✓	✓	✓
font.size	undefined	css property	✓	✓	✓
font.style	undefined	css property	✓	✓	✓
font.weight	null	css property	✓	✓	✓
font.string		all previous font properties in one string separated by space	✓	✓	✓
text		value of label (can be string or function)	✓
display	true	show label or not	✓	✓	✓
api*	beforeDatasetDraw	plugin core api		✓	✓

*Option api is a really-low level and intended for developers and those who are familar with internal workings of Chart.js (or have experience making plugins).

Note that more specific scope will override more global. For example, if you declare color in plugin scope and in label scope, value from label scope will win.

Options with global scope have a special meaning - they will always have a default value, i.e. if other scopes have no value, the final option will taken from Chart.defaults scope.

Chart.defaults.plugins.doughnutlabel = {}; // global scope

options: {
  plugins: {
    doughnutlabel: { // plugin scope
      paddingPercentage: 5,
      labels: [
        { // label scope
          text: 'Text' or functionName,
          font: {
            size: '24',
            family: 'Arial, Helvetica, sans-serif',
            style: 'italic',
            weight: 'bold',
          },
          color: '#bc2c1a',
        },
      ],
    },
  },
},

TypeScript support

TypeScript types are available for the plugin via DefinitelyTyped. To install them, run:

yarn add @types/chartjs-plugin-doughnutlabel-rebourne -D

Usage without a module bundler

Using CDN is probably the best way - jsDelivr. Select the .min file with SRI parameters for extra safety. If you need to debug any issues, select the full version instead.

Alternatively, the plugin can be manually downloaded from the Releases page on GitHub!

<script src="chartjs-plugin-doughnutlabel-rebourne.js"></script>

or use the minified version

<script src="chartjs-plugin-doughnutlabel-rebourne.min.js"></script>

Development

You first need to install node dependencies (requires Node.js):

yarn install

The following commands are available via package.json:

Command	Purpose
yarn lint	perform code linting
yarn build	build dist files
yarn build --watch	build and watch for changes (inc. browser-sync)
yarn package	create an archive with dist files and samples

License

chartjs-plugin-doughnutlabel is available under the MIT license.