Flux's Chart component is a lightweight, zero-dependency tool for building charts in your Livewire applications. It is designed to be simple but extremely flexible, so that you can assemble and style your charts exactly as you need them.

Copy to clipboard

<flux:chart wire:model="data" class="aspect-3/1">    <flux:chart.svg>        <flux:chart.line field="visitors" class="text-pink-500 dark:text-pink-400" />        <flux:chart.axis axis="x" field="date">            <flux:chart.axis.line />            <flux:chart.axis.tick />        </flux:chart.axis>        <flux:chart.axis axis="y">            <flux:chart.axis.grid />            <flux:chart.axis.tick />        </flux:chart.axis>        <flux:chart.cursor />    </flux:chart.svg>    <flux:chart.tooltip>        <flux:chart.tooltip.heading field="date" :format="['year' => 'numeric', 'month' => 'numeric', 'day' => 'numeric']" />        <flux:chart.tooltip.value field="visitors" label="Visitors" />    </flux:chart.tooltip></flux:chart>

Data structure

Flux charts expect a structured array of data, typically provided via wire:model or passed as a value prop. Each data point should be an associative array with named fields:

Copy to clipboard

<?phpuse Livewire\Component;class Dashboard extends Component{    <!-- MARKDOWN:REPLACE:START -->    public array $data = [        ['date' => '2026-09-16', 'visitors' => 267],        ['date' => '2026-09-15', 'visitors' => 259],        ['date' => '2026-09-14', 'visitors' => 269],        // ...    ];    <!-- MARKDOWN:REPLACE:END    public array $data = [        ['date' => '2026-01-01', 'visitors' => 267],        ['date' => '2026-01-02', 'visitors' => 259],        ['date' => '2026-01-03', 'visitors' => 269],        // ...    ];    -->}

If you've stored this data as a public property, you can use wire:model to bind the data to the chart:

Copy to clipboard

<flux:chart wire:model="data" />

Otherwise, you can pass data in any form directly into the :value prop:

Copy to clipboard

<flux:chart :value="$this->data" />

For things like simple line charts with no axes, you can pass a single array of values as well:

Copy to clipboard

<flux:chart :value="[1, 2, 3, 4, 5]" />

Examples

Line chart

To create a line chart, you can include the <flux:chart.line> component in the <flux:chart.svg> component:

Memory usage

Copy to clipboard

<flux:chart wire:model="data" class="aspect-[3/1]">    <flux:chart.svg>        <flux:chart.line field="memory" class="text-pink-500" />        <flux:chart.point field="memory" class="text-pink-400" />        <flux:chart.axis axis="x" field="date">            <flux:chart.axis.tick />            <flux:chart.axis.line />        </flux:chart.axis>        <flux:chart.axis axis="y" tick-values="[0, 128, 256, 384, 512]" :format="['style' => 'unit', 'unit' => 'megabyte']">            <flux:chart.axis.grid />            <flux:chart.axis.tick />        </flux:chart.axis>    </flux:chart.svg></flux:chart>

As you can see above, you can also render circular points on top of the line using the <flux:chart.point> component.

Area chart

Similar to a line chart but with a filled area beneath the line. Great for showing cumulative values or emphasizing volume.

Stock price

Copy to clipboard

<flux:chart wire:model="data" class="aspect-3/1">    <flux:chart.svg>        <flux:chart.line field="stock" class="text-blue-500 dark:text-blue-400" curve="none" />        <flux:chart.area field="stock" class="text-blue-200/50 dark:text-blue-400/30" curve="none" />        <flux:chart.axis axis="y" position="right" tick-prefix="$" :format="[            'notation' => 'compact',            'compactDisplay' => 'short',            'maximumFractionDigits' => 1,        ]">            <flux:chart.axis.grid />            <flux:chart.axis.tick />        </flux:chart.axis>        <flux:chart.axis axis="x" field="date">            <flux:chart.axis.tick />            <flux:chart.axis.line />        </flux:chart.axis>    </flux:chart.svg></flux:chart>

Multiple lines

You can plot multiple lines in the same chart by including multiple <flux:chart.line> components. This helps compare different data series against each other.

Instagram

Twitter

Facebook

Copy to clipboard

<flux:chart wire:model="data">    <flux:chart.viewport class="min-h-[20rem]" >        <flux:chart.svg>            <flux:chart.line field="twitter" class="text-blue-500" curve="none" />            <flux:chart.point field="twitter" class="text-blue-500" r="6" stroke-width="3" />            <flux:chart.line field="facebook" class="text-red-500" curve="none" />            <flux:chart.point field="facebook" class="text-red-500" r="6" stroke-width="3" />            <flux:chart.line field="instagram" class="text-green-500" curve="none" />            <flux:chart.point field="instagram" class="text-green-500" r="6" stroke-width="3" />            <flux:chart.axis axis="x" field="date">                <flux:chart.axis.tick />                <flux:chart.axis.line />            </flux:chart.axis>            <flux:chart.axis axis="y" tick-start="0" tick-end="1" :format="[                'style' => 'percent',                'minimumFractionDigits' => 0,                'maximumFractionDigits' => 0,            ]">                <flux:chart.axis.grid />                <flux:chart.axis.tick />            </flux:chart.axis>        </flux:chart.svg>    </flux:chart.viewport>    <div class="flex justify-center gap-4 pt-4">        <flux:chart.legend label="Instagram">            <flux:chart.legend.indicator class="bg-green-400" />        </flux:chart.legend>        <flux:chart.legend label="Twitter">            <flux:chart.legend.indicator class="bg-blue-400" />        </flux:chart.legend>        <flux:chart.legend label="Facebook">            <flux:chart.legend.indicator class="bg-red-400" />        </flux:chart.legend>    </div></flux:chart>

You might have noticed that the above example includes a <flux:chart.viewport> component. This is used to constrain the chart SVG within the chart component so that you can render siblings like legends or summaries above or below it.

Bar chart

To create a bar chart, you can include the <flux:chart.bar> component in the <flux:chart.svg> component:

Revenue

Copy to clipboard

<flux:chart wire:model="data" class="aspect-[3/1]">    <flux:chart.svg>        <flux:chart.bar field="revenue" class="text-blue-500" radius="0" width="85%" />        <flux:chart.axis axis="x" field="date" tick-count="10">            <flux:chart.axis.tick />            <flux:chart.axis.line />        </flux:chart.axis>        <flux:chart.axis axis="y" :format="['useGrouping' => true]" tick-prefix="$">            <flux:chart.axis.grid />            <flux:chart.axis.tick />        </flux:chart.axis>        <flux:chart.cursor type="area" />    </flux:chart.svg>    <flux:chart.tooltip>        <flux:chart.tooltip.heading field="date" />        <flux:chart.tooltip.value field="revenue" label="Revenue" :format="['useGrouping' => true]" prefix="$" />    </flux:chart.tooltip></flux:chart>

Support tickets

Copy to clipboard

<flux:chart wire:model="data" class="aspect-[3/1]">    <flux:chart.svg>        <flux:chart.bar field="tickets" class="text-blue-300 dark:text-blue-700" />        <flux:chart.axis axis="x" field="month">            <flux:chart.axis.tick />        </flux:chart.axis>        <flux:chart.axis axis="y">            <flux:chart.axis.grid />            <flux:chart.axis.tick />        </flux:chart.axis>    </flux:chart.svg>    <flux:chart.tooltip>        <flux:chart.tooltip.value field="tickets" label="Tickets" />    </flux:chart.tooltip></flux:chart>

Horizontal charts

Add the horizontal prop to place the index on the Y axis and values on the X axis. Horizontal orientation works with bars, groups, stacks, lines, areas, points, cursors, and tooltips.

When adding axes, put the category or time field on the Y axis and use the X axis for the numeric scale:

Online orders

Copy to clipboard

<flux:chart horizontal wire:model="data" class="aspect-[2/1]">    <flux:chart.svg>        <flux:chart.bar field="online" class="text-blue-500" radius="4 0" width="70%" />        <flux:chart.axis axis="y" field="category">            <flux:chart.axis.tick />            <flux:chart.axis.line />        </flux:chart.axis>        <flux:chart.axis axis="x">            <flux:chart.axis.grid />            <flux:chart.axis.tick />        </flux:chart.axis>        <flux:chart.cursor type="area" />    </flux:chart.svg>    <flux:chart.tooltip>        <flux:chart.tooltip.heading field="category" />        <flux:chart.tooltip.value field="online" label="Orders" />    </flux:chart.tooltip></flux:chart>

Grouped bar chart

To create a grouped bar chart, you can wrap multiple <flux:chart.bar> components inside a single <flux:chart.group> component:

Browser usage

Chrome

Firefox

Safari

Copy to clipboard

<flux:chart wire:model="data">    <flux:chart.viewport class="aspect-[3/1]">        <flux:chart.svg>            <flux:chart.group>                <flux:chart.bar field="chrome" class="text-blue-600" />                <flux:chart.bar field="firefox" class="text-blue-500" />                <flux:chart.bar field="safari" class="text-blue-300" />            </flux:chart.group>            <flux:chart.axis axis="x" field="year">                <flux:chart.axis.tick />                <flux:chart.axis.line />            </flux:chart.axis>            <flux:chart.axis axis="y">                <flux:chart.axis.grid />                <flux:chart.axis.tick />            </flux:chart.axis>        </flux:chart.svg>    </flux:chart.viewport>    <div class="flex justify-center gap-4 pt-4">        <flux:chart.legend label="Chrome">            <flux:chart.legend.indicator class="bg-blue-600" />        </flux:chart.legend>        <flux:chart.legend label="Firefox">            <flux:chart.legend.indicator class="bg-blue-500" />        </flux:chart.legend>        <flux:chart.legend label="Safari">            <flux:chart.legend.indicator class="bg-blue-300" />        </flux:chart.legend>    </div></flux:chart>

Stacked bar chart

To create a stacked bar chart, you can wrap multiple <flux:chart.bar> components inside a single <flux:chart.stack> component:

Number of orders

Online

Retail

Wholesale

Copy to clipboard

<flux:chart wire:model="data">    <flux:chart.viewport class="aspect-[3/1]">        <flux:chart.svg>            <flux:chart.stack width="65%">                <flux:chart.bar field="online" class="text-blue-600" />                <flux:chart.bar field="retail" class="text-blue-400" />                <flux:chart.bar field="wholesale" class="text-blue-300" radius="4 0" />            </flux:chart.stack>            <flux:chart.axis axis="x" field="category">                <flux:chart.axis.tick />                <flux:chart.axis.line />            </flux:chart.axis>            <flux:chart.axis axis="y">                <flux:chart.axis.grid />                <flux:chart.axis.tick />            </flux:chart.axis>        </flux:chart.svg>    </flux:chart.viewport>    <div class="flex justify-center gap-4 pt-4">        <flux:chart.legend label="Online">            <flux:chart.legend.indicator class="bg-blue-600" />        </flux:chart.legend>        <flux:chart.legend label="Retail">            <flux:chart.legend.indicator class="bg-blue-400" />        </flux:chart.legend>        <flux:chart.legend label="Wholesale">            <flux:chart.legend.indicator class="bg-blue-300" />        </flux:chart.legend>    </div></flux:chart>

Pie chart

To create a pie chart, include a single <flux:chart.pie> component in the <flux:chart.svg> component. Every row of data becomes a slice: field sets its size and label-field names it. A pie always draws a full circle, starting at 12 o'clock and moving clockwise.

Hovering a slice shows the chart's tooltip. For a pie, a single <flux:chart.tooltip.value> row with a label-field reads best, and <flux:chart.tooltip.indicator> adds a dot in the hovered slice's color:

Copy to clipboard

<flux:chart wire:model="data">    <flux:chart.viewport class="aspect-square">        <flux:chart.svg>            <flux:chart.pie field="value" label-field="label" />        </flux:chart.svg>    </flux:chart.viewport>    <flux:chart.tooltip>        <flux:chart.tooltip.value label-field="label" field="value" suffix="%">            <flux:chart.tooltip.indicator />        </flux:chart.tooltip.value>    </flux:chart.tooltip></flux:chart>

Pie data is one row per slice:

Copy to clipboard

public array $data = [    ['id' => 'subscriptions', 'label' => 'Subscriptions', 'value' => 52],    ['id' => 'services', 'label' => 'Services', 'value' => 28],    ['id' => 'training', 'label' => 'Training', 'value' => 20],];

Rows whose value is 0, null, or missing are left out of the circle. Negative or non-numeric values are left out as well, and log a warning in the console once.

A pie can't share a chart with bars, lines, areas, points, axes, or a cursor, and a chart may only contain one <flux:chart.pie>. Invalid combinations log a warning and render nothing.

Donut chart

Add an inner-radius to turn a pie into a donut. It accepts a percentage of the outer radius or a pixel value. Use radius to round the corners of each slice:

Copy to clipboard

<flux:chart wire:model="data">    <flux:chart.viewport class="aspect-square">        <flux:chart.svg>            <flux:chart.pie field="value" label-field="label" inner-radius="60%" radius="4" />        </flux:chart.svg>    </flux:chart.viewport>    <flux:chart.tooltip>        <flux:chart.tooltip.value label-field="label" field="value" suffix="%">            <flux:chart.tooltip.indicator />        </flux:chart.tooltip.value>    </flux:chart.tooltip></flux:chart>

Anything you place inside <flux:chart.viewport> next to the SVG can fill the center of a donut. Position it absolutely and let pointer events pass through so the slices stay hoverable:

$128k

Revenue

Copy to clipboard

<flux:chart wire:model="data">    <flux:chart.viewport class="relative aspect-square">        <flux:chart.svg>            <flux:chart.pie field="value" label-field="label" inner-radius="60%" radius="4" />        </flux:chart.svg>        <div class="pointer-events-none absolute inset-0 grid place-items-center">            <div class="text-center">                <flux:heading size="xl">$128k</flux:heading>                <flux:text>Revenue</flux:text>            </div>        </div>    </flux:chart.viewport></flux:chart>

Slice colors

Flux gives each slice a color from a built-in palette. Colors are tied to a slice's identity (its id, or its label-field value when there is no id), so reordering rows or removing one doesn't recolor the slices that remain.

To pick a color yourself, add a color key to the row. Any of Flux's named colors work: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, and rose.

Copy to clipboard

public array $data = [    ['id' => 'subscriptions', 'label' => 'Subscriptions', 'value' => 52, 'color' => 'blue'],    ['id' => 'services', 'label' => 'Services', 'value' => 28, 'color' => 'emerald'],    ['id' => 'training', 'label' => 'Training', 'value' => 20, 'color' => 'amber'],];

Legends are composed by hand, like every other Flux chart. The built-in palette isn't exposed to Blade, so when you show a legend, give each row an explicit color and mirror it in the legend indicators:

Subscriptions

52%

Services

28%

Training

20%

Copy to clipboard

<flux:card>    <flux:chart wire:model="data" class="flex items-center gap-8">        <flux:chart.viewport class="w-36 shrink-0 aspect-square">            <flux:chart.svg>                <flux:chart.pie field="value" label-field="label" inner-radius="60%" radius="4" class="dark:stroke-zinc-800" />            </flux:chart.svg>        </flux:chart.viewport>        <div class="flex-1">            <div class="flex items-center justify-between">                <flux:chart.legend label="Subscriptions">                    <flux:chart.legend.indicator class="bg-blue-500" />                </flux:chart.legend>                <flux:text size="sm" class="tabular-nums">52%</flux:text>            </div>            <div class="flex items-center justify-between">                <flux:chart.legend label="Services">                    <flux:chart.legend.indicator class="bg-emerald-500" />                </flux:chart.legend>                <flux:text size="sm" class="tabular-nums">28%</flux:text>            </div>            <div class="flex items-center justify-between">                <flux:chart.legend label="Training">                    <flux:chart.legend.indicator class="bg-amber-500" />                </flux:chart.legend>                <flux:text size="sm" class="tabular-nums">20%</flux:text>            </div>        </div>        <flux:chart.tooltip>            <flux:chart.tooltip.value label-field="label" field="value" suffix="%">                <flux:chart.tooltip.indicator />            </flux:chart.tooltip.value>        </flux:chart.tooltip>    </flux:chart></flux:card>

Slices are separated by a stroke in the chart's surface color: white, or zinc-900 in dark mode. If your chart sits on a different surface, like the card above, match it with a stroke class:

Copy to clipboard

<flux:chart.pie field="value" label-field="label" class="dark:stroke-zinc-800" />

Hover styles

Pie slices don't change appearance on hover by default. While a slice is hovered, it receives a data-active attribute and every other slice receives data-inactive. Use Tailwind's data attribute variants to choose a treatment that fits your chart:

Dim others

Thicker border

Scale active

Copy to clipboard

{{-- Dim the other slices... --}}<flux:chart.pie class="transition-opacity data-inactive:opacity-40" />{{-- Add a stronger border to the active slice... --}}<flux:chart.pie class="transition-[stroke-width] data-active:stroke-[5]" />{{-- Scale the active slice... --}}<flux:chart.pie class="origin-center transition-transform data-active:scale-105" />

The attributes are removed when the pointer leaves the pie. You can use either attribute independently or combine both in the same treatment.

Live summary

Flux charts support live summaries, which are updated as the user hovers over the chart. To enable this feature, you can include the <flux:chart.summary> component in the <flux:chart> component:

Copy to clipboard

<flux:card>    <flux:chart class="grid gap-6" wire:model="data">        <flux:chart.summary class="flex flex-col gap-6 sm:flex-row sm:gap-12">            <div>                <flux:text>Today</flux:text>                <flux:heading size="xl" class="mt-2 tabular-nums">                    <flux:chart.summary.value field="sales" :format="['style' => 'currency', 'currency' => 'USD']" />                </flux:heading>                <flux:text class="mt-2 tabular-nums">                    <flux:chart.summary.value field="date" :format="['hour' => 'numeric', 'minute' => 'numeric', 'hour12' => true]" />                </flux:text>            </div>            <div>                <flux:text>Yesterday</flux:text>                <flux:heading size="lg" class="mt-2 tabular-nums">                    <flux:chart.summary.value field="yesterday" :format="['style' => 'currency', 'currency' => 'USD']" />                </flux:heading>            </div>        </flux:chart.summary>        <flux:chart.viewport class="aspect-[3/1]">            <flux:chart.svg>                <flux:chart.line field="yesterday" class="text-zinc-300 dark:text-white/40" stroke-dasharray="4 4" curve="none" />                <flux:chart.line field="sales" class="text-sky-500 dark:text-sky-400" curve="none" />                <flux:chart.axis axis="x" field="date">                    <flux:chart.axis.grid />                    <flux:chart.axis.tick />                    <flux:chart.axis.line />                </flux:chart.axis>                <flux:chart.axis axis="y">                    <flux:chart.axis.tick />                </flux:chart.axis>                <flux:chart.cursor />            </flux:chart.svg>        </flux:chart.viewport>    </flux:chart></flux:card>

Sparkline

A compact, single-line chart used in tables or dashboards for quick visual insights. Ideal for stock prices, memory usage, or other small-scale trends.

Stock	Price	Change
AAPL	$193.45	+2.4%
MSFT	$338.12	+1.8%
TSLA	$242.68	-3.2%
GOOGL	$129.87	+0.9%

Copy to clipboard

<flux:chart :value="[15, 18, 16, 19, 22, 25, 28, 25, 29, 28, 32, 35]" class="w-[5rem] aspect-[3/1]">    <flux:chart.svg gutter="0">        <flux:chart.line class="text-green-500 dark:text-green-400" />    </flux:chart.svg></flux:chart>

You might have noticed the gutter attribute on the <flux:chart.svg> component. This is because by default, the chart will be rendered with a padding of 8px on all sides. This is to prevent overflowing contents of the chart (like tick labels or stroke lines) from being cut off at the edges of the container.

For simple charts like a sparkline, you don't want that extra padding, so you can set the gutter to 0 to remove it.

Dashboard stat

A small card displaying a key metric with an embedded chart in the background. Useful for KPIs like revenue, active users, or system health.

Revenue

$12,345

Copy to clipboard

<flux:card class="overflow-hidden min-w-[12rem]">    <flux:text>Revenue</flux:text>    <flux:heading size="xl" class="mt-2 tabular-nums">$12,345</flux:heading>    <flux:chart class="-mx-8 -mb-8 h-[3rem]" :value="[10, 12, 11, 13, 15, 14, 16, 18, 17, 19, 21, 20]">        <flux:chart.svg gutter="0">            <flux:chart.line class="text-sky-200 dark:text-sky-400" />            <flux:chart.area class="text-sky-100 dark:text-sky-400/30" />        </flux:chart.svg>    </flux:chart></flux:card>

Chart padding

By default, the chart will be rendered with a padding of 8px on all sides. This is to prevent overflowing contents of the chart (like tick labels or stroke lines) from being cut off at the edges of the container.

You can control this by setting the gutter attribute on the <flux:chart.svg> component:

Here's an example of adding the following padding to the chart:

Copy to clipboard

<flux:chart>    <flux:chart.svg gutter="12 0 12 8">        <!-- ... -->    </flux:chart.svg></flux:chart>

The gutter attribute accepts between one and four values, which correspond to the top, right, bottom, and left padding respectively. Similar to the padding property shorthand in CSS.

The example above will result in the following padding:

Top: 12px
Right: 0px
Bottom: 12px
Left: 8px

Axis scale

You can configure the scale of an axis and its ticks by setting the scale attribute on the <flux:chart.axis> component:

Copy to clipboard

<flux:chart.axis axis="y" scale="linear">    <!-- ... --></flux:chart.axis>

There are three available types of scales:

categorical: For categorical data like names or categories.
linear: For numeric data like stock prices or temperatures.
time: For date and time data

The "y" axis is linear by default, but you can change it to a time axis by setting the scale attribute to time.

The "x" axis will automatically use a time scale if the data is date or time values. Otherwise, it will use a categorical scale.

Axis lines

By default, axes do not include a visible baseline. You can add an axis line using <flux:chart.axis.line> inside the corresponding axis:

Copy to clipboard

<flux:chart.svg>    <!-- ... -->    <flux:chart.axis axis="x">        <!-- Horizontal "X" axis line: -->        <flux:chart.axis.line />    </flux:chart.axis>    <flux:chart.axis axis="y">        <!-- Vertical "Y" axis line: -->        <flux:chart.axis.line />    </flux:chart.axis></flux:chart.svg>

Styling axis lines

Because the axis line is rendered as a <line> element, you can style it using any of the SVG attributes that are available for the <line> element.

Copy to clipboard

<!-- A dark gray axis line that is 2px wide and has a gray color: --><flux:chart.axis.line class="text-zinc-800" stroke-width="2" />

Zero line

The zero line is the line that represents the zero value on the axis. It will only be visible if the axis includes a negative value.

Copy to clipboard

<flux:chart.svg>    <!-- ... -->    <!-- Zero line: -->    <flux:chart.zero-line /></flux:chart.svg>

Styling the zero line

Because the zero line is rendered as a <line> element, you can style it using any of the SVG attributes that are available for the <line> element.

Copy to clipboard

<!-- A dark gray zero line that is 2px wide and has a gray color: --><flux:chart.zero-line class="text-zinc-800" stroke-width="2" />

Grid lines

You can render horizontal and vertical grid lines by adding the <flux:chart.axis.grid> component to the appropriate axis:

Copy to clipboard

<flux:chart.svg>    <!-- ... -->    <flux:chart.axis axis="x">        <!-- Vertical grid lines: -->        <flux:chart.axis.grid />    </flux:chart.axis>    <flux:chart.axis axis="y">        <!-- Horizontal grid lines: -->        <flux:chart.axis.grid />    </flux:chart.axis></flux:chart.svg>

Styling grid lines

Because the grid lines are rendered as a <line> element, you can style them using any of the SVG attributes that are available for the <line> element.

Copy to clipboard

<!-- A dashed grid line that is 2px wide and has a gray color: --><flux:chart.axis.grid class="text-zinc-200/50" stroke-width="2" stroke-dasharray="4,4" />

Ticks

You can render tick mark lines and labels by adding the <flux:chart.axis.mark> and/or <flux:chart.axis.tick> components to the appropriate axis:

Copy to clipboard

<flux:chart.svg>    <!-- ... -->    <flux:chart.axis axis="x">        <!-- X axis tick mark lines: -->        <flux:chart.axis.mark />        <!-- X axis tick labels: -->        <flux:chart.axis.tick />    </flux:chart.axis>    <flux:chart.axis axis="y">        <!-- Y axis tick mark lines: -->        <flux:chart.axis.mark />        <!-- Y axis tick labels: -->        <flux:chart.axis.tick />    </flux:chart.axis></flux:chart.svg>

Styling tick mark lines

The tick mark component is a simple wrapper around the <line> SVG element. You can customize the length, width, and color of the tick mark lines using plain CSS and SVG attributes:

Copy to clipboard

<!-- A tick mark line that is 10px long, 2px wide, and has a gray color: --><flux:chart.axis.mark class="text-zinc-300" stroke-width="2" y1="0" y2="10" />

Styling tick labels

The <flux:chart.axis.tick> component is a simple wrapper around the <text> SVG element. You can customize the font size, color, and position of the tick labels using plain CSS and SVG attributes:

Copy to clipboard

<!-- A tick label that is 12px, has a blue color, is center aligned, and is 2.5rem from the axis line: --><flux:chart.axis.tick class="text-xs text-blue-500" text-anchor="middle" dy="2.5rem"  />

Tick frequency

You can influence the number of ticks on an axis by setting the tick-count attribute:

Setting the tick count

Copy to clipboard

<flux:chart.axis axis="y" tick-count="5">    <!-- ... --></flux:chart.axis>

Note that the tick-count attribute is only a target number, and the actual number of ticks may vary based on the range of values on the axis.

Setting the tick start

By default, the tick marks will start at zero, unless negative values are present. You can override this by setting the tick-start attribute:

Copy to clipboard

<flux:chart.axis axis="y" tick-start="min">    <!-- ... --></flux:chart.axis>

The available values for tick-start are:

auto: Automatically determine the starting tick value.
min: Start at the minimum value on the axis.
0: Start at zero.
123: Start at 123 (or any other number).

Setting the tick end

By default, the tick marks will end at the next tick mark after the maximum value on the axis. You can override this by setting the tick-end attribute:

Copy to clipboard

<flux:chart.axis axis="y" tick-end="max">    <!-- ... --></flux:chart.axis>

The available values for tick-end are:

auto: Automatically determine the ending tick value.
max: End at the maximum value on the axis.
123: End at 123 (or any other number).

Setting explicit tick values

You can also set explicit tick values by passing an array of values to the tick-values attribute:

Copy to clipboard

<flux:chart.axis axis="y" tick-values="[0, 128, 256, 384, 512]" tick-suffix="MB">    <!-- ... --></flux:chart.axis>

Tick formatting

The tick labels can be formatted using the format attribute.

Under-the-hood, the format attribute is passed to the Intl.NumberFormat constructor.

This means that you can use any of the formatting options that are available for the Intl.NumberFormat constructor.

See the MDN documentation for more information on the formatting options ->

Copy to clipboard

<flux:chart.svg>    <!-- ... -->    <!-- Format the X axis tick labels to display the month and day: -->    <flux:chart.axis axis="x" :format="['month' => 'long', 'day' => 'numeric']">        <!-- X axis tick labels: -->        <flux:chart.axis.tick />    </flux:chart.axis>    <!-- Format the Y axis tick labels to display the value in USD: -->    <flux:chart.axis axis="y" :format="['style' => 'currency', 'currency' => 'USD']">        <!-- Y axis tick labels: -->        <flux:chart.axis.tick />    </flux:chart.axis></flux:chart.svg>

Setting a tick prefix

You can set a tick prefix by passing a string to the tick-prefix attribute:

Copy to clipboard

<flux:chart.axis axis="y" tick-prefix="$">    <!-- ... --></flux:chart.axis>

Setting a tick suffix

You can set a tick suffix by passing a string to the tick-suffix attribute:

Copy to clipboard

<flux:chart.axis axis="y" tick-suffix="MB">    <!-- ... --></flux:chart.axis>

Cursor

Adds a vertical guide when hovering over the chart to highlight values at specific points. Customizable with stroke styles, colors, and dash patterns.

To enable a cursor, simply include <flux:chart.cursor> inside <flux:chart.svg>:

Copy to clipboard

<flux:chart.svg>    <!-- ... -->    <flux:chart.cursor /></flux:chart.svg>

Styling the cursor

Because the cursor is rendered as a <line> element, you can style it using any of the SVG attributes that are available for the <line> element.

Copy to clipboard

<!-- A dashed, black cursor that is 1px wide: --><flux:chart.cursor class="text-zinc-800" stroke-width="1" stroke-dasharray="4,4" />

Tooltip

Displays contextual data on hover. Supports multiple values and custom formatting for better readability.

To enable tooltips, include <flux:chart.tooltip> inside <flux:chart>:

Copy to clipboard

<flux:chart>    <flux:chart.svg>        <!-- ... -->    </flux:chart.svg>    <flux:chart.tooltip>        <flux:chart.tooltip.heading field="date" />        <flux:chart.tooltip.value field="visitors" label="Visitors" />        <flux:chart.tooltip.value field="views" label="Views" :format="['notation' => 'compact']" />    </flux:chart.tooltip></flux:chart>

Customizing tooltip content

You can display multiple values and format numbers dynamically.

Copy to clipboard

<flux:chart.tooltip>    <flux:chart.tooltip.heading field="date" />    <flux:chart.tooltip.value field="visitors" label="Visitors" />    <flux:chart.tooltip.value field="views" label="Page Views" :format="['notation' => 'compact']" /></flux:chart.tooltip>

Legend

Identifies multiple data series in the chart. Each legend item corresponds to a different dataset.

When using a legend, you will need to include a <flux:chart.viewport> component to wrap the <flux:chart.svg> component so that the legend is rendered outside of the chart:

Copy to clipboard

<flux:chart wire:model="data">    <flux:chart.viewport class="aspect-3/1">        <flux:chart.svg>            <flux:chart.line class="text-blue-500" field="visitors" />            <flux:chart.line class="text-red-500" field="views" />        </flux:chart.svg>    </flux:chart.viewport>    <div class="flex justify-center gap-4 pt-4">        <flux:chart.legend label="Visitors">            <flux:chart.legend.indicator class="bg-blue-400" />        </flux:chart.legend>        <flux:chart.legend label="Views">            <flux:chart.legend.indicator class="bg-red-400" />        </flux:chart.legend>    </div></flux:chart>

Summary

Displays a single value from the dataset in a bold, easy-to-read format. Great for key performance indicators.

To enable a summary, include <flux:chart.summary> inside <flux:chart>:

Copy to clipboard

<flux:chart wire:model="data">    <flux:chart.summary>        <flux:chart.summary.value field="visitors" :format="['notation' => 'compact']" />    </flux:chart.summary>    <flux:chart.viewport class="aspect-[3/1]">        <!-- ... -->    </flux:chart.viewport></flux:chart>

Notice that you will need to include a <flux:chart.viewport> component to wrap the <flux:chart.svg> component so that the summary is rendered outside of the chart.

Setting a fallback value

You can set a fallback value by passing a string to the fallback attribute:

Copy to clipboard

<flux:chart.summary.value field="visitors" fallback="1200" />

This will be the value that is displayed if a data point is not being hovered over.

Formatting

You can customize how numbers and dates appear in your charts to make them more readable. Whether it's formatting currency, percentages, or large numbers, Flux charts let you easily control how values are displayed using the :format prop.

Flux handles formatting for you behind the scenes using the Intl.NumberFormat and Intl.DateTimeFormat API, a built-in browser feature that ensures numbers and dates are displayed consistently based on locale and formatting rules. Just pass your desired format options to the :format prop, and Flux will apply them for you.

Formatting numbers

You can format numbers by passing an array of formatting options to the :format prop.

Copy to clipboard

<flux:chart.axis axis="y" :format="['style' => 'currency', 'currency' => 'USD']" />

Commonly used formatting options

Here are some commonly used number formatting options you will likely need:

Description	Example Input	Format Array
Currency (USD)	1234.56	['style' => 'currency', 'currency' => 'USD']
Currency (EUR)	1234.56	['style' => 'currency', 'currency' => 'EUR']
Percent	0.85	['style' => 'percent']
Compact Number	1000000	['notation' => 'compact']
Scientific	123456789	['notation' => 'scientific']
Fixed Decimal	3.1415926535	['maximumFractionDigits' => 2]
Thousands Separator	1234567	['useGrouping' => true]
Custom Unit	50	['style' => 'unit', 'unit' => 'megabyte']

Formatting dates

You can format dates by passing an array of formatting options to the :format prop.

Copy to clipboard

<flux:chart.axis axis="x" field="date" :format="['month' => 'long', 'day' => 'numeric']" />

Commonly used date formatting options

Here are some commonly used date formatting options you will likely need:

Description	Example Input	Format Array
Full Date	2024-03-15	['dateStyle' => 'full']
Month and Day	2024-03-15	['month' => 'long', 'day' => 'numeric']
Short Month	2024-03-15	['month' => 'short', 'day' => 'numeric']
Time Only	2024-03-15 14:30	['hour' => 'numeric', 'minute' => 'numeric', 'hour12' => true]
24-hour Time	2024-03-15 14:30	['hour' => '2-digit', 'minute' => '2-digit', 'hour12' => false]
Weekday	2024-03-15	['weekday' => 'long']
Short Date	2024-03-15	['month' => '2-digit', 'day' => '2-digit', 'year' => '2-digit']
Year Only	2024-03-15	['year' => 'numeric']

Additional resources

For more detailed information about formatting options, refer to:

Reference

flux:chart

Prop	Description
wire:model	Binds the chart to a Livewire property containing the data to display. See the wire:model documentation for more information.
value	Array of data points for the chart. Each point should be an associative array with named fields. Used when not binding with wire:model.
horizontal	Places the chart's index on the Y axis and its values on the X axis. Useful for horizontal bars and other transposed chart layouts.

Slot	Description
default	Chart components to render. Typically contains a flux:chart.svg component that defines the chart structure.

CSS	Description
class	Additional CSS classes applied to the chart container. Common uses: aspect-3/1 for aspect ratio, h-64 for fixed height.

Attribute	Description
data-flux-chart	Applied to the root element for styling and identification.

flux:chart.svg

Container for the chart's SVG elements. This component must be included within a `flux:chart` to render the chart.

Slot	Description
default	Chart visualization components like lines, areas, axes, and interactive elements.

flux:chart.line

Prop	Description
field	Name of the data field to plot on the value axis. Required.
curve	Line curve type. Options: smooth (default), none.

CSS	Description
class	Additional CSS classes applied to the line. Common use: text-{color} for line color.

flux:chart.area

Prop	Description
field	Name of the data field to plot on the value axis. Required.
curve	Area curve type. Options: smooth (default), none.

CSS	Description
class	Additional CSS classes applied to the area. Common use: fill-{color}/20 for fill color.

flux:chart.point

Adds points (dots) to mark data points on a line or area chart.

Prop	Description
field	Name of the data field to plot points for. Required.

CSS	Description
class	Additional CSS classes applied to the points. Common use: fill-{color} for point fill color, r attribute for point radius.

flux:chart.pie

Renders a pie or donut chart from one row per slice. Use one per chart, on its own, without other marks, axes, or a cursor.

Prop	Description
field	Name of the numeric data field that sets each slice's size. Default: value.
label-field	Data field used as a slice's label and, when a row has no id, as its identity for stable colors.
inner-radius	Radius of the donut hole, as pixels or a percentage of the outer radius (e.g. 60%). Default: 0.
radius	Corner radius of each slice in pixels. Default: 0.

CSS	Description
class	Additional CSS classes applied to each slice. Common use: stroke-{color} to match the separator between slices to your surface.

flux:chart.axis

Prop	Description
axis	Axis to configure. Options: x, y. Required.
field	Data field to use for labels on the chart's index axis.
format	Date/number formatting options for axis labels. See Formatting for more details.

flux:chart.axis.mark

Adds tick marks to the chart. Must be used within a `flux:chart.axis` component.

Prop	Description
position	Position of the tick marks. Options: top, bottom, left, right.

CSS	Description
class	Additional CSS classes applied to the tick marks. Common use: text-{color} for line color, stroke-width="1" for line thickness.

flux:chart.axis.line

Adds an axis line to the chart. Must be used within a `flux:chart.axis` component.

CSS	Description
class	Additional CSS classes applied to the axis line. Common use: text-{color} for line color, stroke-width="1" for line thickness.

flux:chart.axis.grid

Adds gridlines to the chart. Must be used within a `flux:chart.axis` component.

CSS	Description
class	Additional CSS classes applied to the gridlines. Common use: text-{color} for line color, stroke-width="{width}" for line thickness.

flux:chart.axis.tick

Adds tick marks and labels to an axis. Must be used within a `flux:chart.axis` component.

Prop	Description
format	Date/number formatting options for tick labels. See Formatting for more details.

CSS	Description
class	Additional CSS classes applied to the tick marks and labels. Common use: text-{color} for label color, font-{weight} for label weight.

flux:chart.zero-line

Adds a line at zero on the value axis. It is horizontal for vertical charts and vertical for horizontal charts.

CSS	Description
class	Additional CSS classes applied to the zero line. Common use: text-{color} for line color, stroke-width="{width}" for line thickness.

flux:chart.tooltip

Prop	Description
field	Data field to display in the tooltip.
format	Date/number formatting options for tooltip values.

flux:chart.tooltip.heading

Prop	Description
field	Data field to display in the tooltip heading.
format	Date/number formatting options for tooltip values. See Formatting for more details.

flux:chart.tooltip.value

Prop	Description
field	Data field to display in the tooltip.
format	Date/number formatting options for tooltip values. See Formatting for more details.
label	Static text shown before the value, such as a series name.
label-field	Data field to show as the label instead of static text. Useful for pie charts, where the label is the hovered slice's name.

Slot	Description
default	Content rendered before the label, such as a flux:chart.tooltip.indicator.

flux:chart.tooltip.indicator

A small dot in the color of the hovered pie slice. Place it inside a `flux:chart.tooltip.value` row. Only pie charts set the hovered color.

CSS	Description
class	Additional CSS classes applied to the indicator.

flux:chart.cursor

Adds an interactive cursor that follows mouse movement over the chart. Activates tooltips when present.

CSS	Description
class	Additional CSS classes applied to the cursor line.

flux:chart.summary

Adds a summary section typically shown above the chart. Shows the latest values or values at cursor position.

Slot	Description
default	Content to display in the summary section. Can include flux:chart.value components to display specific data values.

flux:chart.summaryvalue

Displays a specific data value, typically used within a `flux:chart.summary` component.

Prop	Description
field	Data field to display.
fallback	Fallback text to display if the value is not found or cannot be formatted.
format	Date/number formatting options. See Formatting for more details.

flux:chart.legend

Prop	Description
field	Data field this legend item represents.
label	Label text for the legend item.
format	Date/number formatting options. See Formatting for more details.

Slot	Description
default	Content to display in the legend. Can include arbitrary content, including flux:chart.legend.indicator components.

Built with by
Caleb Porzio and Hugo Sainte-Marie