Change bar color through setCursor hook with bars plugin

[balthazar]

Hello,

I was wondering if there was a way I'm not seeing of modifying the color of a bar through the setCursor hook, but since the barsPlugin dist.fill.values is set upon initialization I haven't found a way to properly do it. The idea is to get a better hover effect compared to the one seen here

I thought that this piece in a drawClear could possibly help, but it doesn't seem to have much effect since barsColors isn't used anywhere else.

Thanks and sorry if this was asked already, I tried looking through the issues without success

[leeoniya]

to stay fast, all of uplot's interactive bits and effects are done using DOM elements to avoid redrawing the canvas on rapid mousemove events.

the bar hover overlays are just restyled hover point divs :) the way to dynamically set the point fill would be to use the cursor.points.fill option.

https://github.com/leeoniya/uPlot/blob/master/demos/grouped-bars.js#L174 https://github.com/leeoniya/uPlot/blob/master/demos/gradients.html#L118

if you're just looking to remove the point radius, or set a static hover color per series, you can override that using a css rule that targets .u-cursor-pt. i usually just use the init hook to query the uplot DOM and assign any static styles directly to each hover point div to avoid messing with extra stylesheets and when dealing with unknown/dynamic series counts.

hope that helps!

[leeoniya]

instead of (or in addition to) css opacity you can also try setting a static mix-blend-mode to all hover point divs to achieve different effects.

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

[balthazar]

I see, so you're saying it's just better to stylize .u-cursor-pt and transform it in a rectangle that takes the whole bar space and do some CSS opacity/blend-mode rather than modifying the series colors?

[balthazar]

I think that mostly works, thanks! Getting an issue with multiple charts syncing (only connects 2 out of 3, sometimes none at all) probably something in dataIdx but I'll create another issue with demo if I can't figure it out 😄

[leeoniya]

and transform it in a rectangle that takes the whole bar space

the code in the demo already does this in cursor.points.bbox

Getting an issue with multiple charts syncing

getting the built-in sync will be really tricky for BarChart. you'll might be better off doing it programatically in the dataIdx func.