# Scale - color range based on field value

**URL:** <https://discuss.elastic.co/t/scale-color-range-based-on-field-value/243580>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [August 3, 2020, 1:30pm UTC](https://discuss.elastic.co/t/scale-color-range-based-on-field-value/243580 "2020-08-03T13:30:11Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Michaela\_Krkosova](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/michaela_krkosova/32/46926_2.png) [@Michaela\_Krkosova](https://discuss.elastic.co/u/Michaela_Krkosova)\
**Post date:** [August 3, 2020, 1:30pm UTC](https://discuss.elastic.co/t/scale-color-range-based-on-field-value/243580/1 "2020-08-03T13:30:11Z")

</div>

Hi there

in schema [https://vega.github.io/schema/vega/v4.3.0.json](https://vega.github.io/schema/vega/v4.3.0.json)  
and have this dataset named **teams\_legend** :

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/7/0/70d5ca93372b49729f7ff3365bc92dc855d4b8de.png)

then i have scale

```
{
      "name": "color2",
      "type": "ordinal",
      "domain": {"data": "teams_legend", "fields": [{"data": "teams_legend", "field": "pracovnik_full"}]},
      "range":[
          #756bb1","#e65b16","#3182bd","#31a354","#636363",#9e9ac8","#fd8d3c","#6baed6","#74c476","#bcbddc", "#fdae6b","#9ecae1","#a1d99b","#bdbdbd","#dadaeb","#fdd0a2","#c6dbef","#c7e9c0","#d9d9d9"
  ]
}

```

I want to add some kind of conditioning to this scale:  
when legend == 0, then color should be white, else use color from range.  
Is it even possible to change it here?

Final vizualization should looks similar to this:

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/f/e/fe0e2388da594592cb09228c9793dd6fba355eb7.png)

Thank you

Misa

---

<div class="post-metadata">

**Author:** ![Midas](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/midas/32/50275_2.png) [@Midas](https://discuss.elastic.co/u/Midas)\
**Post date:** [August 12, 2020, 12:37am UTC](https://discuss.elastic.co/t/scale-color-range-based-on-field-value/243580/2 "2020-08-12T00:37:31Z")

</div>

Misa,

You could put your color palette in a signal (like "signals": [{"name": "colorPalette", "value": ["red", "blue", "purple"]}] ). then you could go into your scale and write it as: "range": {"signal": "data('teams\_legend').legend == 0 ? 'white' : colorPalette"}. I'm not entirely sure that that will work right, but please give it a whirl and let me know if it works.

-Midas

---

<div class="post-metadata">

**Author:** ![Michaela\_Krkosova](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/michaela_krkosova/32/46926_2.png) [@Michaela\_Krkosova](https://discuss.elastic.co/u/Michaela_Krkosova)\
**Post date:** [August 13, 2020, 7:23am UTC](https://discuss.elastic.co/t/scale-color-range-based-on-field-value/243580/3 "2020-08-13T07:23:38Z")

</div>

Hi Midas  
I tried this solution in previous work - it works fine but don't exactly fulfill my needs.  
I managed to solve this problem by usage of production rules in legend. Its little bit more complex (combinated with signals), but maybe it can help other seekers :

```
  "legends": [
{
  "clipHeight": 30,
  "title": "Zaměstnanci",
  "orient": "none",
  "padding": {"value": -250},
  "fill": "color",
  "gridAlign": "none",
  "encode": {
    "title": {
      "update": {
        "fontSize": {"value": 14},
        "fill": {"signal": "Zobrazení === 'Po zaměstnancích' ? 'black' : 'white'"}
      }
    },
    "labels": {
      "interactive": true,
      "update": {
        "fontSize": {"value": 10},
        "fill": [
          {"test": "!indata('teams_empty','pracovnik_full',datum.value)", "value": "black"},
          {"value": "grey"}
        ],
        "opacity": {"signal": "Zobrazení === 'Po zaměstnancích' ? 1 : 0"}
      }
    },
    "symbols": {
      "update": {
        "stroke": {"signal": "datum.legend == 0 ? 'black' : 'transparent'"},
        "fill": [
          {
            "test": "!indata('teams_empty','pracovnik_full',datum.value)",
            "scale": "color",
            "field": "value"
          },
          {"value": "white"}
        ],
        "size": {"signal": "Zobrazení === 'Po zaměstnancích' ? 50 : 0"}
      }
    },
    "legend": {"update": {"x": {"signal": "width", "offset": 5}, "y": {"value": 250}}}
  }
} ]

```

I highly appreciate your help 🙂

Misa

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [September 10, 2020, 7:23am UTC](https://discuss.elastic.co/t/scale-color-range-based-on-field-value/243580/4 "2020-09-10T07:23:53Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.