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 progress bar is defined by two datasets:
- The first dataset specifies the number shown, or the percentage "filled in". By default, this number is a percentage and the total value is 100 by default.
- 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:
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:
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%:
It looks like this to begin with:
But the label will be automatically positioned and colored inside the progress bar if the value is greater than 15%:
Add a pattern
It's possible to use the
pattern object to draw a patterned background on the progress bar. The example below includes a background and also positions the data label so it's outside of the progress bar.
Customize colors and border radius
In this example, we create a sleek, simple looking progress bar with rounded corners.
Remember that progress bars are just special-case bar charts. To further customize, read about bar charts in Chart.js.
Need more help? Ask questions in our community.