BarChart right/left bar cut in half

plotly.js
1

Screenshot (945)

first and last bars are cut to half.

const drawDayGraph = (x_data, y_data, div_id) => {

    var trace1 = {

        x: x_data,

        y: y_data,

        type: 'bar',

        marker: {

            color: '#FEDB41',

        },


    };

    var data = [trace1];

    var start_time = new Date(x_data[0]);

    var end_time = new Date(x_data[0]);

    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});

  }

And I want to display all hours at x-axis from 7 AM TO 7 PM (like image below)

Group 1512