Hi
I would like to add advanced graphs to my base using the vega-lite app. However, it looks like the app doens’t support all features from vega-lite. For example, I’m unable to
I tried using example code from the vega-lite app, see below. But the result it different. On the website I get a chart with the bar located next to each other. But in the app the bars are placed on top of each other.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": "container",
"height": "container",
"data": {
"values": [
{"category":"A", "group": "x", "value":0.1},
{"category":"A", "group": "y", "value":0.6},
{"category":"A", "group": "z", "value":0.9},
{"category":"B", "group": "x", "value":0.7},
{"category":"B", "group": "y", "value":0.2},
{"category":"B", "group": "z", "value":1.1},
{"category":"C", "group": "x", "value":0.6},
{"category":"C", "group": "y", "value":0.1},
{"category":"C", "group": "z", "value":0.2}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "category", "type": "nominal"},
"y": {"field": "value", "type": "quantitative"},
"xOffset": {"field": "group", "type": "nominal"},
"color": {"field": "group", "type": "nominal"}
}
}
I can use a layered solution as proposed by others. However, I don’t really like this solution as the bar location is now defined by the xoffset and size attributes. This works if the nr of datapoints on the x-axis is constant, which is not the case in my situation. Therefore I have to update the values everytime the values change.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": "container",
"height": "container",
"data": {
"values": [
{"category":"A", "group": "x", "valuea":0.1, "valueb":0.3, "valuec":0.1},
{"category":"A", "group": "y", "valuea":0.6, "valueb":0.1, "valuec":0.2},
{"category":"A", "group": "z", "valuea":0.9, "valueb":0.4, "valuec":0.3},
{"category":"B", "group": "x", "valuea":0.1, "valueb":0.4, "valuec":0.4},
{"category":"B", "group": "y", "valuea":0.3, "valueb":0.5, "valuec":0.5},
{"category":"B", "group": "z", "valuea":0.2, "valueb":0.6, "valuec":0.5},
{"category":"C", "group": "x", "valuea":0.1, "valueb":0.1, "valuec":0.1},
{"category":"C", "group": "y", "valuea":0.1, "valueb":0.2, "valuec":0.2},
{"category":"C", "group": "z", "valuea":0.3, "valueb":0.6, "valuec":0.3}
]
},
"encoding": {
"x": {"field": "category", "type": "nominal"}
},
"layer": [
{
"mark": {
"type": "bar",
"xOffset": -12,
"size": 10
},
"encoding": {
"y": {
"field": "valuea",
"aggregate": "sum",
"type": "quantitative"
},
"color": {
"field": "group",
"type": "nominal"
}
}
},
{
"mark": {
"type": "bar",
"size": 10,
"xOffset": 0
},
"encoding": {
"y": {
"field": "valueb",
"aggregate": "sum",
"type": "quantitative"
},
"color": {
"field": "group",
"type": "nominal"
}
}
},
{
"mark": {
"type": "bar",
"size": 10,
"xOffset": 12
},
"encoding": {
"y": {
"field": "valuec",
"aggregate": "sum",
"type": "quantitative"
},
"color": {
"field": "group",
"type": "nominal"
}
}
}
]
}
Is there any plan to update the vega-lite app to support these functionalities?
Best
Jarvis
