I am new at HTML and JAVASCRIPT, I am trying to plot a candlestick chart, loading data from python, send it to javascript trough eel module. the picture shows the console.log of [data] required to plot. the plot doesn't show. when i set X close high low open manually it works. can any one show me wath's wrong?

console.log

var X = [];
var Op = [];
var Hi = [];
var Lo = [];
var Clo = [];
rows = eel.test("SOLUSDT", "1w")();
rows.then(value => value.map(function(row) {
                X.push(new Date(row[0]))}));
rows.then(value => value.map(function(row) {
                Op.push(parseFloat(row[1]))}));
rows.then(value => value.map(function(row) {
                Hi.push(parseFloat(row[2]))}));
rows.then(value => value.map(function(row) {
                Lo.push(parseFloat(row[3]))}));
rows.then(value => value.map(function(row) {
                Clo.push(parseFloat(row[4]))}));
var trace = {
              //x: X,
              close: Clo,
              high: Hi,
              low: Lo,
              open: Op,


              // cutomise colors
              increasing: {line: {color: 'black'}},
              decreasing: {line: {color: 'red'}},

              type: 'candlestick',
              xaxis: 'x',
              yaxis: 'y'
            };


 var data = [trace];
            console.log(data)

            var layout = {
              dragmode: 'zoom',
              showlegend: false,
              xaxis: {
                rangeslider: {
                     visible: true
                 }
              }
            };

   Plotly.newPlot('athrjy', data, layout);