Color change on selection for stacked bar chart

[sneha-gathani]

Here is my vega-lite code -
"data": {}, "width": 200, "height": 90, "mark": "bar", "selection": { "select": { "type": "single", "encodings": [ "x", "y" ], "fields": [ "Region", "Ship Mode" ] } }, "encoding": { "x": { "field": "Sales", "aggregate": "average", "type": "quantitative" }, "y": { "field": "Region", "type": "nominal", "axis": { "title": "" } }, "color": { "field": "Ship Mode", "type": "nominal", "condition": { "selection": "select", "value": "grey" } } }, "config": { "selection": { "select": { "on": "click" } } }
I want to attain the following behavior -
I want to see the normal colors on my stacked bar chart (category10) when no selection of any stack is made. And when a stack is selected, I want to retain its original color and change the colors of all other stacks to grey.
Right now without any selection I see this

and on selection i see this --

[jwoLondon]

I think this should be what you are after (illustrated with the barley data as I don't have access to your dataset).

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "url": "https://cdn.jsdelivr.net/npm/vega-datasets@2/data/barley.json"
  },
  "params": [
    {"name": "select", "select": {"type": "point", "fields": ["variety"]}}
  ],
  "encoding": {
    "x": {"field": "yield", "aggregate": "sum"},
    "y": {"field": "variety"},
    "color": {
      "condition": {"param": "select", "field": "site"},
      "value": "lightgrey"
    }
  },
  "mark": "bar"
}

Colours are assigned based on the data when selected, otherwise grey, and by default everything is selected at the start, so this gives you the behaviour you want.

For stacked bars like your example, you also need to project the selection across all the categories in the selected bar (not just the coloured stack rectangle) by adding fields with the relevant field name used to place the bars on the y-axis.

[sneha-gathani]

Thanks for the quick response. However, I want to select each of the individual stacks, so in your example selecting a site within one of the varieties. For example, the Crookston site in Glabron variety. Can you please help with that?

[sneha-gathani]

Actually, got it, never mind. Thanks alot. Just going to try adding that in my code and then close the thread.

[sneha-gathani]

If I have to listen to the event in react to capture the data, what do I use if I am using params in the Vega-lite specification?
vlView = vegaEmbed(visDivRef.current, vlSpec); Handler.bindSelectionHandlers = function (vlView, vlSpec, modalChartDetails) { vlView.then(({ view }) => { view.addSignalListener("select", function(event, item) { console.log("Hi"); }) }) };
This doesn't work.