CartesianChartView

CartesianChartView is the entry point for Cartesian charts in the view system. It accepts CartesianChart and CartesianChartModelProducer instances, facilitates communication between them, and displays the chart. It also handles scroll and zoom and shows a placeholder when no data is available.

CartesianChartView automatically creates a chart 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 the CartesianChartView.chart property to get a reference to this chart. Also use it to apply a chart created programmatically:

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

You can add multiple layers 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 uses ScrollHandler and ZoomHandler:

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

cartesianChartView.scrollHandler = scrollHandler
cartesianChartView.zoomHandler = zoomHandler

Scroll represents scroll values—either absolute (from zero) or relative (from the current value). Scroll.Absolute and Scroll.Relative cover the two cases. The following factory functions are available:

• Scroll.Absolute.pixels

• Scroll.Absolute.x

• Scroll.Relative.pixels

• Scroll.Relative.x

AutoScrollCondition defines when to scroll automatically. There are two singletons:

• AutoScrollCondition.Never (default)

• AutoScrollCondition.OnModelGrowth

Zoom defines zoom factors. The following singletons and factory functions are available:

• Zoom.Content

• Zoom.max

• Zoom.min

• Zoom.fixed

• Zoom.x

While the built-in implementations cover the majority of use cases, you can create custom implementations of Scroll, AutoScrollCondition, and Zoom for more advanced behavior.

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)”