Highcharts Guage Angular

Highcharts Angular Gauge

The following example demonstrates an angular gauge.

We have already learned the basic configuration syntax of Highcharts in previous chapters. Next, let's look at other configurations.

Configuration

chart.type Configuration

Configure the chart's type as 'gauge'. The chart.type describes the chart type. The default value is "line".

var chart = { type: 'gauge'};

pane Configuration

The pane is only applicable to polar charts and angular gauges. This configurable object holds general options for combining the x-axis and y-axis. Each x-axis and y-axis can be associated with a pane through an index.

var pane = {
    startAngle: -150, // The starting degree of the x-axis or gauge axis, given in degrees. 0 is North.
    endAngle: 150    // The ending degree of the x-axis polar or angular axis, given in degrees. 0 is North.
};

Example

Filename: highcharts_guage_angular.htm

$(document).ready(function() { var chart = { type: 'gauge', plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: false }; var title = { text: 'Speedometer' }; var pane = { startAngle: -150, endAngle: 150, background: [{ backgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, '#FFF'], [1, '#333'] ] }, borderWidth: 0, outerRadius: '109%' }, { backgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, '#333'], [1, '#FFF'] ] }, borderWidth: 1, outerRadius: '107%' }, { // default background }, { backgroundColor: '#DDD', borderWidth: 0, outerRadius: '105%', innerRadius: '103%' }] }; // the value axis var yAxis = { min: 0, max: 200, minorTickInterval: 'auto', minorTickWidth: 1, minorTickLength: 10, minorTickPosition: 'inside', minorTickColor: '#666', tickPixelInterval: 30, tickWidth: 2, tickPosition: 'inside', tickLength: 10, tickColor: '#666', labels: { step: 2, rotation: 'auto' }, title: { text: 'km/h' }, plotBands: [{ from: 0, to: 120, color: '#55BF3B' // green }, { from: 120, to: 160, color: '#DDDF0D' // yellow }, { from: 160, to: 200, color: '#DF5353' // red }] }; var series= [{ name: 'Speed', data: , tooltip: { valueSuffix: ' km/h' } }]; var json = {}; json.chart = chart; json.title = title; json.pane = pane; json.yAxis = yAxis; json.series = series; // Add some life var chartFunction = function (chart) { if (!chart.renderer.forExport) { setInterval(function () { var point = chart.series.points, newVal, inc = Math.round((Math.random() - 0.5) * 20); newVal = point.y + inc; if (newVal 200) { newVal = point.y - inc; } point.update(newVal); }, 3000); } }; $('#container').highcharts(json,chartFunction);});

The output of the above example is:

Highcharts Angular Gauge

YouTip