highcharts w multi zones

author(s): Torstein Hønsi

by grant

HTML

<link rel="stylesheet" href="https://code.highcharts.com/css/highcharts.css">
<script src="https://code.highcharts.com/js/highcharts.js"></script>
<script src="https://code.highcharts.com/js/modules/exporting.js"></script>
<div id="container" style="height: 400px; max-width: 800px; margin: 0 auto">
</div>
<div>
Selway at Paradise is conceptual. 
</div>

CSS

@import '';
.highcharts-point {
  stroke: white;
}

.highcharts-graph.low {
  stroke: #FFFF00;
}

.highcharts-area.low {
  fill: #FFFF00;
}

.highcharts-point.low {
  fill: #FFFF00;
}

.highcharts-graph.high {
  stroke: #FF0000;
}

.highcharts-area.high {
  fill: #FF0000;
}

.highcharts-point.high {
  fill: #FF0000;
}

.highcharts-graph.go {
  stroke: #90ed7d;
}

.highcharts-area.go {
  fill: #90ed7d;
}

.highcharts-point.go {
  fill: #90ed7d;
}
.highcharts-area.highp {
  fill: #FF4E33;
}

.highcharts-point.highp {
  fill: #FF4E33;
}

.highcharts-area.gop {
  fill: #BAFF43;
}

.highcharts-point.gop {
  fill: #BAFF43;
}

JavaScript

Highcharts.chart('container', {
  title: {
    text: 'Selway at Lowell '
  },
  subtitle: {
    text: 'Monthly Average'
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  yAxis: {
    title: {
      text: 'CFS'
    }
  },


  plotOptions: {
    series: {
      name: 'Selway at Lowell',
      zones: [{
        value: 1000,
        className: 'low'
      }, {
        value: 12000,
        className: 'go'
      }, {
        className: 'high'
      }],
      threshold: 0
    },
      legend: {
		        enabled: false
		    },
    line: { 
    	dataLabels: {
    		enabled: true
    	}
   	}
  },

  series: [{
      type: 'areaspline',
      data: [
        1290, 1570, 2330, 6050, 13200, 11600, 3080, 904, 737, 945, 1320, 1400
      ]
    },

    {
      type: 'areaspline',
      name: 'Selway at Paradise',
      data: [129, 157, 233, 605, 1320, 1160, 308, 90, 77, 94, 132, 140],
      zones: [{
        value: 100,
        className: 'lowp'
      }, {
        value: 1000,
        className: 'gop'
      }, {
        className: 'highp'
      }]
    }
  ]

});