How to change the background and color of text in the vega-lite visualization using checkbox?

user_13613487 0
Viewed 929

Maybe you can help. I wanted to create a checkbox that allows you to change the background and color of the text. I got an example using checkbox and fillOpacity (the fill opacity (value between [0,1]), editor. This code does not work in Kibana (error:cannot find a selection named "Show"), changed the fields, source

"params": [{
   "name": "Show",
   "bind": {"input": "checkbox"}
}]

to

"selection": {
  "Show": {
    "type": "single",
    "bind": {"input": "checkbox"}
  }
 }

editor, image

Now the code works in Kibana and vega editor and not correct. But this is only a layout, is it technically possible to change the background and color of the entire text in the showcase?

{
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "config": {"view": {"stroke": "transparent"}},
    
    "selection": {
        "Show": {
        "type": "single",
        "bind": {"input": "checkbox"}
        }
    },
    
    "data": {"values": [{"a": 28}]},
    
    "background": "orange",
    
    "mark": {"type": "text", "fill": "red","fontSize": 100},
    
    "encoding": {
        "fillOpacity": {
        "condition": {"value": 0, "selection": "Show"},
        "value": 1
        },
        "text": {
        "field": "a",
        "type": "quantitative"
        }
    }
}
kibana vega vega-lite
1 Answers

Yes, it is possible to change the background and color of the text by simply using the expr config with your param name which is binded with the checkbox. In the mentioned issue, the reason is stated why checkbox is not used with the selection terms, so params were introduced and an example is given in that url.

But you can refer the editor and below snippet for background and text color change:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "config": {"view": {"stroke": "transparent"}},
  "params": [{"name": "Show", "bind": {"input": "checkbox"}}],
  "data": {"values": [{"a": 28}]},
  "background": {"expr": "Show ? 'yellow' : 'orange'"},
  "mark": {
    "type": "text",
    "fill": {"expr": "Show ? 'red' : 'yellow'"},
    "fontSize": 100
  },
  "encoding": {"text": {"field": "a", "type": "quantitative"}}
}
user_77341000
Related