Multicolor series demo

author(s): Black Label

by J. Albert Bowden

HTML

<link rel="stylesheet" href="http://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/js/highcharts.js"></script>
<script src="https://blacklabel.github.io/multicolor_series/js/multicolor_series.js"></script>
<div id="container" class="chart"></div>

CSS

body {
    padding: 0px !important;
}

JavaScript

$(function () {
    
    var colors = ['red','orange','green','blue','orange','violet'];
    
    
    function color(i) {
        if (i < colors.length) return colors[i];
        else {
            var idx = i % colors.length;
            return colors[idx];
        }
    }

    function genData(n) {
        var d = [],
            i = 0;
        while (i < n) {
            var v = Math.round(i / 16);
            d.push({
                y: Math.random() * 100,
                segmentColor: color(v),
            });
            i++;
        }
        return d;
    }

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'coloredline',
            zoomType: 'xy'
        },
        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: [{
            data: genData(256)
        }]
    });
});