# Set vega background color with threshold

**URL:** <https://discuss.elastic.co/t/set-vega-background-color-with-threshold/265038>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [February 22, 2021, 8:04am UTC](https://discuss.elastic.co/t/set-vega-background-color-with-threshold/265038 "2021-02-22T08:04:44Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![111439](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/111439/32/83462_2.png) [@111439](https://discuss.elastic.co/u/111439)\
**Post date:** [February 22, 2021, 8:04am UTC](https://discuss.elastic.co/t/set-vega-background-color-with-threshold/265038/1 "2021-02-22T08:04:45Z")

</div>

Hello Everybody, I have question with vega visualize (pie chart).  
I want to set background color on vega visualize by condition using data.  
{"key": "tier1", "doc\_count": 1},  
{"key": "tier2", "doc\_count": 2},  
{"key": "tier3", "doc\_count": 3},  
{"key": "tier4", "doc\_count": 4},  
{"key": "tier5", "doc\_count": 5}

If data have value **(key == tier4 and doc\_count \> 0)**  
I want to change background color to red, But other case set background to default color (white).

```
{

  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",

  "data": {

    "name": "check_data",

    "values": [

      {"key": "tier1", "doc_count": 1},

      {"key": "tier2", "doc_count": 2},

      {"key": "tier3", "doc_count": 3},

      {"key": "tier4", "doc_count": 4},

      {"key": "tier5", "doc_count": 5}

    ]

  },

  "mark": "arc",

  "encoding": {

    "theta": {"field": "doc_count", "type": "quantitative", "stack": true},

    "color": {"field": "key", "type": "nominal", "scale": {"range": ["#00641a", "#49d223", "#f4f80b", "#dc3b0a", "#f80a0a"]}}

  }

}
```

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [February 24, 2021, 11:16pm UTC](https://discuss.elastic.co/t/set-vega-background-color-with-threshold/265038/2 "2021-02-24T23:16:34Z")

</div>

I don't think this is possible if you are referring to the main background.

But you might be able to put a `rect` or `square` behind your chart and color it appropriately.

---

<div class="post-metadata">

**Author:** ![111439](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/111439/32/83462_2.png) [@111439](https://discuss.elastic.co/u/111439)\
**Post date:** [March 2, 2021, 2:57am UTC](https://discuss.elastic.co/t/set-vega-background-color-with-threshold/265038/3 "2021-03-02T02:57:07Z")

</div>

@aaron-nimocks  
thank you for suggestion, I was be able to solve the problem with the code below.

```
{

    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",

  

    "data": {

      "name": "check_data",

      "values": [

        {"key": "tier1", "doc_count": 1},

        {"key": "tier2", "doc_count": 2},

        {"key": "tier3", "doc_count": 3},

        {"key": "tier4", "doc_count": 4},

        {"key": "tier5", "doc_count": 5}

      ]

    },

  

    "mark": {"type": "arc", "outerRadius": 80, "innerRadius": 40},

  

    "encoding": {

      "theta": {"field": "doc_count", "type": "quantitative", "stack": true},

      "color": {"field": "key", "type": "nominal", "legend": null, "scale": {"range": ["#00641a", "#49d223", "#f4f80b", "#dc3b0a", "#f80a0a"]}},

      "tooltip": [{"field": "key", "type": "nominal", "title": "Tier"},{"field": "doc_count", "type": "quantitative", "title": "Count"}]

    },

  

    "view": {"stroke": null},

  

    "background": {

      "expr": "indata('check_data', 'key', 'tier4') || indata('check_data', 'key', 'tier5') ? '#b80d0d' : '#FFFFFF'"

    }

}
```

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [March 2, 2021, 11:11am UTC](https://discuss.elastic.co/t/set-vega-background-color-with-threshold/265038/4 "2021-03-02T11:11:11Z")

</div>

Thank you for sharing that answer! I didn't even think about using an expression for the background to grab the data.

---

<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:** [March 30, 2021, 11:11am UTC](https://discuss.elastic.co/t/set-vega-background-color-with-threshold/265038/5 "2021-03-30T11:11:31Z")

</div>

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