Livewire Charts

Livewire Charts

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

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:

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

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

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

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: News

Newsletter

Join 31,000+ others and never miss out on new tips, tutorials, and more.

Laravel News Partners

Laravel Jobs

Senior Full Stack PHP Developer (Laravel)
Remote
MAPPEN
Senior Laravel Developer
Remote
ACTO
Senior Full-Stack Engineer
[REMOTE: USA Only]
Curricula
Developers for B2B eCommerce SaaS, AWS serverless, Laravel, Vue, Python
Remote, full time EU only
ES Tech Group
Senior PHP Developer (Laravel)
Remote
The Interaction Design Foundation