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

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

Reply
Doug7983
Helper II
Helper II

Deneb data label help

I haven't been able to clear a hurdle with the labels on a Deneb bar chart.

 

By default, as you can see in the GIF, the labels are on. I want the labels to be off by default. I only want to see a label when the user clicks on a row in the table. 

 

2024-06-27_10-11-53.gif

I'm unable to share a workbook due to restrictive workplace security measures. I will paste in some dummy data and my spec below:

{
"data": {"name": "dataset"},
"layer": [
{
"mark": {
"type": "bar",
"opacity": 0.3,
"tooltip": true
},
"encoding": {
"x": {
"field": "ModelKey",
"type": "nominal",
"sort": {
"field": "Min of MAPEVl",
"order": "ascending"
}
},
"y": {
"field": "Min of MAPEVl",
"type": "quantitative"
},
"color": {"value": "lightgrey"}
}
},
{
"mark": {
"type": "bar",
"tooltip": true
},
"encoding": {
"x": {
"field": "ModelKey",
"type": "nominal",
"sort": {
"field": "Min of MAPEVl",
"order": "ascending"
}
},
"y": {
"field": "Min of MAPEVl__highlight",
"type": "quantitative"
},
"color": {
"condition": {
"test": "datum['Min of MAPEVl__highlight'] !== null",
"value": "steelblue"
},
"value": "lightgrey"
}
}
},
{
"mark": {
"type": "text",
"align": "center",
"baseline": "bottom",
"dy": -5
},
"encoding": {
"x": {
"field": "ModelKey",
"type": "nominal",
"sort": {
"field": "Min of MAPEVl",
"order": "ascending"
}
},
"y": {
"field": "Min of MAPEVl__highlight",
"type": "quantitative"
},
"text": {
"field": "Min of MAPEVl__highlight",
"type": "quantitative",
"format": ".2f"
},
"color": {"value": "black"},
"opacity": {
"condition": {
"test": "datum['Min of MAPEVl__highlight'] !== null",
"value": 1
},
"value": 0
}
}
}
],
"encoding": {
"x": {
"field": "ModelKey",
"type": "nominal",
"sort": {
"field": "Min of MAPEVl",
"order": "ascending"
},
"axis": null
},
"y": {
"type": "quantitative",
"axis": {
"title": null,
"grid": false
}
}
}
}

 

ModelKeyMAPEVl
362609410_615.08
362619010_613.99
362706010_615.09
362715610_615.04
362968800_614.47
362978400_614.92
362978410_615.04
363134910_614.83
363242600_618.28
363289400_617.13
363664400_614.94
363854000_613.85
363961500_615.71
363961510_615.79
364201100_615.78
364344500_615.23
364380810_615.49
364404000_614.92
364622800_615.12

 

Anyone have a solution to share? @giammariam , maybe?

 

Thanks.

 

1 ACCEPTED SOLUTION

Hi @Doug7983,

 

Apologies - I cribbed from Lutz's spec as it was already pretty-printed, so I didn't know about the formatting requirements for the bars. I've taken yours and applied the changes you asked for. Here's how it looks now:

 

dmp_0-1720668321032.png

 

Note that I needed to remove the redundant sort operations from the x-encoding in each bar's layer as these can be set at the top level and were messing with the sorts lower down. Because this is a layered spec, an op (aggregate) property is needed, a quirk of Vega-Lite. I'd also recommend setting shared encoding properties at as high a level as possible and letting dependent layers inherit where possible rather than repeating. Not that they don't work if you don't, but they can trip you up if one mark differs from another and they're sharing the same encoding channel. This can also help make your spec easier to read. maintain and debug 👌

 

Here's the amended spec:

 

 

{
  "data": {"name": "dataset"},
  "layer": [
    {
      "mark": {
        "type": "bar",
        "opacity": 0.3,
        "tooltip": true
      },
      "encoding": {
        "x": {"field": "ModelKey"},
        "y": {"field": "Min of MAPEVl"},
        "color": {"value": "lightgrey"}
      }
    },
    {
      "mark": {
        "type": "bar",
        "tooltip": true
      },
      "encoding": {
        "x": {"field": "ModelKey"},
        "y": {
          "field": "Min of MAPEVl__highlight"
        },
        "color": {
          "condition": {
            "test": "datum['Min of MAPEVl__highlight'] !== null",
            "value": "steelblue"
          },
          "value": "lightgrey"
        }
      }
    },
    {
      "transform": [
        {
          "filter": "datum['Min of MAPEVl__highlight'] !== null && datum['Min of MAPEVl__highlightStatus'] !== 'neutral'"
        }
      ],
      "mark": {
        "type": "text",
        "baseline": "bottom",
        "dy": -5
      },
      "encoding": {
        "text": {
          "field": "Min of MAPEVl__highlight",
          "format": ".2f"
        }
      }
    }
  ],
  "encoding": {
    "x": {
      "field": "ModelKey",
      "type": "nominal",
      "sort": {
        "field": "Min of MAPEVl",
        "order": "ascending",
        "op": "min"
      },
      "axis": null
    },
    "y": {
      "field": "Min of MAPEVl",
      "type": "quantitative",
      "axis": {"title": "Min of MAPEVl"}
    }
  }
}

 

 

And thanks for using Deneb! I'm glad you find it useful 🙂

 

Cheers,

 

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




View solution in original post

9 REPLIES 9
dm-p
Super User
Super User

Hi @Doug7983,

 

if you're using the highlight values, I'd try a filter transform on the layer that uses the text mark to only return values that are non-null and have a non-neutral highlight status, e.g.:

      "transform": [
        {"filter": "datum['Min of MAPEVl__highlight'] !== null && datum['Min of MAPEVl__highlightStatus'] !== 'neutral'"}
      ],

 

2024-07-10-deneb-label-highlight-filter.gif

 

This may affect the sort order of the marks, so you might need to use an order channel in your encoding or sort by the appropriate field, but hopefully this is along the right lines for you.

 

Here's your original spec with the changes above:

 

{
  "data": {"name": "dataset"},
  "layer": [
    {
      "mark": {
        "type": "bar",
        "opacity": 0.3
      }
    },
    {
      "mark": {
        "type": "bar",
        "tooltip": true
      },
      "encoding": {
        "opacity": {
          "condition": {
            "test": {
              "field": "__selected__",
              "equal": "off"
            },
            "value": 0
          },
          "value": 1
        }
      }
    },
    {
      "transform": [
        {"filter": "datum['Min of MAPEVl__highlight'] !== null && datum['Min of MAPEVl__highlightStatus'] !== 'neutral'"}
      ],
      "mark": {
        "type": "text",
        "baseline": "bottom",
        "dy": -5
      },
      "encoding": {
        "text": {
          "field": "Min of MAPEVl__highlight",
          "type": "quantitative",
          "format": ".2f"
        }
      }
    }
  ],
  "encoding": {
    "x": {
      "field": "ModelKey",
      "type": "nominal",
      "sort": {
        "field": "Min of MAPEVl",
        "order": "ascending"
      },
      "axis": null
    },
    "y": {
      "field": "Min of MAPEVl",
      "type": "quantitative",
      "axis": {"title": "Min of MAPEVl"}
    }
  }
}

 

Cheers,

 

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




Hi @dm-p,

 

Thank you for your reply. Assuming that I could restore the sorting as you suggested, is it possible to also add the highlighting of the selected bar back in? It helps the selection stand out more than just a data label alone.

Again, thanks for the help. I'm still in the fumbling around stage with Deneb, but it has helped me deliver visuals that just aren't possible with the default PBI options.

Hi @Doug7983,

 

Apologies - I cribbed from Lutz's spec as it was already pretty-printed, so I didn't know about the formatting requirements for the bars. I've taken yours and applied the changes you asked for. Here's how it looks now:

 

dmp_0-1720668321032.png

 

Note that I needed to remove the redundant sort operations from the x-encoding in each bar's layer as these can be set at the top level and were messing with the sorts lower down. Because this is a layered spec, an op (aggregate) property is needed, a quirk of Vega-Lite. I'd also recommend setting shared encoding properties at as high a level as possible and letting dependent layers inherit where possible rather than repeating. Not that they don't work if you don't, but they can trip you up if one mark differs from another and they're sharing the same encoding channel. This can also help make your spec easier to read. maintain and debug 👌

 

Here's the amended spec:

 

 

{
  "data": {"name": "dataset"},
  "layer": [
    {
      "mark": {
        "type": "bar",
        "opacity": 0.3,
        "tooltip": true
      },
      "encoding": {
        "x": {"field": "ModelKey"},
        "y": {"field": "Min of MAPEVl"},
        "color": {"value": "lightgrey"}
      }
    },
    {
      "mark": {
        "type": "bar",
        "tooltip": true
      },
      "encoding": {
        "x": {"field": "ModelKey"},
        "y": {
          "field": "Min of MAPEVl__highlight"
        },
        "color": {
          "condition": {
            "test": "datum['Min of MAPEVl__highlight'] !== null",
            "value": "steelblue"
          },
          "value": "lightgrey"
        }
      }
    },
    {
      "transform": [
        {
          "filter": "datum['Min of MAPEVl__highlight'] !== null && datum['Min of MAPEVl__highlightStatus'] !== 'neutral'"
        }
      ],
      "mark": {
        "type": "text",
        "baseline": "bottom",
        "dy": -5
      },
      "encoding": {
        "text": {
          "field": "Min of MAPEVl__highlight",
          "format": ".2f"
        }
      }
    }
  ],
  "encoding": {
    "x": {
      "field": "ModelKey",
      "type": "nominal",
      "sort": {
        "field": "Min of MAPEVl",
        "order": "ascending",
        "op": "min"
      },
      "axis": null
    },
    "y": {
      "field": "Min of MAPEVl",
      "type": "quantitative",
      "axis": {"title": "Min of MAPEVl"}
    }
  }
}

 

 

And thanks for using Deneb! I'm glad you find it useful 🙂

 

Cheers,

 

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




@dm-p This is exactly what I wanted to accomplish. Thanks so much. 

 

For others who may come across this thread and wonder why I needed Deneb for a fairly standard visual (and for your knowledge on how people are using your tool): The visual is meant to help users see at a glance where a particular selection falls in the distribution of available options. The native Power BI column chart's scrollbars were a major obstacle to that. 

 

Thanks, Daniel. And thanks for creating Deneb!

@dm-p  Where would the NaN come from?  what's the difference between __format and __formatted ?

 

lbendlin_0-1720619336142.png

 

Hi @lbendlin,

 

NaN would imply an issue with the value being passed in, which could be a reference error. I would probably need to see the entire spec and dataset to troubleshoot an issue here.

 

The __format suffixed field is the format string according to the data model for a specific measure for a given row. Because these can be dynamic with measure-based expressions and calculation groups they can be contextual, so this allows you to manage these situations rather than at a column level. The __formatted suffix is the measure value formatted, based on the __format field value. One other thing to bear in mind is that the __formatted field value is a string rather than a number.

 

Further reading: Deneb documentation on formatting.

 

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




lbendlin
Super User
Super User

Where is 'Min of MAPEVl__highlight' defined?

 

You should be able to use this example to show or hide the data label when testing the selection of the bar.

 

Interactive Responsive Bar Chart with Cross-Filtering Template | CSalcedoDataBI

 

Or use "selection"

 

Interactive Plots with Selections | Vega-Lite

Maybe something like this

 

{
  "data": {"name": "dataset"},
  "layer": [
    {
      "mark": {
        "type": "bar",
        "opacity": 0.3
      }
    },
    {
      "mark": {
        "type": "bar",
        "tooltip": true
      },
      "encoding": {
        "opacity": {
          "condition": {
            "test": {
              "field": "__selected__",
              "equal": "off"
            },
            "value": 0
          },
          "value": 1
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "baseline": "bottom",
        "dy": -5
      },
      "encoding": {
        "text": {
          "field": "Min of MAPEVl__highlight",
          "type": "quantitative",
          "format": ".2f"
        },
        "opacity": {
          "condition": {
            "test": {
              "field": "__selected__",
              "equal": "off"
            },
            "value": 0
          },
          "value": 1
        }
      }
    }
  ],
  "encoding": {
    "x": {
      "field": "ModelKey",
      "type": "nominal",
      "sort": {
        "field": "Min of MAPEVl",
        "order": "ascending"
      },
      "axis": null
    },
    "y": {
      "field": "Min of MAPEVl",
      "type": "quantitative",
      "axis": {"title": "Min of MAPEVl"}
    }
  }
}

That produced a similar result to what I've been getting trying various tweaks. Your spec, like mine, results in labels for each bar by default.

Helpful resources

Announcements
Europe Fabric Conference

Europe’s largest Microsoft Fabric Community Conference

Join the community in Stockholm for expert Microsoft Fabric learning including a very exciting keynote from Arun Ulag, Corporate Vice President, Azure Data.

July 2024 Power BI Update

Power BI Monthly Update - July 2024

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

July Newsletter

Fabric Community Update - July 2024

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

Top Solution Authors
Top Kudoed Authors