I would like to specify a selected area between two values and underline the area selected but I don't know how doing this with a graphical bar. I'm looking for on the entire web but I didn't find anything. I've also tried to make this graph as a histogram, but the graph isn't correct...

My JS code

jQuery(function() {
    var stats = new Stats();
    displayGraph();
    
    function displayGraph() {
        var dataForPlotly = [];
        dataForPlotly = {
            y: [4.5,5,13,20,12.5,7,1.6,0.66,0.25],
            x: [30,50,65,75,90,110,135,165,220],
            width: [20,20,10,10,20,20,30,30,80],
            type:'bar',
            marker:{
                color: ['rgba(0,0,0,1)', 'rgba(222,45,38,0.8)', 'rgba(204,197,204,1)', 'rgba(243,204,204,1)', 'rgba(111,204,204,1)', 'rgba(189,204,204,1)', 'rgba(222,45,38,0.8)', 'rgba(204,197,204,1)', 'rgba(243,204,204,1)', 'rgba(111,204,204,1)']
            },
            fill: 'tozeroy',
        };

        var layout = {
            showlegend: false,
            autosize: false,
            width: 600,
            height: 600,
            bargap: 0,
        };
        var datas = [dataForPlotly];
        Plotly.newPlot('graph', datas, layout, {staticPlot: true} );
    }
}

My HTML code :

<div class="container">
    <div class="row">
        <div class="col-sm-8">
            <div id="graph"></div>
        </div>
    </div>
</div>

Here is the graph that i should obtein (In yellow a random area that i selected) :

The graph that I obtain in histogram mode:

and in bar mode :

Here is the values to make the graph :

Any help is welcome. Thanks.