score:5

Accepted answer

You can do it they way Jeremy mentioned, by setting the colors options for each chart. Or you can override the default color array as follows

Highcharts.setOptions({
    colors:['red','green','blue']
});

The benefit of this approach is you only have to call this once, before create any chart. And all charts after this will use these colors, without you needing to set this option on each chart. Most of the websites have a common.js or a similar javascript file that is generally loaded before any other custom script, you just need to add this code to that file and forget about the colors thereafter

Update
Since you want all series in the same chart to be of a single color, you can override the colors array completely and make it have only one color

Highcharts.getOptions().colors = ['red'];

This method will leave the navigator (blue mini graph at bottom in Highstock) to be of default blue color, this has to be overriden in a different way from options.

P.S. the above way is not the recommended way of overriding default options, correct way would be to do setOptions(), but that would cause a merge with existing defaults and hence the array size would be more than 1.

Alternately, you can just override the getColor method as follows, to always return the color of your choice. Again you need to do this before you call the chart's constructor

Highcharts.Series.prototype.getColor=function(){
    this.color= '#f00';
}

Setting default colors @ jsFiddle

score:1

You can define an array of hex colors, and then use that array in your chart declaration. All series in the chart object will pull from this array of colors.

If you have multiple chart declarations, you can just use the same array.

Here's one of the Highcharts samples, with an array of custom colors added (run with jsfiddle):

$(function () {
    var myColors = [
        '#ff0000',
        '#ff6600',
        '#ffcc00'
    ];
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'bar'
            },
            colors: myColors,
            title: {
                text: 'Stacked bar chart'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                }
            },
            legend: {
                backgroundColor: '#FFFFFF',
                reversed: true
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        this.series.name +': '+ this.y +'';
                }
            },
            plotOptions: {
                series: {
                    stacking: 'normal'
                }
            },
                series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2]
            }, {
                name: 'Jane',
                data: [2, 2, 3, 2, 1]
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5]
            }]
        });
    });

});

Hope this helps!


Related Query

More Query from same tag