Docs running with Livewire 4 - Beta try it →
maryUI

Chart

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

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

Install 

<head>

    ...



    {{-- Chart.js  --}}

    

</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);

        }
Made with by Robson Tenório and contributors.