jsonvisualizationvega-litevegavega-embed

Dynamic Gradient in Vega Via Signals


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


Solution

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