CODEWITHSUNDEEP
kibanavega-litevega
Светлана Семенова
Светлана Семенова

Reputation: 21

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

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

Upvotes: 1

Views: 3804

Answers (1)

wahab memon
wahab memon

Reputation: 2416

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

Upvotes: 1

Related Questions