--- 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: ``` 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')

Sales Graphs

{!! $salesChart->container() !!}

@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: ``` ... {{-- ChartScript --}} @if($usersChart) {!! $usersChart->script() !!} @endif ``` 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')

Users Graphs

{!! $usersChart->container() !!}

@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': ``` 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. ``` 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: ------ ``` 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 ``` 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')

Users Graphs

{!! $usersChart->container() !!}

@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

laravelcharts

Use Laravel charts in Laravel.

Join Our Newsletter. No Spam, Only the good stuff.