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 a VU meter


A VU meter is the same as an angular gauge but, instead of having a full circle-like shape, it's more like an arc. All the configuration options that we learned for the angular gauge chart apply to the VU meter as well.

In the following example, we will create a simple VU meter to plot the global emission of CO2 in the year 2012:

$( '#chart_container' ).highcharts({
  chart: {
    type: 'gauge',
    plotBackgroundColor: 'none'
  },
  title: {
    text: 'Global CO<sub>2</sub> Emission in 2012 (in billion metric tons)',
    useHTML: true
  },
  pane: {
    startAngle: -45,
    endAngle: 45,
    background: {
      backgroundColor: 'none',
      borderColor: 'none'
    },
    size: 400,
    center: ['50%', '60%']
  },
  tooltip: {
    enabled: false
  },
  plotOptions: {
    gauge: {
      dial: {
        radius: '95%'
      }
    }
  },
  yAxis: {
    min: 0,
    max: 16,
    tickInterval: 2,
    tickPosition: 'outside',
    minorTickInterval: 0,
    labels: ...