Chart.js plugin module that allows to display multiple lines of text centered in the middle area of the doughnut charts
Have a look at the Demo page.
Install through npm:
npm install --save chartjs-plugin-doughnutlabel
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: {
plugins: {
doughnutlabel: {
labels: [
{
text: 'The title',
font: {
size: '60'
}
},
{
text: 'The subtitle',
font: {
size: '50'
},
color: 'grey'
},
{
text: '$100.000',
font: {
size: '30'
},
color: 'red'
},
{
text: '95%',
font: {
size: '45'
},
color: 'green'
}
]
}
}
}
});
The plugin can be manually downloaded from the Releases page on GitHub!
<script src="chartjs-plugin-doughnutlabel.js"></script>
or use the minified version
<script src="chartjs-plugin-doughnutlabel.min.js"></script>
You first need to install node dependencies (requires Node.js):
> npm install
The following commands will then be available from the repository root:
> gulp lint // perform code linting
> gulp build // build dist files
> gulp build --watch // build and watch for changes
> gulp package // create an archive with dist files and samples
chartjs-plugin-doughnutlabel
is available under the MIT license.