Two Histogram series as overlay with different scale overlaps.

Lightweight Charts Version: 3.7.0

Steps/code to reproduce:

var chart = LightweightCharts.createChart(document.body, {
	width: 600,
        height: 300,
	rightPriceScale: {
		scaleMargins: {
			top: 0.0,
			bottom: 0.0,
		},
		borderVisible: false,
	}
});


var series1 = chart.addHistogramSeries({
  overlay:true,
	scaleMargins: {
		top: 0.2,
		bottom: 0.8,
	},
});

var series2 = chart.addHistogramSeries({
  overlay:true,
	scaleMargins: {
		top: 0.4,
		bottom: 0.2,
	},
});

Actual behavior:

Last histogram overlaps to first.

Expected behavior:

Both histogram series should be drawn at different scaled area, provided as series options.

Screenshots:

[timocov]

Ok, it seems that there is some misunderstanding. The issue is that when you set overlay: true it will be converted to priceScaleId: '' automatically (see https://tradingview.github.io/lightweight-charts/docs/migrations/from-v2-to-v3#creating-overlay) thus your scaleMargings are applied to the same price scale and it uses the latest value only. If you want to split them to different price scale, use priceScaleId option instead.

For example, for the first series you can use priceScaleId: 'overlay1' and for the second one priceScaleId: 'overlay2' and I think it should work as expected.

[jackflyer]

Exactly, what I missed is need to use priceScaleId.