Bar Chart's Custom CSS


Hi guys,

Could you help me with setting up a bar chart that I can modify the colours of each bar? I have a chart of 6 bars, 2 of them are of a same category and I want them to be the same colour and stand out from the other four.

Thanks so much!

Push to Geckoboard's custom widgets from a Google Sheet

Hi David,

I moved this to a new topic because it’s only achievable (at this time) through CSS, rather than through the API. Could you share for which visualization you’d like to do this? I ask because there are two different versions of our column/bar chart visualization, so the answer depends on that :slight_smile: (in the future, though, we’ll be consolidating these!)


I am referring to the column chart visualization. But if there is away to do it for the horizontal bar chart then double plus good. I realize that by setting a goal, those columns exceeding the goal will have a different color and that can be changed in CSS. However that’s still a bit limited.

Please let me know if there’s a better way.


Hi @langswchertz, you can target the column/horizontal bar chart with the same CSS :slight_smile: What I’d meant above is that we have an older visualization that is a column-only chart.

Here’s an example:

And the CSS for it:

/* Target the bar/column chart */, .barchart .bar {
  fill: #81259e!important; /* Purple */

/* Target the bar/column chart goal values */, .barchart {
  fill: #ea3346!important; /* Pink/Red */

There may be in the future a way to do this from the UI, but at this time this is the best way. Let me know if you need a hand with anything further!