Solid gauges were introduced in Highcharts 4 and they are similar to angular gauges, except that they use solid colors to display the value. This color responds to the value on the y axis, and we can define the colors that correspond to different value ranges in yAxis.stops in an array.

Consider the following example in which we will configure a solid gauge:

$( '#chart_container' ).highcharts({
  chart: {
    type: 'solidgauge'
  },
  title: {
    text: 'Speedometer'
  },
  pane: {
    startAngle: -90,    endAngle: 90,
    background: {
      backgroundColor: 'none',
      borderColor: '#aaa',
      innerRadius: '100%',
      outerRadius: '60%',
      shape: 'arc'
    }
  },
  plotOptions: {
    solidgauge: {
      dataLabels: {
                y: -40,
                borderWidth: 0,
                useHTML: true
            }
    }
  },
  tooltip: {
    enabled: false
  },
  yAxis: {
    title: {
      text: 'km/h',
      align: 'low',
      x: -15
    },
    stops: [
      [0.1, '#50bf39'],
      [0.4, '#9ebf39'],
      [0.7, '#bf9e39'],
      [0.9, '#bf3939']
    ],
    min: 0,
    max: 200,
    lineWidth: 0,
    tickWidth: 0,
    minorTickWidth: 0,
    labels: {
      enabled: false
    }
  },
  series: [{
    name: 'Speed',
    data: [120]
  }]
});

Notice the pane component where we have set startAngle and endAngle to 90 and -90 respectively. This will give the gauge chart its turned-over U-shape. The next two properties innerRadius and outerRadius define the arc shape of the gauge.

The stops property takes an array for color values that corresponds to the value ranges on the y axis. We have defined four stops for four value ranges. Value ranges can be defined by a number from 0 to 1 that represents the percent value across the pane.

The following is a screenshot of the solid gauge produced:

In this screenshot, the gauge shows the color green (#9ebf39) since the data we have plotted (75 kmph) falls within the range of the second stop.

In the next section, we will create a waterfall chart that is used to show data with cumulative values.