Change graph color above and below plot-line in Column chart in Highcharts

Question

I have a graph with two plot-lines.I need to color the column portion with different color after crossing each plot-lines. But zones makes different column different color not the portion above plot-lone. I have tried Zones & Thresholds but haven't got any solution for column chart.

There are solutions for line chart but they don't work for column chart.

Highcharts.chart('container', {
                    chart: {
                        zoomType: 'xy',
                        events: {
                            load: function () {
                                this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
                            }
                        }
                    },
                    title: {
                        text: ''
                    },
                    credits: {
                        enabled: false
                    },
                    subtitle: {
                        text: ''
                    },
                    useUTC: false,
                    xAxis: [{
                        type: 'datetime',
                        dateTimeLabelFormats: {
                            day: '%e %b',
                            hour: '%I:%M %P'
                        }

                    }],
                    yAxis: [{ // Primary yAxis
                        labels: {
                            format: '{value:,.0f}',
                            style: {
                                color: Highcharts.getOptions().colors[1]
                            }
                        },
                        plotLines: [peakPlotLineOption, averagePlotLineOption],
                        title: {
                            text: 'Consumption (kWh)',
                            style: {
                                color: Highcharts.getOptions().colors[1]
                            }
                        }}

                    , { // Secondary yAxis
                        title: {
                            text: '',
                            style: {
                                color: Highcharts.getOptions().colors[0]
                            }
                        },
                        labels: {
                            format: '{value} kWh',
                            style: {
                                color: Highcharts.getOptions().colors[0]
                            }
                        },
                        visible: false
                    }],

        tooltip: { 
            crosshairs: true,
            shared: true,
            valueSuffix: '°C'
        },
                    series: [{
                        name: 'ABC',
                        type: 'column',
                        data: 

                         [
                         { x: Date.UTC(2017, 6, 2, 0), y: 49.9,  bId: 1 },
                         { x: Date.UTC(2017, 6, 2, 1), y: 71.5,  bId: 2 },
                         { x: Date.UTC(2017, 6, 2, 2), y: 106.4,  bId: 3 },
                         { x: Date.UTC(2017, 6, 2, 3), y: 129.2,  bId: 4 },
                         { x: Date.UTC(2017, 6, 2, 4), y: 144.0,  bId: 5 },
                         { x: Date.UTC(2017, 6, 2, 5), y: 176.0,  bId: 6 },
                         { x: Date.UTC(2017, 6, 2, 6), y: 135.6, bId: 7 },
                         { x: Date.UTC(2017, 6, 2, 7), y: 148.5,  bId: 8 },
                         { x: Date.UTC(2017, 6, 2, 8), y: 216.4,  bId: 9 },
                         { x: Date.UTC(2017, 6, 2, 9), y: 194.1,  bId: 10 },
                         { x: Date.UTC(2017, 6, 2, 10), y: 95.6,  bId: 11 },
                         { x: Date.UTC(2017, 6, 2, 11), y: 54.4,  bId: 12 },
                         { x: Date.UTC(2017, 6, 2, 12), y: 45, bId: 13 },
                         { x: Date.UTC(2017, 6, 2, 13), y: 62,  bId: 14 },
                         { x: Date.UTC(2017, 6, 2, 14), y: 35,  bId: 15 }
                         ], 
                        tooltip: {
                            valueSuffix: ' kWh'
                        },
                        yAxis: 0,
                       zones: [{
                                value: 50,
                                color: '#90ed7d'
                              }, {
                                value: 100,
                                color: '#FFDE00'
                              },{
                                color: '#CE0000'
                              }]
                   }
                    , {
                        // Series that mimics the plot line
                        color: '#ee8176',
                        name: 'contract capacity',
                        dashStyle: 'Solid',
                        marker: {
                            enabled: false
                        },
                        events: {
                            legendItemClick: function (e) {
                                if (this.visible) {
                                    this.chart.yAxis[0].removePlotLine(averagePlotLine);
                                }
                                else {
                                    this.chart.yAxis[0].addPlotLine(averagePlotLineOption);
                                }
                            }
                        },
                        yAxis: 0
                    }, {
                        // Series that mimics the plot line
                        color: '#9fa7b1',
                        name: 'max demand',
                        dashStyle: 'Solid',
                        marker: {
                            enabled: false
                        },
                        events: {
                            legendItemClick: function (e) {
                                if (this.visible) {
                                    this.chart.yAxis[0].removePlotLine(peakPlotLine);
                                }
                                else {
                                    this.chart.yAxis[0].addPlotLine(peakPlotLineOption);
                                }
                            }
                        },
                        yAxis: 0
                    }               
                ]
                });

JsFiddle Colulmn chart

Answer 1

By default Highcharts doesn't support that kind of coloring.

The workaround here is to mimic zones using stacking mechanism and dividing a point into multiple ones that reflect zones. Every series contains points from one zone:

var zones = [{
  color: 'green',
  start: 0
}, {
  color: 'yellow',
  start: 30
}, {
  color: 'red',
  start: 80
}];

//(...)

function prepareSeries(series) {
  var newSeries = [],
    data = series.data;

  series.data = [];

  // create separate series for each zone
  zones.forEach(function(z, i) {
    newSeries.push({
      data: []
    }); // copy series properties
  });

  // create new points and add them to new series array
  data.forEach(function(p) {
    for (var i = 0; i < zones.length; i++) {
      var currentZone = zones[i],
        nextZone = zones[i + 1],
        zoneSeries = newSeries[i];

      zoneSeries.color = currentZone.color;

      if (nextZone && p.y > nextZone.start) {
        zoneSeries.data.push({
          x: p.x,
          y: nextZone.start - currentZone.start
        });
      } else if (p.y > currentZone.start) {
        zoneSeries.data.push({
          x: p.x,
          y: p.y - currentZone.start
        });
      }

    }
  });

  newSeries.reverse();

  // one legend for all created series
  for (var i = 1; i < newSeries.length; i++) {
    newSeries[i].linkedTo = ':previous';
  }

  return newSeries;
}

Live demo: http://jsfiddle.net/kkulig/g77od3wr/

linkedTo causes that all series are connected (there's only one legend item). tooltip.shared: true and tooltipFormater are used for restoring the previous formatting of the tooltip (total value instead of all series listed).