Search code examples
vega-lite

In Vega-Lite, 'config.legend.columns' doesn't appear to work when using 'resolve'. Is there another way of specifying the number of entries per line?

Here is an example.

As you can see I have set 'config.legend.columns' to be 3. So I am expecting the legend in the rendered graph to only have 3 entries per row.

Before I was using 'resolve', setting 'config.legend.columns' was working for me. IOW the legend would line break when it displayed the specified number of columns.

After I started using 'resolve', which actually addressed a litany of issues we were fighting, setting the top-level 'config.legend.columns' appears to have no effect whatsoever.

I changed the toplevel 'columns' to different values, no change.

I tried adding a 'columns' entry to each of the layers 'encoding.color.legend' objects, also no apparent change.

Solution

  • Under the covers, Vega is actually giving you 4 separate legends due to the way you have set this up. You can also see this as you have set the legend title to "" four times.

    e.g.

    enter image description here

    You need to rethink how you provide your data to Vega either reshaping it and/or using Vega directly to give you the flexibility you require.

    The following might help you understand what is happening and might be a solution for you (to specify the full domain and range once per legend type)

    enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.0.json",
  "title": "",
  "width": "container",
  "config": {
    "customFormatTypes": true,
    "axis": {
      "labelFont": "Roboto",
      "labelFontSize": 12,
      "labelFontWeight": 400,
      "labelColor": "0x5f6368"
    },
    "legend": {
      "symbolOpacity": 1,
      "orient": "bottom",
      "direction": "horizontal",
      "columns": 3,
      "symbolSize": 400
    }
  },
  "datasets": {
    "dataset_id_1": [
      {"value": 12, "date": "2022-01-10T14:00:00.000Z"},
      {"value": 22, "date": "2022-02-10T14:00:00.000Z"},
      {"value": 66, "date": "2022-03-10T14:00:00.000Z"},
      {"value": 33, "date": "2022-04-10T14:00:00.000Z"}
    ],
    "dataset_id_2": [
      {"value": 22, "date": "2022-01-10T14:00:00.000Z"},
      {"value": 12, "date": "2022-02-10T14:00:00.000Z"},
      {"value": 96, "date": "2022-03-10T14:00:00.000Z"},
      {"value": 33, "date": "2022-04-10T14:00:00.000Z"}
    ]
  },
  "layer": [
    {
      "data": {"name": "dataset_id_1"},
      "transform": [{"calculate": "'Holy Handgrenades'", "as": "c"}],
      "mark": {"type": "line", "stroke": "red", "strokeWidth": 2},
      "encoding": {
        "y": {
          "field": "value",
          "type": "quantitative",
          "axis": {"title": "Incidents"}
        },
        "x": {
          "timeUnit": "yearmonthdate",
          "field": "date",
          "title": "",
          "axis": {"labelFlush": true, "tickCount": 5}
        }
      }
    },
    {
      "data": {"name": "dataset_id_2"},
      "transform": [{"calculate": "'Vorpal Rabbits'", "as": "c"}],
      "mark": {"type": "line", "stroke": "blue", "strokeWidth": 2},
      "encoding": {
        "y": {
          "field": "value",
          "type": "quantitative",
          "axis": {"title": "Incidents"}
        },
        "x": {
          "timeUnit": "yearmonthdate",
          "field": "date",
          "title": "",
          "axis": {"labelFlush": true, "tickCount": 5}
        },
        "color": {
          "field": "c",
          "title": "a",
          "scale": {"domain": ["Holy Handgrenades","Vorpal Rabbits"], "range": ["red","blue"]}, "legend":{"columns":1}
        }
      }
    },
    {
      "data": {"values": [{"max": 100, "min": 20, "group": "top"}]},
      "mark": {"type": "rect", "color": "#1e8e3e", "opacity": 0.08},
      "encoding": {
        "y": {"aggregate": "max", "field": "max"},
        "y2": {"aggregate": "min", "field": "min"},
        "color": {
          "field": "group",
          "title": "b",
          "scale": {"domain": ["top", "bottom"], "range": ["#1e8e3e","#d93025"]},
          "legend": {"symbolType": "square", "symbolOpacity": 0.08, "columns":1}
        }
      }
    },
    {
      "data": {"values": [{"max": 20, "min": 0, "group": "bottom"}]},
      "mark": {"type": "rect", "color": "#d93025", "opacity": 0.08},
      "encoding": {
        "y": {"aggregate": "max", "field": "max"},
        "y2": {"aggregate": "min", "field": "min"},
        "color": {
          "field": "group",
          "title": "d",
          "scale": {"domain": ["bottom"], "range": ["#d93025"]},
          "legend": null
        }
      }
    }
  ],
  "resolve": {"scale": {"stroke": "independent", "color": "independent"}}
}