Charts
98 charts, animated, accessible and fast with large data, each with Leptos and Dioxus code.
Bars
Bar chartCompare one measure across categories or weeks. Bars are grey with one picked out, so the eye goes to the value that matters.Diverging bar chartSurvey (Likert) answers as stacked bars split around a centre line: negative answers run left, positive ones right, and a neutral middle answer straddles the centre. Each row is shown as shares of its own total, with the totals either side at the bar ends.Span chartA bar per category from a start value to an end value, such as a salary band or a temperature range, with both ends labelled. An optional marker shows a point inside the range, such as the median.Pictogram chartAn isotype chart: each category's count drawn as a row of repeated icons, each standing for a fixed number of units, with the last icon cut to the remainder. Use the built-in person, square or circle, or pass any SVG path.Stacked bar chartShow a total and what it is made of, across categories or weeks. Negative values stack below zero, so gains and losses read side by side.Funnel chartStages that narrow to the next, with the conversion from each stage to the one after. Runs top to bottom or left to right.Bullet chartA compact replacement for a gauge: each measure is a bar against a target tick, over grey bands for poor, fair and good. One row per measure, each on its own zero-based scale.Waffle chartA 10×10 grid of unit squares shared out by category, so each square reads as 1%. Give a total to leave the unused share empty.Marimekko chartA variable-width 100% stacked chart. Each column is as wide as its category's share of the grand total, and its segments split it by series, so area reads as share of everything.Dot plot chartCompare values across categories with dots instead of bars. Two or more series per row draw a dumbbell, so the gap between them reads at a glance.Error bar chartShow estimates with their uncertainty. Each category gets a dot, or a bar from zero, and a capped whisker from its low to its high bound.Pareto chartFind the few causes behind most of a total. Bars sort largest first and a line climbs to 100% on its own labelled right-hand axis, the one chart here with two.Waterfall chartShow how a starting value becomes an end value. Each change floats from the running total, rises and falls in their own colours, with optional total bars.Lollipop chartA lighter bar chart: a thin stick from zero and a dot at each value. Less ink than bars when there are many categories, and it works on a log axis.Grouped bar chartCompare a few series within each category, side by side from zero. Vertical or horizontal, with negative values hanging below the baseline.Bar race chartA ranking played through time: the top entries as bars that grow and glide past each other as the order changes, with play, pause and a scrubber.
Lines and areas
Bump chartShow how items trade places over time. Values only decide the order at each step, so the chart answers who is ahead, not by how much. Hover, touch or focus a marker to read its rank and value; hover a legend item to pick its series out.Slope chartCompare how several items changed between two points in time. All lines share one scale, and labels are nudged apart so close values stay readable. Hover, touch or focus a line to read both values and the change; hover a legend item to pick its series out.Line chartShow how one or more measures move over time. A crosshair reads every series at the same point, by pointer or keyboard. AreaChart fills under each line.Composed chartLayer bars, lines, areas and points over the same categories and one value axis, such as orders with a rolling average. A crosshair reads every layer at once.Small multiplesThe same chart repeated for each facet, such as a region or product, in a grid that wraps to fit. Every panel shares one value axis so heights compare across panels, the series keep their colours everywhere, and one legend names them. Panels enter one after another.Cycle plot chartSeasonal shape and trend in one chart. The axis is the periods of a cycle, such as months; inside each period a short line runs through that period's value in every cycle, such as every year, with a flat rule at their mean. The mean rules show the season; the slope of each mini line shows whether that month is changing.Horizon chartMany time series stacked as thin rows. Each row's area is cut into equal bands that fold down on top of each other, so a tall line fits a short row and darker shades mean bigger values; values below zero fold up in a second hue. Every row shares one band size, so rows compare.Stacked area chartParts of a total over time, stacked from zero, scaled to 100%, or as a streamgraph. Hover to read every series at one point.Threshold chartA line judged against a limit: one colour above it, another below, with the gap shaded. Good for objectives, budgets and alert levels.Split line chartOne line that changes style at a point: solid for what happened, dashed for what is expected. The two halves meet at the last actual value.Linked chartsCharts report what the user does. Two line charts share one view, so zooming either moves both, and a bar chart's on_select filters a table.Confidence band chartAn estimate over time with a shaded band where the true value probably lies. Narrow bands mean more certainty.Forecast fan chartHistory, then a dashed forecast inside nested bands that widen with the horizon, so the uncertainty is as visible as the estimate.Step chartFor values that hold and then jump, such as prices, rates and headcount. Lines step instead of sloping, so nobody reads a change as gradual, and labelled events mark why.Range area chartA band from each point's low to its high, such as daily low and high temperatures, with an optional line through the middle. The spread is the story, so the band leads.
Points
Scatter chartTwo numeric measures, one dot per observation. Colour by group, or give points a size for a bubble chart. The nearest dot is picked out under the pointer or the arrow keys.Smith chartPlot impedance sweeps as reflection coefficients inside the unit disc, with the constant-resistance and constant-reactance grid. For RF work. Hover, touch or step through samples with the keys to read each impedance and |Γ|; hovering a legend row picks out its trace.Strip plotEvery value of each group as a dot on one row, spread by a small fixed jitter so repeated values stay visible. Good for modest samples where each observation matters.Beeswarm chartEvery value as a dot, packed outwards from the row's centre line where values crowd so none overlap. The swarm's outline shows the distribution while each observation stays readable.Parallel coordinatesOne vertical axis per measure, each on its own scale, and one line per row crossing them, so patterns across many measures show as bundles. Drag along an axis to keep a range; brushes on several axes combine and everything else dims. Colour picks out a category. Past 2,000 rows the lines draw on a canvas, so thousands stay fast.Ternary chartCompositions of three parts as points in a triangle. Each corner is all of one part; gridlines every 20% read off each share. Values are normalised, so any units work.Bland-Altman chartCheck whether two ways of measuring the same thing agree. Each pair is plotted as its mean against its difference, with the average bias and the 95% limits of agreement.Quiver chartShow a vector field such as wind or current. An arrow at each grid point shows direction, with length and colour for strength, and streamlines can trace the flow. Large grids draw on a canvas.Connected scatter chartTwo measures plotted against each other and joined in time order, so the path shows how they moved together. The line draws itself from the first moment to the last.
Distributions
Contour chartShow a measure that varies across a surface, as marching-squares contour lines, a filled heat field, or both. HeatField is the filled form on its own. Hover, touch or move through the grid with the arrow keys to read any cell.HistogramShow how a set of values is distributed. Values are binned into equal-width bars by Sturges' rule, or into a bin count you choose. Hover a bar for its count.Box plotCompare the spread of several groups. Each box shows the quartiles and median, whiskers reach to the furthest value within 1.5 times the interquartile range, and values beyond them are drawn as outliers. Hover, touch or arrow-key to a box to read its numbers.Density chartSmoothed distributions drawn as kernel density curves on shared axes, so the shapes of a few groups compare directly. Uses a Gaussian kernel with Silverman's bandwidth unless you set one.Ridgeline chartOne density curve per group, stacked in overlapping rows. Each ridge is scaled to its own peak, so it reads shape and shift across many groups, such as months or cohorts, rather than absolute counts.Violin chartEach group's density mirrored about a centre line, with its median marked and an optional quartile box inside. Shows where values bunch up, which a box plot alone hides.Q-Q chartCheck whether a sample looks normal. Each sorted value is plotted against the normal quantile it would have; a straight line of points means yes.Survival chartShow how long things last when some are still going. Kaplan-Meier curves step down at each event, ticks mark censored subjects, and a table counts who is still at risk.ECDF chartCompare whole distributions without binning. Each group's line climbs by one step per value, so the height at any x is the share at or below it and percentiles read straight off.Raincloud plotEach group's distribution three ways at once: a half violin for its shape, a slim box plot for its quartiles, and every observation jittered beside them. Standing up or lying down.Forest plotA meta-analysis at a glance: each study's estimate as a square sized by weight with its confidence interval, a line of no effect, the pooled estimate as a diamond, and the numbers in columns alongside. Ratios read on a log axis.
Time
Timeline chartPlan or review work over time. Items sit in lanes on a date axis with calendar-aligned ticks; spans are bars, events are diamonds, and overlapping items in a lane stack. Hover, touch or arrow-key to an item to read its dates.Calendar heatmap chartOne cell per day in week columns, shaded by value, like a contribution graph. Weekly rhythms read down the columns and seasons across them. Spans over a year stack one row per calendar year so the years line up.Spectrogram chartShow how a signal's frequencies change over time. Raw samples go through a short-time Fourier transform; time runs across, frequency up, and loudness is the shade.Marey chartA timetable as a picture: stations down the side spaced by distance, time across, and every trip a line through its stops. Speed reads as slope, waits as flat steps, and passing trains as crossings.
Finance
Candlestick chartShow open, high, low and close per period. A candle that closed at or above its open is green and one that closed lower is red. Candles with a volume add a volume strip underneath.OHLC chartOpen, high, low and close per period as a thin bar with the open ticked left and the close ticked right. Lighter than candlesticks when there are many periods.Depth chartAn order book as two step areas: bids stepping down to the left of the spread and asks stepping up to the right, each the total size available up to that price. A dashed line marks the mid price.Renko chartFixed-size bricks laid each time price moves a full brick from the last one, ignoring time. Small moves are filtered out, so trends and reversals stand out.
Parts of a whole
Donut chartParts of a whole. Up to six parts in the chart colour order; more fold into a grey "Other". Hover, touch or focus a segment or legend row to pick it out and read its value and share.Voronoi treemapA tree as nested weighted Voronoi cells inside a circle or a rectangle, each cell's area its share of its parent. Cells are coloured by top-level group and the larger ones are labelled. The layout is seeded, so the same data always draws the same picture.Nested donut chartConcentric rings, innermost first: one per series over the same categories, built with `series`, or one per level of a tree, built with `levels`, where children sit under their parent's sweep. The whole chart sweeps in clockwise as one motion.Treemap chartA tree as nested rectangles sized by value. Hover, touch or step to a cell to read its value and share; click a team, or press Enter, to zoom in, and use Backspace or the breadcrumb to climb back out.Sunburst chartA tree as concentric rings, each arc's sweep its share. Hover, touch or step to an arc to read it; click an arc, or press Enter, to zoom in; click the centre, press Backspace or use the breadcrumb to climb out.Bubble pack chartA tree as nested circles, each leaf's area its value, packed tightly inside its parent. Click a circle with children to zoom in; the breadcrumb or outer circle zooms out.Icicle chartA tree as rows of rectangles, one row per level, each as wide as its share of the row above. Click a cell to drill in; the top row or breadcrumb climbs back out.Flame graph chartA profile as stacked frames, callers below callees, each frame as wide as its total time. Frames colour by name, the tooltip splits self from total time, and a search highlights matching frames.Pie chartParts of a whole as a full pie, with shares inside the slices or on leader lines. The active slice pulls out. More than six parts fold into a grey "Other".Word cloudWeighted words, largest first, placed along a spiral from the centre without overlapping. Placement is deterministic, so the same words always land in the same places.
Radial
Radial chartsGaugeChart shows one value on an arc in three styles: a thermometer fill coloured by the threshold band it has reached, segmented status bands with a pointer, or a needle that sweeps to the value and settles. RadialBarChart stacks progress rings, the first outermost; below a full turn each ring is an arc labelled at its start. Hover, touch or focus either to read the value in a tooltip. For parts of a whole, use the donut chart.Radar chartCompare a few items across the same handful of measures. Every axis starts at zero and shares one scale, so use it only when the measures are comparable. Hover, touch or focus a vertex to read it; hover a legend item to pick its series out.Polar area chartA Nightingale rose: every category gets the same angle and its radius encodes the value. Suits cycles such as months or hours of the day.Stat ringA compact ring that fills towards a goal, with the share of the goal in the middle. Past the goal the ring stays full and the figure reads over 100%.Clock chartActivity by hour of the day as bars growing out from the centre of a 24-hour clock face, midnight at the top. The shape of a day reads at a glance, and the night wraps round to the morning instead of splitting across two ends of an axis. A second series sits beside the first in each hour.Spiral chartA time series wound onto a spiral, one turn per period, so the same moment in every period lines up along a spoke. Each value is a short arc shaded by value; recurring patterns show as wedges of colour. The spiral draws out from the centre.
Relationships
Sankey chartFlows between stages, with link width by value. Hover, touch or step to a node or link with the arrow keys to light its whole path, upstream and downstream, and read its flows.Network chartNodes and links in a force-directed layout. The layout is a fixed number of seeded steps, so it is the same on every render. Hover, touch or step to a node with the arrow keys to pick out its neighbours and read its group, links and weight.Chord chartFlows between groups from a square matrix. Each arc is sized by what its group sends, and each ribbon is as wide at each end as the flow that way. Hover a group to see only its chords.UpSet chartHow many sets overlap, past the three a Venn diagram can hold. Bars on top count each exact combination, the dot matrix shows which sets it joins, and bars on the left give each set's size. Hover a column to light its sets, or a set to light every combination that includes it.Venn chartTwo or three sets as circles whose areas match their sizes, with each pairwise overlap solved to the members they share. Every region carries its count; hover one to read its share.Alluvial chartHow members move between categories across ordered steps. Each step stacks its categories in the same order, and ribbons carry the members from one step's category to the next's, coloured by where they came from. Hover a category to light its ribbons.Adjacency matrix chartNodes against nodes, each cell shaded by the link between them. Order by name, by degree, or by cluster so that tightly linked groups form blocks along the diagonal.Dependency graph chartA directed graph in layers, read left to right. Cycles are broken and drawn dashed, long links route between nodes, and crossings are kept low. Hover or focus a node to trace everything upstream and downstream.Tree chartA tidy node-link tree, top-down or left to right, with parents centred over their children. Click a branch to collapse or expand it, or move through it with the keys of a tree view.Arc diagramNodes in a row with each link drawn as an arc above them. Ordered by group, a team's own arcs stay short and the links between teams stand out as the long ones. Hover, touch or step to a node to light its arcs.Hive plotTwo to four axes from the centre, one per kind of node. Each node sits on its kind's axis as far out as its value, and links curve between axes, so the same data always draws the same picture. Hover, touch or step to a node to light its links.Edge bundlingHierarchical edge bundling: the leaves of a tree sit round a circle and each link follows the tree between them, so links between the same branches gather into bundles. Hover, touch or step to a leaf to see what it links to in one colour and what links to it in another.
Maps
Geo mapA choropleth or polygon map over polygons you supply as longitude and latitude rings, with optional points on top. No map data is bundled; bring your own shapes. Use a built-in projection or pass your own function.Bubble mapProportional circles at longitude and latitude over base map shapes you supply. A circle's area is its value, and big circles draw first so small ones stay visible.Hexbin mapPoints binned into hexagons over projected map shapes, each hexagon shaded by how many points fall inside. Reads density where individual dots would pile up.CartogramRegions resized by value. A Dorling cartogram swaps each region for a circle whose area is its value, nudged apart near its centroid; a non-contiguous cartogram shrinks each region about its centroid so area tracks density.Flow mapCurved arrows between places over base map shapes you supply, as wide as their volume. Each arrow draws from origin to destination, and a flow and its return bow apart so both stay readable.
Grids and tables
Heatmap chartA grid of values shaded from low to high. Use it for two categories against one measure, such as weekday against hour. The scale is one chart colour mixed into the surface, so it follows light and dark themes. Hover, touch or arrow-key to a cell to read it.Chart tableA sortable table whose cells carry small charts: bars on one scale per column so lengths compare down it, sparklines for each row's trend, and deltas with an up or down arrow. Built on DataTable, so sorting, headers and keyboard work the same.Cohort chartA retention triangle: one row per cohort (everyone who started in the same period) with its size, and one cell per period since, shaded by the share still active. The ramp tops out at the best rate after period 0, so differences in later periods stay visible. Cells fade in along the diagonals.
KPIs and frames
Chart frameThe shell around any chart: a title, a one-line description, an optional shared legend, a CSV download, and the loading and empty states. The chart stays mounted underneath, so switching states never replays its entrance.Metric cardOne KPI with its change against the previous value and a trend sparkline. The change shows as a sign, an arrow and a status colour together, and higher_is_better flips the colours for measures like latency.SparklineA word-sized trend line for tables, stat cards and running text. No axes: it shows shape, and its accessible name gives the low, high and latest values. Hover, touch or focus it to read any point.