Charts

@ripl/charts is the chart library built on Ripl's core rendering engine: 25 chart types in strict TypeScript, with no third-party runtime dependencies. Every chart animates its data transitions, responds to pointer events, resizes with its container, and draws through the same Context — so the same chart code renders to Canvas, SVG or a terminal, in the browser or server-side in Node. Each one is created with a createXxxChart(target, options) factory and updated through chart.update(options).

NOTE

For the full Charts API, see the Charts API Reference.

Available Charts

Twenty-five chart types ship in five families. Cartesian: line, bar, area, trend (mixed line/bar/area), scatter, stock (OHLC candlestick), histogram and box plot. Radial & polar: pie and donut, polar area, polar scatter, radial bar, radar and gauge. Hierarchical: treemap, packed circle and sunburst. Network & flow: sankey, chord, force-directed network, arc diagram and funnel. Specialized: heatmap, gantt and realtime streaming.

All of them share the same options for padding, titles, legends, tooltips, theming and animation; the cartesian ones add axes, grids, crosshairs, annotations and panning and zooming.

Cartesian

LineOne or more series as lines, with 13 interpolation modes per series, optional markers, dual y-axes, crosshair, grid and legend.BarGrouped, stacked or 100% stacked bars, vertical or horizontal, with rounded corners, value labels, tooltips and a legend.AreaFilled bands beneath line series, stacked or overlaid, with per-series fill opacity, crosshair, grid and tooltips.TrendLine, bar and area series mixed on shared axes, with per-type stacking and an overview strip for windowing the x-range.ScatterPoints across x and y for two continuous measures, with optional size-encoded bubbles, dual-axis crosshair and pan-zoom.StockOHLC candlesticks with a labeled volume sub-chart, separate up and down colors, crosshair, annotations and pan-zoom.HistogramThe distribution of a numeric field, binned into bars over a continuous value axis with nice bins or explicit thresholds.Box PlotAn interquartile box, median, 1.5x IQR whiskers and outliers per category, from the shared boxplotStats transform.

Radial & Polar

Pie/DonutProportions as angular slices, with an inner radius for a donut, constant-width slice gaps, labels and hover dimming.Polar AreaEqual-angle segments whose radius encodes value, over configurable value rings, with labels and a legend.Polar ScatterPoints on a circular grid where angle and radius each encode a variable, and a third can drive marker size.Radial BarConcentric rings whose arcs sweep to each value, with a faint track behind, configurable angular range and rounded caps.RadarOne polygon per series across shared category spokes, with configurable grid rings, markers, labels and a legend.GaugeA single value on a semi-circular arc between a min and max, with tick marks, tick labels and a custom value formatter.

Hierarchical

TreemapA total tiled into nested rectangles whose areas encode value, with configurable gaps, corner radius and automatic labels.Packed CircleCircles whose areas encode value, packed tightly without overlap inside one containing circle, with labels on the larger ones.SunburstA tree as concentric rings, one ring per depth level, where each arc's width is its share of its parent.

Network & Flow

FunnelOrdered stages as progressively narrowing bars, so each step's drop-off is the width it loses. Gaps and corners are configurable.SankeyWeighted flows between nodes as proportional links, laid out automatically. For energy flows, budgets and user journeys.Force-DirectedA node-link graph laid out by a deterministic physics simulation, with tunable charge, link distance and centering.Arc DiagramNodes along one axis joined by arcs whose thickness encodes link weight, horizontally or vertically, sized by degree.ChordGroup-to-group flows from a square matrix as ribbons inside a ring of arcs, with hover dimming and configurable gaps.

Specialized

HeatmapOne value across two categorical axes as colored cells, with a configurable gradient and a continuous color legend.GanttTasks as bars on a time axis, with progress overlays, finish-to-start dependency connectors, a today marker and tooltips.RealtimeA sliding window of streaming values that scrolls as you push new ones, with a fixed window size and optional area fills.