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.
Stock
|
Price
|
Change
|
Trend
|
---|---|---|---|
AAPL | $193.45 |
|
|
MSFT | $338.12 |
|
|
TSLA | $242.68 |
|
|
GOOGL | $129.87 |
|
Description
|
Example Input
|
Example Output
|
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'] |
Description
|
Example Input
|
Example Output
|
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'] |
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.
|
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.
|
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.
|
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.
|
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.
|
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.
|
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.
|
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.
|
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.
|
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.
|
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.
|
Prop
|
Description
|
---|---|
field |
Data field to display in the tooltip.
|
format |
Date/number formatting options for tooltip values.
|
Prop
|
Description
|
---|---|
field |
Data field to display in the tooltip heading.
|
format |
Date/number formatting options for tooltip values. See Formatting for more details.
|
Prop
|
Description
|
---|---|
field |
Data field to display in the tooltip.
|
format |
Date/number formatting options for tooltip values. See Formatting for more details.
|
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.
|
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.
|
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.
|
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.
|