Highcharts angular gauge: multiple dials with different colors

Question

I'm using an angular gauge in Highcharts with two dials, implemented as two series.

How do I set different colors for each of the dials to distinguish them?

Highcharts.chart('container', {

    chart: {
        type: 'gauge',
        plotBorderWidth: 0,
        plotShadow: false
    },

    pane: {
        startAngle: -150,
        endAngle: 150,
    },

    // the value axis
    yAxis: {
        min: 1,
        max: 5,
    },

    series: [{
        name: 'Me',
        data: [1.1],
        color: '#DDDF0D'  // doesn't seem to work            
      }, {
        name: 'Average',
        data: [3.3],
      }]
},

}

CSS styled mode will set all dials to the same color.

Suggestions?

Answer 1

You need to set it like this,

 yAxis: {
            min: 0,
            max: 100,
            stops: [
                [0.1, '#e74c3c'], // red
                [0.5, '#f1c40f'], // yellow
                [0.9, '#2ecc71'] // green
                ],
            minorTickInterval: null,
            tickPixelInterval: 400,
            tickWidth: 0,
            gridLineWidth: 0,
            gridLineColor: 'transparent',
            labels: {
                enabled: false
            }

DEMO

Answer 2

Ah okay, realised that I needed to add yAxis to series:

Highcharts.chart('container', {

chart: {
    type: 'gauge',
    plotBorderWidth: 0,
    plotShadow: false
},

pane: {
    startAngle: -150,
    endAngle: 150,
},

// the value axis
yAxis: {
    min: 1,
    max: 5,
},

series: [{
    name: 'Me',
    data: [1.1],
    yAxis: 0,
           dial: {
             backgroundColor: 'red'
           }
  }, {
    name: 'Average',
    data: [3.3],
    yAxis: 0,
           dial: {
             backgroundColor: 'green'
           }
  }]

},