Axis

Overview

Axis draws an axis along one of a CartesianChart’s edges. There are two built-in implementations: HorizontalAxis and VerticalAxis. Numerous customization options are available—you can change the appearance of the labels, modify the axis lines, add titles, and more.

Use the XML attributes to create HorizontalAxis and VerticalAxis instances:

<style name="ChartStyle">
    <item name="showStartAxis">true</item>
    <item name="showTopAxis">true</item>
    <item name="showEndAxis">true</item>
    <item name="showBottomAxis">true</item>
</style>

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

Alternatively, use VerticalAxis.start, HorizontalAxis.top, VerticalAxis.end, and HorizontalAxis.bottom:

cartesianChartView.chart =
    CartesianChart(
        startAxis = VerticalAxis.start(/* ... */),
        topAxis = HorizontalAxis.top(/* ... */),
        endAxis = VerticalAxis.end(/* ... */),
        bottomAxis = HorizontalAxis.bottom(/* ... */),
        // ...
    )

ItemPlacer

HorizontalAxis.ItemPlacer and VerticalAxis.ItemPlacer let you customize for what x- and y-values labels and lines are displayed. Four factory functions are available:

• HorizontalAxis.ItemPlacer.aligned (default)

• HorizontalAxis.ItemPlacer.segmented

• VerticalAxis.ItemPlacer.step (default)

• VerticalAxis.ItemPlacer.count

Custom implementations can be created.

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