Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

Reply
Meagan
Super User
Super User

How to create a legend in a Deneb Vega-lite visual with multiple layers?

I have created a Deneb visual that concatenates a view with a text mark on top of a bullet chart/gauge. 

Meagan_0-1691593917773.png

I want to create a legend that explains what the 2 bars and the tick mark mean. But I'm not sure how/where to include it in the visual. I need the symbols on the legend to match the colors in the visual. If I can't make one "natively", I am fine getting creative and concatenating a "fake" one on the bottom. I'd rather it be inside the Deneb visual rather than layering another Power BI visual on top of it. But I'm struggling to figure out the best way to handle this. Vega-lite code is below. 

 

{
"data": {"name": "dataset"},
"vconcat": [
{
"mark": {
"type": "text",
"fontSize": 40,
"align": "left",
"baseline": "top",
"dy": 20,
"fontWeight": "bold"
},
"encoding": {
"text": {
"field": "Actual",
"type": "quantitative",
"format": "$,.0f"
},
"color": {"expr": "pbicolor(3)"}
}
},
{ "width": "300",
"encoding": {
"x": {
"type": "quantitative",
"scale": {"nice": false},
"title": null,
"axis": null
},
"y": {"type": "nominal"},
"tooltip": [
{"field": "Actual"},
{"field": "Budget"},
{"field": "Projection"}
]
},
"layer": [
{
"mark": {
"type": "bar",
"cornerRadiusEnd": 8,
"color": {
"expr": "pbiColor(4, .6)"
},
"size": 60
},
"encoding": {
"x": {"field": "Budget"}
}
},
{
"mark": {
"type": "bar",
"cornerRadiusEnd": 8,
"color": {
"expr": "pbiColor(4)"
},
"size": 40
},
"encoding": {
"x": {"field": "Actual"}
}
},
{
"mark": {
"type": "tick",
"height": 70,
"thickness": 5,
"color": {
"expr": "pbiColor(4,-.5)"
}
},
"encoding": {
"x": {"field": "Projection"}
}
}
]
}
]
}

1 ACCEPTED SOLUTION
Meagan
Super User
Super User

Ok, I got it working following this custom legend tutorial from Enterprise DNA: https://forum.enterprisedna.co/t/deneb-examples-legends/28900. I don't love that I had to make a fake chart, but it does work well. Basically add another view to the vconcat, make a fake chart using an arc marc with a radius of zero. Hard code the legend values in the data for that view.

View solution in original post

1 REPLY 1
Meagan
Super User
Super User

Ok, I got it working following this custom legend tutorial from Enterprise DNA: https://forum.enterprisedna.co/t/deneb-examples-legends/28900. I don't love that I had to make a fake chart, but it does work well. Basically add another view to the vconcat, make a fake chart using an arc marc with a radius of zero. Hard code the legend values in the data for that view.

Helpful resources

Announcements
Microsoft Fabric Learn Together

Microsoft Fabric Learn Together

Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

Check out the April 2024 Power BI update to learn about new features.

April Fabric Community Update

Fabric Community Update - April 2024

Find out what's new and trending in the Fabric Community.