# PlotlyJS confidence band bug?

**URL:** <https://discourse.julialang.org/t/plotlyjs-confidence-band-bug/96287>\
**Category:** Visualization\
**Tags:** plotting, plotlyjs\
**Created:** [March 18, 2023, 10:00pm UTC](https://discourse.julialang.org/t/plotlyjs-confidence-band-bug/96287 "2023-03-18T22:00:40Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Igor\_Douven](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/igor_douven/32/8433_2.png) [@Igor\_Douven](https://discourse.julialang.org/u/Igor_Douven)\
**Post date:** [March 18, 2023, 10:00pm UTC](https://discourse.julialang.org/t/plotlyjs-confidence-band-bug/96287/1 "2023-03-18T22:00:40Z")

</div>

Hi all,

I’m trying to plot confidence bands using `PlotlyJS.jl`. It’s almost working, except that while the lines all start at x = 50, the confidence bands, for some reason, start at x = 0. This is for instance how I define one of the traces:

```julia
trace1 = scatter(;
  x = vcat(50:1000, reverse(50:1000)),
  y = vcat(df_train.ymax1, reverse(df_train.ymin1)),
  fill="tozerox",
  fillcolor="rgba(0, 100, 80, .2)",
  line_color="transparent",
  name = "Actual",
  showlegend=false,
  mode="none"
);

```

The output I get is:

 ![fill](https://global.discourse-cdn.com/julialang/original/3X/4/b/4b9e2740a4975908912515eba8548150cc6554cd.png)

Does someone know how to avoid this? (If the problem is not clear, please look at the bottom left corner of the plot. The question basically is how to remove the bands that appear between x=0 and x=50. They should start at x=50 [in this plot, they are hardly visible from that point on, but they are there].)

---

<div class="post-metadata">

**Author:** ![Igor\_Douven](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/igor_douven/32/8433_2.png) [@Igor\_Douven](https://discourse.julialang.org/u/Igor_Douven)\
**Post date:** [March 19, 2023, 9:48am UTC](https://discourse.julialang.org/t/plotlyjs-confidence-band-bug/96287/2 "2023-03-19T09:48:53Z")

</div>

Here is a MWE illustrating the same problem:

```julia
using PlotlyJS

trace = scatter(;x=vcat(5:50, 50:-1:5), y=vcat(rand(46), rand(46) .- 2), fill="tozerox")

plot(trace, Layout())

```

My question is: how to prevent the confidence bands from starting at x=0?

---

<div class="post-metadata">

**Author:** ![rafael.guerra](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rafael.guerra/32/216610_2.png) [@rafael.guerra](https://discourse.julialang.org/u/rafael.guerra)\
**Post date:** [March 19, 2023, 10:06am UTC](https://discourse.julialang.org/t/plotlyjs-confidence-band-bug/96287/3 "2023-03-19T10:06:18Z")

</div>

`fill="tozeroy"`

---

<div class="post-metadata">

**Author:** ![Igor\_Douven](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/igor_douven/32/8433_2.png) [@Igor\_Douven](https://discourse.julialang.org/u/Igor_Douven)\
**Post date:** [March 19, 2023, 10:16am UTC](https://discourse.julialang.org/t/plotlyjs-confidence-band-bug/96287/4 "2023-03-19T10:16:50Z")

</div>

Tried that already but doesn’t work. (In the MWE, yes, but not in my example.)

---

<div class="post-metadata">

**Author:** ![rafael.guerra](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rafael.guerra/32/216610_2.png) [@rafael.guerra](https://discourse.julialang.org/u/rafael.guerra)\
**Post date:** [March 19, 2023, 10:26am UTC](https://discourse.julialang.org/t/plotlyjs-confidence-band-bug/96287/5 "2023-03-19T10:26:55Z")

</div>

FWIW, in [this example](https://stackoverflow.com/a/70084966), both the lower and the uppper bound curves are plotted, and `fill="tonexty"` is used.

---

<div class="post-metadata">

**Author:** ![empet](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/empet/32/221303_2.png) [@empet](https://discourse.julialang.org/u/empet)\
**Post date:** [March 19, 2023, 10:44am UTC](https://discourse.julialang.org/t/plotlyjs-confidence-band-bug/96287/6 "2023-03-19T10:44:17Z")

</div>

Add first as trace delimiting the band, the lower line, then the upper one, with `fill= "tonexty"`

```julia
using CSV, DataFrames, GLM, PlotlyJS

df = CSV.read("test-data.csv", DataFrame)
model = lm(@formula(Y ~ X), df)
p = predict(model, df[!, [:X]], interval = :prediction, level = 0.9)
traces= [
         scatter(x=df[!, :X], y=p.lower, line_width=0, showlegend=false),           
         scatter(x=df[!, :X], y=p.upper, fill="tonexty", fillcolor="LightBlue",
                 line_width=0, showlegend=false),
         scatter(x=df[!, :X], y=p.prediction, mode="lines", line_width=2,line_color="RoyalBlue", name="reg line"),
         scatter(x=df[!, :X], y=df[!,:Y], mode="markers", marker_color="RoyalBlue", 
                         name="data"),
                 ]
fig=Plot(traces, Layout(width=600, height=350))

```

![confidence-band](https://global.discourse-cdn.com/julialang/original/3X/d/1/d172287e011d85b8282e833658c8df356cbc8238.png)

---

<div class="post-metadata">

**Author:** ![Igor\_Douven](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/igor_douven/32/8433_2.png) [@Igor\_Douven](https://discourse.julialang.org/u/Igor_Douven)\
**Post date:** [March 19, 2023, 12:14pm UTC](https://discourse.julialang.org/t/plotlyjs-confidence-band-bug/96287/7 "2023-03-19T12:14:57Z")

</div>

Many thanks, that worked! Final plot:

 ![fill](https://global.discourse-cdn.com/julialang/original/3X/7/f/7f736ef2c354bcf9817f68733d008e6c06b09f3f.png)

Would be good to have this in the documentation (more helpful than the examples that are now given).