Annotated progress bar - auto hide overlapping labels

1

Hello!
Fantastic work you’ve done here. I’ve managed to work out a bunch of charts myself and really spruce them up and have been really happy with the way they look. I’m using them in a personal Appsheet App.

Two questions regarding the annotated progress bar:

Monthly Rain annotated progress chart

  1. I’m using it to show monthly rainfall. I have some additional labels on top (Min, Max, Avg) but as you can see the labels sometimes overlap.

I’ve been hiding the MIN and MAX labels (through Appsheet coding) if they are within 85-90% of the Average but it’s a bit hit and miss. I tried using display: 'auto', but it doesn’t work like it did for some of my other charts. Is this possible with this chart?

  1. My progress bar seems a little shorter on the right hand side when I compare it to the example on the QuickChart website.

It seems like it may be because my colour bar data is [266.4], rather than [100]. Should I be normalising everything to my maximum value of [266.4] (so that my max becomes 100 and every other data point is a percentage of this) or is there another way of making the colour bar extend the full length to the right?

Thanks in advance for you help!
Cheers
Leon

2

Hi @leon,

Thank you for the kind words about QuickChart!

  1. Regarding overlapping annotations, unfortunately it doesn’t look like there’s an easy way to address this besides manually adjusting the positioning. Here’s the related discussion in the Chart.js annotations project: Annotations labels overlapping · Issue #462 · chartjs/chartjs-plugin-annotation · GitHub

  2. The answer here is to set the min and max on options.scales.x, and probably remove options.layout.padding too. Here’s the updated example. It does introduce a problem where the last label overflows the image. You’ll have to either add padding as desired (make padding and object to have finer grained control, e.g. padding: {left: 20, right: 20}) or adjust the positioning of the label.

Hope this helps!

1 Like
3

Thank you Ian,
This has helped and I’ve incorporated the changes you’ve suggested. Much appreciated !
All the best,
Leon