Vega-Lite gradient legend with box plots

382 Views Asked by At

I am trying to set a gradient legend as described here on a vega-lite box plot. Even by setting the color encoding as "quantitative", the legend remains with symbols.

You can compare the behavior of bar chart vs. box plot with quantitative color encoding. The legend on the bar chart is a gradient one, while on the box plot it is with symbols.

Any ideas why?

1

There are 1 best solutions below

3
wahab memon On BEST ANSWER

Not sure what is causing this inconsistent behaviour for bar chart and box plot. This works normally but as an alternative for getting the gradient legend you can use the fill config instead of color as it seems to bring the expected legend for quantitative type.

Refer the editor of below snippet:

{
  "config": {
    "view": {"continuousWidth": 400, "continuousHeight": 300},
    "axis": {"labelAngle": 360, "labelFontSize": 16, "titleFontSize": 16},
    "legend": {}
  },
  "height": 350,
  "width": 300,
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A vertical box plot showing median and lower and upper quartiles of the distribution of body mass of penguins.",
  "data": {"url": "data/cars.json"},
  "mark": {
    "type": "boxplot",
    "orient": "horizontal",
    "size": 15,
    "median": {"stroke": "white", "strokeWidth": 0.5}
  },
  "encoding": {
    "x": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "fill": {"field": "Cylinders", "type": "quantitative", "bin": false},
    "y": {"field": "Cylinders", "type": "quantitative"}
  }
}