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

plotly.js
1

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: https://stackoverflow.com/questions/45281329/fill-shade-a-chart-above-a-specific-y-value-in-plotlyjs

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": [
    "2016-01-31T00:03:57.000Z",
    "2016-02-12T04:35:26.000Z"
  ],
  "y": [
    100,
    100
  ],
  "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?

2

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.

See https://codepen.io/etpinard/pen/prjxRO?editors=0010