Line

Show change and trends across an ordered axis.

Chart ID: line. Independent import: @revolist/charts/line.

Live example

Loading chart…

Reading the chart

Follow change across ordered categories. Points show observations and straight segments join successive observations; nulls leave gaps rather than inventing 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`	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 createLineChart after the host mounts. This factory fixes the chart type to line.

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

Complete runnable TypeScript example with sample data

1
import { createLineChart } from '@revolist/charts/line';
2

3
const container = document.getElementById('chart')!;
4
const chart = await createLineChart({
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
`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.

Smooth line — Show trends with a smooth curve through each value.
Stepped line — Show values that remain constant between categories.
Small multiples — Compare measures in aligned panels with independent scales.
Annotated time series — Highlight notable points along an ordered time trend.

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.

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.

Datum and segment encodings

Saved seriesOverrides[id].encoding policies and runtime rendererOptions.datumStyle support scoped source styling. Use stable category IDs for datum rules; directed segment rules apply to the supported native line family only. Gradient/pattern fills, marker support, precedence, raw callback contexts and clean-export behavior follow the datum styling capability matrix. Authored encodings or runtime datum callbacks force an individual-SVG fallback for batched/GPU requests; saved renderer policy remains intact.