QuickChart QuickChart

Chart Gallery

Each chart shown below is a QuickChart image built with a Chart.js config. These images can be sent in emails or embedded in any platform.

Click an image below to view and edit the chart config. These examples will help you get started with QuickChart and Chart.js. Need help? View documentation or get in touch.

Chart types
Scales
Customization

Bar charts

Hide section
Vertical
Horizontal
Multi axis
Stacked
Stacked groups
Floating
Rounded Corners
Hide axes, gridlines, and labels
Combo bar/line
Custom colors
Complex mixed
Total labels
Horizontal bars with labels

Line charts

Hide section
Basic
Multi axis
Stepped
Line styles
Point styles - circle
Point styles - triangle
Point styles - star
Point sizes
Sparkline
Hide axes, gridlines, and labels + gradient
Scatter point (x,y) line chart
Exponential Smoothing
Styled line segment

Area charts

Hide section
Boundaries (line) - no fill
Boundaries (line) - fill origin
Boundaries (line) - fill start
Boundaries (line) - fill end
Fill below value (Chart.js v2)
Fill to value (Chart.js v3)
Stacked (line)
Radar
Quadrants

Other charts

Hide section
Bubble
Scatter
Doughnut
Doughnut with labels
Complex doughnut
Simple doughnut
Pie
Labeled pie
Polar area
Radar
QR Codes
GraphViz Charts
Gauge charts
Radial gauge
Speedometer
Progress bar
Annotated progress bar
Annotated progress bar 2
Annotated progress bar 3
Waterfall
Sankey Diagram
Marginal Abatement Cost Curve (MACC)
Funnel chart/Pyramid chart

Linear scale

Hide section
Step size
Min & max (suggested)

Logarithmic scale

Hide section
Line
Scatter

Time scale

Hide section
Line
Line (point data)
Combo
Gantt/timeline
Financial (Candlestick)
Financial (OHLC)

Scale options

Hide section
Grid lines spacing
Grid lines style
Custom axis labels
Formatted numbers
Multiline labels
Vertical axis labels
Filtering labels
Non numeric Y axis
Label styles
Scale position

Legend

Hide section
Positioning - top
Positioning - right
Positioning - bottom
Positioning - left
Point style

Title

Hide section
Alignment - position top align center
Alignment - position left align center

Labels and Annotations

Hide section
Labels inside
Labels outside
Custom font size
Error bars
Annotations & data labels
Annotations & data labels (Chart.js v3)
Tick mark formatting

Patterns and Images

Hide section
Patterns - Bar
Patterns - Pie
Gradient fill - horizontal
Gradient fill - vertical
Gradient line
Background image
Image in the middle
Image fill
Point images
Labels with images
Pie Chart with Images

External data

Hide section
From Google Sheets
From Airtable

Some examples above are based on examples from the Chart.js project.