Different scale margins for price and volume panes hide the volume axis

[reconmind]

Hi,
I'm attaching a minimal example of a chart with two panes:

candlesticks for the price,

a histogram for the volume.

I want to set different scale margins for the price pane and the volume pane.
However, when I try to do that (you can reproduce the issue if you uncomment the corresponding lines in the code), the volume axis disappears.

Could you please help me understand how I can assign different scale margins to the price and volume panes while keeping the axis labels visible on both panes?

Below are the code sample and two screenshots that demonstrate the issue.

Thank you!

async function main() {
    const chart = LightweightCharts.createChart(
        document.getElementById("container"),
        {
            width: window.innerWidth,
            height: window.innerHeight,
        }
    );

    const candleSeries = chart.addSeries(
        LightweightCharts.CandlestickSeries,
        {}
    );

    const volumeSeries = chart.addSeries(
        LightweightCharts.HistogramSeries,
        {
            //priceScaleId: 'volume-scale',
            priceFormat: {
                type: "volume",
            },
        },
        1
    );

    candleSeries.setData([
        { time: "2018-10-19", open: 75, high: 82.8, low: 70, close: 80 },
        { time: "2018-10-22", open: 77, high: 88, low: 73, close: 86 },
        { time: "2018-10-23", open: 87, high: 90, low: 80, close: 89.5 },
        { time: "2018-10-24", open: 90, high: 92, low: 65, close: 69 },
        { time: "2018-10-25", open: 70, high: 72, low: 65, close: 67.4 },
    ]);

    volumeSeries.setData([
        { time: "2018-10-19", value: 522000 },
        { time: "2018-10-22", value: 1500000 },
        { time: "2018-10-23", value: 700500 },
        { time: "2018-10-24", value: 2100000 },
        { time: "2018-10-25", value: 900900 },
    ]);

    /*
    candleSeries.priceScale().applyOptions({ scaleMargins: { top: 0.2, bottom: 0.1 } });

    chart.priceScale('volume-scale').applyOptions({
        visible: true,
        scaleMargins: { top: 0.0, bottom: 0.0 },
        borderVisible: true,
    });
    */
    
    chart.timeScale().fitContent();
}

main();

[SlicedSilver]

https://jsfiddle.net/wfo5d6a8/

This appears to work:

async function main() {
    const chart = LightweightCharts.createChart(
        document.getElementById("container"),
        {
            width: window.innerWidth,
            height: window.innerHeight,
        }
    );

    const candleSeries = chart.addSeries(
        LightweightCharts.CandlestickSeries,
        {}
    );

    const volumeSeries = chart.addSeries(
        LightweightCharts.HistogramSeries,
        {
            priceScaleId: 'right',
            priceFormat: {
                type: "volume",
            },
        },
        1
    );

    candleSeries.setData([
        { time: "2018-10-19", open: 75, high: 82.8, low: 70, close: 80 },
        { time: "2018-10-22", open: 77, high: 88, low: 73, close: 86 },
        { time: "2018-10-23", open: 87, high: 90, low: 80, close: 89.5 },
        { time: "2018-10-24", open: 90, high: 92, low: 65, close: 69 },
        { time: "2018-10-25", open: 70, high: 72, low: 65, close: 67.4 },
    ]);

    volumeSeries.setData([
        { time: "2018-10-19", value: 522000 },
        { time: "2018-10-22", value: 1500000 },
        { time: "2018-10-23", value: 700500 },
        { time: "2018-10-24", value: 2100000 },
        { time: "2018-10-25", value: 900900 },
    ]);

    
    candleSeries.priceScale().applyOptions({ scaleMargins: { top: 0.2, bottom: 0.1 } });

    volumeSeries.priceScale().applyOptions({
        visible: true,
        scaleMargins: { top: 0.0, bottom: 0.0 },
        borderVisible: true,
    });
    
    
    chart.timeScale().fitContent();
}

main();

What I changed:

• Setting priceScaleId: 'right', for the historgram series. You want the values to appear in the right price scale therefore you need to set this value to 'right', if you don't then it becomes an 'overlay' type price scale.
• chart.priceScale('volume-scale') changed to volumeSeries.priceScale() since it is easier to get the price scale for a specific series using this API (you don't need to know the id you used).

[reconmind]

Thank you! Now it seems to show some margins at the start.
However, I noticed another issue: if I change one price to a lower value (for example, 40):
{ time: "2018-10-19", open: 40, high: 82.8, low: 70, close: 80 },
the lowest visible price on the chart is still around 60.
How can we fix this behavior?

I need the chart to show scale margins based on the highest and lowest price within the current visible horizontal range of data, including values like 40.

[SlicedSilver]

This data is invalid: { time: "2018-10-19", open: 40, high: 82.8, low: 70, close: 80 }
→ open cannot be lower than low

The rule: low should be the lowest number for the candle, and high should be the largest number.

The library uses the low and high values for the scaling. (It is faster to not need to check that the data makes sense.)

[reconmind]

Indeed. My bad. Thank you!

[reconmind]

P.S. Maybe this will be useful for someone.
In my HTML I originally had:

<script src="https://unpkg.com/lightweight-charts@5.0.0/dist/lightweight-charts.standalone.production.js"></script>

and the suggested solution did not work.

When I changed it to:

<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>

everything started working.