Chart reference

Every chart you can add to a dashboard, grouped the way the widget library groups them. Each page shows an example you can open as a live chart, the data the chart needs, and every option it has. For the styling every chart shares, see Chart styling.

Time series#

Line chartTime series over any fieldArea chartStacked or overlaid areaSparklineTiny inline trendStacked areaSeries stacked over timeStream graphCentered stacked areaStep lineDiscrete jumps over time

Comparison#

Bar chartHorizontal categorical barsColumn chartVertical categorical barsGrouped barSide-by-side bars per seriesStacked barComposition per category100% stacked barComposition as percentageLollipopBars with circle endpointsDot plotDiscrete category dotsBullet chartSingle value with target bands

Distribution#

Scatter plotTwo measures on x/yHistogramDistribution of one measureBox plotQuartiles with whiskersViolinDensity per categoryBeeswarmNon-overlapping dot plotDensityKernel-smoothed distributionRidgelineStacked distributionsStrip plotEach value as a tickJitter plotScattered dots per category

Part-of-whole#

Pie chartCategorical shareDonut chartPie with center labelTreemapNested rectangles by valueSunburstHierarchical radial wedgesNightingaleRadial polar pieRadial barPolar bar chartMosaicMarimekko tiled cellsWaffle100-unit grid shareFunnelConversion stage flowPyramidInverted funnel

Radial#

Radar chartMulti-axis comparisonPolar chartRadial categoricalCircular barBars around a circle

Matrix#

Heatmap matrixX/Y categorical heatCalendar heatmapGitHub-style year gridPunchcardDot intensity gridHeatmapColor-coded gridCorrelationField-by-field correlation

Single value#

GaugeNeedle on a band scaleMeterBar against a targetProgressBar / ring percentage

Flow & network#

SankeyFlows between nodesChord diagramCross-category linksAlluvialMulti-stage flowNetwork graphForce-directed nodes + edgesArc diagramLinear node arcs

Financial#

CandlestickOHLC price candlesOHLCOpen-High-Low-Close barsVolume profileVolume traded per priceWaterfallWalk from a start to an end amount, step by step (P&L, net-worth change)

Advanced#

Layered chartOverlaid marks on a shared x axis

Numbers and tables#

KPISingle headline metric with delta/sparklineTableSortable, filterable data grid

Correlation#

Bubble chartScatter sized by a fieldHexbinBinned 2D densityContour2D density contoursParallel coordinatesMulti-dimensional comparison