CODEWITHSUNDEEP
javascriptcsshighcharts
Adam
Adam

Reputation: 2031

Change Highcharts sparklines marker colours

How can I colour the markers in a Highcharts Sparkline? Below has no effect, the markers all stay in their default blue colour.

var $sparkline = $('.sparkline'),
    colors = ['red','green','blue','green','red'],
    data = [10,20,30,40,50];

$sparkline.highcharts('SparkLine', {
    series: [{
        data: data
    }],
    plotOptions: {
        series: {
            marker: {
                fillColor: {
                    formatter: function () {
                        return colors[this.x];
                    }
                }
            }
        }
    },
    chart: {}
});

Upvotes: 1

Views: 893

Answers (1)

James Donnelly
James Donnelly

Reputation: 128771

I don't know if there's a way to target that particular aspect of the chart, but the blue colour used is the default, first colour in the chart's main colors array (#7cb5ec). This is configured via the colors property (http://api.highcharts.com/highcharts#colors):

$sparkline.highcharts('SparkLine', {
    colors: [ ... ],
    series: [{
        data: data
    }],
    ...
});

To change it to red as an example, you'd simply place '#f00' as the first item in the array:

$sparkline.highcharts('SparkLine', {
    colors: [ '#f00' ],
    ...
});

JSFiddle demo.

Upvotes: 1

Related Questions