diff --git a/README.md b/README.md index b104791..8cbe625 100755 --- a/README.md +++ b/README.md @@ -16,31 +16,50 @@ composer require asantibanez/livewire-charts ### Requirements -This package uses `Laravel Livewire v2` (https://laravel-livewire.com/) under the hood. +This package requires the following packages/libraries to work: +- `Laravel Livewire v2` (https://laravel-livewire.com/) +- `Alpine Js` (https://github.com/alpinejs/alpine) +- `Apex Charts` (https://apexcharts.com/) -It also uses `Alpine Js` (https://github.com/alpinejs/alpine) for creating charts on the -frontend using `Apex Charts` (https://apexcharts.com/) +Please follow each package/library instructions on how to set them properly in your project. -NOTE: At the moment, `Apex Charts` is only supported for drawing charts. - -Please make sure you include these dependencies before using this package. +NOTE: At the moment, `Apex Charts` is only supported for drawing charts. ## Usage +Livewire Charts supports out of the box the following types of charts +- Line Chart (`LivewireLineChart` component) +- Pie Chart (`LivewirePieChart` component) +- Column Chart (`LivewireColumnChart` component) + +Each one comes with its own "model" class that allows you to define the chart's data and render behavior. +- `LivewireLineChart` uses `LineChartModel` to set up data points, markers, events and other ui customizations. +- `LivewirePieChart` uses `PieChartModel` to set up data slices, events and other ui customizations. +- `LivewireColumnChart` uses `ColumnChartModel` to set up data columns, events and other ui customizations. + +For example, to render a column chart, we can create an instance of `ColumnChartModel` and add some data to it +```php +$columnChartModel = + (new ColumnChartModel()) + ->setTitle('Expenses by Type') + ->addColumn('Food', 100, '#f6ad55') + ->addColumn('Shopping', 200, '#fc8181') + ->addColumn('Travel', 300, '#90cdf4') + ; +``` + +With `$columnChartModel` at hand, we pass it to our `LivewireColumnChart` component in our Blade template. + ```blade - - - - ``` +And that's it! You have a beautiful rendered chart in seconds. 👌 + +![column chart example](https://github.com/asantibanez/livewire-charts/raw/master/column-chart-example.png) + ### Testing ``` bash diff --git a/column-chart-example.png b/column-chart-example.png new file mode 100644 index 0000000..214c2bc Binary files /dev/null and b/column-chart-example.png differ