Create Dynamic Charts in Laravel 12 with ApexCharts

Data visualization creates a much easier way to comprehend data at a glance and present critical information effectively. In this tutorial, you will learn how to create charts in Laravel using the ApexCharts library-an effective library that makes data visualization easy and dynamic. Whether you track sales or analyze performance metrics, or display user insights, charts bring your Laravel 12 app alive.

Most Laravel developers look forward to having an easy, flexible way of displaying data without necessarily writing JavaScript code. That is where Larapex Charts, a wrapper around ApexCharts, will fit.

Package Introduction and Installation

In order to use ApexCharts in Laravel 12, you can install the Larapex Charts package. It’s a great package that bridges Laravel and ApexCharts together in order to create responsive and interactive charts easily using clean backend-driven syntax.

First, open your terminal and install the package using Composer:

composer require arielmejiadev/larapex-charts

Once installed, publish the configuration file to customize settings if needed:

php artisan vendor:publish --tag=larapex-charts-config

This will publish a configuration file named larapex-charts.php inside the config directory. Now you can easily define chart preferences like themes, colors, or global options.

Display Chart in Laravel Component

Let’s create a simple chart in a Laravel 12 application to display user registrations over a week. We’ll generate a chart component using Larapex Charts. Run the following command to create a chart class:

php artisan make:chart UserRegistrationChart

This will create a chart file in the app/Charts directory. Open it and add the following code:

<?php

namespace App\Charts;

use ArielMejiaDev\LarapexCharts\LarapexChart;

class UserRegistrationChart
{
    protected $chart;

    public function __construct(LarapexChart $chart)
    {
        $this->chart = $chart;
    }

    public function build()
    {
        return $this->chart->lineChart()
            ->setTitle('User Registrations Over the Week')
            ->setSubtitle('Number of users registered daily')
            ->addData('Registrations', [12, 19, 3, 5, 2, 3, 10])
            ->setXAxis(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']);
    }
}

Now, let’s display this chart in a Blade view. Open your view file for example resources/views/dashboard.blade.php and add the following:

<x-app-layout>
    <div class="container mx-auto">
        <h2 class="text-xl font-semibold mb-4">User Registration Report</h2>
        {!! $chart->container() !!}
    </div>

    <script src="{{ $chart->cdn() }}"></script>
    {{ $chart->script() }}
</x-app-layout>

Finally, call the chart component from your controller:

<?php

namespace App\Http\Controllers;

use App\Charts\UserRegistrationChart;

class DashboardController extends Controller
{
    public function index(UserRegistrationChart $chart)
    {
        return view('dashboard', ['chart' => $chart->build()]);
    }
}

When you load your dashboard page, you’ll see an interactive line chart showing user registrations for the week.

Different Types of Chart Examples

Let’s take few more example to show different types of chart into Laravel application using ApexCharts plugin.

Bar Chart Example

public function build()
{
    return $this->chart->barChart()
        ->setTitle('Monthly Sales Performance')
        ->addData('Sales', [300, 400, 350, 500, 490, 600])
        ->setXAxis(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']);
}

This example helps visualize performance trends month by month in a business dashboard.

Pie Chart Example

public function build()
{
    return $this->chart->pieChart()
        ->setTitle('Product Category Distribution')
        ->addData([40, 25, 20, 15])
        ->setLabels(['Electronics', 'Fashion', 'Home Decor', 'Others']);
}

It can be used to represent how your products or services are distributed across different categories.

Donut Chart Example

public function build()
{
    return $this->chart->donutChart()
        ->setTitle('Customer Device Usage')
        ->addData([60, 30, 10])
        ->setLabels(['Mobile', 'Desktop', 'Tablet']);
}

A donut chart like this can show device usage patterns in a simple, visual format for analytics dashboards.

Area Chart Example

public function build()
{
    return $this->chart->areaChart()
        ->setTitle('Website Traffic Growth')
        ->addData('Visitors', [100, 120, 180, 200, 250, 300])
        ->setXAxis(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']);
}

An area chart is perfect for displaying data trends over time, such as website visitors or sales growth.

Conclusion

Using Laravel 12 ApexCharts through Larapex Charts makes adding interactive data visualizations easy and elegant. You can visualize real-time metrics right on your dashboard to make your Laravel application much more interesting and user-friendly.

Whether you need line charts, bar charts, or pie charts, Laravel 12 combined with ApexCharts offers you a flexible way to bring your data to life easily. Begin integrating Charts in Laravel with ApexCharts today and transform raw data into meaningfully visual insights that tell a story.

Codewolfy