Dash legend marker per series

[whtrbit]

Is it possible to define borderStyle in the legend per every series separately?

Also, it might be worth to consider using dotted border style for every series which has dashed property defined on it.

In the end, my goal is to have legend markers similar to my custom styled tooltip:

[leeoniya]

i think the main concern was that it's hard to properly detect dotted vs dashed from the canvas array variant [1], but i suppose doing nothing isnt a great alternative.

you can provide your own fn for legend.markers.dash that returns the border style you need for each series index. the default is currently static though:

https://github.com/leeoniya/uPlot/blob/3c28779391a025b267ff687f7d78b0a7700c14b7/src/opts.js#L347-L353

[1] https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash

[whtrbit]

i think the main concern was that it's hard to properly detect dotted vs dashed from the canvas array variant

Maybe segments comparison would be a good idea. When border length is greater than the gap then use dashed style, othwerwise dotted. Of course it's a big simplification, for example, dotted won't work for my example :(

On the other hand, I'm not sure if using dashed css propery is a valid approach at all. It doesn't work for elements smaller than 13px (Windows 1K monitor). Check out the image, the third element is 12x12px and dashed property doesn't apply on it. dotted works much better when scaling down.

[leeoniya]

maybe it's time to move to svg markers in legend (part of https://github.com/leeoniya/uPlot/issues/431). then we can simply reuse https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

[whtrbit]

Yeah, that should solve it

[whtrbit]

@leeoniya I've prepared PoC with SVG for the legend marker. Initially, I've tried to reuse dash definition from series but it's not going to work. The main problem is to fit into small marker element when having series dash styles like:

[10, 10] example [12, 12] example

Alternatively, I could change the type of marker.dash from solid into an array of two numbers [number, number]. Setting the default to [0, 0] which is the solid line. I already have a commit prepared if you'd like to see but could not push the branch.

[gerhat]

@leeoniya I would like to display a custom dash style in the marker. Using SVG in markers would help me achieve this.