Wirecharts
Blog
Wirecharts
Wirecharts · · 5 min read

WireCharts 1.2.2: the Line family grows up

There's something comforting about a line chart. It's the first chart most of us ever drew — a few points, a line connecting them, a story about how something changed over time. Simple, honest, familiar.

WireCharts 1.2.2: the Line family grows up

But real data is rarely that tidy. Sometimes your values span six orders of magnitude. Sometimes half your line is measured and the other half is a guess. Sometimes the most interesting thing is the moment something crossed a threshold, and you want to point at it.

WireCharts 1.2.2 is a love letter to those messier, realer line charts. It's eleven new members of the Line family — each one tuned for a specific shape of data you actually have. Same single-tag simplicity, same Livewire reactivity, just more ways to tell the truth about your numbers.

Let's take a few of them for a walk.

Why eleven of them?

You could build all of these with options and flags on a single <chart:line>. We tried. It turns into a config soup where nobody remembers whether it's logarithmic: true or axis="log", and every chart becomes a guessing game.

So instead, each variant is its own little component with a name that says exactly what it does. You reach for the one that matches your data, and it arrives already knowing how to behave. Less to configure, less to remember, more "oh, that's the one I want."

As always, the data lives in plain PHP on your Livewire component, and the chart updates when the data does. Don't forget the scripts directive once per page:

@wirechartsScripts

A tour of the highlights

When part of your line is a guess — <chart:line-forecast>

This is the one we've wanted for years. Actual values draw solid; forecast values draw as a dashed line over a softly shaded region — so nobody mistakes your projection for measured fact.

<chart:line-forecast
    :actual="$revenueSoFar"
    :forecast="$revenueProjection"
    color="orange"
/>

public array $revenueSoFar      = [/* Jan–Sep, measured */];
public array $revenueProjection = [/* Oct–Dec, projected */];

Honest charts make for honest conversations. Your CFO will know exactly where the facts end and the hopes begin.

When values span the universe — <chart:line-log>

Plotting something that goes from 3 to 3,000,000 on a linear axis flattens everything interesting into the floor. A logarithmic y-axis gives every order of magnitude room to breathe.

<chart:line-log :series="$signups" />

One tag, and your hockey-stick growth is readable again — early days and explosive months on the same honest scale.

When time is the whole point — <chart:line-time>

Real time series don't arrive on neat monthly boundaries. line-time plots against a proper datetime axis and lets you zoom and pan through the history.

<chart:line-time :series="$apiLatency" zoomable />

public array $apiLatency = [
    ['t' => '2026-06-26T09:00:00', 'value' => 142],
    ['t' => '2026-06-26T09:01:30', 'value' => 138],
    ['t' => '2026-06-26T09:03:10', 'value' => 401],
];

Irregular timestamps, no problem. Want it smooth instead of angular? Its cousin <chart:spline-time> keeps the visible measurement points but draws a gentle curve between them.

When you want to point at something — <chart:line-annotated>

The line tells you what happened. Annotations tell you why. Pin labelled markers on the moments that matter, with an optional average line for context.

<chart:line-annotated
    :series="$traffic"
    :annotations="[
        ['x' => 'Tue', 'label' => 'Launch 🚀'],
        ['x' => 'Thu', 'label' => 'Featured on HN'],
    ]"
    show-average
/>

Now the spike has a story, right there on the chart, instead of buried in a caption nobody reads.

When you want a little delight — <chart:line-race>

Some charts are for dashboards. This one's for the keynote. line-race reveals each series progressively in an animated race, complete with a replay control.

<chart:line-race :series="$marketShare" replay />

Drop it on a launch page and watch people actually wait for it to finish. There's also <chart:line-animated> if you just want a tasteful staggered entrance with configurable easing — delight without the theatrics.

When zones matter more than points — <chart:spline-bands>

Sometimes the value isn't the number, it's which band it's in — healthy, warning, critical. spline-bands paints coloured horizontal plot bands behind a smooth spline.

<chart:spline-bands
    :series="$cpuTemp"
    :bands="[
        ['from' => 0,  'to' => 60,  'color' => 'green'],
        ['from' => 60, 'to' => 80,  'color' => 'amber'],
        ['from' => 80, 'to' => 100, 'color' => 'red'],
    ]"
/>

One glance and you know if you're fine, watching, or paging someone.

And a few more, quietly

  • <chart:spline-inverted> — axes flipped so the category axis runs vertically. Perfect for profiles like temperature by altitude.

  • <chart:line-labels> — labels each series right at the end of its line instead of making you hunt through a legend.

  • <chart:line-boost> — tuned for very large datasets, with downsampling and zoom so a million points stay smooth.

The small print, lovingly handled

1.2.2 also quietly restored the original release dates for 1.0.0 and 1.1.0. A tiny fix, but the kind we care about — your changelog should be a place you can trust, down to the dates.

Pull up a chair

That's the spirit of this release: not one giant new thing, but a dozen small, well-named tools that each fit a real situation you've been in. Less configuring, more reaching for the obvious one.

Same WireCharts you already know — a single tag, your data in PHP, reactive by default, dark mode for free. Just with a Line family that finally feels complete.

Update with composer update wirecharts/wirecharts, sprinkle in a <chart:line-forecast> where you used to apologise for a projection, and see how much better honest data feels. Browse them all in the live demos.

Back to blog Raw markdown