To be precise I want something like this (ignore the numbers):
I see several options right away:
- half transparent doughnut chart
- truncate half of the chart using css
- custom chart extension
I do not know which is the best or easiest, but I’m certain that I’m not the first who is asking 😉 Could you give me few ideas or pointers on how it is intended to be done, best practices etc
Thanks
@knstntn I recall seeing someone do this using V2. The doughnut chart has parameters that change the start angle and the sweep angle. If you search around the issues here you should be able to find it (it was in the last few months) but I couldn’t find it quickly
I was able to get a gauge with a “needle” by doing a doughnut chart with 2 datasets – might be useful for someone
Here’s the JSON:
@neilcrookes how to move the needle ? 😛
You can just draw the needle on top of the doughnut chart, within your canvas element:
Adjust your starting point, radius, etc. Then call it after animation:
To be honest after all I drawn
speedometer
from scratch using d3, inspired by https://codepen.io/judy/pen/mPGmYqI build one, recently
https://github.com/fiefdx/gauge-chart-js
Another simple extension:
https://github.com/kluverua/Chartjs-tsgauge