Creating a Linear Gauge Chart in JavaScript — Tutorial
Summary
We’ll show how to quickly create a cool and interactive linear gauge chart that highlights Covid-19 vaccination data around the world. The linear gauge chart type is an effective visual representation for displaying how close or far the values are from the desired data point. The mercury thermometer — consisting of minor ticks that displays the temperature with the pointer value — is a classic example of a linear gauge chart. We add a block element and give it an ID so we can reference it later: The width and height attributes of the are set to 100% so that the chart is rendered across the entire screen. Because (at the time of writing) none of the numbers is greater than 50%, we’ve kept the maximum limit of the axis of all the linear gauges as 50%, and we compare how far away from that mark each continent is, as well as the global figure.
