Get certified in Microsoft Fabric—for free! For a limited time, the Microsoft Fabric Community team will be offering free DP-600 exam vouchers. Prepare now
Hi,
Im sure you can do this but if anyone got any advise how or an example of this -
But in Deneb, Vega-Lite, can you highlight an element of a visual, say a column in a bar chart, based on an existing dax measure which returns the hex code?
This measure is dynamic based on end user slicer selection.
TIA
Solved! Go to Solution.
Thanks @giammariam ,
I nearly have it working, the code highlighting the product of th 'CF' measure in the below code.
However it is highlighting it as orange, and the rest blue, which im guessing is the default? As its not picking up the hex code in the CF measure.
{
"data": {"name": "dataset"},
"height": {"step": 50},
"layer": [
{
"mark": {
"type": "bar",
"yOffset": 5,
"cornerRadiusEnd": 20,
"stroke": "#605e5c",
"strokeWidth": 3,
"height": {"band": 0.3}
},
"encoding": {
"y": {
"field": "Product",
"scale": {"padding": 0},
"axis": {
"title": null,
"bandPosition": 0,
"grid": true,
"domain": false,
"ticks": false,
"labelAlign": "left",
"labelBaseline": "middle",
"labelPadding": -5,
"labelOffset": -15,
"labelLimit": 1000,
"titleX": 5,
"titleY": -5,
"titleAngle": 0,
"titleAlign": "left"
}
},
"color": {
"condition": {
"test": "datum['CF']",
"field": "CF",
"legend": null
},
"value": "#b3b3b3"
},
"tooltip": [
{
"field": "Product",
"type": "ordinal"
},
{
"field": "Comparison",
"type": "quantitative"
}
],
"x": {
"field": "Comparison",
"aggregate": "sum",
"title": null,
"axis": {
"grid": false,
"labelOpacity": 0
}
}
}
},
{
"mark": {
"type": "text",
"align": "left",
"baseline": "middle",
"dx": 5,
"dy": 5,
"fontWeight": "normal",
"fontsize": 14
},
"encoding": {
"y": {
"field": "Product"
},
"x": {
"field": "Comparison",
"aggregate": "sum"
},
"text": {
"field": "Comparison"
}
}
}
]
}
This should work. Just remove the inline values in the data property:
{
"data": {
"name": "dataset",
"values": [
{"Product": "A", "CF": "#FF0000", "Comparison": 70},
{"Product": "B", "CF": null, "Comparison": 100},
{"Product": "C", "CF": null, "Comparison": 15},
{"Product": "D", "CF": null, "Comparison": 75}
]
},
"height": {"step": 50},
"encoding": {
"x": {
"field": "Comparison",
"aggregate": "sum",
"title": null,
"axis": {"grid": false, "labelOpacity": 0}
},
"y": {
"field": "Product",
"scale": {"padding": 0},
"axis": {
"title": null,
"bandPosition": 0,
"grid": true,
"domain": false,
"ticks": false,
"labelAlign": "left",
"labelBaseline": "middle",
"labelPadding": -5,
"labelOffset": -15,
"labelLimit": 1000,
"titleX": 5,
"titleY": -5,
"titleAngle": 0,
"titleAlign": "left"
},
"sort": {
"op": "sum",
"field": "Comparison",
"order": "descending"
}
}
},
"layer": [
{
"mark": {
"type": "bar",
"yOffset": 5,
"cornerRadiusEnd": 20,
"stroke": "#605e5c",
"strokeWidth": 3,
"height": {"band": 0.3}
},
"encoding": {
"color": {
"condition": {
"test": "datum['CF']",
"field": "CF",
"legend": null,
"scale": null
},
"value": "#b3b3b3"
},
"tooltip": [
{"field": "Product", "type": "ordinal"},
{"field": "Comparison", "type": "quantitative"}
]
}
},
{
"mark": {
"type": "text",
"align": "left",
"baseline": "middle",
"dx": 5,
"dy": 5,
"fontWeight": "normal",
"fontsize": 14
},
"encoding": {"text": {"field": "Comparison"}}
}
]
}
Hey @DW868990, there are different ways that this can be accomplished. I provided one way below where the DAX measure (called highlightHex here) returns a HEX code if highlighted, otherwise it should return BLANK() (i.e. null).
EDIT: I forgot to set the scale to null in the color channel. That has been added below and in the interactive version of the spec
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 28, "highlightHex": null},
{"a": "B", "b": 55, "highlightHex": "#FA0000"},
{"a": "C", "b": 43, "highlightHex": null},
{"a": "D", "b": 91},
{"a": "E", "b": 81, "highlightHex": null},
{"a": "F", "b": 53, "highlightHex": null},
{"a": "G", "b": 19, "highlightHex": null},
{"a": "H", "b": 87},
{"a": "I", "b": 52, "highlightHex": null}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
"y": {"field": "b", "type": "quantitative"},
"color": {
"condition": {
"test": "datum['highlightHex']",
"field": "highlightHex",
"legend": null,
"scale": null
},
"value": "steelblue"
}
}
}
If this is enough to get you going please consider liking this reply and choosing it as the solution. Otherwise, I'm happy to help further.
Thanks @giammariam ,
I nearly have it working, the code highlighting the product of th 'CF' measure in the below code.
However it is highlighting it as orange, and the rest blue, which im guessing is the default? As its not picking up the hex code in the CF measure.
{
"data": {"name": "dataset"},
"height": {"step": 50},
"layer": [
{
"mark": {
"type": "bar",
"yOffset": 5,
"cornerRadiusEnd": 20,
"stroke": "#605e5c",
"strokeWidth": 3,
"height": {"band": 0.3}
},
"encoding": {
"y": {
"field": "Product",
"scale": {"padding": 0},
"axis": {
"title": null,
"bandPosition": 0,
"grid": true,
"domain": false,
"ticks": false,
"labelAlign": "left",
"labelBaseline": "middle",
"labelPadding": -5,
"labelOffset": -15,
"labelLimit": 1000,
"titleX": 5,
"titleY": -5,
"titleAngle": 0,
"titleAlign": "left"
}
},
"color": {
"condition": {
"test": "datum['CF']",
"field": "CF",
"legend": null
},
"value": "#b3b3b3"
},
"tooltip": [
{
"field": "Product",
"type": "ordinal"
},
{
"field": "Comparison",
"type": "quantitative"
}
],
"x": {
"field": "Comparison",
"aggregate": "sum",
"title": null,
"axis": {
"grid": false,
"labelOpacity": 0
}
}
}
},
{
"mark": {
"type": "text",
"align": "left",
"baseline": "middle",
"dx": 5,
"dy": 5,
"fontWeight": "normal",
"fontsize": 14
},
"encoding": {
"y": {
"field": "Product"
},
"x": {
"field": "Comparison",
"aggregate": "sum"
},
"text": {
"field": "Comparison"
}
}
}
]
}
Add this line under "legend": null
"scale": null
Ah thank you! So simple when you know how! Thanks again
Glad it will work for you! If it fulfills what you're after please consider marking my response as the solution.
Will do.
@giammariam I also need to sort the above code via the Comparison measure, so the bars show with the product with the highest value of the comparison measure at the top. I have tried to do this but seems to still show in alphabetical order if have any advise. Thanks
This should work. Just remove the inline values in the data property:
{
"data": {
"name": "dataset",
"values": [
{"Product": "A", "CF": "#FF0000", "Comparison": 70},
{"Product": "B", "CF": null, "Comparison": 100},
{"Product": "C", "CF": null, "Comparison": 15},
{"Product": "D", "CF": null, "Comparison": 75}
]
},
"height": {"step": 50},
"encoding": {
"x": {
"field": "Comparison",
"aggregate": "sum",
"title": null,
"axis": {"grid": false, "labelOpacity": 0}
},
"y": {
"field": "Product",
"scale": {"padding": 0},
"axis": {
"title": null,
"bandPosition": 0,
"grid": true,
"domain": false,
"ticks": false,
"labelAlign": "left",
"labelBaseline": "middle",
"labelPadding": -5,
"labelOffset": -15,
"labelLimit": 1000,
"titleX": 5,
"titleY": -5,
"titleAngle": 0,
"titleAlign": "left"
},
"sort": {
"op": "sum",
"field": "Comparison",
"order": "descending"
}
}
},
"layer": [
{
"mark": {
"type": "bar",
"yOffset": 5,
"cornerRadiusEnd": 20,
"stroke": "#605e5c",
"strokeWidth": 3,
"height": {"band": 0.3}
},
"encoding": {
"color": {
"condition": {
"test": "datum['CF']",
"field": "CF",
"legend": null,
"scale": null
},
"value": "#b3b3b3"
},
"tooltip": [
{"field": "Product", "type": "ordinal"},
{"field": "Comparison", "type": "quantitative"}
]
}
},
{
"mark": {
"type": "text",
"align": "left",
"baseline": "middle",
"dx": 5,
"dy": 5,
"fontWeight": "normal",
"fontsize": 14
},
"encoding": {"text": {"field": "Comparison"}}
}
]
}
Check out the October 2024 Power BI update to learn about new features.
Learn from experts, get hands-on experience, and win awesome prizes.
User | Count |
---|---|
114 | |
95 | |
86 | |
78 | |
66 |
User | Count |
---|---|
151 | |
121 | |
111 | |
107 | |
95 |