LineCartesianLayer

Use LineCartesianLayer to create line charts. Instantiate it via rememberLineCartesianLayer.

Each line is associated with a Line instance. Create these via rememberLine. These are provided by LineProvider. A base implementation of this interface can be instantiated via LineProvider.series. You can customize line fills, backgrounds, shapes, and other properties. You can also add data labels, points, and interpolation.

LineStroke

Line strokes are customized via LineStroke, which has two implementations:

• Continuous
• Dashed

LineFill and AreaFill

Line fills are customized via LineFill, which has two factory functions:

• single
• double

Area fills, which are optional, are customized via AreaFill. This has similar factory functions to LineFill:

• single
• double

These cover most use cases. You can use both colors and brushes, and you can apply split styling—enabling you to create a line that’s green for positive values and red for negative values, for instance. You can, however, also create your own LineFill and AreaFill implementations.

LineFill.colorScale and AreaFill.colorScale provide another option. These APIs let you define multi-stop styling against the value scale instead of splitting at a single threshold.

For an example of an area fill, see the “Electric-car sales (Norway)” sample chart.

The “Electric-car sales (Norway)” sample chart, which combines an area fill with catmullRom interpolation

Interpolator

Use Interpolator to define how a line passes through its points. Three built-in implementations are available:

• Sharp
• cubic
• catmullRom

The first uses straight line segments. The second uses cubic Bézier curves. The third passes through all points and keeps collinear segments straight. The “Electric-car sales (Norway)” sample chart uses catmullRom.

PointProvider

To add points, use PointProvider. PointProvider.single instantiates a base implementation that adds a point for each entry and uses a shared point style. Once again, custom implementations can be created. A common use case for this is styling points individually based on their y-values. For an example, see the “AI test scores” sample chart.

Transaction.lineModel

Line layers use LineCartesianLayerModel instances. When using CartesianChartModelProducer, add them via lineModel:

cartesianChartModelProducer.runTransaction {
    lineModel {
        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 series invocation adds a series to the LineCartesianLayerModel instance. 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 LineCartesianLayerModel creation

When creating a CartesianChartModel instance directly, you can add a line-layer model by using build. This function gives you access to the same DSL that lineModel does.

CartesianChartModel(
    LineCartesianLayerModel.build {
        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))
    },
    // ...
)