Dynamic Gradient in Vega Via Signals

Question

I create a chart using vegalite and apply gradient in bar color ,but i want to make param for the color that are define in gradient basically want to bind a param on gradient i just try not working by making params barcolor --

how i can bind this with color vai params

Editor link

Answer 1

Gradients don't support signals but you can define a gradient in a signal.

e.g.

Here you could switch between two different gradients - test1 and test2.
{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 200,
  "height": 200,
  "padding": 5,
  "signals": [
    {
      "name": "test1",
      "update": "{gradient: 'linear', stops: [{offset: 0, color: 'green'},  {offset: 1, color: 'red'}]}"
    },
        {
      "name": "test2",
      "update": "{gradient: 'linear', stops: [{offset: 0, color: 'red'},  {offset: 1, color: 'green'}]}"
    }
  ],
  "marks": [
    {
      "type": "rect",
      "encode": {
        "enter": {
          "x": {"value": 0},
          "x2": {"value": 100},
          "y": {"value": 0},
          "y2": {"value": 400},
          "fill": {"signal": "test1"}
        }
      }
    }
  ]
}