CartesianChartView

Overview

The CartesianChart host for views is CartesianChartView.

CartesianChartView automatically creates a CartesianChart when the layers attribute is used:

<style name="ChartStyle">
    <item name="layers"><!-- ... --></item>
    <!-- ... -->
</style>

<com.patrykandpatrick.vico.views.cartesian.CartesianChartView
    app:chartStyle="@style/ChartStyle"
    <!-- ... --> />

Use CartesianChartView.chart property to get a reference to this CartesianChart. Also use it to apply a programmatically created CartesianChart:

cartesianChartView.chart = CartesianChart(/* ... */)

You can add multiple CartesianLayers by separating their names with pipes:

<style name="ChartStyle">
    <item name="layers">column|line</item>
    <!-- ... -->
</style>

<com.patrykandpatrick.vico.views.cartesian.CartesianChartView
    app:chartStyle="@style/ChartStyle"
    <!-- ... --> />

Scroll and zoom

There are XML attributes for toggling scroll and zoom:

<style name="ChartStyle">
    <item name="scrollEnabled">true</item>
    <item name="zoomEnabled">true</item>
    <!-- ... -->
</style>

<com.patrykandpatrick.vico.views.cartesian.CartesianChartView
    app:chartStyle="@style/ChartStyle"
    <!-- ... --> />

More advanced customization is performed via ScrollHandler and ZoomHandler:

val scrollHandler = ScrollHandler(/* ... */)
val zoomHandler = ZoomHandler(/* ... */)

cartesianChartView.scrollHandler = scrollHandler
cartesianChartView.zoomHandler = zoomHandler

Sample charts

• “Basic column chart”

• “Basic line chart”

• “Basic combo chart”

• “AI test scores”

• “Daily digital-media use (USA)”

• “Temperature anomalies (June)”

• “Electric-car sales (Norway)”

• “Rock–metal ratios”

• “Gold prices (12/30/2024)”