I'm using vega-lite's vl2svg CLI helper to headlessly generate chart SVGs on a Heroku server. This works great for the most part, but I'm noticing that the generated SVGs have way too much padding on the left side, to the left of the labels, and the amount of "excess padding" grows as the labels get longer.
For example, here's a simple bar chart with 3 bars and 3 labels. In the online Vega-Lite editor, the chart renders correctly as pictured below (ie. no excessive padding). But when I generate the same chart via vl2svg on my local computer (using the same package versions - Vega 5.21.0, Vega-Lite 5.2.0) the chart has around 100px of excess padding on the left side before the labels begin.
The chart's VL spec:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [{"category":"Male","count":112},{"category":"Female","count":122},{"category":"Other (eg. non-binary)","count":31}]
},
"encoding": {
"y": {"field": "category", "sort": null, "title": "", "type": "nominal", "axis": {}},
"x": {"field": "count", "title": "", "type": "quantitative", "axis": {}}
},
"layer": [
{"mark": "bar"},
{
"mark": {"type": "text", "dx": 3, "dy": 0, "xOffset": 0, "yOffset": 0, "align": "left", "baseline": "middle", "limit": 20, "fontSize": 8},
"encoding": {"text": {"field": "count"}}
}
]
}
Steps I used to generate the svg headlessly (on MacOS 10.15.7, in case the OS matters):
npm install vega-lite@5.2.0- write the above spec to
test.json node_modules/vega-lite/bin/vl2svg test.json > test.svg
The SVG chart rendered by the online editor (I added the red border to highlight the difference in padding):
The SVG chart rendered by vl2svg run locally:
Why does this difference in padding / spacing exist? What can I do to make the headlessly-generated svg render identically to what the online editor generates? Is this a bug? or user error on my end?
NOTE: The excessive spacing mostly disappears when the labels are uniformly short. For example if I reword that third label to "Other", then re-render the svg using vl2svg, there's only ~5px of excessive left padding, as shown below:
