highlighting bars in Deneb (Power BI) - fillOpacity

Question

I have the chart on the left, code provided below, and would like to get the chart on the right. The chart on the right has the bars highlighted that correspond to a selected tier; the tier selected comes from a slicer. (The right chart shows Tier 1; however, the user may prefer a different tier.) I feel like this can be accomplished using fillOpacity. How do I get the highlighting?

{
  "data": {
    "values": [
      {"name": "A", "group": "High", "tier": "Tier 3"},
      {"name": "B", "group": "Med", "tier": "Tier 1"},
      {"name": "C", "group": "High", "tier": "Tier 1"},
      {"name": "D", "group": "High", "tier": "Tier 2"},
      {"name": "E", "group": "Low", "tier": "Tier 3"},
      {"name": "F", "group": "Low", "tier": "Tier 1"}
    ]
  },
  "transform": [
    {
      "aggregate": [
        {
          "field": "name",
          "op": "count",
          "as": "numProj"
        }
      ],
      "groupby": [
        "name",
        "group"
      ]
    },
    {
      "stack": "numProj",
      "groupby": ["group"],
      "sort": [
        {
          "field": "name",
          "order": "descending"
        }
      ],
      "as": "barTop"
    }
  ],
  "layer": [
    {
      "mark": {
        "type": "bar",
        "stroke": "black",
        "strokeWidth": 1,
        "tooltip": true
      },
      "encoding": {
        "y": {
          "field": "numProj",
          "type": "quantitative",
          "axis": {
            "title": "Number of Projects",
            "tickMinStep": 1
          }
        },
        "fill": {
          "field": "group",
          "type": "nominal",
          "scale": {
            "domain": [
              "Low",
              "Med",
              "High"
            ],
            "range": [
              "#e15759",
              "#ffff00",
              "#59a14f"
            ]
          },
          "legend": null
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "color": "black",
        "dy": -10
      },
      "encoding": {
        "y": {
          "field": "barTop",
          "type": "quantitative"
        },
        "text": {
          "field": "name"
        }
      }
    }
  ],
  "encoding": {
    "x": {
      "field": "group",
      "type": "nominal",
      "axis": {
      "title": null,
        "labelAngle": 0
      }
    }
  }
}

Davide Bacci · Accepted Answer · 2022-06-17T16:26:01.053

Highlighting in Deneb is quite involved and can be read about here. Having said that, I have a working example.

Code

{
  "data": {"name": "dataset"},
 
  "layer": [
    {
      "mark": {
        "type": "bar",
        "stroke": "black",
        "strokeWidth": 1,
        "tooltip": true,
        "opacity": 0.3
      },
      "encoding": {
        "y": {
          "field": "test",
          "type": "quantitative",
          "axis": {
            "title": "Number of Projects",
            "tickMinStep": 1
          }
        },
        "fill": {
          "field": "group",
          "type": "nominal",
          "scale": {
            "domain": [
              "Low",
              "Med",
              "High"
            ],
            "range": [
              "#e15759",
              "#ffff00",
              "#59a14f"
            ]
          },
          "legend": null
        }
        
      }
    },
    {
      "mark": {
        "type": "bar",
        "stroke": "black",
        "strokeWidth": 1,
        "tooltip": true,
        "opacity": 1
      },
      "encoding": {
        "y": {
          "field": "test__highlight",
          "type": "quantitative",
          "axis": {
            "title": "Number of Projects",
            "tickMinStep": 1
          }
        },
        "fill": {
          "field": "group",
          "type": "nominal",
          "scale": {
            "domain": [
              "Low",
              "Med",
              "High"
            ],
            "range": [
              "#e15759",
              "#ffff00",
              "#59a14f"
            ]
          },
          "legend": null
        }
        
      }
    },
    
    
    {
      "mark": {
        "type": "text",
        "color": "black",
        "dy": 70
      },
      "encoding": {
        "y": {
          "field": "test__highlight",
          "stack":  true,
          "type": "quantitative"
        },
        "text": {
          "field": "name"
        }
      }
    }
  ],
  "encoding": {
    "x": {
      "field": "group",
      "type": "nominal",
      "axis": {
      "title": null,
        "labelAngle": 0
      }
    }
  }
}

Things to keep in mind.

You need a measure (Deneb docs state highlighting doesn't work without a measure). The measure named test is simply test = COUNT('Table'[name])
You can't highlight from a slicer unless it is disconnected as slicers filter instead of highlight
You can't highlight stacks in position. The highlighted stacks naturally fall to the bottom as a result of how the data is being passed. There may be a way around this but it will involve further investigation which is probably not worth it.

Edit 1

Highlighting in place.

{
  "data": {"name": "dataset"},
 
  "layer": [
    {
      "mark": {
        "type": "bar",
        "stroke": "black",
        "strokeWidth": 1,
        "tooltip": true,
        "opacity": 0.3
      },
      "encoding": {
        "y": {
          "field": "test",
          "type": "quantitative",
          "axis": {
            "title": "Number of Projects",
            "tickMinStep": 1
          }
        },
        "fill": {
          "field": "group",
          "type": "nominal",
          "scale": {
            "domain": [
              "Low",
              "Med",
              "High"
            ],
            "range": [
              "#e15759",
              "#ffff00",
              "#59a14f"
            ]
          },
          "legend": null
        }
        
      }
    },
    {
      "mark": {
        "type": "bar",
        "stroke": "black",
        "strokeWidth": 1,
        "tooltip": true
        
        
        
        
      },
      "encoding": {
        "y": {
          "field": "test",
          "type": "quantitative",
          "axis": {
            "title": "Number of Projects",
            "tickMinStep": 1
          }
        },
        
        "opacity": {
          "condition": {
            "test":  "datum['test__highlight']!=null"
            ,
            "value": 1
          },
          "value": 0
        },
        
        
        
        
        "fill": {
          "field": "group",
          "type": "nominal",
          "scale": {
            "domain": [
              "Low",
              "Med",
              "High"
            ],
            "range": [
              "#e15759",
              "#ffff00",
              "#59a14f"
            ]
          },
          "legend": null
        }
        
      }
    },
    
    
    {
      "mark": {
        "type": "text",
        "color": "black",
        "dy": 70
      },
      "encoding": {
        "y": {
          "field": "test",
          "stack":  true,
          "type": "quantitative"
        },
        "text": {
          "field": "name"
        }
      }
    }
  ],
  "encoding": {
    "x": {
      "field": "group",
      "type": "nominal",
      "axis": {
      "title": null,
        "labelAngle": 0
      }
    }
  }
}

Thank you. As you said, I have a measure (I call it "opacity") and my slicer is disconnected. Unfortunate, using those, I was able to highlight the bottom bars of the stack; my desire is to highlight in place. I appreciate your attempt. — Pat, Jun 17 '22 at 12:49
Thanks again! I'm following the code you've provided with the exception of the datum['test__highlight']. What is this? Is it the slicer value? I'm grateful for your help! — Pat, Jun 21 '22 at 13:52
It is provided by Deneb as the highlighted dataset. For the benefit of others, please don't forget to mark as solved if this has correctly answered your question. — Davide Bacci, Jun 21 '22 at 13:54
Not quite working for me yet, so I'm trying to figure out what I'm doing wrong. Everything shows up as opacity 0.3, so it seems the problem is with my slicer?? I'll definitely mark this as correct answer and add any additional comments when I figure it out. Feel free to share thoughts if you have them. — Pat, Jun 21 '22 at 14:23
Not sure where you're going wrong but if you copy and paste the code exactly as I have provided, it works fine. Make sure you have the visual set to cross-highlight rather than filter. I think there is also a setting in Deneb for this as well as the one in Power BI. — Davide Bacci, Jun 21 '22 at 16:44
I finally have this working. Here are the clarifying pieces that I needed. (1) The tier visual is a /table/, not slicer. (2) I needed to enable cross-highlighting. This is done within the Deneb Visual Editor, under Settings: check the "Expose Cross-Highlight Values for Measures" box. I did not have the "Cross-Filter of Data Points" box checked; not sure if this matters or not. Thanks for getting me pointed in the right direction, David! — Pat, Jun 21 '22 at 17:39
While this works, I'm seeing some strange tooltip behavior. When I create a tooltip report page and connect it, everything shows in reverse. Hovering over block A shows tooltip for D; D shows A; E shows F; F shows E. Ideas how to change this? — Pat, Jun 22 '22 at 12:57

highlighting bars in Deneb (Power BI) - fillOpacity

1 Answers1