CartesianChart

Anatomy

CartesianChart draws charts based on Cartesian coordinate planes. Any such chart includes one or more CartesianLayers. The CartesianLayers are stacked, and each one has its own data.

Hosts

A CartesianChart is used with a host—a composable or view that passes it data, draws it, and handles framework-specific matters, such as gesture detection.

Learn about the hosts for Compose and for views.

Ranges

A CartesianChart’s x- and y-ranges depend on those reported by its CartesianLayers. The x-range is the narrowest one that includes all CartesianLayers’ x-ranges. By default, there’s an analogously determined shared y-range, but two separate y-ranges can also be introduced.

x- and y-range customization is discussed in a later subsection.

Scroll and zoom

While scroll and zoom are handled at the framework level, core includes some shared high-level contracts.

Scroll, split into Scroll.Absolute and Scroll.Relative, is used to represent scroll values—either absolute (from zero) or relative (from the current value). 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 is used to define 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 your own for 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)”