Charts

Powerful charts with the ease of Flux. Documentation

Configure Preview

Line charts

Line

Area

Points

Sparkline

Bar charts

Bars

Grouped

Stacked

Custom

Create your own chart by customizing the , , or the mock to use. You can always try another preset without losing your work.

Custom

Reset

Bars layout
Layout Grouped Stacked
Group width Stack width
%
Bar gap
px
Corner radius
px
Min height

The minimum pixel height for bars with a value of zero, ensuring they remain visible on the chart.
px
Revenue
Type
Line
Bar
Color
Blue
Red
Green
Yellow
Purple
Orange
Pink
Gray
Line
Width
Dashes

The first value sets the dash length (in pixels), and the second value sets the gap between dashes.

For example, "5" and "3" creates a 5px dash followed by a 3px gap. Leave both empty for a solid line.
Area
Start opacity
End opacity
Points
Size
Outline
Smooth
Width
%
Corner radius
px
Min height

The minimum pixel height for bars with a value of zero, ensuring they remain visible on the chart.
px
X axis

The horizontal axis of your chart
Position Bottom Top
Baseline
Ticks
Label prefix/suffix
Grid lines
Y axis

The vertical axis of your chart
Position Left Right
Baseline
Ticks
Label prefix/suffix
Grid lines
Scale start Zero Min
Legend

Show labels and colored indicators
Position Bottom Top
Cursor

A line that follows your cursor
Type Line Area
Style Dashed Solid
Stroke width
Tooltip

Show values on hover
Heading format Short Long
Show color indicators

Configure the mock dataset used to preview your chart. Use Time for date-based X axes, or Categorical for labels like product names or categories.

Type Time Categorical
Data points
Unit
Minutes
Hours
Days
Weeks
Months
Years
Interval
Volatility
Categories
Months
Weekdays
Quarters
Max
Min
Reset dimensions
W

×

H
Rename series
Series name
Chart code
Copy this code into your Blade template and bind your data.
Sample Full component
Copy to clipboard
Copy to clipboard
Copyright © 2026 Wireable LLC ·Terms of Service
Built with by
Caleb Porzio and Hugo Sainte-Marie