Book Image

Highcharts Essentials

By : Bilal Shahid
Book Image

Highcharts Essentials

By: Bilal Shahid

Overview of this book

Table of Contents (16 chapters)
Highcharts Essentials
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Creating an angular gauge chart


Angular gauge charts are also known as speedometers and dials. They are great to use on dashboards, especially when the plotted data is being fetched in real time. These charts don't contain the x axis, but instead, they contain only one value axis, that is, the y axis. Anything provided for the x axis will not be drawn on the chart.

In the following example, we will plot a simple angular gauge chart to take a look at the configuration options it offers:

$( '#chart_container' ).highcharts({
  chart: {
    type: 'gauge'
  },
  title: {
    text: 'Speedometer'
  },
  pane: {
    startAngle: -150,
    endAngle: 150
  },
  yAxis: {
    title: {
      text: 'km/h'
    },
    min: 0,
    max: 200
  },
  series: [{
    name: 'Speed',
    data: [120]
  }]
});

Nothing much is going on here as we declared the chart type to be gauge. Then, for the pane component, we defined its start and end angles at -150 and 150, respectively. This will create a simple gauge chart as...