How can i make chart to show price in range?

Question

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?

Can you create a repro on jsfiddle/codesandbox for your issue? It seems that it should work out of the box without any issues. Providing `autoscaleInfoProvider` is exceptional case when you want to override the default behaviour which is based on the data in visible range. — timocov, Feb 21 '22 at 09:29
@timocov I guess this issue was because i included `ref.current` in the `useEffect` dependency which was rendering the chart twice.The issue was no longer there when i put empty array in its dependency. — Kanhaiya, Feb 22 '22 at 03:46

score 1 · Accepted Answer · answered Feb 20 '22 at 05:44

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

How can i make chart to show price in range?

1 Answers1