Using highcharts-android in jetpack compose

[VahidGarousi]

Hello, I hope you are well I have trouble with this library in compose can you help me?

Please download and run the attached project The result you will see is that the chart is not displayed

My Application.zip

[VahidGarousi]

@soommy12 can you help me?

[soommy12]

@VahidGarousi this library wasn't developed with Jetpack Compose integration in mind. We will definitely look into it but nothing to announce yet.

[soommy12]

@VahidGarousi Did you try using this approach? You should set chart options in update callback of AndroidView constructor.

[VahidGarousi]

@soommy12 I had checked the approach you mentioned but to be more sure, I rechecked and attached the result.

The chart was not displayed correctly

My Application.zip

[haemi]

did you find a solution for this? My chart is drawn correctly the first time I show it, but when used in a HorizontalPager it doesn't work as expected

[aswinachuthanpalat]

@soommy12 Hi Soommy any update on the possibility of getting compose version of this?

[soommy12]

We are aware of the problem but there are no active works towards solving integration with compose, I'm really sorry about that.

[aswinachuthanpalat]

We are aware of the problem but there are no active works towards solving integration with compose, I'm really sorry about that.

Thank you so much for your quick response. I have a general question also. I have the license purchased and I am confused where I should put the license key. Do you have any documentation in Android?

[wangqi1221]

@VahidGarousi Hi, Has your problem been solved? I now also want to use highcharts in my jetpack compose project.But I can’t display the charts either.

[wangqi1221]

@haemi Hi, Can you use and display highcharts in a jetpack compose project? Can you tell me how you did it? Thanks.

[VahidGarousi]

@VahidGarousi Hi, Has your problem been solved? I now also want to use highcharts in my jetpack compose project.But I can’t display the charts either.

Hello, I did not use this library and did not review it

[caycekoehler]

@soommy12 wanted to touch base on this. Are there any efforts that can be worked on or reviewed for this topic?

[MikolajMichalczak]

Hi all! Sorry for the late response. Here is a way to use Highcharts with Jetpack Compose. Firstly, create an XML layout with HIChartView:

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.highsoft.highcharts.core.HIChartView
        android:id="@+id/chartView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

Secondly, inflate the layout in the factory block and get a reference to HIChartView in the update block:

@Composable
fun HighChartsView() {
    AndroidView(
        modifier = Modifier.fillMaxSize(),
        factory = {
            View.inflate(it, R.layout.chart, null)
        },
        update = {
            val chartView = it.findViewById<HIChartView>(R.id.chartView)
            with(chartView) {
                val chart = HIChart().apply { type = "column" }
                val options = HIOptions().apply {
                    this.chart = chart

                    val title = HITitle()
                    title.text = "Demo chart"
                    this.title = title

                    val series = HIColumn()
                    series.data = ArrayList(
                        listOf(
                            49.9,
                            71.5,
                            106.4,
                            129.2,
                            144,
                            176,
                            135.6,
                            148.5,
                            216.4,
                            194.1,
                            95.6,
                            54.4
                        )
                    )
                    this.series = ArrayList(Collections.singletonList(series))
                }
                this.options = options
            }
        }
    )
}

[srenrd]

Hi this example only works for static data. If the Composable is depending on a dynamic state like data: ArrayList<Double> = ArrayList(emptyList<Double>()) it will be used for the series data series.data = data which later gets updated to data = ArrayList(listOf(0.159, 0.159, 0.156)) the chart is still empty.

Is there some kind of function that should be called when series changes? Like notifyDataSetChanged().

[caycekoehler]

Yea sadly this doesn't seem to resolve any issues. It almost seems like the update function is never called in any capacity.

Ignore this.... My build excluded a dependency that wasn't throwing logcat errors so the Update was crashing without giving information as to why. This actually works.

[srenrd]

The update does run but updates to the series does not change the drawn out chart. Here's some code to illustrate.

var data: ArrayList<Double> by rememberSaveable {
        mutableStateOf(ArrayList(emptyList()))
    }

    LaunchedEffect(true) {
        delay(5.seconds)
        data = ArrayList(
            listOf(
                49.9,
                71.5,
                106.4,
                129.2,
                144.0,
                176.0,
                135.6,
                148.5,
                216.4,
                194.1,
                95.6,
                54.4
            )
        )
    }

Now assign the data to the chart in the update method series.data = data

What you will see is that no data is shown in the chart even when the update fun has done it's job. So there must be some kind of fun we should run to let the chart known to redraw based on the new data it has been given.

If you rotate the phone to force a redraw the data is suddenly there.

[MikolajMichalczak]

@srenrd, please try this implementation (update the chart options in the update method):

@Composable
fun HighChartsView() {
    var data: List<Double> by rememberSaveable { mutableStateOf(emptyList()) }

    LaunchedEffect(true) {
        delay(5000)
        data = listOf(
            49.9,
            71.5,
            106.4,
            129.2,
            144.0,
            176.0,
            135.6,
            148.5,
            216.4,
            194.1,
            95.6,
            54.4
        )
    }
    AndroidView(
        modifier = Modifier.fillMaxSize(),
        factory = {
            val view = View.inflate(it, R.layout.chart, null)
            val chartView = view.findViewById<HIChartView>(R.id.chartView)
            with(chartView) {
                val chart = HIChart().apply { type = "column" }
                val options = HIOptions().apply {
                    this.chart = chart

                    val title = HITitle()
                    title.text = "Demo chart"
                }
                this.options = options
            }
            view
        },
        update = {
            val chartView = it.findViewById<HIChartView>(R.id.chartView)
            val series = HIColumn()
            series.data = ArrayList(data)
            val options = chartView.options.apply {
                this.series = ArrayList(Collections.singletonList(series))
            }
            chartView.update(options)
        }
    )
}

[srenrd]

Thanks chartView.update() was the method i was looking for.

[VahidGarousi]

@VahidGarousi Hi, Has your problem been solved? I now also want to use highcharts in my jetpack compose project.But I can’t display the charts either.

It seems to work properly