Axis

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.

BaseAxis.TickPosition and BaseAxis.LineDrawingOrder let you place ticks outside, inside, or across the axis line and choose whether ticks and the axis line are drawn under or over the chart layers. In XML, use the tickPosition and lineDrawingOrder attributes on AxisStyle.

Creation

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