How to customize the progress bar

On QuickChart, a progress bar is a special case of a horizontal bar chart with axes and other labeling removed. All Chart.js bar options can be applied.

The first dataset specifies the number shown. By default, this number is a percentage and the total value is 100 by default. Because a progress bar is just a modified horizontal bar chart, the second dataset represents the whole. You can override the maximum progress bar value by setting a second dataset.

You can also customize the label. For example, to remove percentage on the display, set options.plugins.datalabels.display to false. Or, use datalabel options to change other style and display options.

Here’s an example that includes both of the above modifications. The progress bar displays a measurement of 15 out of 30.

{
type: 'progressBar',
data: {
datasets: [{
data: [15]
}, {
data: [30]
}]
},
options: {
plugins: {
datalabels: {
display: false,
}
}
}
}

You can do more with bar chart and data label customizations. Let’s say you’re running a fundraiser and you’ve raised $20,000 out of $50,000. You can customize the progress bar to display this:

{
type: 'progressBar',
data: {
datasets: [{
data: [20000],
backgroundColor: 'green',
}, {
data: [50000]
}]
},
options: {
plugins: {
datalabels: {
formatter: (val) => {
return '$' + val.toLocaleString();
},
}
}
}
}

Which results in this image:

Edit this chart in the sandbox

Dynamically positioning the text

You may notice that once a bar gets small, the label may not have room to appear.

We can solve this by dynamically positioning and coloring the progress bar label based on the progress bar value. For example, this configuration will place the label to the right of the progress bar if the value is below 15%:

{
type: 'progressBar',
data: {
datasets: [
{
data: [10],
},
],
},
options: {
plugins: {
datalabels: {
font: {
size: 40,
},
color: (context) => context.dataset.data[context.dataIndex] > 15 ? '#fff' : '#000',
anchor: (context) => context.dataset.data[context.dataIndex] > 15 ? 'center' : 'end',
align: (context) => context.dataset.data[context.dataIndex] > 15 ? 'center' : 'right',
},
},
},
}

Whereas the label will be automatically positioned and colored inside the progress bar if the value is greater than 15%:

Edit this chart in the sandbox

Learn more

Remember that progress bars are just special-case bar charts. To further customize, learn more about bar charts in Chart.js.

Need more help? Ask questions in our community.