Chart
Chart component.
Chart, Customization Blocks
<x-chart :series="[10, 40, 25, 60, 30, 80]" />The chart works on its own or inside a card . This first example is shown without a card. Later previews wrap the chart in a card only so they are easier to read.
area (default), line, bar, pie and donut. Pie and donut need labels.
<x-chart :series="[10, 40, 25, 60, 30, 80]" area /> <x-chart :series="[10, 40, 25, 60, 30, 80]" line /> <x-chart :series="[10, 40, 25, 60, 30, 80]" bar /> <x-chart :series="[35, 25, 20, 20]" :labels="['Direct', 'Organic', 'Social', 'Referral']" pie legend /> <x-chart :series="[35, 25, 20, 20]" :labels="['Direct', 'Organic', 'Social', 'Referral']" donut legend />Each type is also a flag, so line is the same as type="line" . Using two flags at once, or a flag next to a type that contradicts it, throws.
Named series share one scale. grid, legend, tooltip and markers are opt-in. Clicking a legend entry toggles its series.
<x-chart :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']" :series="[ ['name' => '2026', 'data' => [10, 40, 25, 60, 30, 80]], ['name' => '2025', 'data' => [8, 30, 33, 41, 22, 55]], ]" grid legend tooltip markers />An option to stack series on top of each other, instead of overlapping.
<x-chart :labels="['Jan', 'Feb', 'Mar', 'Apr']" bar stacked :series="[ ['name' => 'Active', 'data' => [12, 18, 15, 22]], ['name' => 'Inactive', 'data' => [30, 26, 34, 28]], ['name' => 'Recurring', 'data' => [18, 41, 12, 62]], ]" grid legend />An option to combine different chart types within the same visualization.
<x-chart :labels="['Jan', 'Feb', 'Mar', 'Apr']" bar stacked :series="[ ['name' => 'New', 'data' => [12, 18, 15, 22]], ['name' => 'Returning', 'data' => [30, 26, 34, 28]], ['name' => 'Total', 'data' => [42, 44, 49, 50], 'type' => 'line'], ]" grid legend tooltip />An option to plot a series against a second vertical axis on the right.
<x-chart :labels="['Jan', 'Feb', 'Mar', 'Apr']" :series="[ ['name' => 'Revenue', 'data' => [1200, 1900, 1500, 2100]], ['name' => 'Orders', 'data' => [8, 14, 11, 16], 'axis' => 'right'], ]" grid legend :prefix="['left' => '$']" :suffix="['right' => ' un']" />Use color for a single series. Use colors when there are several.
<x-chart :series="[10, 40, 25, 60, 30, 80]" color="emerald" /> <x-chart :labels="['Jan', 'Feb', 'Mar', 'Apr']" :colors="['red', 'blue', 'amber']" :series="[ ['name' => 'A', 'data' => [10, 40, 25, 60]], ['name' => 'B', 'data' => [22, 18, 40, 30]], ['name' => 'C', 'data' => [5, 30, 15, 45]], ]" legend />prefix, suffix and decimals cover the common case. A closure wins over all three and receives the axis as a second argument.
<!-- prefix, suffix and decimals cover the common case --><x-chart :series="$revenue" grid prefix="$" :decimals="2" /> <!-- Anything beyond it takes a closure --><x-chart :series="$revenue" grid :formatter="fn (float $value) => Number::currency($value, 'BRL', 'pt_BR')" /> <!-- The axis arrives as a second argument --><x-chart :formatter="fn (float $value, string $axis) => $axis === 'right' ? $value.' un' : Number::currency($value, 'BRL', 'pt_BR')" :series="[ ['name' => 'Revenue', 'data' => $revenue], ['name' => 'Orders', 'data' => $orders, 'axis' => 'right'], ]" grid legend tooltip />An option to insert content above and below the plot.
<x-chart :series="[10, 40, 25, 60, 30, 80]" grid> <x-slot:header>Monthly Balance</x-slot:header> <x-slot:footer> <div class="flex justify-end"> Updated 2 minutes ago </div> </x-slot:footer></x-chart>An option to display a lazy loading skeleton indicator.
<x-chart skeleton /> <x-chart skeleton="10" bar /> <x-chart skeleton="5" donut />There are a few things that can be configured using the configuration file. For example, you can control the height of a chart by using the height attribute inline per chart, or globally by using the chart.height configuration. The default value of the height is 240 in the configuration file.
What happens when the data cannot be drawn.