adjust legend label position according to symbol size

[maxwell8888]

I would like to use lines as the symbols in the legend for my line chart. As far as I am aware, the only way to do this is supplying svg path syntax to the symbolType option. However, the position of the labels is not adjusted to account for the size of the symbol. See below example of overlapping line symbols and labels.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "description": "Stock prices of 5 Tech Companies over Time.",
  "data": {
        "values": 
[{"sector":"All DCMS sectors","year":"2010-01-01T00:00:00.000Z","value":100.0},{"sector":"All DCMS sectors","year":"2011-01-01T00:00:00.000Z","value":106.49725},{"sector":"All DCMS sectors","year":"2012-01-01T00:00:00.000Z","value":108.93146},{"sector":"All DCMS sectors","year":"2013-01-01T00:00:00.000Z","value":114.61352},{"sector":"All DCMS sectors","year":"2014-01-01T00:00:00.000Z","value":118.07612},{"sector":"All DCMS sectors","year":"2015-01-01T00:00:00.000Z","value":124.48},{"sector":"All DCMS sectors","year":"2016-01-01T00:00:00.000Z","value":128.9847},{"sector":"UK","year":"2010-01-01T00:00:00.000Z","value":100.0},{"sector":"UK","year":"2011-01-01T00:00:00.000Z","value":102.58729},{"sector":"UK","year":"2012-01-01T00:00:00.000Z","value":105.88526},{"sector":"UK","year":"2013-01-01T00:00:00.000Z","value":110.01401},{"sector":"UK","year":"2014-01-01T00:00:00.000Z","value":115.23838},{"sector":"UK","year":"2015-01-01T00:00:00.000Z","value":118.48831},{"sector":"UK","year":"2016-01-01T00:00:00.000Z","value":122.67234}]
  },
  "width": 600,
  "height": 300,
  "mark": "line",
  "encoding": {
    "x": {
        "timeUnit": "year", 
        "field": "year", 
        "type": "ordinal", 
        "axis": {
            "title": null, 
            "labelAngle": 0, 
            "ticks": false, 
            "grid": false, 
            "domain": false, 
            "titleFontSize": 16, 
            "labelFontSize": 16
        }
    },
    "y": {
        "field": "value", 
        "type": "quantitative", 
        "axis": {"title": "GVA, Index: 2010=100", "ticks": false, "domain": false, "titleFontSize": 16, "labelFontSize": 16}, 
        "scale": {"domain": [79,140]}
    },
    "color": {
        "field": "sector", 
        "type": "nominal",
        "legend": {"title": null, "labelFontSize": 16, "symbolType": "M0,0 L5,0", "columnPadding": 100, "padding": 20}
    }
  },
"config": {
    "style": {
      "cell": {
        "stroke": "transparent"
      }
    }
}
}

[domoritz]

Hmm, does it work if you make the svg path fit? Otherwise this may need to first fixed in Vega.

[maxwell8888]

Yes, if the path is no longer than 2, then there is no overlap with the label.

[domoritz]

Can you file an issue about it in Vega then? And for now, you have to transform your svg path accordingly.

[maxwell8888]

do I need to rework the schema into a vega schema or will the vega lite example I've given suffice?

[domoritz]

You can compile to Vega in the editor and then strip the things that are not necessary to show the issue. I'd start with a spec with only color encodings, though.

Thank you!