# Chart gallery
Fourteen full-size charts, one per family, each with its own data and the switches that family usually needs: bars, lines, areas, pies and sunbursts, scatter and bubble, combinations, histograms and box plots, heat maps and calendars, radar and radial, tree maps, sankey and chord, waterfall and funnel, gauges and bullets, and an annotated chart. Every one is a `ChartSpec` handed to `SvChart`, and every one flips to a grid: the Chart | Grid switch on each demo shows the rows the chart was drawn from, through `chartSpecToTable` (one row per category with a column per series, per point for a scatter, per link for a sankey, per leaf for a tree map, in the chart's number format) and a sortable `SvGrid`. The Code tab on each card is the demo itself, its script and markup, with only the demo page's layout styles left out; the smaller runnables between them isolate one idea each.
The examples on this page import from `@svgrid/grid`:
```svelte
```
Each family below names the spec fields it turns on. The [chart types](https://svgrid.com/docs/help/charts/types/) page explains every type in prose with a small runnable each; the [API reference](https://svgrid.com/docs/help/charts/api/) lists every field.
## Bars
`stacked`, `stacked100` and `orientation` are three spec fields, so one chart is grouped, stacked, normalised or horizontal by changing three words. `categoryGroups` puts a year over its quarters as a second axis tier, `referenceLines` draws the plan as a pill on the value axis, `dataLabels` step aside when the bars get narrow, and negative bars hang from the zero line with `colors` naming the sign.
> Live demo: Bar charts - https://svgrid.com/demos/438-chart-bar/
```svelte
{#if view === 'chart'}
{:else}
{/if}
{#if view === 'chart'}
{:else}
{/if}
```
```svelte
```
## Lines
`xType: 'time'` spaces points by date. `smooth`, `step` and `marker` are per series; NaN in the values is a gap, `connectNulls` bridges it; a forecast is its own dashed series that meets the actuals at a reference line; `seriesLabels` names each line at its end.
> Live demo: Line charts - https://svgrid.com/demos/439-chart-line/
```svelte
{#if view === 'chart'}
{:else}
{/if}
```
## Areas
`stacked` piles the series, `stackOffset: 'wiggle'` or `'silhouette'` turns the pile into a stream, `stacked100` normalises to a share, `stack` groups two piles on one chart, `gradient` fades the fills. A `range-area` draws the band between `lowValues` and `values`.
> Live demo: Area charts - https://svgrid.com/demos/440-chart-area/
```svelte
{#if view === 'chart'}
{:else}
{/if}
{#if view === 'chart'}
{:else}
{/if}
```
## Pie, donut and sunburst
`innerRadius` makes the donut, `dataLabels: { placement: 'outside' }` draws callout labels, `topN` on `rowsToChartSpec` folds the tail into Other, and a sunburst takes the same shares as a tree (`specToTreemap`) and drills down on click.
> Live demo: Pie, donut and sunburst - https://svgrid.com/demos/441-chart-pie-donut/
```svelte
{#if view === 'chart'}
{:else}
{/if}
{#if view === 'chart'}
{:else}
{/if}
{pickedName ? `${pickedName} selected` : 'Click a slice to filter'}
```
## Scatter and bubble
`points: [{ x, y, r, label }]` per series, `r` for the bubble radius. `overlay` fits a regression of y on x per series (`linear`, `poly:N`, `exp`, `log`, `power`) and draws it as a curve across the plot, with the equation and R-squared in the tooltip. Reference lines on both axes make quadrants; `xAxis.scale: 'log'` handles a wide spend range.
> Live demo: Scatter and bubble charts - https://svgrid.com/demos/442-chart-scatter-bubble/
```svelte
{#if view === 'chart'}
{:else}
{/if}
{pickedName ? `${pickedName} selected` : `${rows.length} products; click a point`}
```
```svelte
```
## Combination
`type` per series mixes bars, a line and an area in one chart; `axis: 'right'` moves a series to `y2Axis` with its own format and domain; reference lines with `axis: 'right'` are drawn against it; a `dataLabels` formatter labels one series only.
> Live demo: Combination charts - https://svgrid.com/demos/443-chart-combo/
```svelte
{#if view === 'chart'}
{:else}
{/if}
```
## Histograms and box plots
`rowsToHistogramSpec` bins a sample by count, width or rule with every series sharing the edges; `rowsToBoxSpec` draws the five-number summary per category and series with `whisker` as the IQR rule and outliers as dots.
> Live demo: Histograms and box plots - https://svgrid.com/demos/444-chart-distribution/
```svelte
{#if view === 'chart'}
{:else}
{/if}
{#if view === 'chart'}
{:else}
{/if}
```
## Heat maps and calendars
A heat map's `categories` are the columns and each series a row; `colorScale` is `'sequential'`, `'diverging'` or your own stops. A calendar takes `calendarValues` as `{ date, value }` pairs with `calendarStart` and `calendarEnd` pinning the range.
> Live demo: Heat maps and calendars - https://svgrid.com/demos/445-chart-heatmap-calendar/
```svelte
```
## Radar and radial
The polar family takes the bar chart's data shape: a radar with one axis per category and a polygon per series (pin the axis with `yAxis.min` / `max`), stacked `radial-column`, `nightingale` and `radial-bar`.
> Live demo: Radar and radial charts - https://svgrid.com/demos/446-chart-radar-radial/
```svelte
{#each products as p (p.label)}
{/each}
{#if view === 'chart'}
{:else}
{/if}
{#if view === 'chart'}
{:else}
{/if}
```
## Tree maps and sunbursts
`treemap` and `tree` take a `TreeNode` hierarchy with `value` on the leaves and `color` where you say so, which is how a market map colours by the day's move; `drillable` and `bind:drillPath` zoom a sunburst into the ring you click.
> Live demo: Tree maps and sunbursts - https://svgrid.com/demos/447-chart-hierarchy/
```svelte
{#if view === 'chart'}
{:else}
{/if}
{#if view === 'chart'}
{:else}
{/if}
```
## Sankey and chord
`sankeyNodes` and `sankeyLinks` with `source`, `target` and `value`: a sankey places the nodes in columns by depth and draws each link as a ribbon; a chord puts the same nodes on a circle for flows that run both ways.
> Live demo: Sankey and chord diagrams - https://svgrid.com/demos/448-chart-flow/
```svelte
{#if view === 'chart'}
{:else}
{/if}
{#if view === 'chart'}
{:else}
{/if}
```
## Waterfall, funnel and pareto
`waterfallTotals` marks the subtotals and `waterfallColors` names the colours; a funnel carries conversion and drop-off in its tooltip and takes `funnelShape`; `paretoSpec` sorts a bar spec and adds the cumulative line.
> Live demo: Waterfall, funnel and pareto - https://svgrid.com/demos/449-chart-waterfall-funnel/
```svelte
{#if view === 'chart'}
{:else}
{/if}
{#if view === 'chart'}
{:else}
{/if}
{#if view === 'chart'}
{:else}
{/if}
```
## Gauges and bullets
A gauge is `gaugeValue` between `gaugeMin` and `gaugeMax` with `gaugeRanges`, `gaugeTarget` and `gaugeUnit`; `animate` sweeps the needle. A bullet chart is one row per category with `targets` and `bulletRanges`.
> Live demo: Gauges and bullet charts - https://svgrid.com/demos/450-chart-gauge-bullet/
```svelte
{#each gauges as g (g.title)}
{#if view === 'chart'}
{:else}
{/if}
{/each}
{#if view === 'chart'}
{:else}
{/if}
```
```svelte
```
## Annotations and reference marks
`annotations` pin a flag, pin, dot or square to a data point with a tooltip text; `referenceBands` and `referenceLines` mark ranges and values on either axis; `drawings` are the analyst's marks as data; `annotatable` and `drawable` hand the reader the tools; `tooltipSticky` pins the tooltip on a click.
> Live demo: Annotations, reference marks and notes - https://svgrid.com/demos/451-chart-annotations/
```svelte
{#if notes.length}
{/if}
```
## See also
- [Chart types](https://svgrid.com/docs/help/charts/types/)
- [Axes, scales and styling](https://svgrid.com/docs/help/charts/axes-and-styling/)
- [Interaction](https://svgrid.com/docs/help/charts/interaction/)
- [API reference](https://svgrid.com/docs/help/charts/api/)
---
SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/charts/gallery/ . All docs: https://svgrid.com/llms.txt