jringeisen / wirecharts
A package that allows you to integrate charts with your livewire application.
Installs: 6
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Language:Blade
Type:project
Requires
- php: ^7.4|^8.0
- livewire/livewire: ^2.7
Requires (Dev)
- orchestra/testbench: ^6.0
- phpunit/phpunit: ^9.5
README
After using Laravel Nova in a handful of projects, I needed the Value and Trend Cards outside of Laravel Nova. So I decided to build a livewire package that uses Chartist.js library to accomplish this.
Installation
To get started with Wire Charts, you'll need to require the package.
composer require jringeisen/wirecharts
Add Chartist.js Assets
You'll need the chartist.js assets, make sure to include these in the head of your layout.
<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css"> <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
Publish Views
If you'd like to make modifications to the views, you can do so by using the following command.
php artisan vendor:publish --provider="Jringeisen\WireCharts\WireChartsServiceProvider" --tag="views"
Adding the chart component
To display a chart you'll want to add the component of the chart that you want to add. So for instance, this is how you would add a line chart.
@livewire('line-chart', ['chartId' => '1', 'title' => 'Daily Users', 'series' => $data1, 'height' => 'h-36'])
If you plan to have multiple charts on the same page, make sure to have a unique chartId
for each chart, like so.
@livewire('line-chart', ['chartId' => '1', 'title' => 'Daily Users', 'series' => $data1, 'height' => 'h-36']) @livewire('line-chart', ['chartId' => '2', 'title' => 'Unique Visitors', 'series' => $data2, 'height' => 'h-36'])
The series option requires a specific format.
$data1 = [ 'count' => 100, 'data' => [ ['meta' => '2021-01-01', 'value' => 5], ['meta' => '2021-01-02', 'value' => 4], ['meta' => '2021-01-03', 'value' => 1] ] ]
License
Wire Charts is open-sourced software licensed under the MIT license.