We noticed you're using an ad blocker

Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Laravel Horizontal Bar Chart

world cup 2022


Get update standing EPL, UEFA, LaLiga and more

Get Now

The chart is really helpful for data visualization. In our application sometimes we need to show data horizontally with the horizontal bar chart. It's true, most of horizontal bar chart implementation is not quite simple and easy for beginner but in this tutorial, I'll show you the easiest horizontal bar chart with Laravel application. It's really simple and easy with hBarChart jQuery plugin. Even you don't need to make a JSON service to make a horizontal bar chart in your Laravel application.


Goal: Here I'll make a horizontal bar chart for last 7 days sales summary from the sales table. According to this tutorial, you can make any kind of horizontal data visualization like top 10 product sales depending on sales quantity, top 7 scorers or anything like that. Let's start.

Our sales table has this kind of data.

 id  trx_date  product_id    rate  quantity  amount  
------  --------  ----------  ------  --------  --------
     1  2019-11-18         1     200         1       200
     2  2019-11-18         2      50         2       100
     3  2019-11-19         2      50         4       200
     4  2019-11-20         1     200         1       200
     5  2019-11-20         3     150         2       300
     6  2019-11-21         4     500         2      1000
     7  2019-11-22         1     200         8      1600
     8  2019-11-23         4     500         8      4000
     9  2019-11-24         4     500        10      5000

We need to get summary data for the last 7 days. So we have to query like this.

SELECT trx_date,SUM(amount) total FROM sales GROUP BY trx_date ORDER BY trx_date DESC LIMIT 7

trx_date      total  
----------  ---------
2019-11-24    5000.00
2019-11-23    4000.00
2019-11-22    1600.00
2019-11-21    1000.00
2019-11-20     500.00
2019-11-19     200.00
2019-11-18     300.00


  • Include jQuery
  • Add hBarChart jQuery plugin
  • Define Route
  • Make Controller
  • Make view
  • Conclusion


Step 01: Include jQuery

At first, you need to add the jQuery library in your template. If you already have then you don't need to include jQuery.

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>


Step 02: Add hBarChart jQuery plugin

Download the hBarChart.js and include it after the jQuery library.

<script src="hBarChart.js"></script>


Step 03: Define Route 



Step 04: Make Controller

Now make a dashboard controller for getting last 7 days sales summary data and pass these to a view.

php artisan make:controller DashboardController


<?php namespace App\Http\Controllers;

use App\Http\Requests;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class DashboardController extends Controller

    public function index()
        $data = \DB::select('SELECT trx_date,SUM(amount) total FROM sales GROUP BY trx_date ORDER BY trx_date DESC LIMIT 7');
        return view('admin.dashboard',compact('data'));



Step 05: Make view

Make a blade view inside the resources folder name with dashboard.blade.php and write code for horizontal data visualization.


    <div class="container">
        <div class="row">
            <div class="col-md-6">

                <ul class="chart">
	                @foreach($data as $row)
	                  <li data-data="{{$row->total}}">{{$row->trx_date}}</li>


        $(function () {


In this view, I just printed my sales data with a simple foreach loop in my dashboard view with a specific format and then at the bottom of the view I just called the hBarChart function by selecting a CSS class .chart

Horizontal bar chart result


You can configure this horizontal bar chart like max bar's colour, background colour, text colour, sorting and more by passing a config object into the hBarChart function.

        bgColor: '#C000',
        textColor: '#fff',
        show: 'data',
        sorting: true,
        maxStyle: {
            bg: 'orange',
            text: 'white'



Hope this tutorial post will help you to make horizontal bar chart in your Laravel application for data visualization easily. If you find this is helpful then please share this with others.

Share on

Related Post - Latest Post

Tinkerpad - A minimal Laravel code editor

What's new in Laravel 9

Make laravel site super fast by page-cache!

Laravel maintenance mode bypass by Secret Route!

Laravel database backup automatically - cPanel shared hosting, VPS

Laravel Datatables - Ajax, Column, Buttons, Customization