Hello I'm trying to create plots like this image

in react js. So I have decided to use React Plotly

It provides me to create subplots but I've problems by creating these boxes I used this code for the first fig with fake data

 trace1 = {
            x: ['2017-01-04', '2017-01-05', '2017-01-06'], 
  
            close: [116.019997, 116.610001, 117.910004], 
            
            decreasing: {line: {color: '#7F7F7F'}}, 
            
            high: [116.510002, 116.860001, 118.160004], 
            
            increasing: {line: {color: '#17BECF'}}, 
            
            line: {color: 'rgba(31,119,180,1)'}, 
            
            low: [115.75, 115.809998, 116.470001, ], 
            
            open: [115.849998, 115.919998, 116.779999], 
            type: 'candlestick', 
            xaxis: 'x', 
            yaxis: 'y'
          };

and I get this result

please tell me where is the bug

I've tried type: 'box' too and I got the same result

I imported the library

import Plotly from "plotly.js-basic-dist";
import createPlotlyComponent from "react-plotly.js/factory";
const Plot = createPlotlyComponent(Plotly);
.
.

and in the rendering section

<Plot
   data={data}
   layout={layout}
 />