Is it possible to add adaptability?

It’s currently not in my plans, but this is just a Chart.js chart so you could potentially figure out how to do it since Chart.js can be extended via plugins.

However, the chart should have compressed to fit the width of its container. I’m not immediately sure why that didn’t happen in this instance.

In cases where a chart will be seen on mobile I’d typically recommend switching to a chart type that will handle that compression best given the data set you have.

Chart.js does not proportionally resize well. I don’t know if it’s in their (the Chart.js) plans to ever correct that limitation but it’s a standing limitation unless something changed relatively recently.

For what it’s worth Highcharts which is much more mature is pretty terrible at proportional resizing as well, though if I remember correctly it is there my experience with it was that it mangles the charts worse than what I standardized on for both Chart.js and Highcharts.

Which was to have the height hard coded and the width fluid.

My current csv data looks like.

Row Labels;Sum of Count
0 to 18;17
19 to 29;89
30 to 39;97
40 to 49;128
50 to 64;212
65 Plus;145

I have a chart for more data and it looks even worse on mobile.

Trade;84
Laborer;77
Professional;41
Retired;38
Office;38
Unemployed;33
UNK;28
Disabled;20
Service;19
Homemaker;18
Technical;15
Student;13
Trucking;13
Medicine;11
Food Service;10
Retail;9
Education;9
Entrepreneur;9
Human Services;4
Finance;3
Sales;3
Arts;3
Transportation;2
Incarcerated;2
Engineer;2
Information Technology;2
Security;2
Welder;2
Electrician ;1
Contractor;1
Chef;1
Customer Service;1
Cashier;1
Manager;1
Truck Driver;1
Service Manager;1
Chemist;1
Medical;1
CAN;1
Machinist;1
Maintenance;1

Have you considered using a bar instead of column chart in this case?

I would try that with a larger height.

That will thicken the bars quite a bit an should leave the chart being more readable on mobile.

I’d also look at trying to use a shorter main title with the rest of the longer info put into the sub title.

Chart.js and most every Chart rendering library uses Canvas and/or SVG to draw the charts and text handling in both of these is kind of a mess which is why you’ll often see long titles and labels causing issues.

Thanks for the advice.