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

Copy to clipboard

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

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>

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

Copy to clipboard

<flux:card>
    <flux:chart class="grid gap-6" wire:model="data">
        <flux:chart.summary class="flex 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

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

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:

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.
curve	Default line curve type for all lines in the chart. Options: none (default), smooth.

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 y-axis. Required.
curve	Line curve type. Options: none (default), smooth.

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 y-axis. Required.
curve	Area curve type. Options: none (default), smooth.

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

Prop	Description
axis	Axis to configure. Options: x, y. Required.
field	For x-axis, the data field to use for labels.
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 horizontal line at y=0. Useful for charts that contain both positive and negative values.

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.

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