Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Fill / Shade a chart above a specific Y value in PlotlyJS

NOTE: I’ve cross posted the question here and I’ve added a bounty to it, so if you want some StackOverflow Karma, go ahead:

I would like to fill until a specific Y value in PlotlyJS. This is as far as I got from the PlotlyJS docs: Fiddle

  "x": [
  "y": [
  "fill": "tonexty",
  "fillcolor": "#8adcb3"

In the documentation, there seems to be two options:

  1. tonexty - Fills as below. The problem is ‘tonexty’ is a bit limiting - The use case is ‘filling until the line’, so shading ONLY above 110.
  2. tozeroy - Fills till zero

Also, do you need to introduce a new trace in order to create a fill?

This means that if I have a chart as follows (with only one trace but a threshold line as a shape: I need to introduce another trace just to create a fill. Maybe there’s something I missed in the docs, or this is the wrong approach altogether.

So, how do you fill an area in a trace above a specific Y value?

Yes. unfortunately. tonexty essentially means to fill to y coordinates of the next trace.

It would be nice to add a fill-to-y-value option to do what you desired w/o the extra trace. This won’t be a priority for us in the short-term though.