filled legend markers without filled path

[hugovoerman]

I would like to be able to create solid colored markers. Right now (as I can find) it used the fill property to fill the marker, but that also creates an effect on the chart which I don't want. Is there a way to do this?

I derive this from uPlot.js

let indic = placeDiv(LEGEND_MARKER, label);
indic.style.borderColor = s.width ? s.stroke : i > 0 && s.points.width ? s.points.stroke : null;
indic.style.backgroundColor = s.fill || null;

So as an example I would like the blue transparant box to be solid blue, without creating fills in the chart itself.

[leeoniya]

this might be a useful setting to add.

until then...

since these legend markers are in the dom, you can use uPlot's init hook to to set their style.background to match their series.stroke. it will take a few lines of code but should not be very difficult.

[leeoniya]

need to think about where to stick this api. probably:

opts.legend.marker: (self, seriesIdx) => {
  return {
    fill,
    stroke,
    width,
  };
  // or raw html or svg element...
  return document.createElement("div");
}

[hugovoerman]

Using the commented code in legendAsTooltipPlugin in the init() it was indeed easy:

const idents = legendEl.querySelectorAll(".u-marker");

for (let i = 0; i < idents.length; i++)
    idents[i].style.backgroundColor = idents[i].style.borderColor;

did the trick. Thanks for the pointer in this direction!

[leeoniya]

i ended up having to fix this after fixing series gradient strokes/fills, since they cannot be re-used for css backgroundColor or borderColor.

you can now explicitly define them via callbacks:

{
  legend: {
    stroke: (u, seriesIdx) => "red",
    fill: (u, seriesIdx) => "blue",
  }
}

it's also done similarly in the new demo: https://leeoniya.github.io/uPlot/demos/gradient-fill.html, which sounds like what you want:

{
  legend: {
    fill: (u, seriesIdx) => u.series[seriesIdx].stroke(u, seriesIdx),
  }
}

[bogdan-nourescu]

Since you added the ability to specify stroke and fill as a function, i would like to also specify width as a function.
The reasoning is so that i can change the width when you hover over a series with focus.
If i have width 1, and i have a lot of series, i can't clearly see it, so i would like to change the width to 3 on focus, using a function on the width

[leeoniya]

i'll think about it: #403