Multicolor series demo

author(s): Black Label

by Black Label

HTML

<link rel="stylesheet" href="https://blacklabel.github.io/multicolor_series/css/styles.css">
<link rel="stylesheet" href="https://blacklabel.github.io/multicolor_series/css/styles.css">
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://blacklabel.github.io/multicolor_series/js/multicolor_series.js"></script>
<div id="container" class="chart"></div>

JavaScript

$(function() {
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'coloredarea',
      zoomType: 'xy',
      styledMode: true
    },
    title: {
      useHTML: true,
      x: -11,
      y: 8,
      text: '<span class="chart-title">Multicolor series<span class="chart-href"> <a href="http://www.blacklabel.pl/highcharts" target="_blank"> Black Label </a> </span> <span class="chart-subtitle">plugin by </span></span>'
    },
    series: [{
      type: 'coloredarea',
      data: [{
        y: 200,
        segmentColor: 'rgba(255,0,0,0.5)'
      }, {
        y: 210,
        segmentColor: 'rgba(120,255,120,0.5)'
      }, {
        y: 210,
        segmentColor: 'rgba(255,0,0,0.5)'
      }, {
        y: 180,
        segmentColor: 'rgba(120, 120, 250, 0.9)'
      }, {
        y: 180,
        segmentColor: 'red'
      }]
    }]
  });
});