uPlot icon indicating copy to clipboard operation
uPlot copied to clipboard

Set null legend values per series?

Open mxlje opened this issue 3 years ago • 5 comments

Hi, is there any way to set a custom null legend value for a series? If the mouse is not hovering over the chart, the legend shows -- which, as far as I can tell, is hard coded here:

https://github.com/leeoniya/uPlot/blob/d12f84b9daf770ea9b04d42e04ee9738ca055024/src/uPlot.js#L556

I would like the legend to show a different default value that is different per series. In my case for example I would like to render the sum of all data for a series. I can calculate the value myself of course, I’m just not sure how to render it in place of the -- while keeping the mouse over live legend functionality.

Thank you very much!

mxlje avatar Jan 03 '22 11:01 mxlje

Thinking about this more it would actually need to be some kind of function instead of a static value because I would want it to show the sum for the currently visible data, which changes as the user zooms in on a part of the chart. Any guidance is appreciated.

mxlje avatar Jan 03 '22 11:01 mxlje

You can probably use value property from uPlot.Series => https://github.com/leeoniya/uPlot/blob/master/dist/uPlot.d.ts#L831 When defining series you do sth like this:

value: (self, v) => {
  return v; // map here however you like. self.data contains whole data collection
},

whtrbit avatar Jan 03 '22 14:01 whtrbit

yep, thanks @whtrbit

I would want it to show the sum for the currently visible data, which changes as the user zooms in on a part of the chart.

more specifically the full signature of that callback is https://github.com/leeoniya/uPlot/blob/master/dist/uPlot.d.ts#L789, which gives you access to the value index, that can be used to read any additional values you might need to sum from other series at that x hoverpoint.

export type Value = string | ((self: uPlot, rawValue: number, seriesIdx: number, idx: number) => string | number);

leeoniya avatar Jan 03 '22 16:01 leeoniya

Thank you for your quick reply. I tried that and as far as I can tell it only is called when actually hovering, not for the case where the user is not hovering, which is the "null legend" case I tried to describe. Maybe my question wasn’t clear though so I’ll try to rephrase:

When the mouse is not over the chart, the value in the legend for every series is shown as -- (see screenshot below). Returning a value from the value: function does influence the legend, but only when hovering over a specific x point. The hovering already works fine without customization though.

What I would want is a function on the series that gets all data points for the currently visible part of the x axis (which can change when the user zooms in) and whatever it returns is rendered in the legend when the user is not hovering the chart, replacing the --. In this specific case I would use it to sum the value of all points.

Bildschirmfoto 2022-01-04 um 17 55 47

Thank you again.

mxlje avatar Jan 04 '22 17:01 mxlje

ah, ok.

i'll see about adding something that invokes series.value() with a null idx during data updates and cursor hiding events.

leeoniya avatar Jan 04 '22 17:01 leeoniya