CODEWITHSUNDEEP
vega-litevegavega-embedvega-lite-api
Mohit
Mohit

Reputation: 461

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

Upvotes: 1

Views: 45

Answers (1)

davidebacci
davidebacci

Reputation: 30304

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

Upvotes: 2

Related Questions