Stacked bar chart with % change

[LostInTheFlood]

Hi
I was trying to build a stacked bar chart that included the % change / difference between selected bars. Kind of like the picture.(https://www.think-cell.com/img/containers/assets/en/resources/manual/images/slideview/differencearrow_abs2.png/d1928486218c0ac523d4450bfd8bc218.jpg)

Being new to vega/vega-lite I'm failing. (See my attempt below)
My question(s) are. Is it possible and if so has someone tried and succeeded?

Thanks

{ "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data": { "values": [ {"year": "2017", "category": "A", "value": 20}, {"year": "2017", "category": "B", "value": 30}, {"year": "2017", "category": "C", "value": 50}, {"year": "2018", "category": "A", "value": 25}, {"year": "2018", "category": "B", "value": 35}, {"year": "2018", "category": "C", "value": 40}, {"year": "2019", "category": "A", "value": 30}, {"year": "2019", "category": "B", "value": 25}, {"year": "2019", "category": "C", "value": 45} ] }, "mark": "bar", "encoding": { "y": {"field": "year", "type": "ordinal"}, "x": {"field": "value", "type": "quantitative", "stack": "normalize", "axis": {"format": "%"}}, "color": {"field": "category", "type": "nominal"} }, "selection": { "highlight": {"type": "single", "empty": "none", "on": "mouseover"}, "mySelection": {"type": "multi", "toggle": false, "fields": ["category"]} }, "signals": [ { "name": "select", "value": [], "on": [ {"events": "click", "update": "mySelection"} ] } ], "transform": [ { "filter": {"selection": "mySelection"} }, { "aggregate": [ {"op": "sum", "field": "value", "as": "total_value"} ], "groupby": ["year"] }, { "window": [{"op": "lag", "field": "total_value", "as": "prev_total_value"}], "frame": [-1, 0] }, { "formula": "diff", "expr": "datum.total_value - datum.prev_total_value" }, { "formula": "percent_change", "expr": "diff / datum.prev_total_value" } ], "layer": [ { "mark": {"type": "rect", "tooltip": true}, "selection": { "highlight": {"type": "single", "empty": "none", "on": "mouseover"} }, "encoding": { "opacity": { "condition": {"selection": "highlight", "value": 1}, "value": 0.7 }, "color": { "field": "category", "type": "nominal", "scale": {"range": ["#7FC97F", "#BEAED4", "#FDC086"]} }, "x": { "field": "value", "type": "quantitative", "stack": "normalize", "axis": {"format": "%"}, "sort": {"field": "value"} }, "y": {"field": "year", "type": "ordinal"} } }, { "mark": {"type": "text", "dx": 3}, "encoding": { "x": {"field": "value", "type": "quantitative", "stack": "normalize", "axis": {"format": "%"}, "y": {"field": "year", "type": "ordinal"}, "text": {"field": "value", "type": "quantitative", "format": ".0%"}, "color": { "condition": { "test": "datum.percent_change >= 0", "value": "black" }, "value": "red" }, "tooltip": [ {"field": "category", "title": "Category"}, {"field": "value", "title": "Value", "format": ".2%"}, {"field": "prev_total_value", "title": "Previous Total Value", "format": ".2%"}, {"field": "total_value", "title": "Total Value", "format": ".2%"}, {"field": "diff", "title": "Difference", "format": ".2%"}, {"field": "percent_change", "title": "Percent Change", "format": ".2%"} ] } } }]}