Skip to content

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

@armanTabib

Description

@armanTabib

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions