Livewire Charts

News

October 20th, 2020

charts-featured.png

Livewire Charts is a package by Andrés Santibáñez for creating neat charts using Livewire in Laravel projects.

Just released livewire-charts v1.0.0

Add @LaravelLivewire + @Alpine_JS + @apexcharts powered charts to your projects.

Check it out here! https://t.co/3hMiuYbGTG

I've also added a demo repo with examples. https://t.co/v9bK7Gyf2g

Enjoy!

Feedback welcomed! pic.twitter.com/VoAce6U0O3

— Andrés Santibáñez (@asantibanez) October 19, 2020

This package uses the following technologies (required) to generate Livewire charts:

  • Laravel Livewire v2
  • Alpine JS
  • Apex Charts

Once you have those requirements installed and set up, here’s how easy it can be to create a chart with this package on the backend:

1$columnChartModel = (new ColumnChartModel())
2 ->setTitle('Expenses by Type')
3 ->addColumn('Food', 100, '#f6ad55')
4 ->addColumn('Shopping', 200, '#fc8181')
5 ->addColumn('Travel', 300, '#90cdf4')
6;

Then on the frontend, you pass the variable to blade:

1<livewire:livewire-column-chart
2 :column-chart-model="$columnChartModel"
3/>

The code above are examples taken directly from the readme. Using the example code, you would have a chart that looks like the following:

At the time of writing, livewire-charts supports three types of charts:

  • Line chart
  • Column chart (as seen above)
  • Pie Chart

You can also enable interactions and provide listeners that will fire in Livewire components, along with the ability to make charts reactive. Be sure to check out the livewire-charts readme for full details on usage.

Learn More

You can learn more about this package, get full installation instructions, and view the source code on GitHub at asantibanez/livewire-charts. Andrés also has a Livewire Charts demo app with examples.

Filed in:

Paul Redmond

Full stack web developer. Author of Lumen Programming Guide and Docker for PHP Developers.