How to make the label on the progress bar readable?

The label for the default progress bar is… tiny

- How can we make it bigger?

The docs are… thorough, yet difficult to sift through when you don’t know what you’re looking for. (^_^)


image

Thanks ahead of time!

Chart labeling on QuickChart uses the chartjs-plugin-datalabels plugin, so you can specify options.plugins.datalabels.font.size to set font size.

For example:

{
  type: 'progressBar',
  data: {
    datasets: [{
      data: [50]
    }]
  },
  options: {
    plugins: {
      datalabels: {
        font: {
          size: 40
        }
      }
    }
  }
}

Link to sandbox editor

image

2 Likes

U da man!!
Happy-Dance-GIF-Image-for-Whatsapp-and-Facebook-28

I wish searching the documentation was as easy as following this trail…

@ian How can I move the label to the right, and make it black, if the actual bar is like 5% or something?

You could do something like this:

  options: {
    plugins: {
      datalabels: {
        font: {
          size: 40,
        },
        color: '#000',
        anchor: 'end',
        align: 'right',
      },
    },
  },

Link to editor

If you’re feeling real fancy, you can dynamically position and color the label based on the value. In this example, the will be placed to the right if the value is below 15%:

  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',
      },
    },
  },

Link to editor

But if the value is lower, it’ll draw outside of the shaded area:

Hope this helps!

2 Likes

You sir are a gentleman and a scholar!


That’s exactly what I was wanting to do.
Thank you thank you thank you so much!