Guides

Installation Upgrade guide Principles Patterns Theming Dark mode Customization Help

Layouts

Header Sidebar

Components

Accordion Autocomplete Badge Button Breadcrumbs Calendar

New

Card Chart

New

Checkbox Command Context Date picker

New

Dropdown Editor Field Heading Icon Input Modal Navbar Radio Select Separator Switch Table Tabs Textarea Toast Tooltip

Flux Pro component

This component is only available in the Pro version of Flux.

Upgrade to Pro -> Upgrade to Pro ->

Chart

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.

Currently, Flux supports line and area charts. Additional chart types are planned for future releases.

Copy to clipboard

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

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

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

:value

prop:

Copy to clipboard

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

Copy to clipboard

Examples

Line chart

To create a line chart, you can include the

<flux:chart.line>

component in the

<flux:chart.svg>

component:

Memory usage

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

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

<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>

<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.

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:

<flux:card>
    <flux:chart class="grid gap-6" wire:model="data">
        <flux:chart.summary class="flex gap-12">
            <div>
                <flux:subheading>Today</flux:subheading>

<flux:heading size="xl">
                    <flux:chart.summary.value field="sales" :format="['style' => 'currency', 'currency' => 'USD']" />
                </flux:heading>

<flux:subheading>
                    <flux:chart.summary.value field="date" :format="['hour' => 'numeric', 'minute' => 'numeric', 'hour12' => true]" />
                </flux:subheading>
            </div>

<div>
                <flux:subheading>Yesterday</flux:subheading>

<flux:heading size="lg">
                    <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%

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 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Setting a tick prefix

You can set a tick prefix by passing a string to the

tick-prefix

attribute:

Copy to clipboard

Setting a tick suffix

You can set a tick suffix by passing a string to the

tick-suffix

attribute:

Copy to clipboard

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

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

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

Customizing tooltip content

You can display multiple values and format numbers dynamically.

Copy to clipboard

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

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

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

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

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

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:

Built with by
Caleb Porzio and Hugo Sainte-Marie