Set vega background color with threshold

Elastic Stack Kibana
#1

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"]}}

  }

}
#2

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.

#3

@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'"

    }

}
1 Like
#4

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