When adding a small amount of data and subscribing using subscribeVisibleTimeRangeChange, the graph crashes.

[pavlovpavlo]

Lightweight Charts™ Version: 4.0.0

Add my code

val timeScaleApi = remember { mutableStateOf<TimeScaleApi?>(null) }
val candleSeries = remember { mutableStateOf<SeriesApi?>(null) }

LaunchedEffect(candleSeries, currentGraphData, isGraphInitialized) {
    val data = getCandleGraphData(currentGraphData ?: OhlcvGraphData())

    timeScaleApi.value?.applyOptions {
        barSpacing = 9f
    }
    delay(150)
    if (candleSeries.value != null /*&& (currentGraphData?.ohlcvData?.size ?: 0) > 5*/) {
        candleSeries.value?.setData(data)
    }
}

LaunchedEffect(timeScaleApi, visibleRange) {
    if (candleSeries.value != null
        && visibleRange?.to != null
        && visibleRange?.from != null
        && currentScrollableGraph != GraphType.PRICE
    ) {
        //timeScaleApi.value?.setVisibleRange(visibleRange)
    }
}

Box(modifier = modifier) {
    CandleGraphGridContainer(pricesGraphPriceTags)
    AndroidView(modifier = Modifier
        .fillMaxHeight()
        .fillMaxWidth()
        .padding(
            end = HasherMaterialTheme.dimensions.market_data_price_mark_width,
            top = HasherMaterialTheme.dimensions.space_12,
            bottom = HasherMaterialTheme.dimensions.size_6
        )
        .pointerInteropFilter { motionEvent ->
            if (motionEvent.action == MotionEvent.ACTION_DOWN) {
                changeScrollGraph(GraphType.PRICE)
            }
            false
        },

        factory = { context ->
            ChartsView(context).apply {
                api.applyOptions {
                    layout = layoutOptions {
                        background = SolidColor(Color.Transparent.toArgb())
                        textColor = IntColor(graphTextColor.toArgb())
                    }
                    grid = gridOptions {
                        vertLines = gridLineOptions { visible = false }
                        horzLines = gridLineOptions { visible = false }
                    }
                    timeScale = timeScaleOptions {
                        visible = false
                        borderVisible = false
                        fixLeftEdge = true
                        fixRightEdge = true
                    }

                    crosshair = crosshairOptions {
                        vertLine = crosshairLineOptions {
                            visible = false
                            labelVisible = false
                        }
                        horzLine = crosshairLineOptions {
                            visible = false
                            labelVisible = false
                        }
                    }
                    api.subscribeClick {
                        setSelectedPrice((it.time?.date?.time ?: 0L) / 1000)
                    }
                    api.timeScale.subscribeVisibleTimeRangeChange { range ->
                        onVisibleRangeChanged(range, GraphType.PRICE)
                    }
                }
            }
        },
        update = { view ->
            if (timeScaleApi.value == null) {
                timeScaleApi.value = view.api.timeScale
            }
            if (candleSeries.value == null) {
                view.api.addCandlestickSeries(
                    options = CandlestickSeriesOptions(
                        lastValueVisible = false,
                        priceLineVisible = false,
                        upColor = upColor,
                        downColor = downColor
                    )
                ) { newSeries ->
                    candleSeries.value = newSeries

                    view.api.applyOptions {
                        rightPriceScale = priceScaleOptions {
                            mode = PriceScaleMode.NORMAL
                            visible = false
                            autoScale = true
                            borderVisible = false
                            scaleMargins = priceScaleMargins {
                                top = 0.001f
                                bottom = 0.001f
                            }
                        }
                    }
                }
            }
        }
    )

Stack trace:

Expected behavior:
When changing time tabs, I set new data in my Series and add a listener to change the range and synchronize the graphs. When adding a small amount of data, the graph crashes. I tried removing the subscription and there was no crash, the graph automatically updated its dimensions.

[pavlovpavlo]

@makedonsky94 Can you help me?

[SlicedSilver]

Trying to think about possible causes based on the error stack.

Does the series / chart always have some data, or when you are adding the data you are first clearing the existing data and then some time later setting the new data?

You may get an error like this if there is only a single series on the chart and it doesn't have any data. So in other words, maybe there is a timing issue with how the changing of data is happening on your side such as a delay, or netwook call, that means the series is empty until the data is provided.

[pavlovpavlo]

The data is always available, but there are tokens where I have more than 100 items in the data list in a one-minute range, and when set to one day, there are 3. I set the data only in the method

LaunchedEffect(candleSeries, currentGraphData, isGraphInitialized) {
        val data = getCandleGraphData(currentGraphData ?: OhlcvGraphData())

        timeScaleApi.value?.applyOptions {
            barSpacing = 9f
        }

        if (candleSeries.value != null) {
            candleSeries.value?.setData(data)
        }
    }.

That is, there were 100 elements on the chart, then I set 3 and it crashes. If I remove the subscription, everything works fine.

[SlicedSilver]

So I assume you are doing something like this example: https://tradingview.github.io/lightweight-charts/tutorials/demos/range-switcher (but using the mobile wrapper). Like how the 1Y data only has a few data points but the 1D data has a lot more.

Perhaps if you provide some sample data (the 100 candles, and the 3 candles) then I could try reproduce the issue on the native JS version.

[pavlovpavlo]

Added examples of incoming data. Perhaps this is a problem with the Android wrapper.
Correct_data_example.txt
Incorrect_data_example.txt

[pavlovpavlo]

@SlicedSilver Were you able to review this bug?

[SlicedSilver]

I've been unable to download those txt files attached in your response and ask a few other developers in the office to try as well but they couldn't download them either.

[pavlovpavlo]

@SlicedSilver This is my start data

[CandlestickData(time=Utc(timestamp=1753920000), open=3.8589665E-12, high=2.5034644E-10, low=3.8589665E-12, close=1.0660183E-10, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753921800), open=1.0660183E-10, high=3.6762826E-10, low=8.134731E-11, close=3.6762826E-10, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753923600), open=3.6762826E-10, high=4.4431633E-10, low=2.936025E-10, close=3.579003E-10, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753925400), open=3.579003E-10, high=8.767965E-10, low=3.579003E-10, close=6.674536E-10, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753927200), open=6.674536E-10, high=1.215354E-9, low=6.674536E-10, close=1.1499225E-9, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753929000), open=1.1499225E-9, high=2.554357E-9, low=1.1246456E-9, close=2.4508993E-9, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753930800), open=2.4508993E-9, high=3.0320404E-9, low=2.436723E-9, close=3.0320404E-9, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753932600), open=3.0320404E-9, high=6.7583805E-9, low=3.0320404E-9, close=6.7583805E-9, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753934400), open=6.7583805E-9, high=8.513742E-9, low=5.356513E-9, close=5.3854183E-9, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753936200), open=5.3854183E-9, high=1.2820723E-8, low=5.3854183E-9, close=1.26262E-8, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753938000), open=1.26262E-8, high=1.26262E-8, low=1.0794498E-8, close=1.1859448E-8, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753939800), open=1.1859448E-8, high=1.268253E-8, low=1.1677726E-8, close=1.268253E-8, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753941600), open=1.268253E-8, high=1.628744E-8, low=1.1562344E-8, close=1.6173415E-8, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753943400), open=1.6173415E-8, high=1.9085144E-8, low=1.5739465E-8, close=1.9085144E-8, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753945200), open=1.9085144E-8, high=2.4684502E-8, low=1.9085144E-8, close=2.3846914E-8, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753947000), open=2.3846914E-8, high=2.3846914E-8, low=2.1952232E-8, close=2.1952232E-8, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753948800), open=2.1952232E-8, high=3.40908E-8, low=2.1952232E-8, close=3.102186E-8, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753950600), open=3.102186E-8, high=3.102186E-8, low=2.8110465E-8, close=2.8110465E-8, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753952400), open=2.8110465E-8, high=2.8110465E-8, low=2.5113826E-8, close=2.5113826E-8, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753954200), open=2.5113826E-8, high=2.5113826E-8, low=2.37158E-8, close=2.37158E-8, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753956000), open=2.37158E-8, high=2.37158E-8, low=1.8539053E-8, close=1.8539053E-8, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753957800), open=1.8539053E-8, high=1.8650244E-8, low=1.8428137E-8, close=1.8556145E-8, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753959600), open=1.8556145E-8, high=1.8566277E-8, low=1.7984126E-8, close=1.7984126E-8, color=null, borderColor=null, wickColor=null)]

And this is second data. When i have subscribeVisibleTimeRangeChange and call candleSeries.value?.setData(data) my app crashed. If i dont have subscribeVisibleTimeRangeChange its work normal.

[CandlestickData(time=Utc(timestamp=1753920000), open=3.8589665E-12, high=3.6762826E-10, low=3.8589665E-12, close=3.6762826E-10, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753923600), open=3.6762826E-10, high=8.767965E-10, low=2.936025E-10, close=6.674536E-10, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753927200), open=6.674536E-10, high=2.554357E-9, low=6.674536E-10, close=2.4508993E-9, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753930800), open=2.4508993E-9, high=6.7583805E-9, low=2.436723E-9, close=6.7583805E-9, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753934400), open=6.7583805E-9, high=1.2820723E-8, low=5.356513E-9, close=1.26262E-8, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753938000), open=1.26262E-8, high=1.268253E-8, low=1.0794498E-8, close=1.268253E-8, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753941600), open=1.268253E-8, high=1.9085144E-8, low=1.1562344E-8, close=1.9085144E-8, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753945200), open=1.9085144E-8, high=2.4684502E-8, low=1.9085144E-8, close=2.1952232E-8, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753948800), open=2.1952232E-8, high=3.40908E-8, low=2.1952232E-8, close=2.8110465E-8, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753952400), open=2.8110465E-8, high=2.8110465E-8, low=2.37158E-8, close=2.37158E-8, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753956000), open=2.37158E-8, high=2.37158E-8, low=1.8428137E-8, close=1.8556145E-8, color=null, borderColor=null, wickColor=null), CandlestickData(time=Utc(timestamp=1753959600), open=1.8556145E-8, high=1.8566277E-8, low=1.7984126E-8, close=1.7984126E-8, color=null, borderColor=null, wickColor=null)]

[SlicedSilver]

I created a JS example using that data (and v4 of the library) which uses the subscribeVisibleTimeRangeChange:
https://codesandbox.io/p/devbox/lightweight-charts-example-forked-zcnnfs

It appears to work. Perhaps you could fork the example above and add more code to get closer to your implementation and see if you could produce the error?

If that fails then perhaps you could unsubscribe that callback before using setData and then resubscribe after that?

[pavlovpavlo]

@SlicedSilver I can provide the code for my Android method if it will be of assistance to you. Thank you for your response. I attempted to unsubscribe before installing the data, but it did not help.

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun PriceGraph(
    modifier: Modifier,
    currentGraphData: OhlcvGraphData?,
    visibleRange: TimeRange?,
    isGraphInitialized: Boolean,
    currentScrollableGraph: GraphType?,
    pricesGraphPriceTags: List<String>,
    dateGraphPriceTags: List<String>,
    currentPriceIndicatorData: CandleGraphCurrentPriceIndicatorData,
    selectedPriceData: SelectedPriceData?,
    changeScrollGraph: (GraphType) -> Unit,
    setSelectedPrice: (Long) -> Unit,
    onVisibleRangeChanged: (TimeRange?, GraphType) -> Unit,
) {
    val graphTextColor = HasherMaterialTheme.colors.textColorGray
    val upColor = IntColor(HasherMaterialTheme.colors.textSuccess.toArgb())
    val downColor = IntColor(HasherMaterialTheme.colors.error.toArgb())

    val graphFontSize = HasherMaterialTheme.typography.extraTinyNormal.fontSize.value.toInt()

    val timeScaleApi = remember { mutableStateOf<TimeScaleApi?>(null) }
    val candleSeries = remember { mutableStateOf<SeriesApi?>(null) }

    val onTimeRangeChanged = { range: TimeRange? ->
        onVisibleRangeChanged(range, GraphType.PRICE)
    }


    LaunchedEffect(candleSeries, currentGraphData, isGraphInitialized) {
        val data = getCandleGraphData(currentGraphData ?: OhlcvGraphData())

        timeScaleApi.value?.applyOptions {
            barSpacing = 9f
        }

        if (candleSeries.value != null) {
            candleSeries.value?.setData(listOf())
            candleSeries.value?.setData(data)
        }
    }

    val gridColor = IntColor(HasherMaterialTheme.colors.foreground.toArgb())
    LaunchedEffect(timeScaleApi, visibleRange) {
        if (candleSeries.value != null
            && visibleRange?.to != null
            && visibleRange?.from != null
            && currentScrollableGraph != GraphType.PRICE
        ) {
            timeScaleApi.value?.setVisibleRange(visibleRange)
        }
    }
    Box(modifier = modifier) {
        GraphGridContainer(pricesGraphPriceTags, true)
        AndroidView(modifier = Modifier
            .fillMaxHeight()
            .fillMaxWidth()
            .padding(
                end = HasherMaterialTheme.dimensions.market_data_price_mark_width,
                top = HasherMaterialTheme.dimensions.space_12,
                bottom = HasherMaterialTheme.dimensions.size_6
            )
            .pointerInteropFilter { motionEvent ->
                if (motionEvent.action == MotionEvent.ACTION_DOWN) {
                    changeScrollGraph(GraphType.PRICE)
                }
                false
            },

            factory = { context ->
                ChartsView(context).apply {
                    api.applyOptions {
                        layout = layoutOptions {
                            background = SolidColor(Color.Transparent.toArgb())
                            textColor = IntColor(graphTextColor.toArgb())
                            fontSize = graphFontSize
                        }
                        grid = gridOptions {
                            horzLines = gridLineOptions { visible = false }
                            vertLines= gridLineOptions { color = gridColor }
                        }
                        timeScale = timeScaleOptions {
                            visible = true
                            borderVisible = false
                            fixLeftEdge = true
                            fixRightEdge = true
                            tickMarkFormatter = TickMarkFormatter()
                        }

                        crosshair = crosshairOptions {
                            vertLine = crosshairLineOptions {
                                visible = false
                                labelVisible = false
                            }
                            horzLine = crosshairLineOptions {
                                visible = false
                                labelVisible = false
                            }
                        }
                        api.subscribeClick {
                            setSelectedPrice((it.time?.date?.time ?: 0L) / 1000)
                        }
                    }
                }
            },
            update = { view ->
                if (timeScaleApi.value == null) {
                    timeScaleApi.value = view.api.timeScale
                    view.api.timeScale.subscribeVisibleTimeRangeChange(onTimeRangeChanged)
                }

                if (candleSeries.value == null) {
                    view.api.addCandlestickSeries(
                        options = CandlestickSeriesOptions(
                            lastValueVisible = false,
                            priceLineVisible = false,
                            upColor = upColor,
                            downColor = downColor
                        )
                    ) { newSeries ->
                        candleSeries.value = newSeries

                        view.api.applyOptions {
                            rightPriceScale = priceScaleOptions {
                                visible = false
                                autoScale = true
                                borderVisible = false
                                scaleMargins = priceScaleMargins {
                                    top = 0.001f
                                    bottom = 0.001f
                                }
                            }
                        }
                    }
                }
            }
        )

        CandleGraphPriceContainer(pricesGraphPriceTags)

        if (currentPriceIndicatorData.price.isNotEmpty())
            CandleGraphActualPriceIndicator(
                currentPriceIndicatorData
            )
        if (selectedPriceData != null)
            CandleInfoContainer(selectedPriceData)
    }
}