The latest articles on DEV Community by Jay Hodges (@jasonjasonh). https://dev.to/jasonjasonh https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F331119%2F45b3df22-2311-45dd-93f7-cb44aeadc6c2.jpeg https://dev.to/jasonjasonh en Jay Hodges Sun, 16 Feb 2020 17:01:20 +0000 https://dev.to/jasonjasonh/an-easy-effective-instrument-cluster-style-gauge-chart-using-angular8-css3-and-svg-5bf4 https://dev.to/jasonjasonh/an-easy-effective-instrument-cluster-style-gauge-chart-using-angular8-css3-and-svg-5bf4 <p>An interesting dynamic take on instrument-panel style / tachometer gauges using SVG.</p> <p>It's not as dynamic as it could be and you may see that I'll update it to do some things automatically.</p> <p>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%.</p> <p>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).</p> <p>Anyhow, this is my first swing at it.</p> <p>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.</p> <p>Enjoy and thanks for any respectful feedback.</p> <p><a href="https://stackblitz.com/edit/svg-guage-chart">https://stackblitz.com/edit/svg-guage-chart</a></p> angular svg dashboard chart