Area and line

Compare measures using a filled area and lines, such as Sales as an area and Profit as a line.

Chart ID: areaLine. Independent import: @revolist/charts/area-line.

Live example

Loading chart…

Reading the chart

Start with a filled area and accompanying lines, then assign other supported layer styles per series. Layers share the category/time coordinates rather than arbitrary independent numeric X values.

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`	2 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 createAreaLineChart after the host mounts. This factory fixes the chart type to areaLine.

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

Complete runnable TypeScript example with sample data

1
import { createAreaLineChart } from '@revolist/charts/area-line';
2

3
const container = document.getElementById('chart')!;
4
const chart = await createAreaLineChart({
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": "Actual",
63
        "columnPath": [
64
          "Actual"
65
        ],
66
        "labels": [
67
          "Actual"
68
        ],
69
        "kind": "leaf",
70
        "prop": "preview-0"
71
      },
72
      {
73
        "id": "preview-series-1",
74
        "label": "Target",
75
        "columnPath": [
76
          "Target"
77
        ],
78
        "labels": [
79
          "Target"
80
        ],
81
        "kind": "leaf",
82
        "prop": "preview-1"
83
      },
84
      {
85
        "id": "preview-series-2",
86
        "label": "Forecast",
87
        "columnPath": [
88
          "Forecast"
89
        ],
90
        "labels": [
91
          "Forecast"
92
        ],
93
        "kind": "leaf",
94
        "prop": "preview-2"
95
      }
96
    ],
97
    "values": [
98
      [
99
        32,
100
        24,
101
        28
102
      ],
103
      [
104
        51,
105
        38,
106
        42
107
      ],
108
      [
109
        43,
110
        49,
111
        46
112
      ],
113
      [
114
        68,
115
        56,
116
        61
117
      ]
118
    ],
119
    "analyticalFrame": {
120
      "fields": [
121
        {
122
          "id": "pivot:category",
123
          "label": "pivot:category",
124
          "role": "dimension",
125
          "semanticType": "category"
126
        },
127
        {
128
          "id": "pivot:series",
129
          "label": "pivot:series",
130
          "role": "dimension",
131
          "semanticType": "category"
132
        },
133
        {
134
          "id": "preview-series-0",
135
          "label": "Actual",
136
          "role": "measure",
137
          "semanticType": "number",
138
          "sourceField": "preview-0"
139
        },
140
        {
141
          "id": "preview-series-1",
142
          "label": "Target",
143
          "role": "measure",
144
          "semanticType": "number",
145
          "sourceField": "preview-1"
146
        },
147
        {
148
          "id": "preview-series-2",
149
          "label": "Forecast",
150
          "role": "measure",
151
          "semanticType": "number",
152
          "sourceField": "preview-2"
153
        }
154
      ],
155
      "observations": [
156
        {
157
          "id": "[\"preview-category-0\",\"preview-series-0\"]",
158
          "dimensions": {
159
            "pivot:category": {
160
              "value": "Jan",
161
              "label": "Jan",
162
              "path": [
163
                "Jan"
164
              ],
165
              "labels": [
166
                "Jan"
167
              ]
168
            },
169
            "pivot:series": {
170
              "value": "Actual",
171
              "label": "Actual",
172
              "path": [
173
                "Actual"
174
              ],
175
              "labels": [
176
                "Actual"
177
              ]
178
            }
179
          },
180
          "measures": {
181
            "preview-series-0": 32
182
          }
183
        },
184
        {
185
          "id": "[\"preview-category-0\",\"preview-series-1\"]",
186
          "dimensions": {
187
            "pivot:category": {
188
              "value": "Jan",
189
              "label": "Jan",
190
              "path": [
191
                "Jan"
192
              ],
193
              "labels": [
194
                "Jan"
195
              ]
196
            },
197
            "pivot:series": {
198
              "value": "Target",
199
              "label": "Target",
200
              "path": [
201
                "Target"
202
              ],
203
              "labels": [
204
                "Target"
205
              ]
206
            }
207
          },
208
          "measures": {
209
            "preview-series-1": 24
210
          }
211
        },
212
        {
213
          "id": "[\"preview-category-0\",\"preview-series-2\"]",
214
          "dimensions": {
215
            "pivot:category": {
216
              "value": "Jan",
217
              "label": "Jan",
218
              "path": [
219
                "Jan"
220
              ],
221
              "labels": [
222
                "Jan"
223
              ]
224
            },
225
            "pivot:series": {
226
              "value": "Forecast",
227
              "label": "Forecast",
228
              "path": [
229
                "Forecast"
230
              ],
231
              "labels": [
232
                "Forecast"
233
              ]
234
            }
235
          },
236
          "measures": {
237
            "preview-series-2": 28
238
          }
239
        },
240
        {
241
          "id": "[\"preview-category-1\",\"preview-series-0\"]",
242
          "dimensions": {
243
            "pivot:category": {
244
              "value": "Feb",
245
              "label": "Feb",
246
              "path": [
247
                "Feb"
248
              ],
249
              "labels": [
250
                "Feb"
251
              ]
252
            },
253
            "pivot:series": {
254
              "value": "Actual",
255
              "label": "Actual",
256
              "path": [
257
                "Actual"
258
              ],
259
              "labels": [
260
                "Actual"
261
              ]
262
            }
263
          },
264
          "measures": {
265
            "preview-series-0": 51
266
          }
267
        },
268
        {
269
          "id": "[\"preview-category-1\",\"preview-series-1\"]",
270
          "dimensions": {
271
            "pivot:category": {
272
              "value": "Feb",
273
              "label": "Feb",
274
              "path": [
275
                "Feb"
276
              ],
277
              "labels": [
278
                "Feb"
279
              ]
280
            },
281
            "pivot:series": {
282
              "value": "Target",
283
              "label": "Target",
284
              "path": [
285
                "Target"
286
              ],
287
              "labels": [
288
                "Target"
289
              ]
290
            }
291
          },
292
          "measures": {
293
            "preview-series-1": 38
294
          }
295
        },
296
        {
297
          "id": "[\"preview-category-1\",\"preview-series-2\"]",
298
          "dimensions": {
299
            "pivot:category": {
300
              "value": "Feb",
301
              "label": "Feb",
302
              "path": [
303
                "Feb"
304
              ],
305
              "labels": [
306
                "Feb"
307
              ]
308
            },
309
            "pivot:series": {
310
              "value": "Forecast",
311
              "label": "Forecast",
312
              "path": [
313
                "Forecast"
314
              ],
315
              "labels": [
316
                "Forecast"
317
              ]
318
            }
319
          },
320
          "measures": {
321
            "preview-series-2": 42
322
          }
323
        },
324
        {
325
          "id": "[\"preview-category-2\",\"preview-series-0\"]",
326
          "dimensions": {
327
            "pivot:category": {
328
              "value": "Mar",
329
              "label": "Mar",
330
              "path": [
331
                "Mar"
332
              ],
333
              "labels": [
334
                "Mar"
335
              ]
336
            },
337
            "pivot:series": {
338
              "value": "Actual",
339
              "label": "Actual",
340
              "path": [
341
                "Actual"
342
              ],
343
              "labels": [
344
                "Actual"
345
              ]
346
            }
347
          },
348
          "measures": {
349
            "preview-series-0": 43
350
          }
351
        },
352
        {
353
          "id": "[\"preview-category-2\",\"preview-series-1\"]",
354
          "dimensions": {
355
            "pivot:category": {
356
              "value": "Mar",
357
              "label": "Mar",
358
              "path": [
359
                "Mar"
360
              ],
361
              "labels": [
362
                "Mar"
363
              ]
364
            },
365
            "pivot:series": {
366
              "value": "Target",
367
              "label": "Target",
368
              "path": [
369
                "Target"
370
              ],
371
              "labels": [
372
                "Target"
373
              ]
374
            }
375
          },
376
          "measures": {
377
            "preview-series-1": 49
378
          }
379
        },
380
        {
381
          "id": "[\"preview-category-2\",\"preview-series-2\"]",
382
          "dimensions": {
383
            "pivot:category": {
384
              "value": "Mar",
385
              "label": "Mar",
386
              "path": [
387
                "Mar"
388
              ],
389
              "labels": [
390
                "Mar"
391
              ]
392
            },
393
            "pivot:series": {
394
              "value": "Forecast",
395
              "label": "Forecast",
396
              "path": [
397
                "Forecast"
398
              ],
399
              "labels": [
400
                "Forecast"
401
              ]
402
            }
403
          },
404
          "measures": {
405
            "preview-series-2": 46
406
          }
407
        },
408
        {
409
          "id": "[\"preview-category-3\",\"preview-series-0\"]",
410
          "dimensions": {
411
            "pivot:category": {
412
              "value": "Apr",
413
              "label": "Apr",
414
              "path": [
415
                "Apr"
416
              ],
417
              "labels": [
418
                "Apr"
419
              ]
420
            },
421
            "pivot:series": {
422
              "value": "Actual",
423
              "label": "Actual",
424
              "path": [
425
                "Actual"
426
              ],
427
              "labels": [
428
                "Actual"
429
              ]
430
            }
431
          },
432
          "measures": {
433
            "preview-series-0": 68
434
          }
435
        },
436
        {
437
          "id": "[\"preview-category-3\",\"preview-series-1\"]",
438
          "dimensions": {
439
            "pivot:category": {
440
              "value": "Apr",
441
              "label": "Apr",
442
              "path": [
443
                "Apr"
444
              ],
445
              "labels": [
446
                "Apr"
447
              ]
448
            },
449
            "pivot:series": {
450
              "value": "Target",
451
              "label": "Target",
452
              "path": [
453
                "Target"
454
              ],
455
              "labels": [
456
                "Target"
457
              ]
458
            }
459
          },
460
          "measures": {
461
            "preview-series-1": 56
462
          }
463
        },
464
        {
465
          "id": "[\"preview-category-3\",\"preview-series-2\"]",
466
          "dimensions": {
467
            "pivot:category": {
468
              "value": "Apr",
469
              "label": "Apr",
470
              "path": [
471
                "Apr"
472
              ],
473
              "labels": [
474
                "Apr"
475
              ]
476
            },
477
            "pivot:series": {
478
              "value": "Forecast",
479
              "label": "Forecast",
480
              "path": [
481
                "Forecast"
482
              ],
483
              "labels": [
484
                "Forecast"
485
              ]
486
            }
487
          },
488
          "measures": {
489
            "preview-series-2": 61
490
          }
491
        }
492
      ],
493
      "matrixCells": [
494
        {
495
          "categoryId": "preview-category-0",
496
          "seriesId": "preview-series-0",
497
          "observationId": "[\"preview-category-0\",\"preview-series-0\"]",
498
          "measureFieldId": "preview-series-0"
499
        },
500
        {
501
          "categoryId": "preview-category-0",
502
          "seriesId": "preview-series-1",
503
          "observationId": "[\"preview-category-0\",\"preview-series-1\"]",
504
          "measureFieldId": "preview-series-1"
505
        },
506
        {
507
          "categoryId": "preview-category-0",
508
          "seriesId": "preview-series-2",
509
          "observationId": "[\"preview-category-0\",\"preview-series-2\"]",
510
          "measureFieldId": "preview-series-2"
511
        },
512
        {
513
          "categoryId": "preview-category-1",
514
          "seriesId": "preview-series-0",
515
          "observationId": "[\"preview-category-1\",\"preview-series-0\"]",
516
          "measureFieldId": "preview-series-0"
517
        },
518
        {
519
          "categoryId": "preview-category-1",
520
          "seriesId": "preview-series-1",
521
          "observationId": "[\"preview-category-1\",\"preview-series-1\"]",
522
          "measureFieldId": "preview-series-1"
523
        },
524
        {
525
          "categoryId": "preview-category-1",
526
          "seriesId": "preview-series-2",
527
          "observationId": "[\"preview-category-1\",\"preview-series-2\"]",
528
          "measureFieldId": "preview-series-2"
529
        },
530
        {
531
          "categoryId": "preview-category-2",
532
          "seriesId": "preview-series-0",
533
          "observationId": "[\"preview-category-2\",\"preview-series-0\"]",
534
          "measureFieldId": "preview-series-0"
535
        },
536
        {
537
          "categoryId": "preview-category-2",
538
          "seriesId": "preview-series-1",
539
          "observationId": "[\"preview-category-2\",\"preview-series-1\"]",
540
          "measureFieldId": "preview-series-1"
541
        },
542
        {
543
          "categoryId": "preview-category-2",
544
          "seriesId": "preview-series-2",
545
          "observationId": "[\"preview-category-2\",\"preview-series-2\"]",
546
          "measureFieldId": "preview-series-2"
547
        },
548
        {
549
          "categoryId": "preview-category-3",
550
          "seriesId": "preview-series-0",
551
          "observationId": "[\"preview-category-3\",\"preview-series-0\"]",
552
          "measureFieldId": "preview-series-0"
553
        },
554
        {
555
          "categoryId": "preview-category-3",
556
          "seriesId": "preview-series-1",
557
          "observationId": "[\"preview-category-3\",\"preview-series-1\"]",
558
          "measureFieldId": "preview-series-1"
559
        },
560
        {
561
          "categoryId": "preview-category-3",
562
          "seriesId": "preview-series-2",
563
          "observationId": "[\"preview-category-3\",\"preview-series-2\"]",
564
          "measureFieldId": "preview-series-2"
565
        }
566
      ]
567
    }
568
  },
569
  "bindings": {},
570
  "presentation": {
571
    "dataLabels": false
572
  }
573
});
574

575
// When the host unmounts:
576
// 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
`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
`normalizeStacks`	`false`	true or false
`normalizedTo`	`100`	1 to 1000000; step 1

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.

Column and line — Compare measures using columns and lines, such as Sales as columns and Profit as a line.

Charts overview · Installation · Data & Configuration

Normalized column stacks

Set chartOptions.normalizeStacks: true and assign column layers the same stackGroup to normalize their positive and negative contributions independently. chartOptions.normalizedTo defaults to 100 (range 1 through 1,000,000). Raw source tooltips/CSV and noncolumn layers retain their values. See normalization domains, navigator behavior and Pivot controls.

Grouped area and line layers

Column, area and line layers accept seriesOverrides[id].stackGroup. Area/line groups share cumulative paths independently of column groups; normalizeStacks and normalizedTo apply to both families. See sign boundaries, sampling, axes and Pivot controls.

Stack order

Use chartOptions.stackOrder or seriesOverrides[id].stackOrder to choose source, reverse, total-based or peak-appearance accumulation while preserving source identities. See policies, per-stack overrides and Pivot controls.

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.

Stack baselines

Set chartOptions.stackOffset or a stack member’s stackOffset to diverging (default), none or expand. Expansion uses algebraic unit totals and keeps raw source inspection. See supported partitions, signed values, defaults and limits.

Bubble and histogram layers

Set seriesOverrides[id].type to 'bubble' or 'histogram' in this combination. A bubble owner supplies raw Y and requires bubble: { x, size } with source measure IDs. A histogram owner supplies samples and requires histogram: {} or an explicit bin/metric policy. Bound helpers remain canonical fields and do not become implicit line layers. Sample-owned layers require numeric X; use named axes when other layers use categorical/time X or different numeric units.

Bins retain complete intervals under navigation. Bubble activation retains the real X/Y/size observation; aggregate bins do not invent raw records. Saved layer order, named axes, shared tooltips, complete-source validation, data views and Pivot authoring use the shared combination owner. Native SVG is supported; batched/GPU equivalence and combination per-datum encoding are not provided. See all sample-layer options and limitations.