Search code examples
jsonchartsvisualizationvega-lite

Add arbitrary legend to a dual Y-axis bar chart

I'm working on the Vega-lite code shown below. I am trying to add a legend/key with two values, like:

Legend

Attempt 1 gist: https://gist.github.com/woter1832/ca24c4dd3a733072239f3a22b7b012dc
Vega Editor
Adding line 18 ("color": {"field": "cost", "type": "quantitative"}) creates a graded legend.

Attempt 2 gist: https://gist.github.com/woter1832/eb1c820e307de8a52b00e0ba7ec4fe47
Vega Editor
This is the correct type of legend, but the chart is not right.

Vega Editor
Code to add legend to:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": "container",
  "height": 550,
  "data": {
    "values": [
      {"model": "Audi", "score": 150, "cost": 4500},
      {"model": "Mercedes", "score": 75, "cost": 6000},
      {"model": "BMW", "score": 115, "cost": 5000}
    ]
  },
  "encoding": {
    "x": {"field": "model", "type": "nominal", "axis": {"labelAngle": 45, "title": "Model"}}
  },
  "layer": [
    {
      "mark": {"type": "bar", "color": "steelblue", "width":{"band": 0.75}},
      "encoding": {
        "y": {"field": "score", "type": "quantitative", "axis": {"title": "Score"}, "scale":{"rangeMax":-100}},
        "xOffset":{"value": 0}
      }
    },
    {
      "mark": {"type": "bar", "color": "orange", "width":{"band": 0.4}},
      "encoding": {
        "y": {"field": "cost", "type": "quantitative", "axis": {"title": "Cost", "orient": "right", "format": "$.0f"}},
        "xOffset":{"value": 0}
      }
    }
  ],
  "resolve": {
    "scale": {
      "y": "independent"
    }
  }
}

Gist link: https://gist.github.com/woter1832/6a9c227f9a2ae5393cbb7f6f83ed3a7f

Any help will be greatly appreciated.

T.I.A.

Solution

  • enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": "container",
  "height": 550,
  "data": {
    "values": [
      {"model": "Audi", "score": 150, "cost": 4500},
      {"model": "Mercedes", "score": 75, "cost": 6000},
      {"model": "BMW", "score": 115, "cost": 5000}
    ]
  },
  "encoding": {
    "x": {
      "field": "model",
      "type": "nominal",
      "axis": {"labelAngle": 45, "title": "Model"}
    }
  },
  "layer": [
    {
      "mark": {"type": "bar", "fill": "steelblue", "width": {"band": 0.75}},
      "encoding": {
        "y": {
          "field": "score",
          "type": "quantitative",
          "axis": {"title": "Score"},
          "scale": {"rangeMax": -100}
        },
        "xOffset": {"value": 0},  "color": {
          "field": "x",
          "title":"My Legend",
          "scale": {
            "domain": ["cost", "score"],
            "range": ["steelblue", "orange"]
          }
        }
      }
    },
    {
      "mark": {"type": "bar", "color": "orange", "width": {"band": 0.4}},
      "encoding": {
        "y": {
          "field": "cost",
          "type": "quantitative",
          "axis": {"title": "Cost", "orient": "right", "format": "$.0f"}
        },
        "xOffset": {"value": 0}
      }
    }
  ],
  "resolve": {"scale": {"y": "independent"}}
}