chartjs-plugin-doughnutlabel-rebourne

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 install chartjs-plugin-doughnutlabel-rebourne

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

yarn install chart.js@next

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	Description	Label Scope	Plugin Scope	Global Scope
paddingPercentage	add padding when scaling text larger than inner circle (defaults to 10)		✓	✓
labels	array of labels (objects)		✓
color	css property	✓	✓	✓
font.family	css property	✓	✓	✓
font.lineHeight	css property	✓	✓	✓
font.size	css property	✓	✓	✓
font.style	css property	✓	✓	✓
font.weight	css property	✓	✓	✓
font.string	all previous font properties in one string separated by space	✓	✓	✓
text	value of label (can be string or function)	✓
display	show label or not	✓	✓	✓
api*	plugin core api (defaults to beforeDatasetDraw)		✓	✓

*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',
        },
      ],
    },
  },
},

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.