diff --git a/app/Http/Controllers/Dashboard/Dashboard.php b/app/Http/Controllers/Dashboard/Dashboard.php
index 6b1aaec21..6572dc943 100644
--- a/app/Http/Controllers/Dashboard/Dashboard.php
+++ b/app/Http/Controllers/Dashboard/Dashboard.php
@@ -151,7 +151,7 @@ class Dashboard extends Controller
 
         $profit = $this->calculateCashFlowProfit($income, $expense);
 
-        $chart = Charts::multi('bar', 'chartjs')
+        $chart = Charts::multi('line', 'chartjs')
             ->dimensions(0, 300)
             ->colors(['#6da252', '#00c0ef', '#F56954'])
             ->dataset(trans_choice('general.profits', 1), $profit)
diff --git a/app/Http/Controllers/Reports/ExpenseSummary.php b/app/Http/Controllers/Reports/ExpenseSummary.php
index 0b1b33129..10408cb22 100644
--- a/app/Http/Controllers/Reports/ExpenseSummary.php
+++ b/app/Http/Controllers/Reports/ExpenseSummary.php
@@ -7,6 +7,7 @@ use App\Models\Expense\Bill;
 use App\Models\Expense\BillPayment;
 use App\Models\Expense\Payment;
 use App\Models\Setting\Category;
+use Charts;
 use Date;
 
 class ExpenseSummary extends Controller
@@ -90,10 +91,19 @@ class ExpenseSummary extends Controller
             $this->setAmount($expenses_graph, $totals, $expenses, $payments, 'payment', 'paid_at');
         }
 
+        // Expenses chart
+        $chart = Charts::multi('line', 'chartjs')
+            ->dimensions(0, 300)
+            ->colors(['#F56954'])
+            ->dataset(trans_choice('general.expenses', 1), $expenses_graph)
+            ->labels($dates)
+            ->credits(false)
+            ->view('vendor.consoletvs.charts.chartjs.multi.line');
+
         // Expenses Graph
         $expenses_graph = json_encode($expenses_graph);
 
-        return view('reports.expense_summary.index', compact('dates', 'categories', 'expenses', 'expenses_graph', 'totals'));
+        return view('reports.expense_summary.index', compact('chart', 'dates', 'categories', 'expenses', 'totals'));
     }
 
     private function setAmount(&$graph, &$totals, &$expenses, $items, $type, $date_field)
diff --git a/app/Http/Controllers/Reports/IncomeExpenseSummary.php b/app/Http/Controllers/Reports/IncomeExpenseSummary.php
index 291a6737d..5e8352d6e 100644
--- a/app/Http/Controllers/Reports/IncomeExpenseSummary.php
+++ b/app/Http/Controllers/Reports/IncomeExpenseSummary.php
@@ -10,6 +10,7 @@ use App\Models\Expense\Bill;
 use App\Models\Expense\BillPayment;
 use App\Models\Expense\Payment;
 use App\Models\Setting\Category;
+use Charts;
 use Date;
 
 class IncomeExpenseSummary extends Controller
@@ -21,7 +22,7 @@ class IncomeExpenseSummary extends Controller
      */
     public function index()
     {
-        $dates = $totals = $compares = $compares_graph = $categories = [];
+        $dates = $totals = $compares = $profit_graph = $categories = [];
 
         $status = request('status');
 
@@ -49,7 +50,7 @@ class IncomeExpenseSummary extends Controller
         for ($j = 1; $j <= 12; $j++) {
             $dates[$j] = Date::parse($year . '-' . $j)->format('F');
 
-            $compares_graph[Date::parse($year . '-' . $j)->format('F-Y')] = 0;
+            $profit_graph[Date::parse($year . '-' . $j)->format('F-Y')] = 0;
 
             // Totals
             $totals[$dates[$j]] = array(
@@ -100,50 +101,56 @@ class IncomeExpenseSummary extends Controller
         switch ($status) {
             case 'paid':
                 $invoices = InvoicePayment::monthsOfYear('paid_at')->get();
-                $this->setAmount($compares_graph, $totals, $compares, $invoices, 'invoice', 'paid_at');
+                $this->setAmount($profit_graph, $totals, $compares, $invoices, 'invoice', 'paid_at');
                 break;
             case 'upcoming':
                 $invoices = Invoice::accrued()->monthsOfYear('due_at')->get();
-                $this->setAmount($compares_graph, $totals, $compares, $invoices, 'invoice', 'due_at');
+                $this->setAmount($profit_graph, $totals, $compares, $invoices, 'invoice', 'due_at');
                 break;
             default:
                 $invoices = Invoice::accrued()->monthsOfYear('invoiced_at')->get();
-                $this->setAmount($compares_graph, $totals, $compares, $invoices, 'invoice', 'invoiced_at');
+                $this->setAmount($profit_graph, $totals, $compares, $invoices, 'invoice', 'invoiced_at');
                 break;
         }
 
         // Revenues
         if ($status != 'upcoming') {
             $revenues = Revenue::monthsOfYear('paid_at')->get();
-            $this->setAmount($compares_graph, $totals, $compares, $revenues, 'revenue', 'paid_at');
+            $this->setAmount($profit_graph, $totals, $compares, $revenues, 'revenue', 'paid_at');
         }
 
         // Bills
         switch ($status) {
             case 'paid':
                 $bills = BillPayment::monthsOfYear('paid_at')->get();
-                $this->setAmount($compares_graph, $totals, $compares, $bills, 'bill', 'paid_at');
+                $this->setAmount($profit_graph, $totals, $compares, $bills, 'bill', 'paid_at');
                 break;
             case 'upcoming':
                 $bills = Bill::accrued()->monthsOfYear('due_at')->get();
-                $this->setAmount($compares_graph, $totals, $compares, $bills, 'bill', 'due_at');
+                $this->setAmount($profit_graph, $totals, $compares, $bills, 'bill', 'due_at');
                 break;
             default:
                 $bills = Bill::accrued()->monthsOfYear('billed_at')->get();
-                $this->setAmount($compares_graph, $totals, $compares, $bills, 'bill', 'billed_at');
+                $this->setAmount($profit_graph, $totals, $compares, $bills, 'bill', 'billed_at');
                 break;
         }
         
         // Payments
         if ($status != 'upcoming') {
             $payments = Payment::monthsOfYear('paid_at')->get();
-            $this->setAmount($compares_graph, $totals, $compares, $payments, 'payment', 'paid_at');
+            $this->setAmount($profit_graph, $totals, $compares, $payments, 'payment', 'paid_at');
         }
 
-        // Incomes Graph
-        $compares_graph = json_encode($compares_graph);
+        // Profit chart
+        $chart = Charts::multi('line', 'chartjs')
+            ->dimensions(0, 300)
+            ->colors(['#6da252'])
+            ->dataset(trans_choice('general.profits', 1), $profit_graph)
+            ->labels($dates)
+            ->credits(false)
+            ->view('vendor.consoletvs.charts.chartjs.multi.line');
 
-        return view('reports.income_expense_summary.index', compact('dates', 'income_categories', 'expense_categories', 'compares', 'compares_graph', 'totals'));
+        return view('reports.income_expense_summary.index', compact('chart', 'dates', 'income_categories', 'expense_categories', 'compares', 'totals'));
     }
 
     private function setAmount(&$graph, &$totals, &$compares, $items, $type, $date_field)
diff --git a/app/Http/Controllers/Reports/IncomeSummary.php b/app/Http/Controllers/Reports/IncomeSummary.php
index 6dad8537a..390c2cede 100644
--- a/app/Http/Controllers/Reports/IncomeSummary.php
+++ b/app/Http/Controllers/Reports/IncomeSummary.php
@@ -7,6 +7,7 @@ use App\Models\Income\Invoice;
 use App\Models\Income\InvoicePayment;
 use App\Models\Income\Revenue;
 use App\Models\Setting\Category;
+use Charts;
 use Date;
 
 class IncomeSummary extends Controller
@@ -90,10 +91,16 @@ class IncomeSummary extends Controller
             $this->setAmount($incomes_graph, $totals, $incomes, $revenues, 'revenue', 'paid_at');
         }
 
-        // Incomes Graph
-        $incomes_graph = json_encode($incomes_graph);
+        // Incomes chart
+        $chart = Charts::multi('line', 'chartjs')
+            ->dimensions(0, 300)
+            ->colors(['#00c0ef'])
+            ->dataset(trans_choice('general.incomes', 1), $incomes_graph)
+            ->labels($dates)
+            ->credits(false)
+            ->view('vendor.consoletvs.charts.chartjs.multi.line');
 
-        return view('reports.income_summary.index', compact('dates', 'categories', 'incomes', 'incomes_graph', 'totals'));
+        return view('reports.income_summary.index', compact('chart', 'dates', 'categories', 'incomes', 'totals'));
     }
 
     private function setAmount(&$graph, &$totals, &$incomes, $items, $type, $date_field)
diff --git a/resources/views/reports/expense_summary/index.blade.php b/resources/views/reports/expense_summary/index.blade.php
index 4164a043e..273ddb956 100644
--- a/resources/views/reports/expense_summary/index.blade.php
+++ b/resources/views/reports/expense_summary/index.blade.php
@@ -18,9 +18,7 @@
         {!! Form::close() !!}
     </div>
     <div class="box-body">
-        <div class="chart">
-            <canvas id="expense_graph" style="height: 246px; width: 1069px;" height="246" width="1069"></canvas>
-        </div>
+        {!! $chart->render() !!}
 
         <hr>
 
@@ -69,55 +67,5 @@
 @endsection
 
 @push('js')
-    <script src="{{ asset('vendor/almasaeed2010/adminlte/plugins/chartjs/Chart.min.js') }}"></script>
-@endpush
-
-@push('scripts')
-    <script type="text/javascript">
-        $(document).ready(function () {
-            var areaChartData = {
-                labels: {!! json_encode(array_values($dates)) !!},
-                datasets: [
-                    {
-                        label: "{{ trans_choice('general.expenses', 2) }}",
-                        fillColor: "#F56954",
-                        strokeColor: "#F56954",
-                        pointColor: "#F56954",
-                        pointStrokeColor: "#F56954",
-                        pointHighlightFill: "#FFF",
-                        pointHighlightStroke: "#F56954",
-                        data: {!! $expenses_graph !!}
-                    }
-                ]
-            };
-
-            var areaChartOptions = {
-                showScale: true,
-                scaleShowGridLines: false,
-                scaleGridLineColor: "rgba(0,0,0,.05)",
-                scaleGridLineWidth: 1,
-                scaleShowHorizontalLines: true,
-                scaleShowVerticalLines: true,
-                bezierCurve: true,
-                bezierCurveTension: 0.3,
-                pointDot: false,
-                pointDotRadius: 4,
-                pointDotStrokeWidth: 1,
-                pointHitDetectionRadius: 20,
-                datasetStroke: true,
-                datasetStrokeWidth: 2,
-                datasetFill: true,
-                legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
-                maintainAspectRatio: true,
-                responsive: true
-            };
-
-            var cashFlowDailyCanvas = $("#expense_graph").get(0).getContext("2d");
-            var cashFlowDaily = new Chart(cashFlowDailyCanvas);
-            var cashFlowDailyOptions = areaChartOptions;
-
-            cashFlowDailyOptions.datasetFill = false;
-            cashFlowDaily.Line(areaChartData, cashFlowDailyOptions);
-        });
-    </script>
+{!! Charts::assets() !!}
 @endpush
diff --git a/resources/views/reports/income_expense_summary/index.blade.php b/resources/views/reports/income_expense_summary/index.blade.php
index ee8ed6f4d..c36c726c0 100644
--- a/resources/views/reports/income_expense_summary/index.blade.php
+++ b/resources/views/reports/income_expense_summary/index.blade.php
@@ -18,9 +18,7 @@
         {!! Form::close() !!}
     </div>
     <div class="box-body">
-        <div class="chart">
-            <canvas id="compare_graph" style="height: 246px; width: 1069px;" height="246" width="1069"></canvas>
-        </div>
+        {!! $chart->render() !!}
 
         <hr>
 
@@ -87,55 +85,5 @@
 @endsection
 
 @push('js')
-    <script src="{{ asset('vendor/almasaeed2010/adminlte/plugins/chartjs/Chart.min.js') }}"></script>
-@endpush
-
-@push('scripts')
-    <script type="text/javascript">
-        $(document).ready(function () {
-            var areaChartData = {
-                labels: {!! json_encode(array_values($dates)) !!},
-                datasets: [
-                    {
-                        label: "{{ trans_choice('general.compares', 2) }}",
-                        fillColor: "#6da252",
-                        strokeColor: "#6da252",
-                        pointColor: "#6da252",
-                        pointStrokeColor: "#6da252",
-                        pointHighlightFill: "#FFF",
-                        pointHighlightStroke: "#6da252",
-                        data: {!! $compares_graph !!}
-                    }
-                ]
-            };
-
-            var areaChartOptions = {
-                showScale: true,
-                scaleShowGridLines: false,
-                scaleGridLineColor: "rgba(0,0,0,.05)",
-                scaleGridLineWidth: 1,
-                scaleShowHorizontalLines: true,
-                scaleShowVerticalLines: true,
-                bezierCurve: true,
-                bezierCurveTension: 0.3,
-                pointDot: false,
-                pointDotRadius: 4,
-                pointDotStrokeWidth: 1,
-                pointHitDetectionRadius: 20,
-                datasetStroke: true,
-                datasetStrokeWidth: 2,
-                datasetFill: true,
-                legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
-                maintainAspectRatio: true,
-                responsive: true
-            };
-
-            var cashFlowDailyCanvas = $("#compare_graph").get(0).getContext("2d");
-            var cashFlowDaily = new Chart(cashFlowDailyCanvas);
-            var cashFlowDailyOptions = areaChartOptions;
-
-            cashFlowDailyOptions.datasetFill = false;
-            cashFlowDaily.Line(areaChartData, cashFlowDailyOptions);
-        });
-    </script>
+{!! Charts::assets() !!}
 @endpush
diff --git a/resources/views/reports/income_summary/index.blade.php b/resources/views/reports/income_summary/index.blade.php
index ddb7ca79e..fff7ee468 100644
--- a/resources/views/reports/income_summary/index.blade.php
+++ b/resources/views/reports/income_summary/index.blade.php
@@ -18,9 +18,7 @@
             {!! Form::close() !!}
         </div>
         <div class="box-body">
-            <div class="chart">
-                <canvas id="income_graph" style="height: 246px; width: 1069px;" height="246" width="1069"></canvas>
-            </div>
+            {!! $chart->render() !!}
 
             <hr>
 
@@ -69,55 +67,5 @@
 @endsection
 
 @push('js')
-    <script src="{{ asset('vendor/almasaeed2010/adminlte/plugins/chartjs/Chart.min.js') }}"></script>
-@endpush
-
-@push('scripts')
-    <script type="text/javascript">
-        $(document).ready(function () {
-            var areaChartData = {
-                labels: {!! json_encode(array_values($dates)) !!},
-                datasets: [
-                    {
-                        label: "{{ trans_choice('general.incomes', 2) }}",
-                        fillColor: "#00c0ef",
-                        strokeColor: "#00c0ef",
-                        pointColor: "#00c0ef",
-                        pointStrokeColor: "#00c0ef",
-                        pointHighlightFill: "#FFF",
-                        pointHighlightStroke: "#00c0ef",
-                        data: {!! $incomes_graph !!}
-                    }
-                ]
-            };
-
-            var areaChartOptions = {
-                showScale: true,
-                scaleShowGridLines: false,
-                scaleGridLineColor: "rgba(0,0,0,.05)",
-                scaleGridLineWidth: 1,
-                scaleShowHorizontalLines: true,
-                scaleShowVerticalLines: true,
-                bezierCurve: true,
-                bezierCurveTension: 0.3,
-                pointDot: false,
-                pointDotRadius: 4,
-                pointDotStrokeWidth: 1,
-                pointHitDetectionRadius: 20,
-                datasetStroke: true,
-                datasetStrokeWidth: 2,
-                datasetFill: true,
-                legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
-                maintainAspectRatio: true,
-                responsive: true
-            };
-
-            var cashFlowDailyCanvas = $("#income_graph").get(0).getContext("2d");
-            var cashFlowDaily = new Chart(cashFlowDailyCanvas);
-            var cashFlowDailyOptions = areaChartOptions;
-
-            cashFlowDailyOptions.datasetFill = false;
-            cashFlowDaily.Line(areaChartData, cashFlowDailyOptions);
-        });
-    </script>
+{!! Charts::assets() !!}
 @endpush