Ripl

Appearance

Box Plot Chart ​

The Box Plot Chart summarizes the distribution of a numeric field per category using the shared boxplotStats transform: a box spanning the interquartile range (Q1–Q3), a median line, whiskers to the 1.5×IQR fences, and outlier points. It answers how spread out and how skewed, where a bar per category would show only the average. key and value pick the grouping and the measure, categoryOrder fixes the order along the axis, and color paints the boxes. Being a cartesian chart it also takes a crosshair, grid, tooltips and annotations, and renders to Canvas, SVG or a terminal context.

NOTE

For the full API, see the Charts API Reference.

Example ​

Usage ​

ts
import {
    createBoxPlotChart,
} from '@ripl/charts';

const chart = createBoxPlotChart('#container', {
    data: [/* ... */],
    key: 'region',
    value: 'latency',
});

Data Format ​

Each item contributes one numeric value to a category. The chart groups items by the key accessor and summarizes the value accessor per group, so no pre-aggregation is required.

Options ​

A full configuration for this chart. The options every chart shares — padding, title, animation, theme and the rest — behave the same everywhere and are documented on Shared Options.

ts
createBoxPlotChart('#container', {
    data,
    key: 'team',
    value: 'score',
    // Fixes the order the categories are drawn in; without it they follow the data.
    categoryOrder: ['Alpha', 'Bravo', 'Charlie'],
    color: '#7cacf8',
    format: 'number',
});

Events ​

Subscribe with chart.on(...). A handler receives an Event object, not the payload directly — the payload is on event.data, and carries the interacted datum plus its { x, y } anchor in chart pixels. event.target and event.stopPropagation() are also available.

ts
// Emitted when a box is clicked.
chart.on('boxclick', event => console.log(event.data)); // event.data: BoxPlotBoxEvent
// Emitted when the pointer enters a box.
chart.on('boxenter', event => console.log(event.data)); // event.data: BoxPlotBoxEvent
// Emitted when the pointer leaves a box.
chart.on('boxleave', event => console.log(event.data)); // event.data: BoxPlotBoxEvent