How to apply multiple colors in legend for Vega stacked bar? - vega

Question

I have the next Vega-Light bar chart.
Vega Bar online editor
How to apply multiple colors in legend? When I apply
symbols: {
update: {
fill: { field: 'color' },
},
},
I didn't see any symbols, only labels.
I need to apply four colors for legend symbols. When I write fill: { value : "red"}, all of the symbols became red color. I need that the four symbols to have different colors. How I can fix this?

Answer 1

{
"width": 500,
"height": 200,
"title": "STD: cashflow cleaning",
"data": [
{
"name": "table",
"values": [
{"yearIndex": 1, "c": "red", "y": 100000, "y0": 10000, "y1": 110000},
{"yearIndex": 1, "c": "green", "y": 10000, "y0": 0, "y1": 10000},
{"yearIndex": 1, "c": "blue", "y": -12000, "y0": 0, "y1": -12000},
{
"yearIndex": 1,
"c": "orange",
"y": -110000,
"y0": -12000,
"y1": -122000
},
{"yearIndex": 2, "c": "red", "y": 980000, "y0": 98000, "y1": 1078000},
{"yearIndex": 2, "c": "green", "y": 98000, "y0": 0, "y1": 98000},
{"yearIndex": 2, "c": "blue", "y": -10000, "y0": 0, "y1": -10000},
{"yearIndex": 2, "c": "orange", "y": 0, "y0": 98000, "y1": 98000},
{"yearIndex": 3, "c": "red", "y": 960000, "y0": 96000, "y1": 1056000},
{"yearIndex": 3, "c": "green", "y": 96000, "y0": 0, "y1": 96000},
{"yearIndex": 3, "c": "blue", "y": -12000, "y0": 0, "y1": -12000},
{"yearIndex": 3, "c": "orange", "y": 0, "y0": 96000, "y1": 96000},
{"yearIndex": 4, "c": "red", "y": 940000, "y0": 94000, "y1": 1034000},
{"yearIndex": 4, "c": "green", "y": 94000, "y0": 0, "y1": 94000},
{"yearIndex": 4, "c": "blue", "y": -10000, "y0": 0, "y1": -10000},
{"yearIndex": 4, "c": "orange", "y": 0, "y0": 94000, "y1": 94000},
{"yearIndex": 5, "c": "red", "y": 920000, "y0": 92000, "y1": 1012000},
{"yearIndex": 5, "c": "green", "y": 92000, "y0": 0, "y1": 92000},
{"yearIndex": 5, "c": "blue", "y": -12000, "y0": 0, "y1": -12000},
{"yearIndex": 5, "c": "orange", "y": 0, "y0": 92000, "y1": 92000},
{"yearIndex": 6, "c": "red", "y": 900000, "y0": 90000, "y1": 990000},
{"yearIndex": 6, "c": "green", "y": 90000, "y0": 0, "y1": 90000},
{"yearIndex": 6, "c": "blue", "y": -10000, "y0": 0, "y1": -10000},
{
"yearIndex": 6,
"c": "orange",
"y": -91000,
"y0": -10000,
"y1": -101000
},
{"yearIndex": 7, "c": "red", "y": 880000, "y0": 88000, "y1": 968000},
{"yearIndex": 7, "c": "green", "y": 88000, "y0": 0, "y1": 88000},
{"yearIndex": 7, "c": "blue", "y": -12000, "y0": 0, "y1": -12000},
{"yearIndex": 7, "c": "orange", "y": 0, "y0": 88000, "y1": 88000},
{"yearIndex": 8, "c": "red", "y": 860000, "y0": 86000, "y1": 946000},
{"yearIndex": 8, "c": "green", "y": 86000, "y0": 0, "y1": 86000},
{"yearIndex": 8, "c": "blue", "y": -10000, "y0": 0, "y1": -10000},
{"yearIndex": 8, "c": "orange", "y": 0, "y0": 86000, "y1": 86000},
{"yearIndex": 9, "c": "red", "y": 840000, "y0": 84000, "y1": 924000},
{"yearIndex": 9, "c": "green", "y": 84000, "y0": 0, "y1": 84000},
{"yearIndex": 9, "c": "blue", "y": -12000, "y0": 0, "y1": -12000},
{"yearIndex": 9, "c": "orange", "y": 0, "y0": 84000, "y1": 84000},
{"yearIndex": 10, "c": "red", "y": 820000, "y0": 82000, "y1": 902000},
{"yearIndex": 10, "c": "green", "y": 82000, "y0": 0, "y1": 82000},
{"yearIndex": 10, "c": "blue", "y": -10000, "y0": 0, "y1": -10000},
{"yearIndex": 10, "c": "orange", "y": 0, "y0": 82000, "y1": 82000}
],
"transform": [
{
"type": "stack",
"groupby": ["yearIndex"],
"sort": {"field": "c"},
"field": "y"
}
]
}
],
"scales": [
{
"name": "x",
"type": "band",
"range": "width",
"domain": {"data": "table", "field": "yearIndex"}
},
{
"name": "y",
"type": "linear",
"range": "height",
"nice": true,
"zero": true,
"domain": {"data": "table", "field": "y1"}
},
{
"name": "color",
"type": "ordinal",
"range": {"data": "table", "field": "c"},
"domain": [
"basicYieldIncome",
"avoidedSoilingIncomeLoss",
"opex",
"capex"
]
}
],
"axes": [
{"orient": "bottom", "scale": "x", "zindex": 1, "title": "yearIndex"},
{
"orient": "left",
"scale": "y",
"zindex": 1,
"title": "EUR",
"formatType": "number",
"format": ".2s"
}
],
"marks": [
{
"type": "rect",
"from": {"data": "table"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "yearIndex"},
"width": {"scale": "x", "band": 1, "offset": -1},
"y": {"scale": "y", "field": "y0"},
"y2": {"scale": "y", "field": "y1"},
"fill": {"field": "c"}
}
}
}
],
"legends": [
{
"orient": "top",
"direction": "horizontal",
"fill": "color",
"encode": {
"labels": {
"interactive": true,
"update": {"fontSize": {"value": 12}, "fill": {"value": "black"}}
}
}
}
]
}