MAIDR Examples

Click on one of the examples below to see a demonstration

React

• React Examples (Bar, Line, Smooth, D3 Bar, D3 Scatter)

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

• Barplot
• Candlestick multilayer
• Dodged Barplot
• Faceted Bar plots
• Heatmap
• Histogram
• Horizontal box plot
• Single Line plot
• Multi line plot
• Multi layered plot
• Multi panel plot
• Scatter plot
• Smooth plot
• Stacked Bar plot
• Vertical box plot
• Vertical candle stick plot
• Violin plot

Plotly.js

• Bar Chart
• Scatter Plot
• Line Chart
• Box Plot
• Heatmap
• Histogram
• Candlestick
• Grouped Bar
• Stacked Bar

See the Plotly.js Integration Guide for setup instructions and code examples for all chart types.

Recharts

• Recharts Examples (Bar, Line, Scatter, Stacked, Histogram)

See the Recharts Integration Guide for setup instructions, TypeScript types, and code examples for all chart types.

Google Charts

• Google Charts Examples (Bar, Line, Scatter, Stacked, Dodged, Candlestick)

See the Google Charts Integration Guide for setup instructions and code examples for all chart types.

D3.js

• Bar Chart
• Line Chart
• Scatter Plot
• Box Plot
• Heatmap
• Histogram
• Candlestick
• Stacked Bar
• Dodged Bar
• Smooth Curve

See the D3.js Integration Guide for setup instructions, TypeScript types, and code examples for all chart types.

Vega-Lite

• Bar Chart
• Stacked Bar
• Dodged Bar
• Normalized Bar
• Histogram
• Line Chart
• Scatter Plot
• Heatmap
• Box Plot

See the Vega-Lite Integration Guide for setup instructions and code examples for all chart types.