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

Be one of the first to start using Fabric Databases. View on-demand sessions with database experts and the Microsoft product team to learn just how easy it is to get started. Watch now

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
Las Vegas 2025

Join us at the Microsoft Fabric Community Conference

March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount!

Dec Fabric Community Survey

We want your feedback!

Your insights matter. That’s why we created a quick survey to learn about your experience finding answers to technical questions.

ArunFabCon

Microsoft Fabric Community Conference 2025

Arun Ulag shares exciting details about the Microsoft Fabric Conference 2025, which will be held in Las Vegas, NV.

December 2024

A Year in Review - December 2024

Find out what content was popular in the Fabric community during 2024.