Charts
Chart reference
The 60 charts silverpoint 0.8.0 ships, enabled and identical in React, Vue and Angular (and in Reflex through reflex-silverpoint-react). Each one has a page with a live example, its code in the four frameworks, and the reference of its props.
4Lines
8Bars
3Areas
5Points & grids
2Flows
11Radial
14Distributions & comparisons
8Hierarchies & dimensions
5Fields & networks
60in total
All charts
| Chart | Family | What it draws | React subpath | Angular selector | Reflex |
|---|---|---|---|---|---|
| LineChart | Lines | Spline with an optional dotted baseline series. | @silverpoint/react/line-chart | sp-line-chart | line_chart |
| StepChart | Lines | A series drawn as steps. | @silverpoint/react/step-chart | sp-step-chart | step_chart |
| SparklineRows | Lines | One row per series — name, sparkline, readout. | @silverpoint/react/sparkline-rows | sp-sparkline-rows | sparkline_rows |
| KpiCard | Lines | A metric, its delta, and an area sparkline of the series. | @silverpoint/react/kpi-card | sp-kpi-card | kpi_card |
| BarChart | Bars | Pill bars, as columns or rows, with an optional second series. | @silverpoint/react/bar-chart | sp-bar-chart | bar_chart |
| StackedBarChart | Bars | One stacked segment per key. | @silverpoint/react/stacked-bar-chart | sp-stacked-bar-chart | stacked_bar_chart |
| ComposedChart | Bars | Columns and a spline on one value scale. | @silverpoint/react/composed-chart | sp-composed-chart | composed_chart |
| WaterfallChart | Bars | Totals from zero and floating deltas from the running total. | @silverpoint/react/waterfall-chart | sp-waterfall-chart | waterfall_chart |
| FunnelChart | Bars | Horizontal, centred stages. | @silverpoint/react/funnel-chart | sp-funnel-chart | funnel_chart |
| BulletChart | Bars | One bar per target, with a marker at the target. Values in 0-100. | @silverpoint/react/bullet-chart | sp-bullet-chart | bullet_chart |
| PyramidChart | Bars | Stacked tiers whose width encodes the value (0-100). | @silverpoint/react/pyramid-chart | sp-pyramid-chart | pyramid_chart |
| CandlestickChart | Bars | OHLC bodies and wicks. | @silverpoint/react/candlestick-chart | sp-candlestick-chart | candlestick_chart |
| AreaChart | Areas | A curved, toned area under its line. | @silverpoint/react/area-chart | sp-area-chart | area_chart |
| RangeBandChart | Areas | The band between a low and a high series. | @silverpoint/react/range-band-chart | sp-range-band-chart | range_band_chart |
| StreamChart | Areas | Two waves, overlaid or stacked. | @silverpoint/react/stream-chart | sp-stream-chart | stream_chart |
| ScatterChart | Points & grids | Points on two linear scales, optionally sized. | @silverpoint/react/scatter-chart | sp-scatter-chart | scatter_chart |
| BubbleChart | Points & grids | Circles whose area encodes `sizeKey`. | @silverpoint/react/bubble-chart | sp-bubble-chart | bubble_chart |
| HeatmapChart | Points & grids | Labelled rows of values, normalised against `scaleMax`. | @silverpoint/react/heatmap-chart | sp-heatmap-chart | heatmap_chart |
| TreemapChart | Points & grids | Tiles of `cols × rows` cells placed in a `columns × rows` grid. | @silverpoint/react/treemap-chart | sp-treemap-chart | treemap_chart |
| ActivityGrid | Points & grids | One cell per day, a column per week. | @silverpoint/react/activity-grid | sp-activity-grid | activity_grid |
| SankeyChart | Flows | Flow bands between layered nodes. | @silverpoint/react/sankey-chart | sp-sankey-chart | sankey_chart |
| ChordRing | Flows | Directed flows between categories around a circle. | @silverpoint/react/chord-ring | sp-chord-ring | chord_ring |
| DonutChart | Radial | Sectors ∝ value around a central readout. | @silverpoint/react/donut-chart | sp-donut-chart | donut_chart |
| RadarChart | Radial | One spoke per subject, a closed polygon of values. | @silverpoint/react/radar-chart | sp-radar-chart | radar_chart |
| PolarBarChart | Radial | 360° bars out from a hole, length ∝ value. | @silverpoint/react/polar-bar-chart | sp-polar-bar-chart | polar_bar_chart |
| RadialArcGroup | Radial | Concentric 180° tracks, sweep ∝ value / the largest. | @silverpoint/react/radial-arc-group | sp-radial-arc-group | radial_arc_group |
| RadialRings | Radial | Concentric progress rings, sweep ∝ value in 0-100. | @silverpoint/react/radial-rings | sp-radial-rings | radial_rings |
| GaugeArc | Radial | A 240° arc swept to a percent. | @silverpoint/react/gauge-arc | sp-gauge-arc | gauge_arc |
| MeterChart | Radial | A semicircular meter with a needle at a percent. | @silverpoint/react/meter-chart | sp-meter-chart | meter_chart |
| CoxcombChart | Radial | Equal angles, sector **area** ∝ value. | @silverpoint/react/coxcomb-chart | sp-coxcomb-chart | coxcomb_chart |
| WindRose | Radial | Observations of (bearing, speed) binned by compass sector and speed. | @silverpoint/react/wind-rose | sp-wind-rose | wind_rose |
| VolvelleChart | Radial | Concentric categorical rings read against one index. | @silverpoint/react/volvelle-chart | sp-volvelle-chart | volvelle_chart |
| OrbitChart | Radial | Nested elliptical orbits with markers along them. | @silverpoint/react/orbit-chart | sp-orbit-chart | orbit_chart |
| HistogramChart | Distributions & comparisons | Raw observations binned in the core. | @silverpoint/react/histogram-chart | sp-histogram-chart | histogram_chart |
| EcdfChart | Distributions & comparisons | The empirical cumulative distribution as a step function. | @silverpoint/react/ecdf-chart | sp-ecdf-chart | ecdf_chart |
| BoxPlotChart | Distributions & comparisons | Quartiles, median, Tukey whiskers and outliers per group. | @silverpoint/react/box-plot-chart | sp-box-plot-chart | box_plot_chart |
| ViolinChart | Distributions & comparisons | A mirrored kernel density per group. | @silverpoint/react/violin-chart | sp-violin-chart | violin_chart |
| RidgelineChart | Distributions & comparisons | A kernel density per group on overlapping baselines. | @silverpoint/react/ridgeline-chart | sp-ridgeline-chart | ridgeline_chart |
| BeeswarmChart | Distributions & comparisons | One point per observation, packed without overlap. | @silverpoint/react/beeswarm-chart | sp-beeswarm-chart | beeswarm_chart |
| LollipopChart | Distributions & comparisons | A stem from the baseline and a head at the value. | @silverpoint/react/lollipop-chart | sp-lollipop-chart | lollipop_chart |
| DumbbellChart | Distributions & comparisons | Two values per category joined by a segment. | @silverpoint/react/dumbbell-chart | sp-dumbbell-chart | dumbbell_chart |
| SlopeChart | Distributions & comparisons | Two period axes, one segment per category. | @silverpoint/react/slope-chart | sp-slope-chart | slope_chart |
| BumpChart | Distributions & comparisons | The rank of each series at each x. | @silverpoint/react/bump-chart | sp-bump-chart | bump_chart |
| ErrorBarChart | Distributions & comparisons | A point estimate with its interval per category. | @silverpoint/react/error-bar-chart | sp-error-bar-chart | error_bar_chart |
| IntervalChart | Distributions & comparisons | Floating bars from start to end on lanes. | @silverpoint/react/interval-chart | sp-interval-chart | interval_chart |
| DivergingBarChart | Distributions & comparisons | Ordered levels stacked on both sides of a neutral centre. | @silverpoint/react/diverging-bar-chart | sp-diverging-bar-chart | diverging_bar_chart |
| ConnectedScatterChart | Distributions & comparisons | An ordered path through x-y points. | @silverpoint/react/connected-scatter-chart | sp-connected-scatter-chart | connected_scatter_chart |
| WaffleChart | Hierarchies & dimensions | A unit grid filled in reading order by category. | @silverpoint/react/waffle-chart | sp-waffle-chart | waffle_chart |
| MarimekkoChart | Hierarchies & dimensions | Column width by total, segment height by share. | @silverpoint/react/marimekko-chart | sp-marimekko-chart | marimekko_chart |
| SquarifiedTreemap | Hierarchies & dimensions | Nested rectangles, area by value, drillable through `rootId` and `onRootChange`. | @silverpoint/react/squarified-treemap | sp-squarified-treemap | squarified_treemap |
| SunburstChart | Hierarchies & dimensions | A hierarchy as rings of arcs, drillable through `rootId` and `onRootChange`. | @silverpoint/react/sunburst-chart | sp-sunburst-chart | sunburst_chart |
| TreeChart | Hierarchies & dimensions | A tidy node-link tree. | @silverpoint/react/tree-chart | sp-tree-chart | tree_chart |
| ParallelCoordinatesChart | Hierarchies & dimensions | One polyline per row across parallel axes. | @silverpoint/react/parallel-coordinates-chart | sp-parallel-coordinates-chart | parallel_coordinates_chart |
| PolarLineChart | Hierarchies & dimensions | A line over angle and radius. | @silverpoint/react/polar-line-chart | sp-polar-line-chart | polar_line_chart |
| PolarScatterChart | Hierarchies & dimensions | Points over angle and radius. | @silverpoint/react/polar-scatter-chart | sp-polar-scatter-chart | polar_scatter_chart |
| DensityBinChart | Fields & networks | X-y points counted in two-dimensional bins. | @silverpoint/react/density-bin-chart | sp-density-bin-chart | density_bin_chart |
| ContourChart | Fields & networks | Iso-lines and filled bands of a density or a grid. | @silverpoint/react/contour-chart | sp-contour-chart | contour_chart |
| DelaunayChart | Fields & networks | The triangulation of x-y points, or its Voronoi cells. | @silverpoint/react/delaunay-chart | sp-delaunay-chart | delaunay_chart |
| VectorFieldChart | Fields & networks | An arrow per grid point. | @silverpoint/react/vector-field-chart | sp-vector-field-chart | vector_field_chart |
| NetworkChart | Fields & networks | A node-link graph. | @silverpoint/react/network-chart | sp-network-chart | network_chart |