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.
Comments
suraj | 7 years ago
Hello,
I want to change the name instead of those arrows, how can I change it…?
I have searched it a lot but failed. Please help me out.
Thank You.
Mustapha (Highsoft) | 7 years ago
Hi,
Do you wan to change Stand/Exercise/Move?
Arjun Singh | 6 years ago
This thing is not responsive, the use of positioner in tooltip creates problem for responsiveness. Is there some way we can make the tooltip responsive?
Øystein | 6 years ago
Hi Arjun, see http://jsfiddle.net/highcharts/d6x41om3/ for a responsive version of this.
Want to leave a comment?
Comments are moderated. They will publish only if they add to the discussion in a constructive way. Please be polite.