Documentation / @ripl/charts

@ripl/charts

Pre-built, animated chart components for Ripl — a unified API for 2D graphics rendering in the browser.

Installation

npm install @ripl/charts

Chart Types

Category	Charts
Cartesian	Bar, Line, Area, Scatter, Trend (multi-series bar/line), Stock, Realtime
Radial	Pie/Donut, Radar, Polar Area, Gauge, Sunburst
Relational	Sankey, Chord
Distribution	Heatmap, Treemap, Funnel
Scheduling	Gantt

Usage

import {
    BarChart,
} from '@ripl/charts';

const chart = new BarChart('#chart', {
    data: [
        { label: 'A',
            value: 10 },
        { label: 'B',
            value: 25 },
        { label: 'C',
            value: 15 },
    ],
    keyBy: 'label',
    series: [
        { valueBy: item => item.value },
    ],
});

Features

• Animated transitions — Smooth entry, update, and exit animations out of the box
• Interactive — Tooltips, crosshairs, hover effects, and click events
• Configurable — Axes, legends, grids, colors, padding, and more
• Canvas & SVG — Renders to either context via Ripl's unified API
• Tree-shakable — Import only the chart types you need

Documentation

Full documentation, options reference, and interactive demos are available at ripl.rocks.

License

MIT

Classes

Class	Description
AreaChart	Area chart rendering filled regions beneath series lines.
BarChart	Bar chart supporting vertical/horizontal orientation and grouped/stacked modes.
Chart	Abstract base class for all chart types, providing scene, renderer, animation, color management, and lifecycle.
ChordChart	Chord diagram visualizing inter-relationships in a square matrix.
FunnelChart	Funnel chart rendering horizontally centered bars of decreasing width.
GanttChart	Gantt chart rendering time-based task bars on a categorical y-axis and time x-axis.
GaugeChart	Gauge chart displaying a single value on a 270-degree arc.
HeatmapChart	Heatmap chart rendering a grid of colored cells on two categorical axes.
LineChart	Line chart rendering one or more series as polylines with optional markers.
PieChart	Pie chart rendering proportional arc segments with optional inner radius (donut).
PolarAreaChart	Polar area chart rendering equal-angle segments whose radius encodes value.
RadarChart	Radar (spider) chart plotting multi-axis data as filled polygonal areas.
RealtimeChart	Realtime streaming chart rendering continuously updating line/area series.
Ribbon	A chord diagram ribbon connecting two arc segments with quadratic Bézier curves through the center.
SankeyChart	Sankey diagram visualizing directional flow between nodes.
SankeyLinkPath	A curved Sankey link shape rendered as a cubic Bézier curve between source and target points.
ScatterChart	Scatter chart (bubble chart) plotting data points as circles on two continuous axes.
StockChart	Candlestick (stock) chart rendering OHLC data with optional volume bars.
SunburstChart	Sunburst chart rendering hierarchical data as concentric arc rings.
TreemapChart	Treemap chart rendering hierarchical data as nested, space-filling rectangles.
TrendChart	Trend chart combining bar and line series on shared categorical/value axes.

Interfaces

Interface	Description
AreaChartOptions	Options for configuring an AreaChart.
AreaChartSeriesOptions	Configuration for an individual area chart series.
BarChartOptions	Options for configuring a BarChart.
BarChartSeriesOptions	Configuration for an individual bar chart series.
BaseChartOptions	Base options shared by all chart types.
BaseTrendChartSeriesOptions	Base configuration shared by all trend chart series types.
ChartAnimationOptions	Fully resolved chart animation options.
ChartArea	The computed drawing area of a chart after padding is applied.
ChartAxisItemOptions	Options for a single axis (x or y).
ChartAxisOptions	Combined x and y axis configuration.
ChartCrosshairOptions	Fully resolved chart crosshair options.
ChartGridOptions	Fully resolved chart grid options.
ChartLegendOptions	Fully resolved chart legend options.
ChartPadding	Chart padding with explicit top, right, bottom, and left values.
ChartTitleOptions	Fully resolved chart title options.
ChartTooltipOptions	Fully resolved chart tooltip options.
ChartYAxisItemOptions	Y-axis specific options extending the base axis item with a left/right position.
ChordChartOptions	Options for configuring a ChordChart.
FunnelChartOptions	Options for configuring a FunnelChart.
GanttChartOptions	Options for configuring a GanttChart.
GaugeChartOptions	Options for configuring a GaugeChart.
HeatmapChartOptions	Options for configuring a HeatmapChart.
LineChartOptions	Options for configuring a LineChart.
LineChartSeriesOptions	Configuration for an individual line chart series.
Padding	Resolved padding with explicit top, right, bottom, and left values.
PieChartOptions	Options for configuring a PieChart.
PolarAreaChartOptions	Options for configuring a PolarAreaChart.
RadarChartOptions	Options for configuring a RadarChart.
RadarChartSeriesOptions	Configuration for an individual radar chart series.
RealtimeChartOptions	Options for configuring a RealtimeChart.
RealtimeChartSeriesOptions	Configuration for an individual realtime chart series.
RibbonState	State interface for a ribbon shape connecting two arc segments via quadratic curves.
SankeyChartOptions	Options for configuring a SankeyChart.
SankeyLink	A directional flow between two nodes in a Sankey diagram.
SankeyLinkState	State interface for a Sankey link, defining source and target endpoint coordinates.
SankeyNode	A node in a Sankey diagram.
ScatterChartOptions	Options for configuring a ScatterChart.
ScatterChartSeriesOptions	Configuration for an individual scatter chart series.
StockChartOptions	Options for configuring a StockChart.
SunburstChartOptions	Options for configuring a SunburstChart.
SunburstNode	A node in a sunburst hierarchy with optional nested children.
TreemapChartOptions	Options for configuring a TreemapChart.
TrendChartAreaSeriesOptions	Series options for area-type series within a trend chart.
TrendChartBarSeriesOptions	Series options for bar-type series within a trend chart.
TrendChartLineSeriesOptions	Series options for line-type series within a trend chart.
TrendChartOptions	Options for configuring a TrendChart.

Type Aliases

Type Alias	Description
AxisFormatType	Built-in axis label format types.
BarChartMode	-
BarChartOrientation	-
BorderRadiusInput	Border radius expressed as a uniform number or a per-corner tuple.
ChartAnimationInput	Animation input accepting a boolean toggle or partial options object.
ChartAxisInput	Axis input accepting a boolean toggle or a full axis options object.
ChartCrosshairInput	Crosshair input accepting a boolean toggle or partial options object.
ChartGridInput	Grid input accepting a boolean toggle or partial options object.
ChartLegendInput	Legend input accepting a boolean, position string, or partial options object.
ChartOptions	-
ChartTitleInput	Title input accepting a plain string or partial options object.
ChartTooltipInput	Tooltip input accepting a boolean toggle or partial options object.
CrosshairAxis	Which axis the crosshair tracks.
EaseName	Named easing function identifiers.
LegendPosition	Position of the chart legend relative to the chart area.
PaddingInput	Padding expressed as a uniform number or a [top, right, bottom, left] tuple.
SeriesType	Supported series visualization types within a trend chart.
TitlePosition	Position of the chart title relative to the chart area.
TrendChartSeriesOptions	Discriminated union of all trend chart series option types.

Functions

Function	Description
createAreaChart	Factory function that creates a new AreaChart instance.
createBarChart	Factory function that creates a new BarChart instance.
createChordChart	Factory function that creates a new ChordChart instance.
createFunnelChart	Factory function that creates a new FunnelChart instance.
createGanttChart	Factory function that creates a new GanttChart instance.
createGaugeChart	Factory function that creates a new GaugeChart instance.
createHeatmapChart	Factory function that creates a new HeatmapChart instance.
createLineChart	Factory function that creates a new LineChart instance.
createPieChart	Factory function that creates a new PieChart instance.
createPolarAreaChart	Factory function that creates a new PolarAreaChart instance.
createRadarChart	Factory function that creates a new RadarChart instance.
createRealtimeChart	Factory function that creates a new RealtimeChart instance.
createRibbon	Factory function that creates a new Ribbon instance.
createSankeyChart	Factory function that creates a new SankeyChart instance.
createSankeyLink	Factory function that creates a new SankeyLinkPath instance.
createScatterChart	Factory function that creates a new ScatterChart instance.
createStockChart	Factory function that creates a new StockChart instance.
createSunburstChart	Factory function that creates a new SunburstChart instance.
createTreemapChart	Factory function that creates a new TreemapChart instance.
createTrendChart	Factory function that creates a new TrendChart instance.
elementIsRibbon	Type guard that checks whether a value is a Ribbon instance.
elementIsSankeyLink	Type guard that checks whether a value is a SankeyLinkPath instance.
normalizeAnimation	Normalizes animation input into fully resolved ChartAnimationOptions.
normalizeAxis	Normalizes axis input into a full ChartAxisOptions object with both x and y.
normalizeAxisItem	Normalizes a single axis item input into fully resolved options.
normalizeCrosshair	Normalizes crosshair input into fully resolved ChartCrosshairOptions.
normalizeGrid	Normalizes grid input into fully resolved ChartGridOptions.
normalizeLegend	Normalizes legend input into fully resolved ChartLegendOptions.
normalizePadding	Normalizes a padding input into a Padding object, or returns undefined if no input.
normalizeTitle	Normalizes a title input into fully resolved ChartTitleOptions.
normalizeTooltip	Normalizes tooltip input into fully resolved ChartTooltipOptions.
normalizeYAxisItem	Normalizes a Y-axis item input into fully resolved options with position.
resolveEase	Resolves an ease name or function to an Ease function, defaulting to easeOutCubic.
resolveFormatLabel	Resolves an axis format type or custom formatter into a label formatting function.