chartjs-plugin-doughnutlabel-rebourne
DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/chartjs-plugin-doughnutlabel-rebourne package

3.0.0-beta.4 • Public • Published

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

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.

Readme

Keywords

none

Package Sidebar

Install

npm i chartjs-plugin-doughnutlabel-rebourne

Weekly Downloads

5,738

Version

3.0.0-beta.4

License

MIT

Unpacked Size

17.5 kB

Total Files

5

Last publish

Collaborators

  • alexkuc