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

user_18345037 · Answer

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

highlighting bars in Deneb (Power BI) - fillOpacity

1 Answers