Revision history [back]

To depict a gradient using a line chart in Vega-Lite, you can map a continuous color scale to a field in the encoding channel that corresponds to the y-axis of the line chart.

For example, you can use the "color" encoding channel to map a color gradient to the "y" field, as shown in the code snippet below:

{
  "mark": "line",
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "value", "type": "quantitative"},
    "color": {"field": "value", "type": "quantitative", "scale": {"scheme": "viridis"}}
  }
}

In the code above, the "scheme" property in the scale object specifies the pre-defined color scale to use for the gradient. The "color" encoding channel then maps this scale to the "value" field, which represents the variable being plotted on the y-axis.

As a result, the line chart will be colored according to the color scale, with darker colors corresponding to higher values of the plotted variable, and lighter colors corresponding to lower values.