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.

Custom labels

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:

Chart URL: https://quickchart.io/chart?c={ type: 'progressBar', data: { datasets: [{ data: [15] }, { data: [30] }] }, options: { plugins: { datal...

Open in full editor

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:

Chart URL: https://quickchart.io/chart?c={ type: 'progressBar', data: { datasets: [{ data: [20000], backgroundColor: 'green', }, { data: [50000] }] }...

Open in full editor

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%:

Chart URL: https://quickchart.io/chart?c={ type: 'progressBar', data: { datasets: [ { data: [10], }, ], }, options: { plugins: { datalabels: ...

Open in full editor

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.

Chart URL: https://quickchart.io/chart?c={ type: 'progressBar', data: { datasets: [ { data: [88], backgroundColor: pattern.draw( 'line-vertical...