You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Commit ac63383
Browse filesBrowse the repository at this point in the historyBrowse files
charts-release-bot
committed
docs(snapshot): sync release notes, wiki docs, GIF baselines, and hero image
Chart chrome (background, shape, shadow, and outer padding) lives on the caller-supplied `modifier`; sizing is fully modifier-driven. The `chartContainerStyle` block carries `contentPadding` and the title and subtitle text styles.
64
-
65
-
Here `selectedValueFormatter` adds currency to selected raw values only; Y ticks keep the independent `axisValueFormatter` default. Titles do not generate labels: omitting `categories` hides X labels and leaves only the formatted value in selected readouts.
66
-
67
-
Several charts can paint their shapes with a gradient instead of a solid color, covered in
68
-
[Gradients](/{{version}}/wiki/gradients).
69
-
70
-
## Axes
71
-
72
-
Bar, histogram, line, stacked bar, and stacked area charts share `AxesStyle`. Its `lines`, `grid`,
73
-
`xLabels`, and `yLabels` blocks control each element separately. `lines` means the X- and Y-axis
74
-
strokes, including the chart baseline.
75
-
76
-
Set `axes = AxesDefaults.style(visible = false)` to hide all four elements and reclaim label space.
77
-
This also hides the grid on a sparkline. To keep labels and grid while hiding just the axis strokes,
78
-
use `AxesDefaults.style(lines = AxisLinesDefaults.style(visible = false))`.
79
-
80
-
## Axis Labels
81
-
82
-
Cartesian charts take `xLabels(...)` and `yLabels(...)` from their `*ChartDefaults`. Their `maxCount` is null by default, which lets the chart choose:
83
-
84
-
- X labels show as many categories as fit, evenly spaced from the first item, and never overlapping. Wider charts show more labels.
85
-
- Y labels show up to five values, evenly spaced from the lowest to the highest value. Short charts show fewer, so labels never overlap.
86
-
87
-
Set `maxCount` to cap the number of labels; it must be in 2..1000. Labels never overlap, so a chart can show fewer than `maxCount`:
88
-
89
-
- X labels use the densest even grid from the first item with at most `maxCount` labels. When the chart scrolls, the cap applies per screen. Without scrolling, a grid that ends on the last item wins when it shows at most one label fewer.
Bar, histogram, line, stacked bar, and stacked area charts draw horizontal grid lines. Configure `axes.grid` with `GridDefaults.style(...)`: `visible`, `steps`, `color`, and `lineWidth`. When Y labels show, the grid draws one line on each label, so it keeps matching them on short plots and with `yLabels(maxCount = ...)`. With Y labels hidden, `steps` sets the number of intervals; the default 4 steps draw 5 evenly spaced lines.
Pass `GridDefaults.style(visible = false)` to hide only the grid.
115
-
116
-
## Sizing
117
-
118
-
The chart composable's `modifier` is the only sizing control. A bounded `modifier` becomes a rectangular plot; a one-axis bounded `modifier` derives a square fallback; a fully unbounded `modifier` falls back to a 200.dp default.
119
-
120
-
```kotlin
121
-
val dataSet =listOf(42.0, 38.0, 45.0, 51.0, 47.0, 54.0, 49.0).toChartData()
122
-
123
-
LineChart(
124
-
data = dataSet,
125
-
modifier =Modifier
126
-
.fillMaxWidth()
127
-
.height(260.dp),
128
-
)
129
-
```
130
-
131
-
## Surrounding Chrome
132
-
133
-
Background, shadow, shape, and outer spacing are not applied by the chart. Wrap the chart in any Compose surface to add chrome.
134
-
135
-
```kotlin
136
-
val dataSet =listOf(42.0, 38.0, 45.0, 51.0, 47.0, 54.0, 49.0).toChartData()
`ChartContainerDefaults.style()` returns a `ChartContainerStyle` with `styleTitle`, `styleSubtitle`, and `contentPadding`. Set `contentPadding` to change the internal spacing reserved for axes, title, and legend.
67
+
## Titles and Typography
181
68
182
-
```kotlin
183
-
val dataSet =listOf(42.0, 38.0, 45.0, 51.0, 47.0, 54.0, 49.0).toChartData()
69
+
Every chart accepts a title and subtitle. A subtitle appears below the title and can also appear by
70
+
itself. Set `styleTitle` and `styleSubtitle` through `ChartContainerDefaults.style(...)` to customize
71
+
their `TextStyle`s. The container style also controls internal `contentPadding`, which reserves room
Use the chart composable's `modifier` to set its size. Standard Compose layout modifiers such as
77
+
`fillMaxWidth()` and `height(...)` work with charts. Bounded width and height define the chart size;
78
+
when one axis is unbounded the chart uses a square fallback based on the bounded axis, and when both
79
+
are unbounded the default plot size is 200 dp. Put a chart in a `Card`, `Column`, or other container
80
+
to add a background, shape, shadow, or outer spacing; those belong to the caller's layout.
195
81
196
-
Use `rememberChartSelection()` to hoist selection. The chart calls back into it; you read `selectedIndex` to drive external UI such as legends or summary cards.
82
+
## Axes, Colors, and Palettes
197
83
198
-
```kotlin
199
-
val selection = rememberChartSelection()
200
-
val values =listOf(42.0, 38.0, 45.0, 51.0, 47.0, 54.0, 49.0)
84
+
Bar, histogram, line, stacked bar, and stacked area charts provide `AxesStyle` for axis lines, grid lines, and X and Y labels. `AxesDefaults.style(visible = false)` hides those elements together; set an individual block's visibility when only one element needs to change. The pie and ring chart families expose different labels and style options.
201
85
202
-
LineChart(
203
-
data = values.toChartData(),
204
-
modifier =Modifier.fillMaxWidth().height(260.dp),
205
-
selection = selection,
206
-
)
86
+
Axis labels are evenly spaced and avoid overlap. By default the chart chooses how many X labels fit; Y axes show up to five values and short charts can show fewer. Set a label block's `maxCount` to cap the count (valid values are 2 through 1000); the chart can still show fewer when labels do not fit. When Y labels are visible, grid lines align with them. When they are hidden, `GridStyle.steps` controls the horizontal intervals; the default four steps produce five lines.
207
87
208
-
val selected = values.getOrNull(selection.selectedIndex ?:0)
209
-
Text("Selected: $selected")
210
-
```
88
+
Use each chart family's style factory to choose shape colors, line widths, label text styles, spacing,
89
+
or palettes. Default colors follow the Material theme. Multi-series chart families can use a palette in series order; palette support and
90
+
legend behavior vary by chart. A gradient can replace a shape's solid color on supported chart families; see the
91
+
[Gradients guide](/{{version}}/wiki/gradients). For chart-specific palette and legend behavior, see
92
+
[pie](/{{version}}/wiki/pie-chart), [radar](/{{version}}/wiki/radar-chart), [stacked bar](/{{version}}/wiki/stacked-bar-chart), and [stacked area](/{{version}}/wiki/stacked-area-chart).
211
93
212
-
## Legend
94
+
## Formatting and Selection
213
95
214
-
Line, live line, radar, stacked bar, and stacked area charts list their series in a legend, and pie
215
-
and ring gauge charts list their categories. The legend shows when there are at least two items and at least one has a name.
216
-
Hide it with the chart's `legend` style:
96
+
Axis tick formatters and selected-value formatters are separate. Use `axisValueFormatter` for numeric
97
+
axis labels and `selectedValueFormatter` for selection readouts; the supported parameters vary by
98
+
chart. `ChartValueFormatters` provides common prefix and suffix formatters. See [bar formatting](/{{version}}/wiki/bar-chart), [stacked bar formatting](/{{version}}/wiki/stacked-bar-chart), and [ring gauge formatting](/{{version}}/wiki/ring-gauge-chart) for examples matched to those chart APIs.
While a point is selected, a chart with several series shows each series' value in its legend item,
228
-
and the title shows the selected category. A chart with one series shows `Category: value` in the
229
-
title instead. Pass `selectedValueFormatter` to format these values. A pie shows `Category: share` in the title,
230
-
with the share in percent formatted by its `selectedValueFormatter`, and its legend does not change. A ring gauge is one series, so it
231
-
shows `Category: value` in the title, and its legend does not change either. A hidden legend hides the values
232
-
too; read `selectedIndex` from a hoisted selection to show them in your own UI.
100
+
Charts that support selection can expose it to surrounding Compose UI through
101
+
`rememberChartSelection()`. Legend contents and selection behavior differ between chart families;
102
+
the [legend guide](/{{version}}/wiki/dev/internals/legend) describes the shared behavior, and individual
103
+
chart guides show supported interactions.
233
104
234
105
## Animation and Interaction
235
106
236
-
`animateOnStart` controls the initial reveal animation; `interactionEnabled` disables gestures, selection, and zoom controls together. Disable interaction to embed a chart inside a tappable card without conflicts.
237
-
238
-
```kotlin
239
-
val dataSet =listOf(42.0, 38.0, 45.0, 51.0, 47.0, 54.0, 49.0).toChartData()
240
-
241
-
LineChart(
242
-
data = dataSet,
243
-
modifier =Modifier.fillMaxWidth().height(260.dp),
244
-
animateOnStart =true,
245
-
interactionEnabled =false,
246
-
)
247
-
```
248
-
249
-
## Responsive Layout
107
+
Where offered, `animateOnStart` controls the initial reveal and `interactionEnabled` controls chart
108
+
gestures. Their availability and effects depend on the chart family. Check that chart's guide before
109
+
using either parameter.
250
110
251
-
Compose the chart with any layout, including `Row`, `Column`, `LazyColumn`, or `BoxWithConstraints`. A bounded `modifier` is always honored; an unbounded one falls back to the documented defaults.
0 commit comments