Stepped area

Emphasize stepwise changes with a filled baseline.

Chart ID: steppedArea. Independent import: @revolist/charts/stepped-area.

Live example

Loading chart…

Reading the chart

Combine held values with a baseline fill. Use it for discrete state changes where a sloped transition would suggest change that did not occur.

Data requirements

Use one category per row and one or more numeric series. Values are finite numbers or explicit nulls; the row mapper does not group or aggregate repeated keys.

The roles below describe the chart's data contract. Generic category/value roles resolve from the dataset; explicitly bind specialized numeric roles as shown in the complete example.

Data role	Field count
`category`	1 or more
`value`	1 or more
`series`	1 or more

Download the complete sample data and settings (JSON). See Data & Configuration for mapping, null values, updates and lifecycle rules.

Create this chart

Install the package using the installation guide, give the host an explicit height, and call createSteppedAreaChart after the host mounts. This factory fixes the chart type to steppedArea.

1
<div id="chart" style="width: 100%; height: 450px;"></div>

Complete runnable TypeScript example with sample data

1
import { createSteppedAreaChart } from '@revolist/charts/stepped-area';
2

3
const container = document.getElementById('chart')!;
4
const chart = await createSteppedAreaChart({
5
  container,
6
  "dataset": {
7
    "revision": 0,
8
    "source": "client",
9
    "categories": [
10
      {
11
        "id": "preview-category-0",
12
        "label": "Jan",
13
        "path": [
14
          "Jan"
15
        ],
16
        "labels": [
17
          "Jan"
18
        ],
19
        "depth": 1,
20
        "kind": "leaf"
21
      },
22
      {
23
        "id": "preview-category-1",
24
        "label": "Feb",
25
        "path": [
26
          "Feb"
27
        ],
28
        "labels": [
29
          "Feb"
30
        ],
31
        "depth": 1,
32
        "kind": "leaf"
33
      },
34
      {
35
        "id": "preview-category-2",
36
        "label": "Mar",
37
        "path": [
38
          "Mar"
39
        ],
40
        "labels": [
41
          "Mar"
42
        ],
43
        "depth": 1,
44
        "kind": "leaf"
45
      },
46
      {
47
        "id": "preview-category-3",
48
        "label": "Apr",
49
        "path": [
50
          "Apr"
51
        ],
52
        "labels": [
53
          "Apr"
54
        ],
55
        "depth": 1,
56
        "kind": "leaf"
57
      }
58
    ],
59
    "series": [
60
      {
61
        "id": "preview-series-0",
62
        "label": "Current",
63
        "columnPath": [
64
          "Current"
65
        ],
66
        "labels": [
67
          "Current"
68
        ],
69
        "kind": "leaf",
70
        "prop": "preview-0"
71
      },
72
      {
73
        "id": "preview-series-1",
74
        "label": "Previous",
75
        "columnPath": [
76
          "Previous"
77
        ],
78
        "labels": [
79
          "Previous"
80
        ],
81
        "kind": "leaf",
82
        "prop": "preview-1"
83
      }
84
    ],
85
    "values": [
86
      [
87
        18,
88
        29
89
      ],
90
      [
91
        44,
92
        27
93
      ],
94
      [
95
        31,
96
        45
97
      ],
98
      [
99
        62,
100
        50
101
      ]
102
    ],
103
    "analyticalFrame": {
104
      "fields": [
105
        {
106
          "id": "pivot:category",
107
          "label": "pivot:category",
108
          "role": "dimension",
109
          "semanticType": "category"
110
        },
111
        {
112
          "id": "pivot:series",
113
          "label": "pivot:series",
114
          "role": "dimension",
115
          "semanticType": "category"
116
        },
117
        {
118
          "id": "preview-series-0",
119
          "label": "Current",
120
          "role": "measure",
121
          "semanticType": "number",
122
          "sourceField": "preview-0"
123
        },
124
        {
125
          "id": "preview-series-1",
126
          "label": "Previous",
127
          "role": "measure",
128
          "semanticType": "number",
129
          "sourceField": "preview-1"
130
        }
131
      ],
132
      "observations": [
133
        {
134
          "id": "[\"preview-category-0\",\"preview-series-0\"]",
135
          "dimensions": {
136
            "pivot:category": {
137
              "value": "Jan",
138
              "label": "Jan",
139
              "path": [
140
                "Jan"
141
              ],
142
              "labels": [
143
                "Jan"
144
              ]
145
            },
146
            "pivot:series": {
147
              "value": "Current",
148
              "label": "Current",
149
              "path": [
150
                "Current"
151
              ],
152
              "labels": [
153
                "Current"
154
              ]
155
            }
156
          },
157
          "measures": {
158
            "preview-series-0": 18
159
          }
160
        },
161
        {
162
          "id": "[\"preview-category-0\",\"preview-series-1\"]",
163
          "dimensions": {
164
            "pivot:category": {
165
              "value": "Jan",
166
              "label": "Jan",
167
              "path": [
168
                "Jan"
169
              ],
170
              "labels": [
171
                "Jan"
172
              ]
173
            },
174
            "pivot:series": {
175
              "value": "Previous",
176
              "label": "Previous",
177
              "path": [
178
                "Previous"
179
              ],
180
              "labels": [
181
                "Previous"
182
              ]
183
            }
184
          },
185
          "measures": {
186
            "preview-series-1": 29
187
          }
188
        },
189
        {
190
          "id": "[\"preview-category-1\",\"preview-series-0\"]",
191
          "dimensions": {
192
            "pivot:category": {
193
              "value": "Feb",
194
              "label": "Feb",
195
              "path": [
196
                "Feb"
197
              ],
198
              "labels": [
199
                "Feb"
200
              ]
201
            },
202
            "pivot:series": {
203
              "value": "Current",
204
              "label": "Current",
205
              "path": [
206
                "Current"
207
              ],
208
              "labels": [
209
                "Current"
210
              ]
211
            }
212
          },
213
          "measures": {
214
            "preview-series-0": 44
215
          }
216
        },
217
        {
218
          "id": "[\"preview-category-1\",\"preview-series-1\"]",
219
          "dimensions": {
220
            "pivot:category": {
221
              "value": "Feb",
222
              "label": "Feb",
223
              "path": [
224
                "Feb"
225
              ],
226
              "labels": [
227
                "Feb"
228
              ]
229
            },
230
            "pivot:series": {
231
              "value": "Previous",
232
              "label": "Previous",
233
              "path": [
234
                "Previous"
235
              ],
236
              "labels": [
237
                "Previous"
238
              ]
239
            }
240
          },
241
          "measures": {
242
            "preview-series-1": 27
243
          }
244
        },
245
        {
246
          "id": "[\"preview-category-2\",\"preview-series-0\"]",
247
          "dimensions": {
248
            "pivot:category": {
249
              "value": "Mar",
250
              "label": "Mar",
251
              "path": [
252
                "Mar"
253
              ],
254
              "labels": [
255
                "Mar"
256
              ]
257
            },
258
            "pivot:series": {
259
              "value": "Current",
260
              "label": "Current",
261
              "path": [
262
                "Current"
263
              ],
264
              "labels": [
265
                "Current"
266
              ]
267
            }
268
          },
269
          "measures": {
270
            "preview-series-0": 31
271
          }
272
        },
273
        {
274
          "id": "[\"preview-category-2\",\"preview-series-1\"]",
275
          "dimensions": {
276
            "pivot:category": {
277
              "value": "Mar",
278
              "label": "Mar",
279
              "path": [
280
                "Mar"
281
              ],
282
              "labels": [
283
                "Mar"
284
              ]
285
            },
286
            "pivot:series": {
287
              "value": "Previous",
288
              "label": "Previous",
289
              "path": [
290
                "Previous"
291
              ],
292
              "labels": [
293
                "Previous"
294
              ]
295
            }
296
          },
297
          "measures": {
298
            "preview-series-1": 45
299
          }
300
        },
301
        {
302
          "id": "[\"preview-category-3\",\"preview-series-0\"]",
303
          "dimensions": {
304
            "pivot:category": {
305
              "value": "Apr",
306
              "label": "Apr",
307
              "path": [
308
                "Apr"
309
              ],
310
              "labels": [
311
                "Apr"
312
              ]
313
            },
314
            "pivot:series": {
315
              "value": "Current",
316
              "label": "Current",
317
              "path": [
318
                "Current"
319
              ],
320
              "labels": [
321
                "Current"
322
              ]
323
            }
324
          },
325
          "measures": {
326
            "preview-series-0": 62
327
          }
328
        },
329
        {
330
          "id": "[\"preview-category-3\",\"preview-series-1\"]",
331
          "dimensions": {
332
            "pivot:category": {
333
              "value": "Apr",
334
              "label": "Apr",
335
              "path": [
336
                "Apr"
337
              ],
338
              "labels": [
339
                "Apr"
340
              ]
341
            },
342
            "pivot:series": {
343
              "value": "Previous",
344
              "label": "Previous",
345
              "path": [
346
                "Previous"
347
              ],
348
              "labels": [
349
                "Previous"
350
              ]
351
            }
352
          },
353
          "measures": {
354
            "preview-series-1": 50
355
          }
356
        }
357
      ],
358
      "matrixCells": [
359
        {
360
          "categoryId": "preview-category-0",
361
          "seriesId": "preview-series-0",
362
          "observationId": "[\"preview-category-0\",\"preview-series-0\"]",
363
          "measureFieldId": "preview-series-0"
364
        },
365
        {
366
          "categoryId": "preview-category-0",
367
          "seriesId": "preview-series-1",
368
          "observationId": "[\"preview-category-0\",\"preview-series-1\"]",
369
          "measureFieldId": "preview-series-1"
370
        },
371
        {
372
          "categoryId": "preview-category-1",
373
          "seriesId": "preview-series-0",
374
          "observationId": "[\"preview-category-1\",\"preview-series-0\"]",
375
          "measureFieldId": "preview-series-0"
376
        },
377
        {
378
          "categoryId": "preview-category-1",
379
          "seriesId": "preview-series-1",
380
          "observationId": "[\"preview-category-1\",\"preview-series-1\"]",
381
          "measureFieldId": "preview-series-1"
382
        },
383
        {
384
          "categoryId": "preview-category-2",
385
          "seriesId": "preview-series-0",
386
          "observationId": "[\"preview-category-2\",\"preview-series-0\"]",
387
          "measureFieldId": "preview-series-0"
388
        },
389
        {
390
          "categoryId": "preview-category-2",
391
          "seriesId": "preview-series-1",
392
          "observationId": "[\"preview-category-2\",\"preview-series-1\"]",
393
          "measureFieldId": "preview-series-1"
394
        },
395
        {
396
          "categoryId": "preview-category-3",
397
          "seriesId": "preview-series-0",
398
          "observationId": "[\"preview-category-3\",\"preview-series-0\"]",
399
          "measureFieldId": "preview-series-0"
400
        },
401
        {
402
          "categoryId": "preview-category-3",
403
          "seriesId": "preview-series-1",
404
          "observationId": "[\"preview-category-3\",\"preview-series-1\"]",
405
          "measureFieldId": "preview-series-1"
406
        }
407
      ]
408
    }
409
  },
410
  "bindings": {},
411
  "presentation": {
412
    "dataLabels": false
413
  }
414
});
415

416
// When the host unmounts:
417
// chart.destroy();

Await updates before reading a snapshot or exporting. Call chart.destroy() when the host unmounts. See the live catalog to interact with this type.

Supported options

Set these fields in chartOptions. The option schema validates supported keys, ranges and choices; updating chartOptions replaces that authored object.

Option	Default	Accepted values
`showGridLines`	`true`	true or false
`markOpacity`	`1`	0.2 to 1; step 0.05
`sparkline`	`false`	true or false
`strokeWidth`	`2`	1 to 6; step 0.5
`fillOpacity`	`0.34`	0.1 to 0.9; step 0.01
`sampling`	`auto`	auto, none, m4, minmax, lttb
`disableLineItemHighlight`	`false`	true or false
`stackOrder`	`none`	none, reverse, ascending, descending, appearance
`stackOffset`	`diverging`	diverging, none, expand

Titles, legends, theme and labels belong to presentation or the corresponding top-level setting. Axis, color, navigation and interaction support depends on the selected chart; see Data & Configuration.

Area — Emphasize the magnitude of change over an ordered axis.
Stacked area — Show how multiple measures contribute to a changing total.
100% stacked area — Show percentage contribution over an ordered axis.
Range area — Show how a lower-to-upper interval changes over categories.
Confidence band — Show an uncertainty band between lower and upper bounds.

Charts overview · Installation · Data & Configuration

Per-series curves

Use seriesOverrides[id].interpolation to choose linear, legacy smooth, directional/midpoint steps, monotone X/Y, natural, Catmull–Rom or bump X/Y curves. Combination charts accept this on line/area layers. See all curve choices, defaults and Pivot controls.

Set seriesOverrides[id].connectNulls: true to join finite path endpoints across null values. It defaults to false and preserves explicit calendar gaps. See null connections, viewport behavior and Pivot controls.

Fill baseline

Unstacked areas accept seriesOverrides[id].baseline: number | 'min' | 'max'. Numeric baselines participate in the automatic domain; endpoint policies use the final axis bounds. See baseline options and Pivot controls.

Source markers

Use seriesOverrides[id].markers: true | false | 'start' | 'end' for all, hidden or accepted-frame endpoint glyphs. Marker shapes include cross, star and wye alongside the four existing choices. See marker modes, sampling and Pivot controls.

Application code can refine those modes with rendererOptions.markers.isVisible(context). See runtime source predicates and sampling.

Path sampling

chartOptions.sampling accepts 'auto' (default), 'none', 'm4', 'minmax', and 'lttb'. See path sampling for budgets, stacked-edge alignment, viewport behavior, and marker handling.

Step endpoints

seriesOverrides[id].strictStepCurve defaults to false. Stepped paths expand across categorical bands; true retains exact observation endpoints. Default native point layouts and numeric/time axes keep their existing geometry. Explicit category band placement enables expansion for native line/area paths. See step endpoint policy for combination bands, null runs, sampling, areas, and Pivot controls.

Category placement

axes.x.categoryPlacement and axes.xAxes[id].categoryPlacement accept 'point' or 'band' for categorical X axes. Omitted settings keep native line/area point positions and combination band centers. Band placement enables expanded native steps; point placement retains exact stepped endpoints. See category point and band placement for singletons, column margins, grouped labels, selection, preview, save/SSR and Pivot controls.

Transient point highlights

chartOptions.disableLineItemHighlight and seriesOverrides[id].disableHighlight default to false. Highlights inspect source observations independently of regular marker visibility/predicates and can temporarily replace saved endpoint glyphs. See transient source-point highlights for nearest-source policy, tooltip/focus/activation limits, snapshots and Pivot controls.

Source keyboard inspection

Line/area observations omitted by marker settings, runtime predicates or sampling remain reachable through the chart’s single inspection Tab stop. Arrow keys wrap; Home/End select the first/last item and Enter/Space use raw source activation. Null, hidden and clipped observations are excluded. See source-point keyboard traversal for ordering, focus rings, updates and inspection-only derived values.

Native stack groups

Use seriesOverrides[id].stackGroup for independent groups, with shared stackOrder and stackOffset policies. Regular paths without a group remain raw; dedicated stacked/normalized areas retain an implicit default stack. See normalization, defaults, source identity and Pivot controls.

Stable source styling

Use seriesOverrides[id].encoding for saved per-datum styling, gradients and patterns. Supported line/area paths also accept directed segment rules; bars accept datum rules without segment/marker fields. Runtime datumStyle callbacks are reattached after restore. Rules follow canonical category IDs through sorting, hiding and navigation; source values and raw activation remain intact. See the complete styling capability matrix, precedence and callback contract.