Vega lite Stacked bar chart showing white divider lines when aggregating

Question

Why are my stacked bar charts showing as separate sections with white dividers? I want them to be whole colors with one tooltip value showing the aggregated value. For some reason they are split up.

Any help would be greatly appreciated.

var yourV2Spec = {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"values": dataSourceFiltered},
"title": {"anchor": "start","text": "Sales by Top 20 Cities"},
"width": {"step": 25},
"height": 250,
"transform": [
{"calculate": "if(datum.INVOICE_GROUP === '0 -- 3,000', 4, if(datum.INVOICE_GROUP === '3,000 -- 10,000', 3, if(datum.INVOICE_GROUP === '10,000 -- 25,000', 2, if(datum.INVOICE_GROUP === '25,000 -- 100,000', 1, 5))))","as": "siteOrder"},
{"joinaggregate": [{"op": "sum","field": "INVOICE_TOTAL", "as": "INVTOT"}],"groupby": ["CITY"]},
{"window": [{"op": "dense_rank", "as": "rank"}],"sort": [{"field": "INVTOT", "order": "descending"}]},
{"filter": "datum.rank <= 20"}
],
"layer": [
{
"mark": {
"type": "rect",
"fill": "#A4AAB6", 
"fillOpacity": 1, 
"stroke": "#fff", 
"height": 3,
"strokeWidth": 1,
"strokeCap": "square",
"strokeMiterLimit": 0,
"strokeJoin": "bevel"
},
"encoding": {
"y": {"field": "INVTOT", "type": "quantitative","aggregate": "average",},
"tooltip": [{"field": "INVTOT", "type": "quantitative","aggregate": "average", "title": "Avg. Total", "format" : ",.0f"}],
}
},
{
"mark": {"type": "bar"},
"encoding": {
"x": {"field": "CITY", "type": "nominal","title": null,"sort": "-y"},
"y": {"field": "INVOICE_TOTAL", "aggregate": "sum", "type": "quantitative","title": null,"axis": {"domain": false, "grid": false},"stack": "zero"},
"tooltip": [
{"field": "CITY", "type": "nominal", "title": "City"},
{"field": "INVOICE_GROUP", "type": "nominal", "title": "Group"},
{"field": "INVOICE_TOTAL", "aggregate": "sum", "type": "quantitative","title": "Inv. Total","format" : ",.2f"}
],
"color": {"field": "INVOICE_GROUP", "type": "nominal","legend": null,"scale": {"domain": ["0 -- 3,000", "3,000 -- 10,000", "10,000 -- 25,000", "25,000 -- 100,000"],"range": ["#BDD7E7", "#6BAED6", "#3182BD", "#08519C"]}},
"order": {"field": "siteOrder"}
}
}
],
"config": {"view": {"stroke": null}}
};
vegaEmbed('#vis2', yourV2Spec, {"actions": false});

I have tested with various config settings.

Answer 1

The Invoice total was set as a string and this caused the issue. Case solved.