Chart JS
Updated on
Last site update: 8 May 2024
So this is set up using Chart JS (rather than Chartist).
This seems really good. Easy to use and super responsive. It animates on loading, the labels turn sideways and the scale changes automatically when responsive.
There also seems to be more tutorials for this.
How to Scale
The basic HTML looks like this.
1<div class="graph-wrapper">
2 <canvas id="latticetest" width="16" height="9"></canvas>
3</div>
The width and height of the <canvas> element are ratios. They change the shape of the graph but not it’s size and so it will still use up all of the available width.
To scale it use a wrapper instead and scale that.
1.graph-wrapper {
2 width: min(100%, 700px);
3}
I used a min() value which select the lowest value of two. Here the graph will take up 100% of the space until it reaches 700px wide. When there is more than 700px