Edit gridlines width + make uplot fill whole parent div

Hello,

Is there a way to edit the colour and width of the background gridlines of a plot (see image)?

Additional, any solution for making uplot fill the whole containing div? I cannot make my plot ‘flush’ with an item on the same y-height (outside of picture). I’ve tried to modify the css properties of u-under and u-over but to no success…

[leeoniya]

Is there a way to edit the colour and width of the background gridlines of a plot (see image)?

yes:

https://github.com/leeoniya/uPlot/blob/936c9b242a8e006707b239a6386e7814e13534f7/dist/uPlot.d.ts#L474-L490

Additional, any solution for making uplot fill the whole containing div? I cannot make my plot ‘flush’ with an item on the same y-height (outside of picture). I’ve tried to modify the css properties of u-under and u-over but to no success…

you can adjust the gutters or axis.size, but you’re more likely to end up with cut-off labels during zooming. for a static chart it’s probably okay.

https://github.com/leeoniya/uPlot/blob/936c9b242a8e006707b239a6386e7814e13534f7/dist/uPlot.d.ts#L179-L183

https://github.com/leeoniya/uPlot/blob/936c9b242a8e006707b239a6386e7814e13534f7/dist/uPlot.d.ts#L435-L436

you might also consider adding a box-shadow to better visually align the edges:

.uplot {
  box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3);
}

[happyteque]

Brilliant, that does it, thanks!