72 live components

The full chart gallery

Every chart below is rendered live by WireCharts, grouped by family. Hover, zoom, replay — then copy the one-line tag.

Reactive with Livewire

Change server-side data and watch the chart update instantly — no JavaScript.

Updates live via Livewire — no page reload.

Basics

Free

The free, open-source core. Available to everyone.

Line chart Free
<chart:line />
Area chart Free
<chart:area />
Column chart Free
<chart:column />
Bar chart Free
<chart:bar />
Pie chart Free
<chart:pie />
Scatter chart Free
<chart:scatter />

Line charts

Pro

Advanced variations on the line chart.

Spline with symbols Pro
<chart:spline />
Spline with inverted axes Pro
<chart:spline-inverted />
Line with end labels Pro
<chart:line-labels />
Logarithmic axis Pro
<chart:line-log />
Line race Pro
<chart:line-race />
Entrance animation Pro
<chart:line-animated />
Forecast Pro
<chart:line-forecast />
Annotations Pro
<chart:line-annotated />
Large datasets Pro
<chart:line-boost />
Time series Pro
<chart:line-time />
Spline (irregular time) Pro
<chart:spline-time />
Plot bands Pro
<chart:spline-bands />

Area charts

Pro

Filled-area variations — stacked, range, streamgraph and more.

Gradient area Pro
<chart:area-gradient />
Stacked area Pro
<chart:area-stacked />
Percentage area Pro
<chart:area-percent />
Area spline Pro
<chart:areaspline />
Inverted area Pro
<chart:area-inverted />
Negative values Pro
<chart:area-negative />
Missing points Pro
<chart:area-missing />
Area range Pro
<chart:area-range />
Range with line Pro
<chart:area-range-line />
Fan chart Pro
<chart:area-fan />
Area race Pro
<chart:area-race />
Streamgraph Pro
<chart:streamgraph />
Stacked &amp; inverted Pro
<chart:area-stacked-inverted />

Column & bar

Pro

Vertical and horizontal bar variations — stacked, range, histogram and more.

Stacked column Pro
<chart:column-stacked />
Stacked bar Pro
<chart:bar-stacked />
Percentage column Pro
<chart:column-percent />
Percentage bar Pro
<chart:bar-percent />
Negative columns Pro
<chart:column-negative />
Rotated labels Pro
<chart:column-rotated />
Column range Pro
<chart:column-range />
Bar range Pro
<chart:bar-range />
Histogram Pro
<chart:histogram />
Lollipop Pro
<chart:lollipop />
Pareto Pro
<chart:pareto />

Combinations

Pro

Mix chart types in one figure — line + column and multiple axes.

Line &amp; column Pro
<chart:combo-line-column />
Dual axes Pro
<chart:combo-dual-axis />
Multiple axes Pro
<chart:combo-multi-axis />

Scatter & bubble

Pro

Point clouds and bubbles — regression, symbols and packed bubbles.

Regression line Pro
<chart:scatter-regression />
Multi-symbol scatter Pro
<chart:scatter-symbols />
Packed bubble Pro
<chart:packed-bubble />

Pie charts

Pro

Pie variations — semi-circle, labelled, monochrome, gradient and rose.

Semi-circle Pro
<chart:pie-semi />
External labels Pro
<chart:pie-labels />
Monochrome Pro
<chart:pie-monochrome />
Gradient Pro
<chart:pie-gradient />
Variable radius Pro
<chart:pie-variable />
Nightingale rose Pro
<chart:pie-rose />

Pie & funnel

Pro

Part-to-whole variations beyond the basics.

Donut chart Pro
<chart:donut />
Funnel chart Pro
<chart:funnel />

Gauges

Pro

Single-value indicators with needle or progress styles.

Gauge chart Pro
<chart:gauge />
Clock Pro
<chart:clock />

Distribution

Pro

Statistical and density charts.

Bubble chart Pro
<chart:bubble />
Heatmap Pro
<chart:heatmap />
Candlestick Pro
<chart:candlestick />
Box plot Pro
<chart:boxplot />
Radar chart Pro
<chart:radar />

Trees & network

Pro

Hierarchies and relationships.

Tree Pro
<chart:tree />
Treemap Pro
<chart:treemap />
Sunburst Pro
<chart:sunburst />
Sankey Pro
<chart:sankey />
Network graph Pro
<chart:graph />

3D

Pro

GPU-accelerated 3D charts. Enable with WIRECHARTS_GL=true.

3D bar chart Pro
<chart:bar3d />
3D scatter Pro
<chart:scatter3d />
3D surface Pro
<chart:surface />

Accessibility

Pro

Charts you can hear as well as see.

Audio chart Pro
<chart:audio />

Like what you see?

Read the docs, then ship your first chart this afternoon.