ColumnCartesianLayer

Overview

Use ColumnCartesianLayerarrow-up-right to create column charts. Instantiate ColumnCartesianLayer via rememberColumnCartesianLayerarrow-up-right.

Each column corresponds to a LineComponentarrow-up-right. The LineComponents are provided by a ColumnCartesianLayer.ColumnProviderarrow-up-right. ColumnCartesianLayer.ColumnProvider.seriesarrow-up-right creates a ColumnCartesianLayer.ColumnProvider that uses one LineComponent per series. You can create your own implementation for custom behavior, including styling columns individually based on their y-values.

In addition to customizing the columns, at the rememberColumnCartesianLayer level, you can change their spacing. Data labels are supported. When multiple series are added, a ColumnCartesianLayer’s columns can be grouped horizontally or stacked.

Transaction.columnSeries

ColumnCartesianLayers use ColumnCartesianLayerModelarrow-up-rights. When using a CartesianChartModelProducerarrow-up-right, add ColumnCartesianLayerModels via columnSeriesarrow-up-right:

cartesianChartModelProducer.runTransaction {
    columnSeries {
        series(1, 8, 3, 7)
        series(y = listOf(6, 1, 9, 3))
        series(x = listOf(1, 2, 3, 4), y = listOf(2, 5, 3, 4))
    }
    // ...
}

Each seriesarrow-up-right invocation adds a series to the ColumnCartesianLayerModel. Above, three series are added. series has three overloads (each of which accepts all Number subtypes):

  • a vararg overload that takes y-values and uses their indices as the x-values

  • an overload that takes a Collection of y-values and uses their indices as the x-values

  • an overload that takes a Collection of x-values and a Collection of y-values of the same size

Manual ColumnCartesianLayerModel creation

When creating a CartesianChartModelarrow-up-right directly, you can add a ColumnCartesianLayerModel by using buildarrow-up-right. This function gives you access to the same DSL that columnSeries does.

Sample charts

Last updated