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

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

Reply
DW868990
Helper IV
Helper IV

Deneb: Vega-Lite - Can you conditional format an element of visual based on existing measure

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

2 ACCEPTED SOLUTIONS

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"
}
}
}
]
}

View solution in original post

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"}}
    }
  ]
}


Madison Giammaria
Proud to be a Super User 😄
LinkedIn

Do you frequently use Deneb to provide insights to your stakeholders? Have you considered sponsoring this free and open source custom visual? More info here!

View solution in original post

7 REPLIES 7
giammariam
Super User
Super User

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).

 

Interactive Vega-Lite Spec

 

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.



Madison Giammaria
Proud to be a Super User 😄
LinkedIn

Do you frequently use Deneb to provide insights to your stakeholders? Have you considered sponsoring this free and open source custom visual? More info here!

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


Madison Giammaria
Proud to be a Super User 😄
LinkedIn

Do you frequently use Deneb to provide insights to your stakeholders? Have you considered sponsoring this free and open source custom visual? More info here!

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.



Madison Giammaria
Proud to be a Super User 😄
LinkedIn

Do you frequently use Deneb to provide insights to your stakeholders? Have you considered sponsoring this free and open source custom visual? More info here!

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"}}
    }
  ]
}


Madison Giammaria
Proud to be a Super User 😄
LinkedIn

Do you frequently use Deneb to provide insights to your stakeholders? Have you considered sponsoring this free and open source custom visual? More info here!

Helpful resources

Announcements
OCT PBI Update Carousel

Power BI Monthly Update - October 2024

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

September Hackathon Carousel

Microsoft Fabric & AI Learning Hackathon

Learn from experts, get hands-on experience, and win awesome prizes.

October NL Carousel

Fabric Community Update - October 2024

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