@ripl/charts

25 animated, interactive chart types for Ripl, rendering to Canvas, SVG, the terminal or a server from one chart definition.

Features

• 25 chart types, each behind a createXChart factory taking a CSS selector, an HTMLElement or a Ripl Context.
• Animated data joins — chart.update(options) diffs the new data against the drawn elements and animates entries, updates and exits separately, at every level of a multi-series chart. Axes and legends transition rather than redraw.
• Interaction — tooltips, crosshairs, hover highlighting, legend toggling, a windowing navigator strip for pan and zoom, and typed pointer events per chart (barenter, barleave, barclick, and their equivalents).
• Shared components — axes, grids, legends, tooltips, crosshairs, titles and a navigator strip are configured through the same options on every chart that has them, so a dashboard stays consistent without per-chart wiring.
• Same chart, several targets — Canvas or SVG in the browser, and braille text or raw ImageData from a headless Node script via @ripl/node.
• Three built-in themes — lightTheme, darkTheme and colorBlindTheme, with registerTheme for your own and per-chart or per-series overrides.
• Tree-shakable — importing one factory ships one chart type.
• No third-party runtime dependencies — the only dependencies are four sibling packages in this repository (@ripl/core, @ripl/canvas, @ripl/dom, @ripl/utilities).

Chart types

| Category | Charts | | --- | --- | | Cartesian | Bar, Line, Area, Scatter, Histogram, Box Plot, Trend, Stock | | Radial & polar | Pie/Donut, Polar Area, Polar Scatter, Radial Bar, Radar, Gauge | | Hierarchical | Sunburst, Treemap, Packed Circle | | Network & flow | Sankey, Chord, Arc Diagram, Force-Directed, Funnel | | Specialized | Heatmap, Gantt, Realtime |

Installation

# npm
npm install @ripl/charts

# yarn
yarn add @ripl/charts

# pnpm
pnpm add @ripl/charts

Pair it with @ripl/web when the same page also draws its own graphics; charts alone need nothing else.

Quick start

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

const chart = createBarChart('#chart-container', {
    data: [
        {
            month: 'Jan',
            sales: 120,
            costs: 80,
        },
        {
            month: 'Feb',
            sales: 200,
            costs: 110,
        },
        {
            month: 'Mar',
            sales: 150,
            costs: 90,
        },
    ],
    key: 'month',
    series: [
        {
            id: 'sales',
            value: 'sales',
            label: 'Sales',
        },
        {
            id: 'costs',
            value: 'costs',
            label: 'Costs',
        },
    ],
});

chart.update({
    stacked: true,
});

chart.update() takes any partial option, not only data — the change animates from whatever is currently drawn.

Key API

| Export | What it does | | --- | --- | | createBarChart … createGanttChart | The 25 chart factories | | Chart | Base class to extend for a custom chart type | | createChartAnnotations | Reference lines, bands and point callouts | | createColorLegend | Legend for a continuous colour scale | | createSymbol | The scatter/legend symbol set | | registerTheme / setDefaultTheme | Light, dark and colour-blind themes, and your own |

Related packages

• @ripl/web — the browser entry point, for drawing alongside a chart
• @ripl/svg — render any chart as SVG instead of Canvas
• @ripl/node — the same charts from a headless script, drawn through @ripl/terminal
• @ripl/core — the elements, scales and animation the charts are built from

Documentation

Guides, an options reference and a live demo per chart type are at ripl.run/charts.

License

MIT