条形图右/左条切成两半（ Plotly.js ）

Question

First problem 1.
Image of bargraph left and right bars are cut to half

const drawDayGraph = (div_id) => {
    var trace1 = {
        x: [1614882600000, 1614886200000, 1614889800000, 1614893400000, 1614897000000, 1614900600000, 1614904200000, 1614907800000, 1614911400000, 1614915000000, 1614918600000, 1614922200000, 1614925800000, 1614929400000, 1614933000000, 1614936600000, 1614940200000, 1614943800000, 1614947400000, 1614951000000, 1614954600000, 1614958200000, 1614961800000, 1614965400000],
        y: [0, 0, 0, 0, 0, 0, 0.7600000000093132, 32.389999999897555, 132.72999999998137, 224.9000000001397, 310.5200000000186, 331.14999999990687, 425.2100000001956, 423.80999999982305, 391.8100000000559, 298.2399999999907, 184.95999999996275, 53.25, 2.550000000046566, 0, 0, 0, 0, 0],
        type: 'bar',
        marker: {
            color: '#FEDB41',
        },
    };
    var data = [trace1];

    var start_time = new Date(1614882600000);
    var end_time = new Date(1614882600000);
    start_time.setHours(7,0,0);
    end_time.setHours(19,0,0);
    var layout = {
        xaxis: {
            fixedrange: true,
            offset: true,
            tickformat: '%I',
            zeroline: true,
            showline: false,
            tickfont : {
                size : 10,
                color : 'white'
            },
            type: 'date',
            automargin: true,
            range:[
                start_time.getTime(),
                end_time.getTime()
            ]
        },
        "yaxis": {
            "visible": false,
            "showgrid": false,
            "zeroline": false
            },
        margin: {
            l: 2,
            r: 2,
            b: 20,
            t: 2,
        },

        paper_bgcolor: 'rgba(0,0,0,0)',
        plot_bgcolor: 'rgba(0,0,0,0)',
    };

    Plotly.newPlot(div_id , data, layout, {displayModeBar: false});
  }

so I have a bar chart that has x-axis type as “date”, I get the first bar and last bar cut in half. I want full bars.

Second Problem 2.

I want to show hours under every bar at x-axis from 7 AM TO 7PM ( like this ). I am unable to resolve both problems. I have written the code above. Thanks

Answer 1

consider this link: redirect to the changed code

The following changes are made: arrow function has been removed, and the graph plot is assigned to the variable like this

var drawDayGraph = Plotly.newPlot('myDiv',  data, layout, {displayModeBar: false});

Answer 2

For first problem: use autorange: true , range is ignored