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
                    }
                ]
                });