vega-litevegavega-embedvega-lite-api

Target Line Y Axis Reference in VegaLite


I am trying to create a bar chart and line chart along with a target line, I chart bar and line are reference to left axis, and Target line(Rule mark)reference to right axis . I try to use resolve y axis independent but right axis only showing 0. how i make independent reference of left and right y axis. Editor link

Required right axis


Solution

  • Add a domain in there:

    enter image description here

    {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "description": "The PM2.5 value of Beijing observed 15 days, highlighting the days when PM2.5 level is hazardous to human health. Data source https://chartaccent.github.io/chartaccent.html",
      "data": {
        "values": [
          {"Day": 1, "Value": 54.8, "expected": 60},
          {"Day": 2, "Value": 112.1, "expected": 80},
          {"Day": 3, "Value": 63.6, "expected": 50},
          {"Day": 4, "Value": 37.6, "expected": 20},
          {"Day": 5, "Value": 79.7, "expected": 40},
          {"Day": 6, "Value": 137.9, "expected": 90},
          {"Day": 7, "Value": 120.1, "expected": 80},
          {"Day": 8, "Value": 103.3, "expected": 70},
          {"Day": 9, "Value": 394.8, "expected": 150},
          {"Day": 10, "Value": 199.5, "expected": 90},
          {"Day": 11, "Value": 72.3, "expected": 30},
          {"Day": 12, "Value": 51.1, "expected": 20},
          {"Day": 13, "Value": 112, "expected": 40},
          {"Day": 14, "Value": 174.5, "expected": 50},
          {"Day": 15, "Value": 130.5, "expected": 40}
        ]
      },
      "layer": [
        {
          "layer": [
            {
              "mark": "bar",
              "encoding": {
                "x": {"field": "Day", "type": "ordinal", "axis": {"labelAngle": 0}},
                "y": {"field": "Value", "type": "quantitative"},
                "color": {"datum": "outcome"}
              }
            },
            {
              "mark": {"type": "line", "color": "red"},
              "encoding": {
                "x": {"field": "Day", "type": "ordinal"},
                "y": {"field": "expected", "type": "quantitative"},
                "color": {"datum": "expected"}
              }
            }
          ]
        },
        {
          "layer": [
            {
              "mark": "rule",
              "encoding": {
                "y": {"datum": 300, "axis": {"orient": "right"}, "scale":{"domainMax":1000}},
                "color": {"datum": "target"}
              }
            }
          ]
        }
      ],
      "resolve": {"scale": {"color": "independent", "y": "independent"}}
    }