How to show negative values different color in column chart?

181 views Asked by At

Is it possible that in a column chart like this one, we can have the negative values show red color?

"data": [
    {
        "label": "Week 1",
        "value": "14.5"
    }, 
    {
        "label": "Week 2",
        "value": "-6.5"
    }, 

JsFiddle

2

There are 2 answers

0
alttag On BEST ANSWER

There is some useful documentation on highlighting specific data here.

You'll need to specify a color attribute on specific data points.

"data": [
    {
        "label": "Week 1",
        "value": "14.5"
    }, 
    {
        "label": "Week 2",
        "value": "-6.5",
        "color": "#ff0000"
    }, 
    //...
]

One thing that may help you to handle this is the Array.forEach() function:

var theData = [
    {
        "label": "Week 1",
        "value": "14.5"
    }, 
    {
        "label": "Week 2",
        "value": "-6.5"
    }
];

// Magic is here:
theData.forEach(function(val) {
    if (val.value < 0) {         
        val.color = "#ff0000";
    }
});

Updated Fiddle

0
Serg Chernata On

You can specify displayValue attribute:

"data": [
    {
        "label": "Week 1",
        "displayValue": '<font style="color:black;">14.5</font>', 
        "value": "14.5"
    }, 
    {
        "label": "Week 2",
        "displayValue": '<font style="color:red;">-6.5</font>', 
        "value": "-6.5"
    },