Can I change points color according to graph values ?

[sylv42240]

Hello, I really like your lib but I was wondering if it possible to change line chart points color according to entries ?

For exemple in this screenhot I'd like to have green points for all the points that are in the green zone, is it possible ?

[patrickmichalik]

Hello! This isn’t possible yet, but we’ll be looking into adding such a feature. In some cases, as a workaround, the data can be split into multiple series, one for each color, and multiple LineSpecs can be used.

[SebPawp]

It's tricky but I was able to do with a custom LineCartesianLayer.LineSpec.point Component and by "reverse calculating" the value based on the point's Y position in the chart bounds.

Ideally the Component's draw function would take the Entry so we could easily customize the Component based on the value.

In addition, it would also be great if we could have a dynamic label TextComponent to render a dataLabel based on the Entry. As part of my workaround, I draw the data label directly inside my custom Point Component.

[patrickmichalik]

Thanks for sharing, @SebPawp! The feature in question here is planned, as is improved customization for data labels. Component is a low-level API, and it’s used in contexts where there are no chart entries. Thus, Component#draw can’t be updated as described. However, the API that we plan on implementing will be specific to line charts and will certainly expose chart entries, enabling you to easily use their x and y values for customization.

[diegoup2]

Hello @SebPawp, mind sharing your custom LineCartesianLayer.LineSpec.point please.

[shrift]

Just want to chime in here that I'm also looking for this feature.
Has this already been implemented in alpha versions that I could start looking at?

[patrickmichalik]

Hello! This functionality hasn’t been added yet, but it’s planned for Vico 2, which is currently in alpha. Vico 2.0.0 Alpha 13 adds a similar feature for column charts, so we have the general approach figured out.

[shrift]

In case it's useful to anyone else, I also hacked around this limitation of points by abusing persistent markers:

            val persistentMarkers = remember(entries[0], selectedMeasurement) {
                entries[0].associate { entry ->
                    if (entry.measurement == selectedMeasurement) {
                        when {
                            entry.y >= 100f -> {
                                entry.x to markerSelectedRed
                            }
                            entry.y <= 80f -> {
                                entry.x to markerSelectedWarn
                            }
                            else -> {
                                entry.x to markerSelectedNormal
                            }
                        }
                    } else if (entry.y >= 100f) {
                        entry.x to markerRed
                    } else if (entry.y <= 80f) {
                        entry.x to markerWarn
                    } else {
                        entry.x to markerNormal
                    }
                }
            }
            val markerChangeListener = remember {
                object : MarkerVisibilityChangeListener {

                    override fun onMarkerShown(marker: Marker, markerEntryModels: List<Marker.EntryModel>) {
                        val entry = markerEntryModels.first().entry
                        val measurement = (entry as GGChartEntry).measurement
                        onMeasurementSelected.invoke(
                            measurementType, measurement.time.toInstant().toEpochMilli(), measurement.value
                        )
                    }

                    override fun onMarkerHidden(marker: Marker) {
                        onMeasurementSelected.invoke(measurementType, null, null)
                    }

                    override fun onMarkerMoved(marker: Marker, markerEntryModels: List<Marker.EntryModel>) {
                        val entry = markerEntryModels.first().entry
                        val measurement = (entry as GGChartEntry).measurement
                        onMeasurementSelected.invoke(
                            measurementType, measurement.time.toInstant().toEpochMilli(), measurement.value
                        )
                    }
                }
            }

This was on 1.14.0. (Sorry for my messy test data making graph look horrid!)

[patrickmichalik]

Thanks for sharing!

[diegoup2]

For future reference, this only works for 1 line series only, not multiple. Is there a way to assign custom markers for different line series @patrickmichalik ?

[Gowsky]

@diegoup2 a CartesianMarker highlights everything at a given x value. But it can draw different indicators for different series. However this workaround is no longer needed. See here.

[patrickmichalik]

LineCartesianLayer.PointProvider, introduced in Vico 2.0.0 Alpha 23, makes this possible. Cheers!

[Gowsky]

Hello. Vico 2.0.0 is now available.