Charts

The @ripl/charts package provides a comprehensive set of chart types for data visualization. Every chart is built on the Ripl core rendering engine, so they inherit animated transitions, pointer-event interactivity, responsive sizing, and context-agnostic rendering (Canvas or SVG) out of the box. Charts are created with a simple createXxxChart(target, options) factory and updated reactively via chart.update(options).

NOTE

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

Available Charts

LineRender one or more data series as smooth or straight lines with optional markers, grid lines, crosshair, and legend.BarGrouped and stacked modes with vertical and horizontal orientations, animated transitions, tooltips, and legend.AreaFilled areas beneath lines with stacked mode, crosshair, grid, and smooth animations.TrendCombine x/y series such as bar, line, or area into a single composite chart.PieIllustrate numerical proportions of statistical data with animated slices and tooltips.Polar AreaEqual-angle segments whose radius encodes value, making it easy to compare magnitudes across categories.ScatterData points on a two-dimensional plane with optional size variation to represent a third dimension.StockOHLC candlestick data with optional volume bars, crosshair, grid lines, and tooltips.RadarMultivariate data on a radial grid, ideal for comparing multiple dimensions across series.HeatmapData displayed as a matrix of colored cells, with color intensity representing values.TreemapHierarchical data as nested rectangles, where each rectangle's area is proportional to its value.FunnelProgressively narrowing horizontal bars, ideal for visualizing conversion pipelines and drop-off rates.GanttTasks as horizontal bars along a time axis with progress overlays, today marker, and tooltips.GaugeA single value on a semi-circular arc, ideal for KPIs, progress indicators, and dashboard metrics.SunburstHierarchical data as concentric rings, where each ring represents a level and arc size represents value.SankeyFlow between nodes using weighted links. Ideal for energy flows, budget allocations, or user journeys.RealtimeSmoothly visualize streaming data with a sliding window and animated transitions. Ideal for live dashboards.ChordRelationships between groups using arcs and ribbons arranged in a circle. Ideal for inter-group flows.