Tuesday, October 20, 2020

Laravel – Chartjs with Dynamic Data Working Example

Laravel - Chartjs with Dynamic Data Working Example

Hello to all, welcome to therichpost.com. In this post, I will do, Laravel – Chartjs with Dynamic Data Working Example.

In this post, I will show laravel controller data to laravel blade template file with the help of laravel web routes.


Laravel - Chartjs with Dynamic Data Working Example


Here is the working code steps, you need to follow:


1. Very first, here is the code for laravel controller file HomeController.php with custom data:

public function Chartjs(){
  $month = array('Jan', 'Feb', 'Mar', 'Apr', 'May');
  $data  = array(1, 2, 3, 4, 5);
  return view('chartjs',['Months' => $month, 'Data' => $data]);

2. Here is the code for laravel routes/web.php file:

Route::get("/chartjs", "HomeController@Chartjs");

3. Finally, here is the code for laravel blade template file chartjs.blade.php:

I made laravel controller array data into json format for chartjs data:

<!doctype html>

  <title>Bar Chart</title>
  <script src="http://www.chartjs.org/dist/2.7.3/Chart.bundle.js"></script>
  <script src="http://www.chartjs.org/samples/latest/utils.js"></script>
  canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

    <div id="container" style="width: 75%;">
    <canvas id="canvas"></canvas>

    var chartdata = {
    type: 'bar',
    data: {
    labels: <?php echo json_encode($Months); ?>,
    // labels: month,
    datasets: [
    label: 'this year',
    backgroundColor: '#26B99A',
    borderWidth: 1,
    data: <?php echo json_encode($Data); ?>
    options: {
    scales: {
    yAxes: [{
    ticks: {

    var ctx = document.getElementById('canvas').getContext('2d');
    new Chart(ctx, chartdata);


In the end run the laravel project:


This is code. If you have any query related to this post, then do comment below or ask question. This will also work in laravel 8. Laravel 8 Chartjs with Dynamic Data Working Example

Thank you,




Laravel Chartjs
Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.