# Chart color by variable

**URL:** <https://community.grafana.com/t/chart-color-by-variable/65432>\
**Category:** Bar Chart Panel\
**Tags:** templating, bar-chart\
**Created:** [May 10, 2022, 9:05am UTC](https://community.grafana.com/t/chart-color-by-variable/65432 "2022-05-10T09:05:43Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kon3dos](https://avatars.discourse-cdn.com/v4/letter/k/e19b73/32.png) [@kon3dos](https://community.grafana.com/u/kon3dos)\
**Post date:** [May 10, 2022, 9:05am UTC](https://community.grafana.com/t/chart-color-by-variable/65432/1 "2022-05-10T09:05:43Z")

</div>

Hi everyone,

My problem is pretty straightforward.

I have a variable with 2 values: val1, val2.

If val1 is chosen, I want my chart colors to be green-yellow.  
If val2 is chosen, I want my chart colors to be blue-red.

I have not found a way to bind chart colors to a variable.

Thanks in advance for your help!

---

<div class="post-metadata">

**Author:** ![boazreicher](https://avatars.discourse-cdn.com/v4/letter/b/e5b9ba/32.png) [@boazreicher](https://community.grafana.com/u/boazreicher)\
**Post date:** [May 10, 2022, 10:58am UTC](https://community.grafana.com/t/chart-color-by-variable/65432/2 "2022-05-10T10:58:44Z")

</div>

Here’s a possible solution. It’s sort of a hack, but it might work for your use case:

1. Create a custom variable with the labels “val1” and “val2”.  
Note that `val1 : ⠀, val2 : ⠀⠀` is a list of two key : value pairs, where the value for “val1” is Unicode character U+2800 (blank space), and the value for “val2” is just two U+2800 characters. This is just so they’ll be “invisible” in your legend, but Grafana will not treat them as whitespaces.

 ![colors3](https://us1.discourse-cdn.com/grafana/original/3X/6/b/6b5be1a8f50aae9572ecc93997a79e22329b12ce.png)

1. Change the alias for your data sources so they’ll include the variable, something like “series1$query1” and “series2$query1”.

2. Create an override for each series and each variable value. Give each specific combination the specific color that you want:

 ![colors4](https://us1.discourse-cdn.com/grafana/original/3X/a/4/a45ce22c0c1550b8137a21be54b301d7cb6aebc4.png)

Note that the values in the “Fields with name matching regex” inputs contain the invisible characters.

This gets you the following, where the colors of the 2 series change from green-yellow to blue-red, depending on the selection of the query1 variable:

 ![colors1](https://us1.discourse-cdn.com/grafana/original/3X/c/8/c8d2a6f5854e27362b0f4d5702d990cf7e52cd03.png)

 ![colors2](https://us1.discourse-cdn.com/grafana/original/3X/7/b/7b7764947c8dc0516608972741899fb74c4fef9d.png)