Error interval
Compare a center value with its lower and upper bounds.
Chart ID: errorInterval. Independent import: @revolist/charts/error-interval.
Live example
Section titled “Live example”Loading chart…
Reading the chart
Section titled “Reading the chart”Show a central estimate with explicit lower and upper limits. The central mark and extent are distinct encodings; the chart does not derive uncertainty from aggregate values.
Data requirements
Section titled “Data requirements”Bind the lower and upper (or start/end) channels explicitly. Bounds must be finite numeric observations or explicit nulls. A missing bound omits that interval rather than inventing an endpoint.
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 |
actual | 1 |
low | 1 |
high | 1 |
Download the complete sample data and settings (JSON). See Data & Configuration for mapping, null values, updates and lifecycle rules.
Create this chart
Section titled “Create this chart”Install the package using the installation guide, give the host an explicit height, and call createErrorIntervalChart after the host mounts. This factory fixes the chart type to errorInterval.
<div id="chart" style="width: 100%; height: 450px;"></div>Complete runnable TypeScript example with sample data
import { createErrorIntervalChart } from '@revolist/charts/error-interval';
const container = document.getElementById('chart')!;const chart = await createErrorIntervalChart({ container, "dataset": { "revision": 0, "source": "client", "categories": [ { "id": "preview-category-0", "label": "Jan", "path": [ "Jan" ], "labels": [ "Jan" ], "depth": 1, "kind": "leaf" }, { "id": "preview-category-1", "label": "Feb", "path": [ "Feb" ], "labels": [ "Feb" ], "depth": 1, "kind": "leaf" }, { "id": "preview-category-2", "label": "Mar", "path": [ "Mar" ], "labels": [ "Mar" ], "depth": 1, "kind": "leaf" }, { "id": "preview-category-3", "label": "Apr", "path": [ "Apr" ], "labels": [ "Apr" ], "depth": 1, "kind": "leaf" } ], "series": [ { "id": "preview-series-0", "label": "Center", "columnPath": [ "Center" ], "labels": [ "Center" ], "kind": "leaf", "prop": "preview-0" }, { "id": "preview-series-1", "label": "Low", "columnPath": [ "Low" ], "labels": [ "Low" ], "kind": "leaf", "prop": "preview-1" }, { "id": "preview-series-2", "label": "High", "columnPath": [ "High" ], "labels": [ "High" ], "kind": "leaf", "prop": "preview-2" } ], "values": [ [ 27, 18, 36 ], [ 38, 24, 49 ], [ 45, 31, 57 ], [ 56, 42, 68 ] ], "analyticalFrame": { "fields": [ { "id": "pivot:category", "label": "pivot:category", "role": "dimension", "semanticType": "category" }, { "id": "pivot:series", "label": "pivot:series", "role": "dimension", "semanticType": "category" }, { "id": "preview-series-0", "label": "Center", "role": "measure", "semanticType": "number", "sourceField": "preview-0" }, { "id": "preview-series-1", "label": "Low", "role": "measure", "semanticType": "number", "sourceField": "preview-1" }, { "id": "preview-series-2", "label": "High", "role": "measure", "semanticType": "number", "sourceField": "preview-2" } ], "observations": [ { "id": "[\"preview-category-0\",\"preview-series-0\"]", "dimensions": { "pivot:category": { "value": "Jan", "label": "Jan", "path": [ "Jan" ], "labels": [ "Jan" ] }, "pivot:series": { "value": "Center", "label": "Center", "path": [ "Center" ], "labels": [ "Center" ] } }, "measures": { "preview-series-0": 27 } }, { "id": "[\"preview-category-0\",\"preview-series-1\"]", "dimensions": { "pivot:category": { "value": "Jan", "label": "Jan", "path": [ "Jan" ], "labels": [ "Jan" ] }, "pivot:series": { "value": "Low", "label": "Low", "path": [ "Low" ], "labels": [ "Low" ] } }, "measures": { "preview-series-1": 18 } }, { "id": "[\"preview-category-0\",\"preview-series-2\"]", "dimensions": { "pivot:category": { "value": "Jan", "label": "Jan", "path": [ "Jan" ], "labels": [ "Jan" ] }, "pivot:series": { "value": "High", "label": "High", "path": [ "High" ], "labels": [ "High" ] } }, "measures": { "preview-series-2": 36 } }, { "id": "[\"preview-category-1\",\"preview-series-0\"]", "dimensions": { "pivot:category": { "value": "Feb", "label": "Feb", "path": [ "Feb" ], "labels": [ "Feb" ] }, "pivot:series": { "value": "Center", "label": "Center", "path": [ "Center" ], "labels": [ "Center" ] } }, "measures": { "preview-series-0": 38 } }, { "id": "[\"preview-category-1\",\"preview-series-1\"]", "dimensions": { "pivot:category": { "value": "Feb", "label": "Feb", "path": [ "Feb" ], "labels": [ "Feb" ] }, "pivot:series": { "value": "Low", "label": "Low", "path": [ "Low" ], "labels": [ "Low" ] } }, "measures": { "preview-series-1": 24 } }, { "id": "[\"preview-category-1\",\"preview-series-2\"]", "dimensions": { "pivot:category": { "value": "Feb", "label": "Feb", "path": [ "Feb" ], "labels": [ "Feb" ] }, "pivot:series": { "value": "High", "label": "High", "path": [ "High" ], "labels": [ "High" ] } }, "measures": { "preview-series-2": 49 } }, { "id": "[\"preview-category-2\",\"preview-series-0\"]", "dimensions": { "pivot:category": { "value": "Mar", "label": "Mar", "path": [ "Mar" ], "labels": [ "Mar" ] }, "pivot:series": { "value": "Center", "label": "Center", "path": [ "Center" ], "labels": [ "Center" ] } }, "measures": { "preview-series-0": 45 } }, { "id": "[\"preview-category-2\",\"preview-series-1\"]", "dimensions": { "pivot:category": { "value": "Mar", "label": "Mar", "path": [ "Mar" ], "labels": [ "Mar" ] }, "pivot:series": { "value": "Low", "label": "Low", "path": [ "Low" ], "labels": [ "Low" ] } }, "measures": { "preview-series-1": 31 } }, { "id": "[\"preview-category-2\",\"preview-series-2\"]", "dimensions": { "pivot:category": { "value": "Mar", "label": "Mar", "path": [ "Mar" ], "labels": [ "Mar" ] }, "pivot:series": { "value": "High", "label": "High", "path": [ "High" ], "labels": [ "High" ] } }, "measures": { "preview-series-2": 57 } }, { "id": "[\"preview-category-3\",\"preview-series-0\"]", "dimensions": { "pivot:category": { "value": "Apr", "label": "Apr", "path": [ "Apr" ], "labels": [ "Apr" ] }, "pivot:series": { "value": "Center", "label": "Center", "path": [ "Center" ], "labels": [ "Center" ] } }, "measures": { "preview-series-0": 56 } }, { "id": "[\"preview-category-3\",\"preview-series-1\"]", "dimensions": { "pivot:category": { "value": "Apr", "label": "Apr", "path": [ "Apr" ], "labels": [ "Apr" ] }, "pivot:series": { "value": "Low", "label": "Low", "path": [ "Low" ], "labels": [ "Low" ] } }, "measures": { "preview-series-1": 42 } }, { "id": "[\"preview-category-3\",\"preview-series-2\"]", "dimensions": { "pivot:category": { "value": "Apr", "label": "Apr", "path": [ "Apr" ], "labels": [ "Apr" ] }, "pivot:series": { "value": "High", "label": "High", "path": [ "High" ], "labels": [ "High" ] } }, "measures": { "preview-series-2": 68 } } ], "matrixCells": [ { "categoryId": "preview-category-0", "seriesId": "preview-series-0", "observationId": "[\"preview-category-0\",\"preview-series-0\"]", "measureFieldId": "preview-series-0" }, { "categoryId": "preview-category-0", "seriesId": "preview-series-1", "observationId": "[\"preview-category-0\",\"preview-series-1\"]", "measureFieldId": "preview-series-1" }, { "categoryId": "preview-category-0", "seriesId": "preview-series-2", "observationId": "[\"preview-category-0\",\"preview-series-2\"]", "measureFieldId": "preview-series-2" }, { "categoryId": "preview-category-1", "seriesId": "preview-series-0", "observationId": "[\"preview-category-1\",\"preview-series-0\"]", "measureFieldId": "preview-series-0" }, { "categoryId": "preview-category-1", "seriesId": "preview-series-1", "observationId": "[\"preview-category-1\",\"preview-series-1\"]", "measureFieldId": "preview-series-1" }, { "categoryId": "preview-category-1", "seriesId": "preview-series-2", "observationId": "[\"preview-category-1\",\"preview-series-2\"]", "measureFieldId": "preview-series-2" }, { "categoryId": "preview-category-2", "seriesId": "preview-series-0", "observationId": "[\"preview-category-2\",\"preview-series-0\"]", "measureFieldId": "preview-series-0" }, { "categoryId": "preview-category-2", "seriesId": "preview-series-1", "observationId": "[\"preview-category-2\",\"preview-series-1\"]", "measureFieldId": "preview-series-1" }, { "categoryId": "preview-category-2", "seriesId": "preview-series-2", "observationId": "[\"preview-category-2\",\"preview-series-2\"]", "measureFieldId": "preview-series-2" }, { "categoryId": "preview-category-3", "seriesId": "preview-series-0", "observationId": "[\"preview-category-3\",\"preview-series-0\"]", "measureFieldId": "preview-series-0" }, { "categoryId": "preview-category-3", "seriesId": "preview-series-1", "observationId": "[\"preview-category-3\",\"preview-series-1\"]", "measureFieldId": "preview-series-1" }, { "categoryId": "preview-category-3", "seriesId": "preview-series-2", "observationId": "[\"preview-category-3\",\"preview-series-2\"]", "measureFieldId": "preview-series-2" } ] } }, "bindings": { "actual": [ "preview-series-0" ], "low": [ "preview-series-1" ], "high": [ "preview-series-2" ] }, "presentation": { "dataLabels": false }});
// When the host unmounts:// 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
Section titled “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 |
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.
Related charts
Section titled “Related charts”- Box plot — Summarize a distribution with quartiles, whiskers, and outliers.
- Violin plot — Compare distribution shape and concentration across categories.
- Range and interval — Compare minimum, maximum, and mean values by category.