MAIDR Examples
Click on one of the examples below to see a demonstration
React
See the React Integration Guide for setup instructions, TypeScript types, and code examples for all plot types. The D3 examples show how to use the D3 adapter with the <MaidrD3> wrapper.
HTML / Vanilla JS
- Alluvial Diagram
- Area Overlapping
- Barplot
- Bump Chart
- Candlestick multilayer
- Chord Diagram
- Choropleth Map
- Contour Plot
- Dodged Barplot
- Dodged Barplot, second example
- Dot Plot
- Dumbbell Plot
- Error Bars
- Error Bars, grouped
- Faceted Bar plots
- Forest Plot
- Funnel Chart
- Gantt Chart
- Gauge
- Heatmap
- Hexbin Plot
- Histogram
- Horizontal box plot
- Horizontal box plot, second example
- Icicle Chart
- Letter-Value Plot (boxen)
- Live candlestick feed
- Live Coinbase feed
- Live line feed
- Lollipop Chart
- Manhattan Plot
- Mosaic Plot
- Multi layered plot
- Multi line plot
- Multi line plot with intersecting lines
- Multi line plot, second example
- Multi panel plot
- Multi panel plot, second example
- Network Graph
- Normalized Area
- Normalized Barplot
- Parallel Coordinates
- Pie Chart
- Polar Area
- Population Pyramid
- Radar Chart
- Ridgeline Plot
- Sankey Diagram
- Scatter plot
- Single Line plot
- Smooth plot
- Smooth plot, second example
- Stacked Area Chart
- Stacked Bar plot
- Stacked Bar plot, second example
- Step plot (hypnogram)
- Sunburst Chart
- Survival Curve
- Treemap
- Vertical box plot
- Vertical box plot, second example
- Vertical candle stick plot
- Violin plot
- Volcano Plot
- Waterfall Chart
- Word Cloud
Plotly.js
- Area Chart
- Bar Chart
- Box Plot
- Candlestick
- Choropleth Map
- Contour Plot
- Diverging Bar
- Dot Plot
- Error Bars
- Funnel Chart
- Gantt Chart
- Gauge
- Grouped Bar
- Heatmap
- Histogram
- Line Chart
- Mosaic Plot
- Parallel Coordinates
- Pie Chart
- Radar Chart
- Ridgeline Plot
- Sankey Diagram
- Scatter Plot
- Stacked Bar
- Step Plot
- Subplots (2×2 Grid)
- Sunburst Chart
- Violin Plot
- Waterfall Chart
- Word Cloud
See the Plotly.js Integration Guide for setup instructions and code examples for all chart types.
Recharts
See the Recharts Integration Guide for setup instructions, TypeScript types, and code examples for all chart types.
Google Charts
- Area Chart
- Dot, Lollipop, Funnel, Diverging and Waterfall
- Flows, Hierarchies and Schedules
- Gauges and Maps
- Google Charts Examples (Bar, Line, Scatter, Stacked, Dodged, Candlestick)
- Pie Chart
- Statistical and Relational Readings
See the Google Charts Integration Guide for setup instructions and code examples for all chart types.
Chart.js
- Bar Chart
- Box Plot
- Boxplot Horizontal
- Bump Chart
- Candlestick
- Diverging Bar
- Dodged Bar
- Dot Plot
- Dumbbell Plot
- Gantt Chart
- Gauge
- Heatmap (Matrix)
- Line Chart
- Manhattan Plot
- Pie Chart
- Radar Chart
- Scatter Plot
- Stacked Axis Panels
- Stacked Bar
- Survival Curve
- Volcano Plot
- Waterfall Chart
See the Chart.js Integration Guide for setup instructions and code examples for all chart types.
Observable Plot & Quarto
- Plain page — bar, scatter, stacked bar, and a chart redrawn on demand
- Quarto OJS cells (bar, scatter, line, histogram, facets)
The two differ only in how the scripts reach the page — the adapter is the same and neither asks you to change the code that draws the chart. See the Observable Plot & Quarto Integration Guide for both, including the Quarto extension.
Frappe Charts
- Area Chart
- Bar Chart
- Bump Chart
- Diverging Bar
- Dot Plot
- Line Chart
- Mixed Axis (Bar + Line)
- Multi-Line Chart
- Multi-Panel Figure
- Pie / Donut
- Scatter Plot
See the Frappe Charts Integration Guide for setup instructions and code examples for all chart types.
D3.js
- Area Chart
- Bar Chart
- Box Plot
- Candlestick
- Choropleth Map
- Dodged Bar
- Faceted Charts
- Funnel Chart
- Heatmap
- Histogram
- Line Chart
- Pie Chart
- Scatter Plot
- Smooth Curve
- Stacked Bar
- Subplots
See the D3.js Integration Guide for setup instructions, TypeScript types, and code examples for all chart types.
Vega-Lite
- Bar Chart
- Box Plot
- Box Plot (horizontal)
- Box Plots side by side (hconcat)
- Bump Chart
- Choropleth Map
- Diverging Bar
- Dodged Bar
- Dumbbell Plot
- Error Bars
- Faceted Bar Chart
- Gantt Chart
- Heatmap
- Histogram
- Line Chart
- Normalized Bar
- Parallel Coordinates
- Pie Chart
- Ridgeline Plot
- Scatter Plot
- Stacked Bar
See the Vega-Lite Integration Guide for setup instructions and code examples for all chart types.
amCharts 5
- amCharts 5 Examples (Bar, Dodged, Stacked, Normalized, Line, Histogram, Heatmap)
- Area Chart
- Bump Chart
- Choropleth Map
- Declared Traces (no SVG scraping)
- Floating-Column Charts
- Flow and Network
- Funnel Chart
- Gauge
- Pie Chart
- Pyramid, Dot Plot and Lollipop
- Radar Chart
- Treemap
- Word Cloud
See the amCharts 5 Integration Guide for setup instructions and code examples for all chart types.
Victory
See the Victory Integration Guide for setup instructions, TypeScript types, and code examples for all chart types.
AnyChart
- Area Chart
- Bar Chart
- Bar Chart (bound with bindAnyChart)
- Box Plot
- Candlestick
- Choropleth Map
- Diverging Bar
- Dot Plot
- Dumbbell Plot
- Funnel Chart
- Gantt Chart
- Heatmap
- Line Chart
- Lollipop Chart
- Mosaic Plot
- Multi-Panel Figure
- Pie Chart
- Radar Chart
- Sankey Diagram
- Scatter Plot
- Waterfall Chart
- Word Cloud
See the AnyChart Integration Guide for setup instructions and code examples for all chart types.
Highcharts
- Area Chart
- Bar Chart
- Bellcurve
- Box Plot
- Bump Chart
- Candlestick
- Chord Diagram
- Choropleth Map
- Diverging Bar
- Dodged Bar
- Dot Plot
- Dumbbell Plot
- Error Bars
- Forest Plot
- Funnel Chart
- Gantt Chart
- Gauge
- Heatmap
- Hexbin Plot
- Histogram
- Line Chart
- Lollipop Chart
- Manhattan Plot
- Multi-Pane Chart (Price + Volume)
- Network Graph
- Normalized Bar
- Parallel Coordinates
- Pareto
- Pie Chart
- Radar Chart
- Sankey Diagram
- Scatter Plot
- Small Multiples (2×2 Grid)
- Stacked Bar
- Sunburst Chart
- Survival Curve
- Timeline
- Treemap
- Variwide
- Volcano Plot
- Waterfall Chart
- Word Cloud
See the Highcharts Integration Guide for setup instructions and code examples for all chart types.
Tableau
See the Tableau Integration Guide for setup instructions and configuration options.