Search code examples
jsonchartsvisualizationvega

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

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?

Solution

  • enter image description here

    {
  "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"}}
        }
      }
    }
  ]
}