Highcharts Area Chart - Specifying Area Color

3
votes

I'm new to coding, and I feel like this answer shouldn't be very difficult; yet, I've struggled with it for about two days now and so I'm looking for help.

I'm trying to specify the colors of areas in Highcharts' "Area Chart with Negative Values". I'm using Highcharts' basic template, but can't figure out how to change the colors of the respective areas.

Here's the JSfiddle that includes me trying to specify the color; when I do so, the chart fails to run. (Notice I've tried to change the color of the "john" series).

http://jsfiddle.net/aoouym2o/

I followed the instructions given in HighCharts' API, but I can't make it work. Here's the API section: http://api.highcharts.com/highcharts#plotOptions.area.color

Again, here's the original code without me trying to change any color: 

$(function () {
$('#container').highcharts({
    chart: {
        type: 'area'
    },
    title: {
        text: 'Area chart with negative values'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    credits: {
        enabled: false
    },
    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]
    }]
});

});

What am I missing?

4
javascripthighcharts

4 Answers

5
votes

You did it exactly right, you were just missing a comma before your added color setting ;)

series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2],
        color: '#FF0000'
    },

Here is a link to a modified fiddle. (updated link to the working version)

2
votes

You can set color for the chart by specifying it in each series object:

    series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2],
        color: '#0000FF'
    }, {
        name: 'Jane',
        data: [2, -2, -3, 2, 1],
        color: '#FF0000'
    }, {
        name: 'Joe',
        data: [3, 4, 4, -2, 5],
        color: '#00FF00'
    }]
2
votes

Just change color setting :P

        series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2],
        color : '#f7a35c'
    }, {
        name: 'Jane',
        data: [2, -2, -3, 2, 1],
        color: '#7cb5ec'
    }, {
        name: 'Joe',
        data: [3, 4, 4, -2, 5],
        color: '#90ed7d'
}]

and if you want to change the color of the number > 0 watch http://www.highcharts.com/docs/chart-concepts/series

2
votes

Add option:

plotOptions: {
    series: {
        lineColor: '#303030'
    }
},