In Vega-Lite how to get a dashed line in the legend, to correspond to a dashed line being rendered

Question

Here is an example.

I have a similar situation where I am using the same color for two lines being rendered, one line is solid and the other is dashed. So I would like to have the legend entry for the dashed line to also be dashed.

I have tried a number of things revolving around using "strokeDash" in the legend definition, but made no progress at all. :(

Answer 1

You are on the right track with "strokeDash", but for the legend what you are looking for is "symbolDash"; you can see more about this in the documentation here.

Note that you may need to use different parameters for the legend to make the dash line show up correctly given the small size of the legend symbols. For example, in your use case, changing line 78 to the following should work as intended: "legend": {"title": "", "symbolDash": [3,2]}. Alternatively, you may also want to consider increasing the size of the symbols in the legend using symbolSize.