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
Stable charts
- Barplot
- Candlestick multilayer
- Dodged Barplot
- Dodged Barplot, second example
- Faceted Bar plots
- Heatmap
- Histogram
- Horizontal box plot
- Horizontal box plot, second example
- Live candlestick feed
- Live Coinbase feed
- Live line feed
- 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
- Normalized Barplot
- Pie Chart
- Scatter plot
- Single Line plot
- Smooth plot
- Smooth plot, second example
- Stacked Bar plot
- Stacked Bar plot, second example
- Step plot (hypnogram)
- Vertical box plot
- Vertical box plot, second example
- Vertical candle stick plot
- Violin plot
- WebMCP: a bar chart for browser AI agents
Experimental charts
- Alluvial Diagram [experimental]
- Area Overlapping [experimental]
- Bump Chart [experimental]
- Chord Diagram [experimental]
- Choropleth Map [experimental]
- Contour Plot [experimental]
- Directed Graph [experimental]
- Dot Plot [experimental]
- Dumbbell Plot [experimental]
- Error Bars [experimental]
- Error Bars, grouped [experimental]
- Forest Plot [experimental]
- Funnel Chart [experimental]
- Gantt Chart [experimental]
- Gauge [experimental]
- Hexbin Plot [experimental]
- Icicle Chart [experimental]
- Letter-Value Plot (boxen) [experimental]
- Lollipop Chart [experimental]
- Manhattan Plot [experimental]
- Mosaic Plot [experimental]
- Network Graph [experimental]
- Normalized Area [experimental]
- Parallel Coordinates [experimental]
- Percentile Band (Fan Chart) [experimental]
- Polar Area [experimental]
- Population Pyramid [experimental]
- Precision-Recall Curve [experimental]
- Radar Chart [experimental]
- Ridgeline Plot [experimental]
- ROC Curve [experimental]
- Rug Plot [experimental]
- Sankey Diagram [experimental]
- Stacked Area Chart [experimental]
- Sunburst Chart [experimental]
- Survival Curve [experimental]
- Treemap [experimental]
- Volcano Plot [experimental]
- Waterfall Chart [experimental]
- Word Cloud [experimental]
Plotly.js
Stable charts
- Bar Chart
- Box Plot
- Candlestick
- Grouped Bar
- Heatmap
- Histogram
- Line Chart
- Pie Chart
- Scatter Plot
- Stacked Bar
- Step Plot
- Subplots (2×2 Grid)
- Violin Plot
Experimental charts
- Area Chart [experimental]
- Choropleth Map [experimental]
- Contour Plot [experimental]
- Diverging Bar [experimental]
- Dot Plot [experimental]
- Error Bars [experimental]
- Funnel Chart [experimental]
- Gantt Chart [experimental]
- Gauge [experimental]
- Mosaic Plot [experimental]
- Parallel Coordinates [experimental]
- Radar Chart [experimental]
- Ridgeline Plot [experimental]
- Sankey Diagram [experimental]
- Sunburst Chart [experimental]
- Waterfall Chart [experimental]
- Word Cloud [experimental]
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
Stable charts
Experimental charts
- Area Chart [experimental]
- Dot, Lollipop, Funnel, Diverging and Waterfall [experimental]
- Flows, Hierarchies and Schedules [experimental]
- Gauges and Maps [experimental]
- Statistical and Relational Readings [experimental]
See the Google Charts Integration Guide for setup instructions and code examples for all chart types.
Chart.js
Stable charts
- Bar Chart
- Box Plot
- Boxplot Horizontal
- Candlestick
- Dodged Bar
- Heatmap (Matrix)
- Line Chart
- Pie Chart
- Scatter Plot
- Stacked Axis Panels
- Stacked Bar
Experimental charts
- Bump Chart [experimental]
- Diverging Bar [experimental]
- Dot Plot [experimental]
- Dumbbell Plot [experimental]
- Gantt Chart [experimental]
- Gauge [experimental]
- Manhattan Plot [experimental]
- Radar Chart [experimental]
- Survival Curve [experimental]
- Volcano Plot [experimental]
- Waterfall Chart [experimental]
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
Stable charts
- Bar Chart
- Line Chart
- Mixed Axis (Bar + Line)
- Multi-Line Chart
- Multi-Panel Figure
- Pie / Donut
- Scatter Plot
Experimental charts
- Area Chart [experimental]
- Bump Chart [experimental]
- Diverging Bar [experimental]
- Dot Plot [experimental]
See the Frappe Charts Integration Guide for setup instructions and code examples for all chart types.
Mermaid
Stable charts
Experimental charts
- Agent Flow [experimental]
- Architecture Diagram [experimental]
- Block Diagram [experimental]
- C4 Context Diagram [experimental]
- Class Diagram [experimental]
- Cynefin Framework [experimental]
- Entity Relationship Diagram [experimental]
- Event Model [experimental]
- Flowchart [experimental]
- Gantt Chart [experimental]
- Git Graph [experimental]
- Ishikawa Diagram [experimental]
- Kanban Board [experimental]
- Mindmap [experimental]
- Packet Diagram [experimental]
- Radar Chart [experimental]
- Railroad Diagram [experimental]
- Requirement Diagram [experimental]
- Sankey Diagram [experimental]
- Sequence Diagram [experimental]
- State Diagram [experimental]
- Swimlane Diagram [experimental]
- Timeline [experimental]
- Tree View [experimental]
- Treemap [experimental]
- Use Case Diagram [experimental]
- Venn Diagram [experimental]
- ZenUML Sequence Diagram [experimental]
One page per Mermaid diagram type, each read with Mermaid's own parser. See the Mermaid Integration Guide for setup instructions and what each diagram becomes.
uPlot
See the uPlot Integration Guide for setup instructions, series mapping, time axes and live streaming.
Graphviz
Experimental charts
- Directed Graph [experimental]
- Directed Graph with Clusters [experimental]
- Network [experimental]
- Treemap (patchwork) [experimental]
Each diagram is the SVG Graphviz drew, read with no DOT source. See the Graphviz Integration Guide for setup instructions, Quarto and what each graph becomes.
D3.js
Stable charts
- Bar Chart
- Box Plot
- Candlestick
- Dodged Bar
- Faceted Charts
- Heatmap
- Histogram
- Line Chart
- Pie Chart
- Scatter Plot
- Smooth Curve
- Stacked Bar
- Subplots
Experimental charts
See the D3.js Integration Guide for setup instructions, TypeScript types, and code examples for all chart types.
Vega-Lite
Stable charts
- Bar Chart
- Box Plot
- Box Plot (horizontal)
- Box Plots side by side (hconcat)
- Dodged Bar
- Faceted Bar Chart
- Heatmap
- Histogram
- Line Chart
- Normalized Bar
- Pie Chart
- Scatter Plot
- Stacked Bar
Experimental charts
- Bump Chart [experimental]
- Choropleth Map [experimental]
- Diverging Bar [experimental]
- Dumbbell Plot [experimental]
- Error Bars [experimental]
- Gantt Chart [experimental]
- Parallel Coordinates [experimental]
- Ridgeline Plot [experimental]
See the Vega-Lite Integration Guide for setup instructions and code examples for all chart types.
amCharts 5
Stable charts
Experimental charts
- Area Chart [experimental]
- Bump Chart [experimental]
- Choropleth Map [experimental]
- Declared Traces (no SVG scraping) [experimental]
- Floating-Column Charts [experimental]
- Flow and Network [experimental]
- Funnel Chart [experimental]
- Gauge [experimental]
- Pyramid, Dot Plot and Lollipop [experimental]
- Radar Chart [experimental]
- Treemap [experimental]
- Word Cloud [experimental]
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.
MUI X Charts
See the MUI X Charts Integration Guide for setup instructions, TypeScript types, and code examples for all chart types.
Nivo
See the Nivo Integration Guide for setup instructions, TypeScript types, and code examples for all chart types.
AnyChart
Stable charts
- Bar Chart
- Bar Chart (bound with bindAnyChart)
- Box Plot
- Candlestick
- Heatmap
- Line Chart
- Multi-Panel Figure
- Pie Chart
- Scatter Plot
Experimental charts
- Area Chart [experimental]
- Choropleth Map [experimental]
- Diverging Bar [experimental]
- Dot Plot [experimental]
- Dumbbell Plot [experimental]
- Funnel Chart [experimental]
- Gantt Chart [experimental]
- Lollipop Chart [experimental]
- Mosaic Plot [experimental]
- Radar Chart [experimental]
- Sankey Diagram [experimental]
- Waterfall Chart [experimental]
- Word Cloud [experimental]
See the AnyChart Integration Guide for setup instructions and code examples for all chart types.
Highcharts
Stable charts
- Bar Chart
- Bellcurve
- Box Plot
- Candlestick
- Dodged Bar
- Heatmap
- Histogram
- Line Chart
- Multi-Pane Chart (Price + Volume)
- Normalized Bar
- Pareto
- Pie Chart
- Scatter Plot
- Small Multiples (2×2 Grid)
- Stacked Bar
- Timeline
Experimental charts
- Area Chart [experimental]
- Bump Chart [experimental]
- Chord Diagram [experimental]
- Choropleth Map [experimental]
- Diverging Bar [experimental]
- Dot Plot [experimental]
- Dumbbell Plot [experimental]
- Error Bars [experimental]
- Forest Plot [experimental]
- Funnel Chart [experimental]
- Gantt Chart [experimental]
- Gauge [experimental]
- Hexbin Plot [experimental]
- Lollipop Chart [experimental]
- Manhattan Plot [experimental]
- Network Graph [experimental]
- Parallel Coordinates [experimental]
- Radar Chart [experimental]
- Sankey Diagram [experimental]
- Sunburst Chart [experimental]
- Survival Curve [experimental]
- Treemap [experimental]
- Variwide [experimental]
- Volcano Plot [experimental]
- Waterfall Chart [experimental]
- Word Cloud [experimental]
See the Highcharts Integration Guide for setup instructions and code examples for all chart types.
ApexCharts
Stable charts
- 100% Stacked Bar Chart
- Bar Chart
- Box Plot
- Bubble Chart
- Candlestick
- Donut Chart
- Grouped Bar
- Heatmap
- Horizontal Bar Chart
- Horizontal Box Plot
- Line Chart
- Mixed (Column + Line)
- Multi-Line Chart
- Pie Chart
- Scatter Plot
- Stacked Bar
- Step Plot
Experimental charts
- Area Chart [experimental]
- Funnel Chart [experimental]
- Gantt Chart [experimental]
- Gauge [experimental]
- Polar Area Chart [experimental]
- Radar Chart [experimental]
- Stacked Area Chart [experimental]
- Treemap [experimental]
See the ApexCharts Integration Guide for setup instructions and code examples for all chart types.
TradingView Lightweight Charts
See the Lightweight Charts Integration Guide for setup instructions, live streaming, and code examples.
Tableau
See the Tableau Integration Guide for setup instructions and configuration options.
Power BI
See the Power BI Integration Guide for the custom visual setup, chart and companion modes, and cross-highlighting.
Excel
See the Excel Integration Guide for the add-in task pane, the chart types it reads, and its limitations.
PowerPoint and Word
See the PowerPoint and Word Integration Guide for the add-in task pane, how a presentation or a document is read, and its limitations.