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 don't 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 together. 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.