Add support for chart background?

[Brodzko]

In our case, we want to have alternating background bands in each of our charts, like this:

In our vanilla d3 implementation, we just rendered a bunch of <rect>s positioned to fit to the axis' ticks. I don't think this is currently possible here, perhaps with an intricate renderSVG function? Though we don't have reference to the ticks there either.

I'd suggest roughly the following API:

• Chart accepts a background option, which could be anything from a template literal like 'bands', a config object to configure the bands' styling or a render function that renders any valid SVG into the chart's background.
• There would be a ChartBackground component handling this, similar to Voronoi - by default it would render null
• It would be the first component to render inside Chart, before the axes

If anyone has a better idea on how to do this besides the <rect>s, shoot 😄

I'm happy to open a PR for this if it sounds good.

[tannerlinsley]

I think the direction we should head is configuring axes to support an optional alternating grid background color. If enabled, we use the same logic used for the grid lines to draw rects behind the series.

[Brodzko]

Yeah that sounds a lot simpler 😄 I can look at this tomorrow - want to create an issue for it or is this enough?

[Brodzko]

Something I came across when implementing this: How would we want to handle multiple axes having aalternatingBackgroundColor set? The rendering order is given - first primary and then all secondary axes in order and they will overlap. Grid should also be shown on top of the bands I guess :)

[tannerlinsley]

As long as the user can control each grid/bands then it doesn’t matter too much. We’ll still default to showing grid lines so things look good out of the box. Tanner Linsley

…

On Aug 11, 2021, 11:14 AM -0600, Martin Brodziansky ***@***.***>, wrote: Something I came across when implementing this: How would we want to handle multiple axes having aalternatingBackgroundColor set? The rendering order is given - first primary and then all secondary axes in order and they will overlap. Grid should also be shown on top of the bands I guess :) — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.