Chart.js (Version 3) Doughnut Chart plugin to display custom lines of text in the center of the donut.
npm install chartjs-plugin-doughnutlabel-v3
npm install --save chartjs-plugin-doughnutlabel-v3
`
Usage
This sample code is available in the Samples folder.
For straight HTML/JavaScript the useage is pretty straighforward. Your HTML simply pulls
in the scripts for Chart.js (Version 3) and the script for this plugin, then attaches your
HTML to the backing JavaScript for the page.
` js
chartjs-plugin-doughnutlabel / samples
chartjs-plugin-doughnutlabel-v3
Sample Chart
Chart.js plugin for doughnut chart to display lines of text in the center
`
The backing Java Script is also straightforward, just remember that the Chart Options have
changed in Verion 3 and you will find that some of the Version 2 options have been moved
into plugins (for example). Obviously, Chart.js still has its issues for responsive sizing,
so I normally do fixed sizing for predictable results, even when printing.
` js
const DEFAULT_COLORS1 = ['#f08700', '#f49f0a', '#efca08', '#00a6a6', '#bbdef0']
const DEFAULT_COLORS2 = ['#7fb7be', '#357266', '#dacc3e', '#bc2c1a', '#7d1538']
const randomScalingFactor = function() {
return Math.round(Math.random() * 100)
};
document.getElementById('randomizeData').addEventListener('click', function() {
sampleChart.config.data.datasets[0].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
sampleChart.update()
})
const getTotal = function(myChart) {
const sum = myChart.config.data.datasets[0].data.reduce((a, b) => a + b, 0)
return Total: ${sum}
}
// Doughnut with multiple lines of text in the center
const ctx = document.getElementById('chart1').getContext('2d')
const sampleChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
backgroundColor: DEFAULT_COLORS2,
label: 'Dataset 1'
}],
labels: ['Item one', 'Item two', 'Item three', 'Item four']
},
options: {
responsive: false,
animation: {
animateScale: true,
animateRotate: true
},
plugins: {
title: {
display: true,
fullSize: true,
text: 'Multiple Lines of Text',
padding: {
top: 20,
bottom: 10
}
},
subtitle: {
display: true,
fullSize: true,
text: '(With calculations!)',
padding: {
bottom: 20
}
},
legend: {
display: true,
position: 'top',
},
doughnutLabel: {
labels: [
{
text: 'The Title',
color: 'blue',
font: {
size: '35',
family: 'Arial, Helvetica, sans-serif',
style: 'italic',
weight: 'bold'
}
},
{
text: 'The Subtitle',
font: {
size: '25'
},
color: 'grey'
},
{
text: '$100.00',
font: {
size: '20'
},
color: 'red'
},
{
text: getTotal,
font: {
size: '20'
},
color: 'green'
},
]
}
}
}
})
`
$3
The plugin can be manually downloaded from the
Releases page on GitHub!
` js
`
or use the minified version
` js
`
or use the ECMAScript (ECM) version
` js
`
Development
You first need to install node dependencies (requires Node.js):
> npm install chartjs-plugin-doughnutlabel-v3
License
chartjs-plugin-doughnutlabel-v3` is available under the MIT license.