DEV Community

loading...

An Easy, Effective Instrument Cluster-Style Gauge Chart using Angular8, CSS3 and SVG

jasonjasonh profile image Jay Hodges ・1 min read

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.

https://stackblitz.com/edit/svg-guage-chart

Discussion (0)

Forem Open with the Forem app