Creating a Progress Bar Chart?

[HarisN]

Hey everyone.

I'm trying to make something like this in Chart JS and not sure where to start. I was thinking about using a horizontal bar chart but I'm not sure how I will get the text between the lines to show. Please let me know!

[SEMPERVIVUM1412]

Hi HarisN,

a similar question was asked years ago on Stackoverflow:
https://stackoverflow.com/questions/44022112/change-position-of-chart-js-tick-labels

Unfortunately the answer doesn't use the latest version of chartjs and the fiddle is not responsive.

I didn't dive into adjusting it to the latest version but coded a stand alone code:
https://jsfiddle.net/Sempervivum/q0n8pvc3/1/

If you're not bound to using chartjs you might use this one.

Best regards - Ulrich

[Nick]

Hi HarisN, 

After looking at the stack overflow solution I notice it was older version. 

So I recreated video covering it in Chart.js 3.8 and break down how to do it yourself as well here: https://youtu.be/JPvUe7nwMps

Hope, it helps.

[HarisN]

Thank you both!