DEV Community


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.

Discussion (0)

Forem Open with the Forem app