I am having an issue displaying data in a stacked var chart. I am using transform to fold two measures together. My assumption is that with null values this may be causing an issue, but that is a bit of guess.
vega-lite code:
{
"data": {
"values":[
{"Scheduled Event Class": "Inspection", "Booked": 0, "Not Booked": 1},
{"Scheduled Event Class": "Loler Test", "Booked": 0, "Not Booked": 8},
{"Scheduled Event Class": "MOT", "Booked": 0, "Not Booked": 2},
{"Scheduled Event Class": "Pre-MOT Check", "Booked": 1, "Not Booked": 0},
{"Scheduled Event Class": "Service", "Booked": 1, "Not Booked": 4}
]
},
"transform": [
{
"fold": ["Booked", "Not Booked"],
"as": ["Booking Status", "value"]
}
],
"layer": [
{
"mark": {
"type": "bar",
"tooltip": true,
"cornerRadiusEnd": 10
},
"encoding": {
"x": {
"field": "Scheduled Event Class",
"type": "nominal",
"title": null,
"sort": "-y",
"axis": {
"labelAngle": 0
}
},
"y": {
"field": "value",
"aggregate": "sum",
"type": "quantitative",
"title": null
},
"color": {
"field": "Booking Status",
"type": "nominal",
"legend": {
"labelAlign": "left",
"orient": "top",
"title": null
},
"scale": {
"domain": ["Booked", "Not Booked"],
"range": ["#BBD4FF", "#FAF26E"]
}
}
}
},
{
"mark": {
"type": "text",
"align": "center",
"baseline": "middle",
"dx": 0,
"dy": -5,
"color": "white",
"size": 8
},
"encoding": {
"x": {
"field": "Scheduled Event Class",
"type": "nominal",
"title": null,
"sort": "-y"
},
"y": {
"field": "value",
"aggregate": "sum",
"type": "quantitative",
"title": null
},
"text": {
"field": "value",
"aggregate": "sum",
"type": "quantitative"
}
}
},
{
"mark": {
"type": "bar",
"tooltip": true,
"cornerRadiusEnd": 10,
"color": {
"x1": 1,
"y1": 0,
"x2": 0,
"y2": 0,
"gradient": "linear",
"stops": [
{
"offset": 0,
"color": "rgba(0, 0, 0, 0.5)"
},
{
"offset": 1,
"color": "rgba(0, 0, 0, 0)"
}
]
}
},
"encoding": {
"x": {
"field": "Scheduled Event Class",
"type": "nominal",
"title": null,
"sort": "-y",
"axis": {
"labelAngle": 0
}
},
"y": {
"field": "value",
"aggregate": "sum",
"type": "quantitative",
"title": null
},
"tooltip": [
{"field": "Booking Status"},
{"field": "value", "aggregate": "sum", "type": "quantitative"}
]
}
}
]
}
Picture here, showing data and the chart itself: Stacked Bar screenshot
As you can see above, the data isn't being displayed in the chart itself where there are values.
See below CSV for data:
Scheduled Event Class,Booked,Not Booked
Inspection,null,1
Loler Test,null,8
MOT,null,2
Pre-MOT Check,1,null
Service,1,4
Yes, the nulls are breaking the viz. Use a calculate transform to replace the nulls with 0 if you're going to stack them. Something like:
{"calculate": "datum.Booked == null?0:datum.Booked", "as": "Booked"}