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
Add a domain in there:
{
"$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"}}
}