Build Interactive Dashboards Using Highcharts with Angular

Gauge Chart

Your browser needs to be JavaScript capable to view this video

Try reloading this page, or reviewing your browser settings

In this video will talk about how to develop Gauge chart using highcharts with angular.

Keyword

  • gauge chart

About this video

Author(s)
Sourabh Mishra
First online
13 January 2021
DOI
https://doi.org/10.1007/978-1-4842-6694-6_19
Online ISBN
978-1-4842-6694-6
Publisher
Apress
Copyright information
© Sourabh Mishra 2020

Video Transcript

Gauge chart. A gauge chart is also known as a dial chart or a speedometer. These types of charts read the needle on the dial. These types of chart provide great visualization for a dashboard. Gauge charts are mostly used by aircraft pilots.

Let’s take a look at how you can implement a gauge chart using Highcharts and Angular. So for building gauge chart, this Highcharts called dependency is required. If you see in the code, chart type is gauge. You can see here ten section. Here you can set your angle. So in the chart from there to there you want to make this meter.

You can set gradient color, et cetera, here very easily. Now if you see y-axis here you can set min and max value. Now see the series section here, you can set a speed needle with data section. So this is the way you can create gauge chart. Type ng serve into terminal window, you will get output.