Dynamic Color using HighCharts Column Chart

Q&A
,
1

Is it possible to change the color on a bar based on value. I would like the Partner Net color to be Red if < 0 and Green if > 0? Is this Possible?

{
  "xAxis": {
    "categories": ["getColumn", 0]
  },
  "yAxis": [
    {
      "title": {
        "text": "Parter Net"
      }
    },
    {
      "title": {
        "text": "Churn Rate"
      },
      "opposite": true,
      "floor": -3,
      "ceiling": 0
    }
  ],
  "series": [
    {
      "type": "line",
      "data": ["getColumn", 1],
      "name": "Total Partners",
      "color": "Blue",
      "yAxis": 1
    },
    {
      "type": "column",
      "name": "Partners Added",
      "data": ["getColumn", 2],
      "color": "#00FF00",
      "dataLabels": {
        "enabled": true
      }
    },
    {
      "type": "column",
      "name": "Partners Lost",
      "data": ["getColumn", 3],
      "color": "#FF0000",
      "dataLabels": {
        "enabled": true
      }
    },
    {
      "type": "column",
      "name": "Partners Net",
      "data": ["getColumn", 4],
      "dataLabels": {
        "enabled": true
      }
    }
  ]
}
2

Hi @Alan_J_Lowenstein,
Since you can not apply conditional formatting in the standard way to highcharts, you could try adding in something like the following:

 "color": [
            "case",
            [">=", ["get", ["item"], 0], ["get", ["item"], 1]],
            "#99ADC8",
            "#E09C9D"
          ],

Let me know if this works for your case or if you have any additional questions!

3

Hi @Brett,
Thanks, however, I received the following error:

image
image527×154 8.21 KB

4

Hi @Alan_J_Lowenstein,
Could you share the error that it’s giving you?

This may be happening because were calling for the wrong fields in the case syntax. So to break down what I included;

[“>=”, [“get”, [“item”], 0], [“get”, [“item”], 1]]

So this is testing to see if the value from field ‘0’ is greater than or equal to field ‘1’. So I believe that you’ll need to compare the Partners Added against the Partners Lost instead of trying to pull in the values from Partners Net.

Based on your other code, I’m thinking that your visual’s ‘field’ well section, ‘Partners Added’ is the second value field and ‘Partners Lost’ is 3rd?

If that’s the case, what if you tried adjusting to the following:

“color”: [
“case”,
[“>=”, [“get”, [“item”], 1], [“get”, [“item”], 2]],
“#99ADC8”,
“#E09C9D”
],

5

Thanks Brett.. What I am actually trying to do is if the Partner Net Change is < 0 make the bar red and if it’s => 0 make the bar green? So it is the 3rd parameter.. here is the complete highcharts JSON

{
  "xAxis": {
    "categories": ["getColumn", 0]
  },
  "yAxis": [
    {
      "title": {
        "text": "Parter Net"
      }
    }
  ],
  "series": [
    {
      "type": "column",
      "name": "Partners Added",
      "data": ["getColumn", 1],
      "color": "#00FF00",
      "dataLabels": {
        "enabled": true
      }
    },
    {
      "type": "column",
      "name": "Partners Lost",
      "data": ["getColumn", 2],
      "color": "#FF0000",
      "dataLabels": {
        "enabled": true
      }
    },
    {
      "type": "column",
      "name": "Partners Net",
      "data": ["getColumn", 3],
      "dataLabels": {
        "enabled": true
      }
    }
  ]
}
6

Hi Brett,

I was able to figure it out (credit to ChatGPT)


{
  "type": "column",
  "name": "Partners Net",
  "data": [
    "map",
    ["getColumn", 3],
    {
      "y": ["item"],
      "color": [
        "case",
        ["<", ["item"], 0], "#FF0000",
        "#00AA00"
      ]
    }
  ],
  "dataLabels": { "enabled": true }
}

I’m also going to try,


{
  "type": "column",
  "name": "Partners Net",
  "data": ["getColumn", 3],
  "zoneAxis": "y",
  "zones": [
    { "value": 0, "color": "#FF0000" },
    { "color": "#00AA00" }
  ],
  "dataLabels": { "enabled": true }
}

The legend is off, it’s showing the default color, not sure anything I can do for that

Thanks for pointing me in the right direction

Al

1 Like
7

Hi @BreachSecure,
Glad you were able to piece this together!
I’ll take a look around and see if I can find some documentation that helps with the legend coloring as well, those and tool tips always like to play difficult when working with these highcharts!