Is it possible to clip a box annotation to a line graph?

[bellwood]

I have box annotations that track sunrise/sunset and regardless of when I draw them, because of the color transparencies, they muddle with the area fill of the line.

Is it possible to clip box annotations so they only appear above the line, essentially a reverse fill for the line area, as defined by the box(es)?

[stockiNail]

@bellwood yes, you can. You need to set in your annotation options the drawTime option: https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/options.html#draw-time

If you set that option to 'beforeDatasetsDraw', the annotation is drawn before the datasets and therefore it doesn't override the area chart.

See example: https://www.chartjs.org/chartjs-plugin-annotation/latest/samples/box/quarters.html

[bellwood]

@stockiNail

Thank you for the reply.

If you goto the setup tab in the example given, and add "fill:true" to the line data config, you can see that the box annotation colors still bleed through from behind the line fill.

The desire in clipping above the line would be for the box annotations to not be visible at all below the line and therefore not interfere with the fill color or the grid lines.

Thank you.

[stockiNail]

@bellwood thank you for explanation. Now I have understood what you meant.

At the moment it is not possible. And I think it is quite hard to do it therefore I don't think it will be implemented.

The only way that I see is remove the transparency of the backgroundColor of the area chart.
But I can understand it is not what you want.

[bellwood]

@stockiNail thanks for the confirmation. Dropping the transparency does help but then one loses the visual reference of the grid.

The only possible workaround I've thought of, but have not yet tried, would maybe be a duplicate line set with adjusted values so that line one's max would be line two's min, with its reference axes being line one's overall max, so that its fill would be "above" line one (hopefully that makes sense)

I'm unsure if then leaving data gaps in line 2 for where I don't want fill (by setting the appropriate spanGaps property?) might work?

Appreciate the dialogue, thank you.

[stockiNail]

@bellwood I think your idea could be right one. You could play a bit with fill and spanGaps options and could reach the result.

[stockiNail]

@bellwood just a quick example (which must be changed a bit, of course):

https://codepen.io/stockinail/pen/gOVpXBE

[bellwood]

@stockiNail STACK! Why didn't I think of that?! Will give this a go, thank you VERY much.

[bellwood]

I'll need to re-work what I'm using to draw box annotations to create/adjust a second dataset accordingly, but, from toying with the pen, I got it where I'd hoped I could.

Thank you again @stockiNail, cheers 🍻

[stockiNail]

@bellwood let me close it. Feel free to reopen if needed.