Updated way to override the y-axis range and space out the x-axis labels to avoid ellipsis on alpha.5 using the VIEW system?

[JoshLudahl]

Hello again! I have two questions.

1. I'm looking to update the range of the y-axis values so instead of starting at 0, I can use a range. For example, I'm adding a Cartesian line chart that shows the temperature for the next 48 hours. Instead of showing from 0 to the max temperature, I'd like to show the +- 10 of the min and max values in the series. The previous way(ref to sample app code) seems to have changed and I get an error when trying to apply directly to a layer saying the type has been erased, so it doesn't compile.

I'm trying to use a values overrider that I created here:

        val min = data.min() - Constants.TEMP_RANGE
        val max = data.max() + Constants.TEMP_RANGE
        val valueOverrider = AxisValueOverrider.fixed<CartesianLayerModel>(minY = min.toFloat())

    (binding.hourlyTemperatureChartView.chart?.layers?.get(0) as CartesianLayer).axisValueOverrider =
            valueOverrider

I tried variations of CartesianLayer, CartesianLayerModel, etc, and they don't seem compatible or values aren't reflected in the chart, but maybe I am missing a vital piece here.

I also get a type eraser error:

Setter for 'axisValueOverrider' is removed by type projection

Full function for reference:

    private fun setUpHourlyTemperatureChart(
        result: WeatherDataSource,
        temperatureUnit: Temperature,
    ) {
        val data =
            result.hourly.map {
                Conversion.fromKelvinToProvidedUnit(
                    it.temp,
                    temperatureUnit,
                ).roundToInt()
            }

        val model =
            CartesianChartModel(
                LineCartesianLayerModel
                    .build { series(data) },
            )

        val min = data.min() - Constants.TEMP_RANGE
        val max = data.max() + Constants.TEMP_RANGE
        val valueOverrider = AxisValueOverrider.fixed<LineCartesianLayerModel>(minY = min.toFloat())
        
        with(binding.hourlyTemperatureChartView) {
            setModel(model)
            (chart?.bottomAxis as HorizontalAxis<AxisPosition.Horizontal.Bottom>)
                .valueFormatter = result.bottomAxisValueFormatter

            (chart?.startAxis as VerticalAxis<AxisPosition.Vertical.Start>)
                .itemPlacer = Constants.CHART_LINE_DEFAULT

            (chart?.layers?.get(0) as LineCartesianLayer).axisValueOverrider =
                valueOverrider
        }
    }

2. How do I avoid the ellipsis on the x-axis and force it to fit the values for the labels, or increase the space to fit the labels? I'm attaching a screenshot of the two graphs I'm using and they both tend to look different on the same screen, so I would like to have the labels be more adaptive so that if someone were to increase the font size on their device, it would still look nice.
   XML

                        <com.patrykandpatrick.vico.views.chart.CartesianChartView
                            android:id="@+id/hourly_temperature_chart_view"
                            android:layout_width="wrap_content"
                            android:layout_height="200dp"
                            android:layout_marginTop="8dp"
                            android:padding="16dp"
                            android:background="@drawable/top_rounded_rectangle"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toBottomOf="@+id/hourly_rain_chart_view"
                            app:layers="line"
                            app:horizontalLayout="fullWidth"
                            app:axisStyle="@style/chart_line_axis_style"
                            app:startAxisStyle="@style/chart_line_start_axis_style"
                            app:lineLayerStyle="@style/Chart1LineLayerStyle"
                            app:bottomAxisStyle="@style/chart_bottom_line_axis_style"
                            app:showBottomAxis="true"
                            app:showStartAxis="true" />

Attaching a screenshot of the ellipsis issue:

And thanks again for all of the help the last week or so!

Edit: I was able to override the y-axis for question 1, I just had to move the setModel(model) below the other methods.

Final code for that is now:

    private fun setUpHourlyTemperatureChart(
        result: WeatherDataSource,
        temperatureUnit: Temperature,
    ) {
        val data =
            result.hourly.map {
                Conversion.fromKelvinToProvidedUnit(
                    it.temp,
                    temperatureUnit,
                ).roundToInt()
            }

        val model =
            CartesianChartModel(
                LineCartesianLayerModel
                    .build { series(data) },
            )

        val min = data.min() - Constants.TEMP_RANGE
        val max = data.max() + Constants.TEMP_RANGE
        val valueOverrider = AxisValueOverrider.fixed<LineCartesianLayerModel>(minY = min.toFloat())

        with(binding.hourlyTemperatureChartView) {
            (chart?.bottomAxis as HorizontalAxis<AxisPosition.Horizontal.Bottom>)
                .valueFormatter = result.bottomAxisValueFormatter

            (chart?.startAxis as VerticalAxis<AxisPosition.Vertical.Start>)
                .itemPlacer = Constants.CHART_LINE_DEFAULT

            (chart?.layers?.get(0) as LineCartesianLayer).axisValueOverrider =
                valueOverrider

            setModel(model)
        }
    }

[patrickmichalik]

Hello!

1. I’m glad you’ve found a solution. AxisValueOverriders should be applied before setModel is called because they’re used on data updates. In older Vico versions, a ChartValues update occurred each time a chart was drawn. Now, for better performance, there’s just one ChartValues update per data update.
2. The distance between HorizontalAxis labels depends on HorizontalDimensions#xSpacing. Unfortunately, there’s currently no feature that automatically adapts HorizontalDimensions#xSpacing to the widths of a chart’s HorizontalAxis labels. We’re looking into adding such functionality, along with a feature that automatically reduces the label count to prevent truncation. I’ll let you know when this is available. In your chart, HorizontalDimensions#xSpacing depends on LineCartesianLayer#spacingDp, which is 32 dp by default. As a workaround, you could try updating this value based on the font size (so that it’s in sp, not in dp). You might also want to decrease the labels’ horizontal padding, which is 4 dp by default.

[JoshLudahl]

Thank you, that did the trick. It took some digging, but I was able to set it with this for anyone else looking to do the same on the View System:
(chart?.layers?.get(0) as LineCartesianLayer).spacingDp = 40.0f

[patrickmichalik]

You’re welcome! There’s an XML attribute for this too. It’s called spacing and goes in the same place as line1Spec through line3Spec.

[JoshLudahl]

Thank you. I thought I tried to increase the spacing that way but the ellipses remained, but were further apart. I tried a combination, but it didn't seem to work as intended.

…

On Fri, Jan 12, 2024, 12:42 AM Patrick Michalik ***@***.***> wrote: You’re welcome! There’s an XML attribute for this too. It’s called spacing and goes in the same place where line1Spec through line3Spec. — Reply to this email directly, view it on GitHub <#516 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADGMW7WPKJ76HNQF2D3PX5DYODZOZAVCNFSM6AAAAABBL76KT6VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DCMBXGA2TE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[patrickmichalik]

That’s quite curious. The two solutions in question should be equivalent, and we’ve not seen any issues in this respect in our testing. The programmatic approach is perfectly valid, but if you’d like to use XML, please feel free to share an example where the inconsistency you’ve described occurs, and we’ll check what’s happening.