Forum Discussion
Display two line charts using Deneb Visual Vega Lite
I wanted to try the Deneb Power bi visual , I want to display two measures "Count of leaves taken in 2022" and "Count of leaves taken in 2023" using Vega Lite. Problem is I didn't know how to display two line charts in my Y axis.
Here's how it currently looks (I only tried displaying 1 measure at a time)
I followed this Youtube tutorial
Is there a way to display both charts at the same time ?
this is my code :
{
"data": {"name": "dataset"},
"layer": [
{
"mark": {
"type": "area",
"line": {"color": "#7b516f"},
"color": {
"x1": 1,
"y1": 1,
"gradient": "linear",
"stops": [
{"offset": 0, "color": "white"},
{"offset": 1, "color": "#7b516f"}
]
}
}
},
{
"mark": {
"type": "bar",
"width": 2,
"clip": true,
"line" : {"color":"7b516f"},
"color": {
"x1": 1,
"y1": 1,
"gradient": "linear",
"stops": [
{"offset": 0.5, "color": "white"},
{"offset": 1, "color": "7b516f"}
]
}
}
},
{
"mark": {
"type": "text",
"yOffset": -10,
"size": 10,
"color": "#000000"
},
"encoding": {
"text": {"field": "Leaves Count 2023"}
}
},
{
"mark": {
"type": "text",
"yOffset": -10,
"size": 10,
"color": "#000000"
},
"encoding": {
"text": {"field": "Leaves Count 2023"},
"opacity": {
"condition": {
"test": {"field": "MONTH", "equal": "off"},
"value": 0.1
},
"value": 1
},
"y": {"field": "Leaves Count 2023", "type": "quantitative", "axis": null}
}
}
],
"encoding": {
"x": {
"field": "MONTH",
"type": "ordinal",
"axis": {"labelPadding": 0},
"title": null
},
"y": {
"field": "Leaves Count 2023",
"type": "quantitative",
"axis": null
}
}
}
2 Replies
- MFelix
Super User
Hi userpowerbiii12 ,
Try the following code:
{ "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data": {"name": "dataset"}, "layer": [ { "mark": { "type": "area", "line": {"color": "#7b516f"}, "color": { "x1": 1, "y1": 1, "gradient": "linear", "stops": [ {"offset": 0, "color": "white"}, {"offset": 0.8, "color": "#7b516f"} ] } } }, { "mark": { "type": "bar", "width": 2, "clip": true, "color": { "x1": 1, "y1": 1, "gradient": "linear", "stops": [ {"offset": 0, "color": "white"}, {"offset": 0.8, "color": "#7b516f"} ] } }, "encoding": { "opacity": { "condition": {"test": {"field": "__selected__", "equal": "off"}, "value": 0.1}, "value": 1 }, "y": {"field": "__1____highlight", "type": "quantitative", "axis": null} } }, { "mark": {"type": "text", "yOffset": -10, "size": 10, "opacity": 0.2}, "encoding": {"text": {"field": "__1__"}} }, { "mark": {"type": "text", "yOffset": -10, "size": 10}, "encoding": { "text": {"field": "__1__"}, "opacity": { "condition": {"test": {"field": "__selected__", "equal": "off"}, "value": 0.1}, "value": 1 }, "y": {"field": "__1____highlight", "type": "quantitative", "axis": null} } }, { "mark": {"type": "area", "color": "blue", "opacity": 0.05}, "encoding": { "x": {"field": "MONTH", "type": "ordinal", "axis": {"labelPadding": 0}, "title": null}, "y": {"field": "Leaves Count 2022", "type": "quantitative", "axis": null} } } ], "encoding": { "x": {"field": "MONTH", "type": "ordinal", "axis": {"labelPadding": 0}, "title": null}, "y": {"field": "Leaves Count 2023", "type": "quantitative", "axis": null} } }Actually earlier this hour I did some changes to successfully displays the gradient bars that didn't show up earlier due to couple mistakes. I edited the code in my question , could you tell me how I would edit it in my case to keep the gradient bars showing in both cases?
