Me gustaría especificar un área seleccionada entre dos valores y subrayar el área seleccionada, pero no sé cómo hacerlo con una barra gráfica. Estoy buscando por toda la web pero no encuentro nada. También he intentado hacer este gráfico como un histograma, pero el gráfico no es correcto...

Mi código JS

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

Mi código HTML:

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

Aquí está el gráfico que debo obtener (en amarillo, un área aleatoria que seleccioné):

La gráfica que obtengo en modo histograma:

y en modo barra:

Aquí están los valores para hacer el gráfico:

Cualquier ayuda es bienvenida. Gracias.