CODEWITHSUNDEEP
javascripthighcharts
Edward Ballantine
Edward Ballantine

Reputation: 81

Highcharts Area Chart - Specifying Area Color

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?

Upvotes: 6

Views: 7130

Answers (4)

Mahdi Afzal
Mahdi Afzal

Reputation: 827

Add option:

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

Upvotes: 2

jonc.js
jonc.js

Reputation: 438

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)

Upvotes: 8

alovaros
alovaros

Reputation: 476

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

Upvotes: 2

Giang Le
Giang Le

Reputation: 94

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'
    }]

Upvotes: 2

Related Questions