Documentation

Build charts with a single tag

WireCharts gives you a namespaced Blade component for every chart type. The Basics are free and open source; the rest unlock with a Pro license.

Installation

Require the package via Composer:

bash 
composer require wirecharts/wirecharts

Then add the scripts directive before the closing body tag in your layout:

blade 
@wirechartsScripts

Quick start

Drop a chart anywhere in a Blade view:

blade 
<x-chart::line
    :series="[['name' => 'Revenue', 'data' => [120, 180, 150, 260]]]"
    :categories="['Jan', 'Feb', 'Mar', 'Apr']"
    smooth
/>

Activating Pro

After purchasing, activate your license key to unlock every Pro component:

bash 
php artisan wirecharts:activate YOUR-LICENSE-KEY

Common props

Every chart accepts these in addition to its own props.

Prop Type Default Description
height int|string 320 Chart height in pixels, or any CSS length.
theme string auto auto, light or dark. "auto" follows your dark mode.
model string null A Livewire property to live-bind the series to.
class string — Any classes are merged onto the chart container.

All components

Line charts

Pro
Spline with symbols
A smooth line where each series is marked with a distinct point symbol — circle, square, triangle, diamond and more.
Spline with inverted axes
A smooth line with the category axis running vertically — ideal for profiles such as temperature by altitude.
Line with end labels
Labels each series at the end of its line instead of using a legend.
Logarithmic axis
A line chart with a logarithmic y-axis for values spanning several orders of magnitude.
Line race
An animated line race that reveals each series progressively, with a replay control.
Entrance animation
A line chart with a custom entrance animation — configurable easing and a staggered per-point delay.
Forecast
Draws actual values solid and forecast values as a dashed line over a shaded region.
Annotations
Labelled annotation pins on chosen points, plus an optional average reference line.
Large datasets
Tuned for very large datasets with LTTB downsampling and zoom/pan controls.
Time series
A line over a datetime axis. Data points are [date, value] pairs, with zoom/pan.
Spline (irregular time)
A smooth spline over an irregular datetime axis with visible measurement points.
Plot bands
A spline with coloured horizontal plot bands marking value zones.

Area charts

Pro
Gradient area
A smooth area chart where each series fades from its colour to transparent. Optionally stacked.
Stacked area
Filled series stacked on top of one another to show cumulative totals and composition.
Percentage area
A 100% stacked area chart showing each series as a percentage of the total.
Area spline
A smooth area chart with semi-transparent overlapping fills.
Inverted area
A filled area chart with the category axis running vertically.
Negative values
An area chart whose line and fill are coloured differently above and below zero.
Missing points
Handles null values — leaving a gap, or bridging it with connectNulls.
Area range
A filled band between a low and high value per category (e.g. min/max ranges).
Range with line
A low/high band with a line (e.g. the average) drawn on top.
Fan chart
A central line surrounded by nested confidence bands — ideal for forecasts with uncertainty.
Area race
An animated area race that reveals each filled series progressively, with a replay control.
Streamgraph
A flowing stacked area displaced around a central baseline (themeRiver).
Stacked &amp; inverted
A stacked area chart with inverted axes (category axis vertical).

Column & bar

Pro
Stacked column
Vertical bars stacked to show cumulative totals and composition.
Stacked bar
Horizontal bars stacked to show cumulative totals.
Percentage column
A 100% stacked column chart showing each series as a percentage of the total.
Percentage bar
A 100% stacked horizontal bar chart.
Negative columns
Columns coloured differently for positive and negative values.
Rotated labels
A column chart with rotated category labels — handy for many or long labels.
Column range
Floating vertical bars from a low to a high value per category.
Bar range
Floating horizontal bars from a low to a high value.
Histogram
Bins a flat list of numeric values into frequency columns.
Lollipop
A thin stick topped with a circular marker for each value.
Pareto
Columns sorted descending with a cumulative percentage line on a second axis.