Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬Register for the Oct 27 webinar.

How to display future data in timeseries

Hello
I have an array with dates:

const xAxis = [‘2021-08-25’, ‘2021-08-26’, ‘2021-08-27’, ‘2021-08-30’, ‘2021-08-31’, ‘2021-09-01’, ‘2021-09-03’, ‘2021-09-09’, ‘2021-09-13’, ‘2021-09-14’, ‘2021-09-16’, ‘2021-09-17’, ‘2021-09-20’]

and an array with values:

const yAxis = [‘3.84’, ‘4.0’, ‘4.1499’, ‘4.09’, ‘4.06’, ‘4.1’, ‘4.3005’, ‘4.2005’, ‘4.21’, ‘4.27’, ‘4.3’, ‘4.48’, ‘4.99’]
Using react ploty, I create a plot for time series this way:

<Plot
data={
[
{
x: xAxis,
y: yAxis,
type: ‘scatter’
}
]
}
/>

This works well. However, this job requires to show future data, with p10, p50 and p90 values.
So basically I have these arrays:

const xAxisFuture = [‘2021-09-21’, ‘2021-09-22’]
const yAxisFuture = [{p10: ‘0.6322762379091629’,p50: ‘2.5178282417765896’,p90: ‘4.7700592122022965’}
, {p10: ‘-0.16957865034016284’,p50: ‘2.129786331707238’,p90: ‘3.7849330887135606’}]

First of all, I dont know what kind of plot it is being painted for the future data.
Please check the attached image.

First there is a line that goes from “2021-08-25” to “2021-09-20”.
After that there is some kind of whole blue form, where all the lines are chained togheter. That shape is built using p10, p50 and p90. How can I do this in ploty? Is there a name for that shape? Is still part of the scatter?
Please help.