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. (^_^)
1 Like
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
}
}
}
}
}
2 Likes
U da man!!
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',
},
},
},
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',
},
},
},
But if the value is lower, it’ll draw outside of the shaded area:
Hope this helps!
2 Likes