An interesting dynamic take on instrument-panel style / tachometer gauges using SVG.
It's not as dynamic as it could be and you may see that I'll update it to do some things automatically.
The idea was to create a gauge chart with progressive segments. That means the portion of the chart up to 100% comprises 70% of the chart itself. From 100-500% is about 20% and from 500%-5000%+ is 10%.
At the initial development, I was feeding this directly from an API, but it made more sense to make it a component and feed it the title and numbers (GIT REPO coming soon).
Anyhow, this is my first swing at it.
The current size is a little large, but since this is SVG, you can just change the scaling of the container with a css transform and watch the magic. It's working nicely in current Edge, Chrome and FF. Have not tested with MSIE11.
Enjoy and thanks for any respectful feedback.
Top comments (0)