tradingview / lightweight-charts-android

Android wrapper for lightweight-charts library
Apache License 2.0
101 stars 34 forks source link

Add two series into one chart and scale one of them #146

Open armanTabib opened 5 months ago

armanTabib commented 5 months ago

I'm using lightweight-chart-android on my compose application and I'm hosting an area view and a volume at the bottom (exactly like this). But the problem is that I want to scale the volume, so I do these:

api.addAreaSeries(options = AreaSeriesOptions(
                                lastValueVisible = false,
                                visible = true,
                                topColor  = ContextCompat.getColor(context, R.color.asset_details_area_top_color).toIntColor(),
                                bottomColor = ContextCompat.getColor(context, R.color.asset_details_area_bottom_color).toIntColor(),
                                lineColor = ContextCompat.getColor(context, R.color.asset_details_area_line_end_color).toIntColor(),
                                lineStyle = LineStyle.SOLID,
                                lineWidth = LineWidth.ONE,
                                lineType = LineType.SIMPLE,
                                priceFormat = PriceFormat(type = PriceFormat.Type.PRICE),
                            ), onSeriesCreated = {areaAPI ->
                                areaAPI.setData(chartState.chartData.map {data ->
                                    data.toHistogramPriceData()
                                })
                                areaAPI.priceScale().applyOptions{
                                    scaleMargins = PriceScaleMargins(
                                        top = 0.09f,
                                        bottom = 0.9f
                                    )
                                }
                            })

api.addHistogramSeries(options = HistogramSeriesOptions(priceFormat = PriceFormat(
                                type = PriceFormat.Type.VOLUME
                            ), color = "#BAC2C8FF".toIntColor(),),
                                onSeriesCreated = {volumeAPI ->
                                    volumeAPI.setData(chartState.chartData.map {data ->
                                        data.toHistogramVolumeData()
                                    })
                                    volumeAPI.priceScale().applyOptions {
                                        scaleMargins = PriceScaleMargins(
                                            top = 0.9f,
                                            bottom = 0f
                                        )
                                    }
                                })

If I want to explain this code, I add an areaSeries and scale it from 0.9 to 0.09 and I add a volume and scale it from 0 to 0.9 so it loads at the bottom of the page. But what I get is an scaled area view at the bottom of page overlapped with volume view.

armanTabib commented 5 months ago

It seems that I've resolved the issue, I just added priceScaleId = PriceScaleId("2") and priceScaleId = PriceScaleId("1") to seriesOptions when adding series, though I'm not sure how it works.