Samson Omojola I'm an experienced software engineer. I love creating applications with responsive, beautiful, intuitive, state-of-the-art designs. I'm skilled in HTML, CSS, JavaScript, Ionic, React, PHP, Laravel, and Flutter.

Exploring the best Laravel chart libraries

9 min read 2574

Using Laravel Chart Libraries In Your Projects

As companies become more data-driven, the need to collect and analyze data efficiently continues to rise. This need makes charts increasingly valuable as a tool that helps people simplify complicated data and communicate information quickly and effectively.

It is common for developers to use database information to create visualizations that are easy for users to comprehend. Since charts have become a common feature in websites, it makes sense to use chart libraries that enable the creation of these visualizations without writing hundreds of lines of code or building from scratch.

In this article, we’ll take a look at the best chart libraries in Laravel and how you can use them in your projects. We’ll use these libraries to create line charts, bar charts, and pie charts.

The Laravel chart libraries we’ll be covering are:

I chose these three libraries specifically for their seamless integration into projects and the very few lines of code they require to spin up a full-fledged chart. Let’s dive into them!

Jump ahead:

What is Larapex Charts?

Larapex Charts is a Laravel wrapper around ApexCharts. With the help of this package, we can easily create and render charts in our Laravel application without writing any JavaScript code.

This package provides us with pie charts, donut charts, area charts, line charts, and others. To make use of the Larapex Charts library in your project, install it with composer:

composer require arielmejiadev/larapex-charts

After installing this library with the command above, you should see the below:

Black Terminal Background With White Text Showing Larapex Charts Library Installation With Blue Info Labels And Green Done Labels Indicating Package Installation Status And Other Necessary Information

Next, publish Larapex’s config files to make them accessible to your application:

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

Once you see DONE in green text as shown in the image below, you will have successfully set up Larapex Charts:

Black Terminal Background With White Text, Blue Info Label, And Green Done Label For Message Confirming Successful Larapex Charts Setup

Now you can use Larapex Charts in your project.

Using Larapex Charts to create a bar chart

The Larapex Charts package provides a chart class. We’ll need to create an instance of this class, which I’ll name ExpensesChart for this example:

php artisan make:chart ExpensesChart

After running the above command, you will be prompted to select the type of chart you want to create. Let’s create a bar chart first:

Black Terminal Background With White Text Showing List Of Ten Chart Types Available In Larapex Charts, Green Prompt For User To Select A Type To Proceed, And Message With Blue Info Label Confirming Successful Chart Class Creation

A chart class will be created in app/Charts/ExpensesChart. You can customize the chart by giving values to its properties. Set the title of your chart using setTitle, your chart data using addData, and the values on the x axis using setXAxis:

<?php
namespace App\Charts;
use ArielMejiaDev\LarapexCharts\LarapexChart;
class ExpensesChart
{
    protected $chart;
    public function __construct(LarapexChart $chart)
    {
        $this->chart = $chart;
    }
    public function build(): \ArielMejiaDev\LarapexCharts\BarChart
    {
        return $this->chart->barChart()
            ->setTitle('My July Expenses.')
            ->setSubtitle('Weekly expenses in july.')
            ->addData('Bills', [26, 39, 10, 48])
            ->addData('Vacation', [70, 13, 36, 94])
            ->addData('EatOuts',[50, 60, 70, 30])
            ->setXAxis(['Week1', 'Week2', 'Week3', 'Week4']);
    }
}

Next, create a controller to help build and render the chart:

php artisan make: controller ExpensesController –r

You should see a message confirming that the controller was created successfully:

Black Terminal Background With White Text And Blue Info Label Showing Message Confirming Successful Controller Creation

Navigate to app/HTTP/Controller/ExpensesController and import the ExpensesChart class you created. In the index function, create an object of ExpensesChart and use the build() function in the ExpensesChart class to create your chart. The chart can then be passed to a view:

<?php
namespace App\Http\Controllers;
use App\Charts\ExpensesChart;
use Illuminate\Http\Request;
class ExpensesController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(ExpensesChart $chart)
    {
        return view('expenses.index', ['chart' => $chart->build()]);   
    }
}

In the code above, we passed the chart object to expenses.index, which is an index.blade.php file in an Expenses folder. Here’s where you can find the folder:

Black Background With White Text Showing Project File Structure With Expenses Folder Expanded To Show Index Blade Php File Where Chart Object Was Passed In Previous Step

To ensure that the index function is invoked when the view page is accessed, we need to create a route for it in routes/web.php.

First, import your controller ExpensesController. Then create a route /expenses, which triggers the index function in the ExpensesController class and returns the appropriate view file:

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ExpensesController;
Route::get('/expenses', [ExpensesController::class, 'index'])->name('expenses.index');

The chart can now be rendered in your view using $chart->container(). At the bottom of the page, add the package’s CDN and script files:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Chart Example</title>
    <link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="h-screen bg-gray-100">
<div class="container px-4 mx-auto">
    <div class="p-6 m-20 bg-white rounded shadow">
        {!! $chart->container() !!}
    </div>
</div>
<script src="{{ $chart->cdn() }}"></script>
{{ $chart->script() }}
</body>
</html>

Now if you navigate to localhost:8000/expenses in your browser, the bar chart should be visible:

Bar Chart Titled My July Expenses Broken Down Into Four Weeks With Three Bars In Each Week Color Coded By Expense Type: Light Blue For Bills, Light Teal For Vacation, Yellow For EatOuts

Creating other types of charts

Larapex Charts is not limited to just bar charts. We can create other types of charts with it following the same process.

For example, to create a pie chart, after running the php artisan make:chart command in your terminal, select Pie Chart from the list of options provided:

Black Terminal Background With White Text Showing List Of Available Chart Types In Larapex Charts, Green Prompt To Select A Type, And Blue Info Label Confirming Successful Chart Class Creation

Just like before, customize your chart to fit your requirements, like so:

<?php
namespace App\Charts;
use ArielMejiaDev\LarapexCharts\LarapexChart;
class IncomeChart
{
    protected $chart;
    public function __construct(LarapexChart $chart)
    {
        $this->chart = $chart;
    }
    public function build(): \ArielMejiaDev\LarapexCharts\PieChart
    {
        return $this->chart->pieChart()
            ->setTitle('My Monthly Income')
            ->setSubtitle('July Income')
            ->addData([400, 500,700, 300])
            ->setLabels(['income1', 'income2', 'income3']);
    }
}

Next, create a controller with the following command:

php artisan make: controller IncomeController –r

This will allow you to build and render your chart, like so:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Charts\IncomeChart;
class IncomeController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(IncomeChart $chart)
    {
        return view('income.index', ['chart' => $chart->build()]);
    }

Create a route to connect your controller with your view:

<?php 
Use Illuminate\Support\Facades\Route;
Use App\Http\Controllers\IncomeController;
Route::get(‘/income’, [IncomeController::class, ‘index’]) ->name(‘income.index’);

Lastly, render the chart in your view with $chart->container().

<body class="h-screen bg-gray-100">
<div class="container px-4 mx-auto">
    <div class="p-6 m-20 bg-white rounded shadow">
        {!! $chart->container() !!}
    </div>
</div>
<script src="{{ $chart->cdn() }}"></script>
{{ $chart->script() }}
</body>

The result:

Example Pie Chart Created With Larapex Charts Titled My Monthly Income And Divided Into Blue, Green, Yellow, And Red Sections Starting From Top Right And Rotating Clockwise. Chart Legend Labels Blue As Income 1, Green As Income 2, Yellow As Income 3, And Red As Series 4

Exploring ConsoleTVs/Charts v6

Although v7 of the ConsoleTV/Charts library was recently deprecated, v6 is still active and functioning. This library helps developers integrate Chart.js into Laravel applications without having to write any JavaScript code. With this library, developers can create charts via an API.

Install the package in your application:

composer require consoletvs/charts “6.*”

We now have the library in our application and can proceed to use it to create charts.

Using ConsoleTVs/Charts to create a pie chart

Run the following command to create a new chart model:

php artisan make:chart IncomeChart

You should see a confirmation message like the one below:

Black Terminal Background With White Text And Blue Info Label Confirming Successful Creation Of New Chart Model Using Console Tvs Charts Library

The command above creates an IncomeChart class inside app/Charts. It has a constructor function, which helps to initialize your chart.



Next, we need a controller to help generate our chart data:

php artisan make:controller IncomeChartController -r

Navigate to your new controller app/Http/Controllers/UserChartController.php and add some data for your chart.

As you can see below, we are creating a chart that shows income for the months of June, July, and August. Inside labels, you’ll find the values on the X axis. Likewise, in dataset, you’ll find the values on the Y axis. Here’s the code:

<?php
namespace App\Http\Controllers;
use App\Charts\IncomeChart;
use Illuminate\Http\Request;
class IncomeChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $incomeChart = new IncomeChart;
        $incomeChart->labels(['June', 'July', 'August']);
        $incomeChart->dataset('Income', 'pie', [400, 392, 355]);
        return view('income', [ 'incomeChart' => $incomeChart ] );
    }
}

Notice how we created an instance of our IncomeChart model and used the instance to create our chart data. We then pass the chart data to a view named income, which we now have to create.

Navigate to resources/views/ and create a file named income.blade.php. In this view file, we can access the chart we created earlier by using the container() function, which comes with the incomeChart model we also created earlier:

<div class="container">
    <h1>Income Graphs</h1>
    <div class="row">
        <div class="col-6">
            <div class="card rounded">
                <div class="card-body py-3 px-3">
                    {!! $incomeChart->container() !!}
                </div>
            </div>
        </div>
    </div>
</div>

We also need to add the CDN for Chart.js inside the head tags:

<head>
    {{-- ChartStyle --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js" charset="utf-8"></script>
</head>

Additionally, we’ll need to add some other script files for the library in the body tag:

...
    {!! $incomeChart->script() !!}
</body>

Ultimately, your view file should look like this:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    {{-- ChartStyle --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js" charset="utf-8"></script>
</head>
<body>
    <div id="app">

        <main class="py-4">
        <div class="container">
            <h1>Income Graph</h1>
            <div class="row">
                <div class="col-6">
                    <div class="card rounded">
                        <div class="card-body py-3 px-3">
                            {!! $incomeChart->container() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </main>
    </div>

    {{-- Chartscript --}}
    @if($incomeChart)
    {!! $incomeChart->script() !!}
    @endif
</body>
</html>

Lastly, we need a route to call our controller from a web URL:

Route::get('/income', [IncomeChartController::class, 'index']);

Now if you navigate to localhost:8000/income in your browser, your pie chart should be visible:

Example Pie Chart Created With Console Tvs Charts Titled Income Graph. Chart Is Split Into Slightly Unequal Thirds. Legend Indicates Sections Are Split Into June July And August. All Sections Are Filled With The Same Light Gray Color

If you go back to your controller and change pie to line or bar, you should get the corresponding results as well.

For a line chart:

Example Line Chart Created With Console Tvs Charts Titled Income Graph. Three Connected Points Are Plotted Labeled June July And August. Space Below Plotted Points And Line Is Filled In Uniform Gray.

For a bar chart:

Example Bar Chart Created With Console Tvs Charts Titled Income Graph. Three Gray Bars Are Visible Labeled June July And August

What is laravel-charts?

The last chart library we’ll cover is laravel-charts. Just like the previous option, this package also helps developers create Chart.js charts inside the Blade files of a Laravel application without writing any JavaScript code.

Run the following command to install laravel-charts:

composer require laraveldaily/laravel-charts

Black Terminal Background With White And Green Text. Green Text Indicates Version, Library, And Status Info For Laravel Charts Library Installation. Some White Text Includes Info Labels That Describe Relevant Activity

To explore how to use laravel-charts, we’ll plot a chart of users against the month they were added to our database. Go to phpmyadmin and create a database named users, then add the database name in your .env file:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=users
DB_USERNAME=root
DB_PASSWORD=

As we create the users table, we’ll use Laravel’s DatabaseSeeder to create some dummy users for our chart. Navigate to Database\Seeders\DatabaseSeeder and simply uncomment the code below:

public function run()
    {
        \App\Models\User::factory(10)->create();
        \App\Models\User::factory()->create([
            'name' => 'Test User',
            'email' => '[email protected]',
        ]);
    }

Now we are ready to migrate and seed our database:

php artisan migrate --seed

With that, we have created the users for our chart to display. Now, we’ll proceed to creating the chart itself. We’ll create the chart in a controller and then pass it to a view.

First, create the controller:

php artisan make:controller UserController

Navigate to the newly created controller — namespace App\Http\Controller\UserController — and create the chart in the index function:

public function index()
    {
        $chart_options = [
            'chart_title' => 'Users by months',
            'report_type' => 'group_by_date',
            'model' => 'App\Models\User',
            'group_by_field' => 'created_at',
            'group_by_period' => 'month',
            'chart_type' => 'bar',
        ];
        $chart1 = new LaravelChart($chart_options);

        return view('home', compact('chart1'));
    }

We will now create a variable $chart_options and give it an array of options for our chart:

  • chart_title — text to be displayed in the legend
  • report_type — determines how chart data will be grouped
  • model — the source of chart data
  • group_by_field — the field in our database that will be used in the group_by clause
  • group_by_period — used to specify the date for group_by_date report type
    • Value can be day, week, month, or year

The next step is to create an object of the LaravelChart class from the chart package we installed. First, import the class:

use LaravelDaily\LaravelCharts\Classes\LaravelChart;

Then, use it to create an object:

$chart1 = new LaravelChart($chart_options);

Lastly, pass it to your view:

return view('home', compact('chart1'));

To render the chart in your view, add the required CDN and boilerplate code in your blade file:

{!! $chart1->renderChartJsLibrary() !!}
{!! $chart1->renderJs() !!}

Now you can render the chart:

<div>
    <h1>{{ $chart1->options['chart_title'] }}</h1>
                    {!! $chart1->renderHtml() !!}
</div>

If you need it, here is the entire code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Chart Sample</title>
    <link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="h-screen bg-gray-100">
<div class="container px-4 mx-auto">
    <div class="p-6 m-20 bg-white rounded shadow">
    <h1>{{ $chart1->options['chart_title'] }}</h1>
                    {!! $chart1->renderHtml() !!}
    </div>
</div>
{!! $chart1->renderChartJsLibrary() !!}
{!! $chart1->renderJs() !!}
</body>
</html>

Below, you can see what the result should look like in a browser:

Example Bar Chart Created With Laravel Charts Library. Chart Is Titled Users By Months. Five Gray Bars Of Varying Heights Are Respectively Labeled 2021-08,2022-01, 2022-03, 2022-08, 2022-09 From Left To Right

To create a pie chart instead, navigate to your controller and change the value of chart_type to pie:

'chart_type' => 'pie'

Same Data As Shown In Previous Chart, Now Represented In A Pie Chart Created With Laravel Charts Library. Sections Are Color Coded Starting From Top Right And Moving Clockwise Light Green, Peach, Light Purple, Dark Purple, And Mint Green To Represent Data In The Same Order As In The Previous Bar Chart

For a line chart, make the value line:

'chart_type' => 'line'

Same Data As In The Previous Two Charts Now Represented As A Gridded Line Chart Created With Laravel Charts Library With Curved Gray Line Connecting Data Points

Conclusion

In this guide, we discussed the three best Laravel chart libraries that developers can use to add charts to their Laravel application: Larapex Charts, ConsoleTVs/Charts v6, and laravel-charts.

We used all three of these libraries to create sample line, bar, and pie charts — although none of these libraries are limited to these three types of charts. Hopefully, you can now confidently implement any of these chart libraries in your next Laravel project.

: Full visibility into your web and mobile apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page and mobile apps.

.
Samson Omojola I'm an experienced software engineer. I love creating applications with responsive, beautiful, intuitive, state-of-the-art designs. I'm skilled in HTML, CSS, JavaScript, Ionic, React, PHP, Laravel, and Flutter.

Leave a Reply