Bins raw numeric observations into deterministic SVG bars with accelerated renderer metadata.
12 histogram bins
| Prop | Type | Default | Description |
|---|
| values | readonly number[] | undefined | - | |
| bins | readonly HistogramBin[] | undefined | - | |
| binCount | number | undefined | - | |
import { HistogramChart } from "@atropos/charts";
<HistogramChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Compares multiple named series inside each categorical group.
| Prop | Type | Default | Description |
|---|
| data* | readonly GroupedBarGroup[] | - | |
import { GroupedBarChart } from "@atropos/charts";
<GroupedBarChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Stacks grouped categorical values along a horizontal scale for dense labels.
| Prop | Type | Default | Description |
|---|
| data* | readonly GroupedBarGroup[] | - | |
import { HorizontalStackedBarChart } from "@atropos/charts";
<HorizontalStackedBarChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Layers multiple series into cumulative area bands.
| Prop | Type | Default | Description |
|---|
| series* | readonly ChartSeriesDatum[] | - | |
| labels | readonly string[] | undefined | - | |
import { StackedAreaChart } from "@atropos/charts";
<StackedAreaChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Fills the difference between two comparison lines when values cross.
| Prop | Type | Default | Description |
|---|
| data* | readonly ThresholdDatum[] | - | |
| threshold | number | undefined | - | |
| aboveColor | string | undefined | - | |
| belowColor | string | undefined | - | |
| comparisonColor | string | undefined | - | |
import { ThresholdChart } from "@atropos/charts";
<ThresholdChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Shows cumulative increases, decreases, and totals.
| Prop | Type | Default | Description |
|---|
| data* | readonly WaterfallDatum[] | - | |
import { WaterfallChart } from "@atropos/charts";
<WaterfallChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Summarizes distributions with quartiles, whiskers, and outliers.
| Prop | Type | Default | Description |
|---|
| data* | readonly BoxPlotDatum[] | - | |
import { BoxPlotChart } from "@atropos/charts";
<BoxPlotChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Mirrors distribution density for side-by-side cohorts.
| Prop | Type | Default | Description |
|---|
| series* | readonly DistributionSeries[] | - | |
import { ViolinPlotChart } from "@atropos/charts";
<ViolinPlotChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Renders smoothed distribution silhouettes over a shared numeric scale.
| Prop | Type | Default | Description |
|---|
| series* | readonly DistributionSeries[] | - | |
import { DensityChart } from "@atropos/charts";
<DensityChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Stacks compact distribution ridges for comparing cohorts.
| Prop | Type | Default | Description |
|---|
| series* | readonly DistributionSeries[] | - | |
import { RidgelineChart } from "@atropos/charts";
<RidgelineChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Uses deterministic jitter for dense point distributions.
| Prop | Type | Default | Description |
|---|
| points* | readonly PointDistributionDatum[] | - | |
import { BeeswarmChart } from "@atropos/charts";
<BeeswarmChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Shows individual observations on a compact categorical strip.
| Prop | Type | Default | Description |
|---|
| points* | readonly PointDistributionDatum[] | - | |
import { StripPlotChart } from "@atropos/charts";
<StripPlotChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Combines value stems and endpoints for ranked comparison.
| Prop | Type | Default | Description |
|---|
| data* | readonly ChartValueDatum[] | - | |
import { LollipopChart } from "@atropos/charts";
<LollipopChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Keeps ranked comparisons light with one dot per category.
| Prop | Type | Default | Description |
|---|
| data* | readonly ChartValueDatum[] | - | |
import { DotPlotChart } from "@atropos/charts";
<DotPlotChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Connects start and end values across a two-point comparison.
| Prop | Type | Default | Description |
|---|
| data* | readonly SlopegraphDatum[] | - | |
| startLabel | string | undefined | - | |
| endLabel | string | undefined | - | |
import { SlopegraphChart } from "@atropos/charts";
<SlopegraphChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Tracks rank movement across ordered periods.
| Prop | Type | Default | Description |
|---|
| data* | readonly BumpDatum[] | - | |
| labels | readonly string[] | undefined | - | |
import { BumpChart } from "@atropos/charts";
<BumpChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Renders point estimates with low and high uncertainty intervals.
| Prop | Type | Default | Description |
|---|
| data* | readonly ErrorBarDatum[] | - | |
import { ErrorBarChart } from "@atropos/charts";
<ErrorBarChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Displays a central series with bounded confidence intervals.
| Prop | Type | Default | Description |
|---|
| data* | readonly BandDatum[] | - | |
import { ConfidenceBandChart } from "@atropos/charts";
<ConfidenceBandChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Layers forecast uncertainty bands without per-point DOM pressure.
| Prop | Type | Default | Description |
|---|
| bands* | readonly ForecastFanBand[] | - | |
import { ForecastFanChart } from "@atropos/charts";
<ForecastFanChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Plots OHLC candles for financial time-series movement.
| Prop | Type | Default | Description |
|---|
| data* | readonly OhlcDatum[] | - | |
import { CandlestickChart } from "@atropos/charts";
<CandlestickChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Uses tick marks for open, high, low, and close values.
| Prop | Type | Default | Description |
|---|
| data* | readonly OhlcDatum[] | - | |
import { OHLCChart } from "@atropos/charts";
<OHLCChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Adds volume bars below the candle track.
| Prop | Type | Default | Description |
|---|
| data* | readonly OhlcDatum[] | - | |
import { CandlestickVolumeChart } from "@atropos/charts";
<CandlestickVolumeChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Shows bid and ask depth curves across price levels.
| Prop | Type | Default | Description |
|---|
| data* | readonly DepthDatum[] | - | |
import { DepthChart } from "@atropos/charts";
<DepthChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Places intervals and milestones on a keyboard-navigable time axis.
| Prop | Type | Default | Description |
|---|
| items* | readonly TimelineItem[] | - | |
import { TimelineChart } from "@atropos/charts";
<TimelineChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Focuses on discrete events and milestones.
| Prop | Type | Default | Description |
|---|
| items* | readonly TimelineItem[] | - | |
import { EventTimelineChart } from "@atropos/charts";
<EventTimelineChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Separates intervals by lane without row DOM blowup.
| Prop | Type | Default | Description |
|---|
| items* | readonly TimelineItem[] | - | |
import { SwimlaneTimelineChart } from "@atropos/charts";
<SwimlaneTimelineChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Schedules task rows with milestone and dependency connectors.
5 tasks and 4 dependencies
| Prop | Type | Default | Description |
|---|
| items* | readonly TimelineItem[] | - | |
| dependencies | readonly GanttDependency[] | undefined | - | |
import { GanttChart } from "@atropos/charts";
<GanttChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Part-to-whole slices with additive compatibility beside DonutChart.
| Prop | Type | Default | Description |
|---|
| data* | readonly ChartValueDatum[] | - | |
| innerRadius | number | undefined | - | |
import { PieChart } from "@atropos/charts";
<PieChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Concentric radial bars for compact KPI comparison.
| Prop | Type | Default | Description |
|---|
| data* | readonly ChartValueDatum[] | - | |
import { RadialBarChart } from "@atropos/charts";
<RadialBarChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Single-value gauge with optional semantic bands.
| Prop | Type | Default | Description |
|---|
| value* | number | - | |
| min | number | undefined | - | |
| max | number | undefined | - | |
| bands | readonly ChartValueDatum[] | undefined | - | |
import { GaugeChart } from "@atropos/charts";
<GaugeChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Encodes values as radial area wedges.
| Prop | Type | Default | Description |
|---|
| data* | readonly ChartValueDatum[] | - | |
import { PolarAreaChart } from "@atropos/charts";
<PolarAreaChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Uses polar wedges for periodic categorical comparison.
| Prop | Type | Default | Description |
|---|
| data* | readonly ChartValueDatum[] | - | |
import { RoseChart } from "@atropos/charts";
<RoseChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Shows narrowing stage conversion through polygon steps.
| Prop | Type | Default | Description |
|---|
| data* | readonly ChartValueDatum[] | - | |
import { FunnelChart } from "@atropos/charts";
<FunnelChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Compares a metric against target and range bands.
| Prop | Type | Default | Description |
|---|
| value* | number | - | |
| target | number | undefined | - | |
| ranges | readonly ChartValueDatum[] | undefined | - | |
import { BulletChart } from "@atropos/charts";
<BulletChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Breaks part-to-whole values into stable square cells.
| Prop | Type | Default | Description |
|---|
| data* | readonly ChartValueDatum[] | - | |
| total | number | undefined | - | |
| columns | number | undefined | - | |
import { WaffleChart } from "@atropos/charts";
<WaffleChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Combines variable-width groups and stacked proportions.
| Prop | Type | Default | Description |
|---|
| data* | readonly GroupedBarGroup[] | - | |
import { MarimekkoChart } from "@atropos/charts";
<MarimekkoChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Lays hierarchy totals into proportional rectangles.
5 hierarchy nodes
| Prop | Type | Default | Description |
|---|
| root* | HierarchyDatum | - | |
import { TreemapChart } from "@atropos/charts";
<TreemapChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Projects hierarchy totals into nested radial arcs.
| Prop | Type | Default | Description |
|---|
| root* | HierarchyDatum | - | |
import { SunburstChart } from "@atropos/charts";
<SunburstChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Shows hierarchy depth as stacked rectangular rows.
5 hierarchy nodes
| Prop | Type | Default | Description |
|---|
| root* | HierarchyDatum | - | |
import { IcicleChart } from "@atropos/charts";
<IcicleChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Packs hierarchy leaves into scaled bubbles.
| Prop | Type | Default | Description |
|---|
| root* | HierarchyDatum | - | |
import { PackChart } from "@atropos/charts";
<PackChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Alternative bubble-pack hierarchy view.
| Prop | Type | Default | Description |
|---|
| root* | HierarchyDatum | - | |
import { BubblePackChart } from "@atropos/charts";
<BubblePackChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Renders deterministic tree nodes and connectors.
5 tree nodes
| Prop | Type | Default | Description |
|---|
| root* | HierarchyDatum | - | |
import { TreeChart } from "@atropos/charts";
<TreeChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Displays weighted directed flow links.
3 nodes and 2 links
| Prop | Type | Default | Description |
|---|
| nodes* | readonly NetworkNode[] | - | |
| links* | readonly NetworkLink[] | - | |
import { SankeyChart } from "@atropos/charts";
<SankeyChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Bends relationships through a radial chord layout.
3 nodes and 2 links
| Prop | Type | Default | Description |
|---|
| nodes* | readonly NetworkNode[] | - | |
| links* | readonly NetworkLink[] | - | |
import { ChordChart } from "@atropos/charts";
<ChordChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Uses deterministic radial positions until worker force layout is enabled.
3 nodes and 2 links
| Prop | Type | Default | Description |
|---|
| nodes* | readonly NetworkNode[] | - | |
| links* | readonly NetworkLink[] | - | |
import { ForceGraphChart } from "@atropos/charts";
<ForceGraphChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
General-purpose node link graph with GPU-ready mark metadata.
3 nodes and 2 links
| Prop | Type | Default | Description |
|---|
| nodes* | readonly NetworkNode[] | - | |
| links* | readonly NetworkLink[] | - | |
import { NetworkChart } from "@atropos/charts";
<NetworkChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Layers dependencies for DAG-style product flows.
3 nodes and 2 dependencies
| Prop | Type | Default | Description |
|---|
| nodes* | readonly NetworkNode[] | - | |
| links* | readonly NetworkLink[] | - | |
import { DependencyGraphChart } from "@atropos/charts";
<DependencyGraphChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Represents graph links as matrix heat cells.
| Prop | Type | Default | Description |
|---|
| nodes* | readonly NetworkNode[] | - | |
| links* | readonly NetworkLink[] | - | |
import { AdjacencyMatrixChart } from "@atropos/charts";
<AdjacencyMatrixChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Draws hierarchical stack frames as compact interval rows.
5 stack frames
| Prop | Type | Default | Description |
|---|
| root* | HierarchyDatum | - | |
import { FlameGraphChart } from "@atropos/charts";
<FlameGraphChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Projects feature polygons and points into SVG fallback map marks.
3 features and 4 points
| Prop | Type | Default | Description |
|---|
| features | readonly GeoFeature[] | undefined | - | |
| points | readonly GeoPoint[] | undefined | - | |
import { GeoMap } from "@atropos/charts";
<GeoMap renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Accepts a custom projection callback for domain-specific maps.
3 features and 4 points
| Prop | Type | Default | Description |
|---|
| project | ((longitude: number, latitude: number) => readonly [number, number]) | undefined | - | |
import { CustomProjectionMap } from "@atropos/charts";
<CustomProjectionMap renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Colors geographic polygons by feature values.
3 choropleth features
import { ChoroplethChart } from "@atropos/charts";
<ChoroplethChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Renders arbitrary polygon features with hover-ready geometry.
3 polygons
import { PolygonMap } from "@atropos/charts";
<PolygonMap renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Scales projected map points by value.
4 point bubbles
import { BubbleMap } from "@atropos/charts";
<BubbleMap renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Aggregates projected points into deterministic hex bins.
4 projected points
| Prop | Type | Default | Description |
|---|
| points* | readonly GeoPoint[] | - | |
| features | readonly GeoFeature[] | undefined | - | |
| radius | number | undefined | - | |
import { HexbinMap } from "@atropos/charts";
<HexbinMap renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Displays scalar fields as dense rectangular heat cells.
| Prop | Type | Default | Description |
|---|
| cells* | readonly RasterHeatmapCell[] | - | |
| columns | number | undefined | - | |
| rows | number | undefined | - | |
import { RasterHeatmap } from "@atropos/charts";
<RasterHeatmap renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Extracts threshold outlines from scalar field fixtures.
4 contour thresholds
| Prop | Type | Default | Description |
|---|
| cells* | readonly RasterHeatmapCell[] | - | |
| thresholds | readonly number[] | undefined | - | |
import { ContourChart } from "@atropos/charts";
<ContourChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Places weighted words in deterministic positions.
| Prop | Type | Default | Description |
|---|
| words* | readonly WordCloudDatum[] | - | |
import { WordCloudChart } from "@atropos/charts";
<WordCloudChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Plots custom glyphs over numeric positions.
| Prop | Type | Default | Description |
|---|
| points* | readonly GlyphPlotDatum[] | - | |
import { GlyphPlotChart } from "@atropos/charts";
<GlyphPlotChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Splits one line into colored state segments.
| Prop | Type | Default | Description |
|---|
| data* | readonly SplitLineSegment[] | - | |
import { SplitLineChart } from "@atropos/charts";
<SplitLineChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Compares curve rendering styles on one shared fixture.
Curve interpolation comparison
| Prop | Type | Default | Description |
|---|
| data | readonly ChartXYDatum[] | undefined | - | |
import { CurveGalleryChart } from "@atropos/charts";
<CurveGalleryChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Composes bars, lines, areas, scatter, and threshold overlays.
2 composed layers
| Prop | Type | Default | Description |
|---|
| layers* | readonly ComposedChartLayer[] | - | |
import { ComposedChart } from "@atropos/charts";
<ComposedChart renderer="gpu" gpuBackend="webgl2" animation={{ durationMs: 520, staggerMs: 42 }} />
Shows Glyph, Text, Pattern, Gradient, Polygon, VoronoiOverlay, and Drag in one SVG surface.
import { ChartSvg, Drag, Glyph, Gradient, Pattern, Polygon, Text, VoronoiOverlay } from "@atropos/primitives";
<ChartSvg viewBox="0 0 360 220"><Polygon points={points} /><Glyph x={86} y={74} /></ChartSvg>
Builds a small custom chart directly from exported SVG primitives.
import { ChartSvg, Glyph, Gradient, Text, VoronoiOverlay } from "@atropos/primitives";
<ChartSvg viewBox="0 0 360 220"><Glyph x={118} y={96} /><Text x={118} y={83}>31</Text></ChartSvg>