How I spread the visible range to the entire visible chart ?

[IAMAFIVESTARMAN]

Hi, I am creating a OHLC Chart in React and wanted to have setLogicalVisibleRnage to start from from where I specify while still being able to scroll through the entire chart. However the range is coming but it's width is not taking the entire chart but just maybe 10&.
Please help as I have been stuck on for a long time

Image:

useEffect course of reference :
` useEffect(() => {
chart.current = createChart(chartContainerRef.current!, {
timeScale: {
timeVisible: true,
secondsVisible: false,
},
width: 1600,
height: 500,
autoSize: true,
layout: {
background: { color: "#121723" },
textColor: "#8b969f",
},
crosshair: {
mode: 0, // LightweightCharts.CrosshairMode.Normal
},
grid: {
vertLines: { color: "#777", visible: false },
horzLines: { color: "#777" },
},
});

// chart.current.timeScale().applyOptions({
//   barSpacing: 10,
// });

chart.current.timeScale().fitContent();
chart.current.timeScale().setVisibleLogicalRange({
  from: Math.floor(1693906096),
  to: Math.floor(Date.now() / 1000),
});

candleSeries.current = chart.current.addCandlestickSeries({
  upColor: "#4bffb5",
  downColor: "#ff4976",
  borderDownColor: "#ff4976",
  borderUpColor: "#4bffb5",
  wickDownColor: "#ff4976",
  wickUpColor: "#4bffb5",
});
HistogramSeries.current = chart.current.addHistogramSeries({
  priceFormat: {
    type: "volume",
  },
  priceScaleId: "",
});

HistogramSeries.current.priceScale().applyOptions({
  // set the positioning of the volume series
  scaleMargins: {
    top: 0.65, 
    bottom: 0, 
  },
});

HistogramSeries.current.setData(
  chartData.map((bar: ChartCandle) => {
    return {
      time: bar.time,
      value: bar.volume,
      color: `${bar.open > bar.close ? "#4bffb560" : "#ff497660"}`,
    };
  })
);

candleSeries.current.setData(chartData);

if (Object.keys(lastCandle).length !== 0) {
  console.log(lastCandle);
}



return () => {
  chart.current?.remove();
};

}, [chartData]);`