Chart Activity gauges like Apple Watch

Chart Activity gauges like Apple Watch

By Torstein Hønsi

The circular gauge is an immensely popular type of data visualization in dashboards these days. Apple Watch and Runkeeper are examples of projects using arcs to display how far you have reached compared to your goals, where the full circle symbolizes 100%.

In Highcharts, setting up this type of chart is easy, using the solid gauge series type. Give the points a round linecap, and you get those nice and smooth arcs. In the sample below we have added three data points to represent three arcs, and added a custom symbol on top of it to mimic the chart that is so familiar to Apple Watch users. In addition, we added some interactivity to be able to read the values, which is not so easy on the small watch face.

Do you like this example? Rate it!

Do you have some code you want to share with the world as well? Go here to learn how you may contribute some helpful code of your own.