new
Livewire Volt extension for VSCode. Voltage →
maryUI

Chart

If you need a simple progress bar see the Progress component.

Install

This component is a wrapper around Chart.js. So, it accepts any valid configuration described in its docs. 

<head>
    ...
 
    {{-- Chart.js  --}}
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
</head>

Usage

Check all available options in the Chart.js docs. 

<div class="grid gap-5">
    <x-button label="Randomize" wire:click="randomize" class="btn-primary" spinner />
    <x-button label="Switch" wire:click="switch" spinner />
</div>
 
<x-chart wire:model="myChart" />
public array $myChart = [
    'type' => 'pie',
    'data' => [
        'labels' => ['Mary', 'Joe', 'Ana'],
        'datasets' => [
            [
                'label' => '# of Votes',
                'data' => [12, 19, 3],
            ]
        ]
    ]
];
 
public function randomize()
{
    Arr::set($this->myChart, 'data.datasets.0.data', [fake()->randomNumber(2), fake()->randomNumber(2), fake()->randomNumber(2)]);
}
 
public function switch()
{
    $type = $this->myChart['type'] == 'bar' ? 'pie' : 'bar';
    Arr::set($this->myChart, 'type', $type);
}
maryUI
Sponsor