# Charts

> Charts and data visualisation.

- [Bar List](https://www.assembli.design/components/bar-list.md): Ranked bar list for top sources, pages or countries: each bar is a soft wash behind its label so long names never fight the marks. Tabs switch views with rows gliding to their new rank, hovering a row swaps its value for its share, and Show all reveals the tail.
- [Histogram Chart](https://www.assembli.design/components/histogram-chart.md): Distribution histogram with a brush: drag across the bins, or use Shift and the arrow keys, to select a range and read its count and share live in the header. Hover any bin for its exact bucket, and percentile markers (p50, p95, p99) are labelled in place on two rows so they never collide.
- [Metric Table](https://www.assembli.design/components/metric-table.md): Inline analytics table: every row carries a hoverable sparkline with the latest point in the accent, the current value, a signed change pill coloured by whether that direction is good, and a share-of-total bar. Every column header sorts, rows glide to their new order, and a totals row closes it out.
- [Punch Card](https://www.assembli.design/components/punch-card.md): Day-by-hour activity heatmap: five sequential classes with a stepped legend that marks the hovered cell's class, marginal bars for every day and hour, crosshair dimming of everything outside the hovered row and column, and a busiest-hour call-out. Arrow keys move a focus cell around the grid.
- [Bullet Chart](https://www.assembli.design/components/bullet-chart.md): KPI scorecard of bullet charts, Stephen Few's compact gauge: each row lays its value over poor, fair and good bands with a target tick and an optional forecast bar, then states its status with an icon, a label and percent of target. Hover or focus a row to reveal its scale and target value.
- [Stacked Bar Chart](https://www.assembli.design/components/stacked-bar-chart.md): Stacked column chart with a Total / Share switch that re-stacks every column to 100% on a spring. Segments sit on a 2px surface gap, totals ride the caps, and hovering a legend item isolates that series and moves the cap labels to its values. Hover or arrow keys open a column read-out with shares.
- [Scatter Chart](https://www.assembli.design/components/scatter-chart.md): Scatter and bubble chart: points pop in, the pointer picks the nearest point (no pixel hunting) with guides and value pills on both axes, legend chips toggle groups without moving the scales, and an optional least-squares trend line with r and median quadrants with captions explain the cloud. Arrow keys step through points.
- [Threshold Chart](https://www.assembli.design/components/threshold-chart.md): Actual-versus-target line chart: the gap between the lines is shaded blue where you're ahead and red where you're behind, split exactly at each crossing. A hit strip marks every period, the header counts periods ahead and the net variance, and the crosshair reads actual, target and the signed gap. Handles ramping plans and lower-is-better metrics.
- [Line Chart](https://www.assembli.design/components/line-chart.md): Multi-series line chart: monotone lines draw in, a snapping crosshair shows every series in one tooltip, legend chips toggle series while the axis rescales smoothly, end labels dodge each other with leader lines, and numbered annotations pin notes to moments. Arrow keys scrub.
- [Chart Recorder](https://www.assembli.design/components/chart-recorder.md): Strip-chart recorder: ink pens trace live channels onto scrolling graph paper with sprocket holes, a moving grid, value flags at the pen tips, selectable chart speed and a hold button.
- [Chord Diagram](https://www.assembli.design/components/chord-diagram.md): Directed flows between groups drawn as ribbons inside a ring. Ribbons bloom in with a stagger, hovering or focusing a group isolates its flows and shows its share in the centre, and hovering a ribbon reads out both directions. Directly labelled, keyboard focusable, with a screen-reader matrix.
- [Stream Chart](https://www.assembli.design/components/stream-chart.md): A streamgraph: stacked layers flow around a wiggling centre line, drawn in left to right on view. A scrub line snaps to each period with a tooltip of every layer, the layer under the cursor lifts while the rest dim, and layers are directly labelled where they swell. Validated colorblind-safe palette, legend and screen-reader table included.
- [Bump Chart](https://www.assembli.design/components/bump-chart.md): Rankings over time as braided S-curves. Lines draw in left to right, rank badges sit on every node, and hovering or focusing a series fades the rest.
- [Ridgeline Chart](https://www.assembli.design/components/ridgeline-chart.md): Joy-plot of overlapping distributions: each row rises from its own baseline, rows occlude the ones behind, and hovering isolates a ridge with a column read-out.
- [Sunburst Chart](https://www.assembli.design/components/sunburst-chart.md): Hierarchical radial chart. Hover traces a path from the centre outwards and reads the share in the hub; click a slice to zoom in, click the hub to climb back out.
- [Candlestick Chart](https://www.assembli.design/components/candlestick-chart.md): An OHLC candlestick chart with volume, a crosshair that reads out the candle under the pointer, a live price tag on the axis, a 20-day moving average, range switching with a staggered grow-in, and a table view. Direction is hollow versus filled plus an icon, never colour alone.
- [Org Chart](https://www.assembli.design/components/org-chart.md): A collapsible org chart that lays itself out as a tidy tree. Branches grow out of their parent and connectors morph as you expand or collapse, search auto-opens the path to a match, and hovering traces the reporting line back to the top.
- [Radar Chart](https://www.assembli.design/components/radar-chart.md): A multi-series radar (spider) chart in pure SVG that morphs smoothly between datasets. Pointer or arrow keys pick an axis for a side-by-side readout, the legend toggles series, and a table view is one click away. Colour-blind-validated palette.
- [Sankey Flow Chart](https://www.assembli.design/components/sankey-chart.md): Pure-SVG Sankey diagram that lays out its own nodes and ribbons. Hover a node or ribbon to isolate its flow while everything else fades.
- [Smooth Funnel Chart](https://www.assembli.design/components/funnel-chart.md): Conversion funnel drawn as smooth bezier bands. Stages animate in, hovering a stage reveals drop-off against the previous step.
- [Treemap Chart](https://www.assembli.design/components/treemap-chart.md): A two-level squarified treemap whose tiles glide to new positions when you switch metric or filter a group. Tiles are real buttons with direct labels, groups use a colour-blind-validated palette, and hovering dims everything else for a detail readout.
- [Waterfall Chart](https://www.assembli.design/components/waterfall-chart.md): Revenue bridge chart: floating bars connect with hairlines, gains and losses use distinct colours and patterns, and the running total is labelled.
- [Area Chart](https://www.assembli.design/components/area-chart.md): Dependency-free SVG area chart with a smoothed spline that draws itself in, a gradient fill, a pointer crosshair driving the headline value and an automatic change badge.
- [Bar Chart](https://www.assembli.design/components/bar-chart.md): Grouped bar chart in plain HTML: bars grow from the baseline in a stagger, a recessive grid, legend, and a hover column with a tooltip for every series. Colorblind-validated palette and a hidden data table.
- [Radial Gauge](https://www.assembli.design/components/radial-gauge.md): Speedometer gauge: 240° track with status bands and ticks, a needle on a spring that overshoots and settles, and a counting readout labelled with the current band.
- [Donut Chart](https://www.assembli.design/components/donut-chart.md): Interactive donut chart: segments draw in sequentially on view, the hovered or focused slice swells while the rest dim, and the centre counts up to the active value. Legend rows are keyboard-focusable and linked to the slices.
- [Heatmap Calendar](https://www.assembli.design/components/heatmap-calendar.md): Year-long contribution heatmap with month and weekday labels, quantile-based intensity levels from any colour, a column-by-column reveal on view and a pointer-following tooltip. Timezone-safe (UTC) and hydration-safe.

Back to [all components](https://www.assembli.design/components.md).