Gráficas con Laravel Livewire y ApexCharts

Laravel Livewire y ApexCharts nos permiten desarrollar gráficas impresionantes de una forma realmente sencilla. En esta entrada te voy a ofrecer un paso a paso para que consigas una gran herramienta para tus futuros proyectos. Crear un Componente Reutilizable Lo primero que vamos a hacer es crear un componente ApexCharts el cual podremos reutilizar en un futuro de forma rápida y sencilla.

Ahora abre el componente .php y actualiza el código por el siguiente.

Lo único que hacemos aquí es preparar los datos que podemos necesitar más adelante para nuestra gráfica.

Ahora abre la vista del componente ApexCharts y vamos a modificar el código por el siguiente:

Lo primero que hacemos es crear un div utilizando el identificador único de cada gráfica, debe ser así.

Más abajo, creamos la instancia de la gráfica pasándole las opciones como veremos más adelante y la renderizamos.

Con @this.on lo que hacemos es decirle a nuestra gráfica que cuando se emita ese evento, esté atenta y ejecute todo el código que se ubica dentro, todo esto gracias a Laravel Livewire. Componente Livewire para crear ApexCharts Ahora, crea un componente Livewire, en mi caso lo he llamado Report, añade el siguiente código y ajústalo a tu modelo y datos.

Lo más importante es crear las series y las categorías, que son los datos que necesita ApexCharts para funcionar.

Una vez hecho abre el archivo de vista del componente Livewire y añade el siguiente código, con lo que todo quedará funcionando.

¡Ya tienes un componente Livewire con ApexCharts listo para utilizar en tus proyectos!