How can i make chart to show price in range?

I am using lightweight-charts for drawing financial charts for stock data.

A part of code for drawing chart is:

useEffect(() => {

        if (ref.current) {
            ref.current.innerHTML = "";
            const chart = createChart(ref.current, {
                lineVisible: false, width: 400, height: 300, layout: {
                    background: { color: "#1e2125" },
                    textColor: 'rgba(255, 255, 255, 0.9)',
                },
                leftPriceScale:{
                    borderVisible:false,
                    autoScale:true
                },
                rightPriceScale:{
                    borderVisible:false,
                    autoScale:true
                },
                
                grid: {
                    horzLines: {
                        visible: false,
                    },
                    vertLines: {
                        visible: false,
                    },
                },
                crosshair: {
                    mode: CrosshairMode.Magnet,
                },
                
                timeScale: {
                    minBarSpacing: 0.001,
                    borderVisible: false,
                    fixLeftEdge: true,
                    fixRightEdge: true,
                },
                priceScale:{
                    fixLeftEdge:true,
                    fixRightEdge:true,
                    minBarSpacing:0.001,
                },                
                handleScroll: false,
                handleScale: false,
            });          

           
            const areaSeries = chart.addAreaSeries();
            const data = [
                { time: '2022-02-16', value: 516.7 },
                { time: '2022-02-15', value: 524.8},
                { time: '2022-02-14', value: 501.4 },
                { time: '2022-02-11', value: 529.6 },
                { time: '2022-02-10', value: 540.55 },
                { time: '2022-02-09', value: 535.25 },
                { time: '2022-02-08', value: 531.35 },
                { time: '2022-02-07', value: 533.25 },
                { time: '2022-02-04', value: 530.3},
                { time: '2022-02-03', value: 540.1 },
                { time: '2022-02-02', value: 539.8 },
                { time: '2022-02-01', value: 532.3 },
                { time: '2022-01-31', value: 538.3 }
              ];
            //areaSeries.barsInLogicalRange            
            areaSeries.setData(data);
            setPriceRange(data);

            
        }
        window.addEventListener('resize', handleResize);
        return () => {
            window.removeEventListener('resize', handleResize);
            chartObj.current && chartObj.current.remove();
        }
    }, [ref.current]);

return (

<div ref={ref} className="alphachart_container">

            </div>
)

However, it doesn't look as expected. Price range on right is not as expected.Ideally i want to set priceRange under certain values.

const [visiblePriceRange,setVisiblePriceRange] = useState({ from: 88888888188181818, to: -2222222222});
const setPriceRange = (data)=>{
        let min = Math.min(...data.map(x=>x.value),visiblePriceRange.from);
        let max = Math.max(...data.map(x=>x.value),visiblePriceRange.to);
        let offset = (max - min)/10;
        setVisiblePriceRange({from:min-offset,to:max+offset});
       //Now i want that i should only show these price range on y-axis
    }

I have looked into the documentation about minValue and maxValue but it didn't help as i cannot figure out the exact syntax.

My current chart looks like this:

I would like to have price range between around 498 to 544.(rounded off to the nearest integer for the sake of convenience).How may i do this?

Solution

I have looked into the documentation about minValue and maxValue but it didn't help as i cannot figure out the exact syntax.

Sounds like this is what you're seeking then? Here's an example from another documentation page. Looks like you just need to add priceRange like you did with timeScale, priceScale, etc.

const firstSeries = chart.addLineSeries({
    autoscaleInfoProvider: () => ({
        priceRange: {
            minValue: 0,
            maxValue: 100,
        },
    }),
});