Customizing the colors of individual series in HighCharts

Question

I am using HighCharts for a line graph and i am attemping to change the line color for each series. I did find this example here but the data is hard coded. My data is pulled from an Sql database and passed to the HTML page using some VB code.

        var chart; 
        $(document).ready(function () {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'column'
                },
                title: {
                    text: 'Chart Title'
                },
                subtitle: {
                    text: 'Chart subtitle'
                },
                xAxis: {
                    categories: [<%= GraphDate %>]
                    ,
                    labels:
                    {
                        rotation: -45,
                        align: 'right',
                        style:
                        {

                        }
                    }
                },
                yAxis: {
                    min: 160,
                    title: {
                        text: 'Temp'
                    }
                },
                legend: {
                    layout: 'vertical',
                    backgroundColor: '#FFFFFF',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 400,
                    y: 0,
                    floating: true,
                    shadow: true
                },
                tooltip: {
                    formatter: function () {
                        return '' +
                            this.x + ': ' + this.y + ' ºC';
                    }
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: 

                [<%= GraphSeries %>],
            });

I tried to style it using the other post however it failed to generate a chart. The main problem is though, the line graph has two series, so the below method would set the color for both series i assume? So, would i maybe need to format the series in my vb code somehow?

series: [{ 
    color: 'yellow',
    data: [
        [<%= GraphSeries %>]
    ]},

Edit:

$(document).ready(function () {
            chart = new Highcharts.Chart({
            colors: ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92']

                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'column'
                }

Sergio Tulentsev · Accepted Answer · 2012-04-01T11:26:30.763

26

Top level config can contain colors field. It's an array from which series colors will be picked.

See here.

Here's working piece from my project

var chart;
$(document).ready(function () {
    chart = new Highcharts.Chart({
        chart:{
            renderTo:'perfchart',
            type:'line',
            marginRight:130,
            marginBottom:25
        },
        colors: ['#0000FF', '#0066FF', '#00CCFF'],
        title:{
            text:'Historical system performance',
            x:-20 //center
        },

Appearance:

highcharts colors

edited Apr 01 '12 at 11:26

answered Apr 01 '12 at 11:16

Sergio Tulentsev

226,338
43
373
367

Ive tried entering the section explained on High Charts and it doesnt return a chart :-( : Highcharts.setOptions({ colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'] }); – Blob Apr 01 '12 at 11:21
Why do you call `setOptions` instead of `new Highcharts.Chart`? – Sergio Tulentsev Apr 01 '12 at 11:23
Because when i tried it in new Highcharts.Chart it didnt seem to work, and looked at the example on HighCharts. See edit above. Thanks – Blob Apr 01 '12 at 11:32
I see now.. thank you! (I needed to rebuild my solution) How embarrassing! – Blob Apr 01 '12 at 11:36

score 3 · Answer 2 · edited Sep 30 '15 at 12:11

3

The color can be configured as part of the series. Try something like this:

series: [
    {
        name: 'series I',
        color: '#ffffff',
        data: [17.4, 16.1, 19.45, 24.15, 28.44, 33.15, 37.2, 41.25, 43.3]
    }
];

edited Sep 30 '15 at 12:11

Wilt

41,477
12
152
203

answered Feb 25 '15 at 06:44

Vivek Singh

2,453
1
14
27

score 3 · Answer 3 · answered Apr 01 '12 at 11:42

See the code (and the plot that it renders) below.

The snippet below is a complete script--i.e., either put it in your markup between two script tags or as a stand-along js file with an includes in your markup.

Colors is a Chart object so the easiest way is to pass an array of colors (as hex strings):

 $(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line'
            },
            colors: ['#562F1E', '#AF7F24', '#263249', '#5F7F90', '#D9CDB6'],
            title: {
               text: false
            },
            yAxis: {
                title: {
                    text: false
                }
           },
           series: [{
                name: 'series I',
                data: [17.4, 16.1, 19.45, 24.15, 28.44, 33.15, 37.2, 41.25, 43.3]
           },
           {
                name: 'series II',
                data: [13.19, 17.23, 25.74, 28.5, 33.9, 35.62, 37.0, 36.6, 34.82]
           }
           ]
        });
    });
})

enter image description here

Customizing the colors of individual series in HighCharts

3 Answers3

Linked