Use Laravel charts in Laravel.
Tags: laravel, chartjs, laravelcharts
Published: 2019-08-22 23:11:40

---
title:Use Laravel charts in Laravel.
published: true
description: Add amazing charts from different js libraries to your Laravel projects with ajax, without writing a single line of Javascript.
tags: Laravel, ChartJS, Laravel charts
cover_image: https://camo.githubusercontent.com/4b2baabf9bc0a88e2ad08a03ed72baf3d0d2ca77/68747470733a2f2f696d6167652e70726e747363722e636f6d2f696d6167652f46444a437237797753684b4d556c46697445635f57772e706e67
---

If you need to add some graphs to your views, maybe you have work with some js library to add cool graphics but even with a good library like ChartJS implementing this is not so easy.

##Installation
------

First we need to add a package to your Laravel project so in terminal add:

```
composer require consoletvs/charts:6.*
```

If you are working with Laravel 5.5 or higher thats all you need to install the package thanks by autodiscover feature.

If you work with Laravel lower than 5.5 you will need to register a service provider, add this line into the config/app.php file in the providers section:

```
ConsoleTVs\Charts\ChartsServiceProvider::class,
```

And to publish the configuration in terminal with the command:

```
php artisan vendor:publish --tag=charts_config
```

Now you have the package installation done!

##Use the package
------

We are going to use artisan cli to create a chart class.

```
php artisan make:chart UserChart
```

Now in app directory we can see a folder named charts and there is our new class UserChart.php.

I will explain with an easy example but you can add as many complexity as you want, we are going to create a controller of type resource to display user chart:

```
php artisan make:controller UserChartController -r
```

Now you can edit the file in app/Http/Controllers/UserChartController.php and only hold the index method all other rest full methods can be deleted, and you will have something like this:

```
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UserChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
    }

}
```

To make it more easy I will create a fake data but you can use eloquent o queryBuilder to create queries as you need, I will import the new chart class created before to the controller, and start to create a chart with Laravel chart api fluid syntax:

```
<?php

namespace App\Http\Controllers;

use App\Charts\UserChart;
use Illuminate\Http\Request;

class UserChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $usersChart = new UserChart;
        $usersChart->labels(['Jan', 'Feb', 'Mar']);
        $usersChart->dataset('Users by trimester', 'line', [10, 25, 13]);
        return view('users', [ 'usersChart' => $usersChart ] );
    }

}
```

Now we need a view to show the data in the last code snippet the index method returns a view for users charts, so I will create a file in resources/views/ named users.blade.php, with next content: 


```
@extends('layouts.app')

@section('content')
<h1>Sales Graphs</h1>

<div style="width: 50%">
    {!! $salesChart->container() !!}
</div>
@endsection
```

Now we pass the chart script to the view file we only need to add the chart css and js library files, to keep it simple we are going to use the layout app blade file, it is located in resources/views/layout/app.blade.php, here we are going to add in header section the next line at the very bottom:

```
<head>
    <meta charset="utf-8">
    ...
    {{-- ChartScript --}}
    @if($usersChart)
    {!! $usersChart->script() !!}
    @endif
</head>
```

To add JS library file we are going to the bottom to the file app.blade.php, before the html close tag and add the scripts:

```
@extends('layouts.app')

@section('content')
<h1>Users Graphs</h1>

<div style="width: 50%">
    {!! $usersChart->container() !!}
</div>
@endsection
``` 

Finally we only need a route to access to the graphic view, in routes/web.php file you can add a route with get method to access to the usersChartController class in method index() in the example I set a route to 'sales':

```
<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

....

Route::get('users', 'UserChartController@index');

```

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fekbgt62ypv7j6ai42ib.png)

Well it is simple but, maybe you want to customize it a little bit more, you can customize the charts by two ways, you can customize the "dataset" and the chart as itself, to start we are going to customize the "dataset":

```
<?php

namespace App\Http\Controllers;

use App\Charts\UserChart;
use Illuminate\Http\Request;

class UserChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $usersChart = new UserChart;
        $usersChart->labels(['Jan', 'Feb', 'Mar']);
        $usersChart->dataset('Users by trimester', 'line', [10, 25, 13])
            ->color("rgb(255, 99, 132)")
            ->backgroundcolor("rgb(255, 99, 132)");
        return view('users', [ 'usersChart' => $usersChart ] );
    }

}
```

- The method "color" set the border color in the case of a "line" or "area" charts it sets the line color, and as param requires a string with the rgb or rgba color

- The method "backgroundcolor" set the area color, the color to fill, and as param requires a string with the rgb or rgba color


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/mo35tc2upidhi0kcxynh.png)

- "fill" method requires a boolean and it paint the area or not if it is set as false, by default a chart is filled.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wnd7z32wmzopttdg9ac1.png)

- "linetension" method make less curved a line and it requires a float from 0.0 to 1.0

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ujhmcwrvmmcs6o57y5m8.png)

- "dashed" method makes the line a dashed line and it requires an array.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/alprcf9quw0hyfpd5zkv.png)


##Customize the chart

- To customize the chart we can use some methods:
  - "minimalist" method requires a boolean and it removes the grid background and the legend of the chart
  - "displaylegend" methods requires a boolean and it is true by default, to hide the legend set false as param.
  - "displayaxes" method requieres a boolean and by default is true it, paint the background grid of the chart, to hide it just set false as the param.
  - "barWidth" this method does not do anything in line and area charts, it requires a double.

```
<?php

namespace App\Http\Controllers;

use App\Charts\UserChart;
use Illuminate\Http\Request;

class UserChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $usersChart = new UserChart;
        $usersChart->title('Users by Months', 30, "rgb(255, 99, 132)", true, 'Helvetica Neue');
        $usersChart->barwidth(0.0);
        $usersChart->displaylegend(false);
        $usersChart->labels(['Jan', 'Feb', 'Mar']);
        $usersChart->dataset('Users by trimester', 'line', [10, 25, 13])
            ->color("rgb(255, 99, 132)")
            ->backgroundcolor("rgb(255, 99, 132)")
            ->fill(false)
            ->linetension(0.1)
            ->dashed([5]);
        return view('users', [ 'usersChart' => $usersChart ] );
    }

}
```

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/uajg70x2s2up6ofatmug.png)


##Doughnutexample:
------

```
<?php

namespace App\Http\Controllers;

use App\Charts\UserChart;
use Illuminate\Http\Request;

class UserChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $borderColors = [
            "rgba(255, 99, 132, 1.0)",
            "rgba(22,160,133, 1.0)",
            "rgba(255, 205, 86, 1.0)",
            "rgba(51,105,232, 1.0)",
            "rgba(244,67,54, 1.0)",
            "rgba(34,198,246, 1.0)",
            "rgba(153, 102, 255, 1.0)",
            "rgba(255, 159, 64, 1.0)",
            "rgba(233,30,99, 1.0)",
            "rgba(205,220,57, 1.0)"
        ];
        $fillColors = [
            "rgba(255, 99, 132, 0.2)",
            "rgba(22,160,133, 0.2)",
            "rgba(255, 205, 86, 0.2)",
            "rgba(51,105,232, 0.2)",
            "rgba(244,67,54, 0.2)",
            "rgba(34,198,246, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)",
            "rgba(233,30,99, 0.2)",
            "rgba(205,220,57, 0.2)"

        ];
        $usersChart = new UserChart;
        $usersChart->minimalist(true);
        $usersChart->labels(['Jan', 'Feb', 'Mar']);
        $usersChart->dataset('Users by trimester', 'doughnut', [10, 25, 13])
            ->color($borderColors)
            ->backgroundcolor($fillColors);
        return view('users', [ 'usersChart' => $usersChart ] );
    }

}

```

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/cu5wpd6cdws5kolq8w3r.png)

##Bar example
-----

With a little effort and the default bootstrap from Laravel installation:

###UserChartController to generate the chart
```
<?php

namespace App\Http\Controllers;

use App\Charts\UserChart;
use Illuminate\Http\Request;

class UserChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $borderColors = [
            "rgba(255, 99, 132, 1.0)",
            "rgba(22,160,133, 1.0)",
            "rgba(255, 205, 86, 1.0)",
            "rgba(51,105,232, 1.0)",
            "rgba(244,67,54, 1.0)",
            "rgba(34,198,246, 1.0)",
            "rgba(153, 102, 255, 1.0)",
            "rgba(255, 159, 64, 1.0)",
            "rgba(233,30,99, 1.0)",
            "rgba(205,220,57, 1.0)"
        ];
        $fillColors = [
            "rgba(255, 99, 132, 0.2)",
            "rgba(22,160,133, 0.2)",
            "rgba(255, 205, 86, 0.2)",
            "rgba(51,105,232, 0.2)",
            "rgba(244,67,54, 0.2)",
            "rgba(34,198,246, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)",
            "rgba(233,30,99, 0.2)",
            "rgba(205,220,57, 0.2)"

        ];
        $usersChart = new UserChart;
        $usersChart->minimalist(true);
        $usersChart->labels(['Jan', 'Feb', 'Mar']);
        $usersChart->dataset('Users by trimester', 'bar', [10, 25, 13])
            ->color($borderColors)
            ->backgroundcolor($fillColors);
        return view('users', [ 'usersChart' => $usersChart ] );
    }

}

```
### blade view with some bootstrap for styling
```
@extends('layouts.app')

@section('content')


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

@endsection
```

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/6gn7zlsx5smsmkpe6db4.png)

Here is the code on Github repo:

https://github.com/ArielMejiaDev/SNIPPET_Laravel-charts