uPlot
uPlot copied to clipboard
Set null legend values per series?
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!
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.
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
},
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);
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.

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