diff --git a/app/Generator/Chart/Bill/ChartJsBillChartGenerator.php b/app/Generator/Chart/Bill/ChartJsBillChartGenerator.php
new file mode 100644
index 0000000000..2255c65632
--- /dev/null
+++ b/app/Generator/Chart/Bill/ChartJsBillChartGenerator.php
@@ -0,0 +1,83 @@
+<?php
+/**
+ * Created by PhpStorm.
+ * User: sander
+ * Date: 27/06/15
+ * Time: 17:21
+ */
+
+namespace FireflyIII\Generator\Chart\Bill;
+
+use FireflyIII\Models\Bill;
+use FireflyIII\Models\TransactionJournal;
+use Illuminate\Support\Collection;
+
+/**
+ * Class ChartJsBillChartGenerator
+ *
+ * @package FireflyIII\Generator\Chart\Bill
+ */
+class ChartJsBillChartGenerator implements BillChartGenerator
+{
+
+    /**
+     * @param Collection $paid
+     * @param Collection $unpaid
+     *
+     * @return array
+     */
+    public function frontpage(Collection $paid, Collection $unpaid)
+    {
+
+        // loop paid and create single entry:
+        $paidDescriptions   = [];
+        $paidAmount         = 0;
+        $unpaidDescriptions = [];
+        $unpaidAmount       = 0;
+
+
+        /** @var TransactionJournal $entry */
+        foreach ($paid as $entry) {
+
+            $paidDescriptions[] = $entry->description;
+            $paidAmount += floatval($entry->amount);
+        }
+
+        // loop unpaid:
+        /** @var Bill $entry */
+        foreach ($unpaid as $entry) {
+            $description          = $entry[0]->name . ' (' . $entry[1]->format('jS M Y') . ')';
+            $amount               = ($entry[0]->amount_max + $entry[0]->amount_min) / 2;
+            $unpaidDescriptions[] = $description;
+            $unpaidAmount += $amount;
+            unset($amount, $description);
+        }
+
+        $data = [
+            [
+                'value'     => $unpaidAmount,
+                'color'     => 'rgba(53, 124, 165,0.7)',
+                'highlight' => 'rgba(53, 124, 165,0.9)',
+                'label'     => trans('firefly.unpaid'),
+            ],
+            [
+                'value'     => $paidAmount,
+                'color'     => 'rgba(0, 141, 76, 0.7)',
+                'highlight' => 'rgba(0, 141, 76, 0.9)',
+                'label'     => trans('firefly.paid'),
+            ]
+        ];
+
+        return $data;
+    }
+
+    /**
+     * @param Bill       $bill
+     * @param Collection $entries
+     *
+     * @return array
+     */
+    public function single(Bill $bill, Collection $entries)
+    {
+    }
+}
\ No newline at end of file
diff --git a/app/Generator/Chart/Category/ChartJsCategoryChartGenerator.php b/app/Generator/Chart/Category/ChartJsCategoryChartGenerator.php
new file mode 100644
index 0000000000..3eea5b5218
--- /dev/null
+++ b/app/Generator/Chart/Category/ChartJsCategoryChartGenerator.php
@@ -0,0 +1,70 @@
+<?php
+
+namespace FireflyIII\Generator\Chart\Category;
+
+use Illuminate\Support\Collection;
+
+
+/**
+ * Class ChartJsCategoryChartGenerator
+ *
+ * @package FireflyIII\Generator\Chart\Category
+ */
+class ChartJsCategoryChartGenerator implements CategoryChartGenerator
+{
+
+    /**
+     * @param Collection $entries
+     *
+     * @return array
+     */
+    public function all(Collection $entries)
+    {
+    }
+
+    /**
+     * @param Collection $entries
+     *
+     * @return array
+     */
+    public function frontpage(Collection $entries)
+    {
+        $data = [
+            'count'    => 1,
+            'labels'   => [],
+            'datasets' => [
+                [
+                    'label' => 'Spent',
+                    'data'  => []
+                ]
+            ],
+        ];
+        foreach ($entries as $entry) {
+            if ($entry['sum'] != 0) {
+                $data['labels'][]              = $entry['name'];
+                $data['datasets'][0]['data'][] = round($entry['sum'],2);
+            }
+        }
+
+        return $data;
+    }
+
+    /**
+     * @param Collection $entries
+     *
+     * @return array
+     */
+    public function month(Collection $entries)
+    {
+    }
+
+    /**
+     * @param Collection $categories
+     * @param Collection $entries
+     *
+     * @return array
+     */
+    public function year(Collection $categories, Collection $entries)
+    {
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Chart/BillController.php b/app/Http/Controllers/Chart/BillController.php
index 9d6934277a..cd58cd8be2 100644
--- a/app/Http/Controllers/Chart/BillController.php
+++ b/app/Http/Controllers/Chart/BillController.php
@@ -57,7 +57,7 @@ class BillController extends Controller
         $cache->addProperty('bills');
         $cache->addProperty('frontpage');
         if ($cache->has()) {
-            return Response::json($cache->get()); // @codeCoverageIgnore
+            //return Response::json($cache->get()); // @codeCoverageIgnore
         }
 
         $bills  = $repository->getActiveBills();
diff --git a/app/Http/Controllers/Chart/CategoryController.php b/app/Http/Controllers/Chart/CategoryController.php
index 866ff6a4d0..cd8a01cfb3 100644
--- a/app/Http/Controllers/Chart/CategoryController.php
+++ b/app/Http/Controllers/Chart/CategoryController.php
@@ -101,7 +101,7 @@ class CategoryController extends Controller
         $cache->addProperty('category');
         $cache->addProperty('frontpage');
         if ($cache->has()) {
-            return Response::json($cache->get()); // @codeCoverageIgnore
+            //return Response::json($cache->get()); // @codeCoverageIgnore
         }
 
         $array = $repository->getCategoriesAndExpensesCorrected($start, $end);
diff --git a/app/Providers/FireflyServiceProvider.php b/app/Providers/FireflyServiceProvider.php
index 627f01631b..857361af76 100644
--- a/app/Providers/FireflyServiceProvider.php
+++ b/app/Providers/FireflyServiceProvider.php
@@ -95,14 +95,14 @@ class FireflyServiceProvider extends ServiceProvider
         //$this->app->bind('FireflyIII\Generator\Chart\Account\AccountChartGenerator', 'FireflyIII\Generator\Chart\Account\GoogleAccountChartGenerator');
         $this->app->bind('FireflyIII\Generator\Chart\Account\AccountChartGenerator', 'FireflyIII\Generator\Chart\Account\ChartJsAccountChartGenerator');
 
-        $this->app->bind('FireflyIII\Generator\Chart\Bill\BillChartGenerator', 'FireflyIII\Generator\Chart\Bill\GoogleBillChartGenerator');
         //$this->app->bind('FireflyIII\Generator\Chart\Bill\BillChartGenerator', 'FireflyIII\Generator\Chart\Bill\GoogleBillChartGenerator');
+        $this->app->bind('FireflyIII\Generator\Chart\Bill\BillChartGenerator', 'FireflyIII\Generator\Chart\Bill\ChartJsBillChartGenerator');
 
         //$this->app->bind('FireflyIII\Generator\Chart\Budget\BudgetChartGenerator', 'FireflyIII\Generator\Chart\Budget\GoogleBudgetChartGenerator');
         $this->app->bind('FireflyIII\Generator\Chart\Budget\BudgetChartGenerator', 'FireflyIII\Generator\Chart\Budget\ChartJsBudgetChartGenerator');
 
-        $this->app->bind('FireflyIII\Generator\Chart\Category\CategoryChartGenerator', 'FireflyIII\Generator\Chart\Category\GoogleCategoryChartGenerator');
         //$this->app->bind('FireflyIII\Generator\Chart\Category\CategoryChartGenerator', 'FireflyIII\Generator\Chart\Category\GoogleCategoryChartGenerator');
+        $this->app->bind('FireflyIII\Generator\Chart\Category\CategoryChartGenerator', 'FireflyIII\Generator\Chart\Category\ChartJsCategoryChartGenerator');
 
         $this->app->bind('FireflyIII\Generator\Chart\PiggyBank\PiggyBankChartGenerator', 'FireflyIII\Generator\Chart\PiggyBank\GooglePiggyBankChartGenerator');
         //$this->app->bind('FireflyIII\Generator\Chart\PiggyBank\PiggyBankChartGenerator', 'FireflyIII\Generator\Chart\PiggyBank\GooglePiggyBankChartGenerator');
diff --git a/config/firefly.php b/config/firefly.php
index 24d37e4a1e..609042122a 100644
--- a/config/firefly.php
+++ b/config/firefly.php
@@ -1,7 +1,7 @@
 <?php
 
 return [
-    'chart'                    => 'google', // or 'chartjs'
+    'chart'                    => 'chartjs', // or 'chartjs'
     'version'                  => '3.4.5',
     'index_periods'            => ['1D', '1W', '1M', '3M', '6M', '1Y', 'custom'],
     'budget_periods'           => ['daily', 'weekly', 'monthly', 'quarterly', 'half-year', 'yearly'],
diff --git a/public/js/charts.js b/public/js/charts.js
index 63fe8c56c1..60bd4ecccb 100644
--- a/public/js/charts.js
+++ b/public/js/charts.js
@@ -178,7 +178,7 @@ function columnChart(URL, container, options) {
  */
 function stackedColumnChart(URL, container, options) {
     "use strict";
-    console.log('no impl for stackedColumnChart');
+    columnChart(URL, container, options);
 }
 
 /**
@@ -200,5 +200,17 @@ function comboChart(URL, container, options) {
  */
 function pieChart(URL, container, options) {
     "use strict";
+
+    options = options || defaultColumnOptions;
+    $.getJSON(URL).success(function (data) {
+
+        var ctx = document.getElementById(container).getContext("2d");
+        new Chart(ctx).Pie(data, options);
+
+    }).fail(function () {
+        $('#' + container).addClass('google-chart-error');
+    });
+
+
     console.log('no impl for pieChart');
 }
diff --git a/public/js/index.js b/public/js/index.js
index 4fc1d3bf4f..e1fba6d38f 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -15,7 +15,7 @@ function drawChart() {
     "use strict";
     areaChart('chart/account/frontpage', 'accounts-chart');
     pieChart('chart/bill/frontpage', 'bills-chart');
-    columnChart('chart/budget/frontpage', 'budgets-chart');
+    stackedColumnChart('chart/budget/frontpage', 'budgets-chart');
     columnChart('chart/category/frontpage', 'categories-chart');
 
 
diff --git a/resources/twig/index.twig b/resources/twig/index.twig
index 08fea67bc8..9a5a0f92e3 100644
--- a/resources/twig/index.twig
+++ b/resources/twig/index.twig
@@ -193,7 +193,12 @@
                     </div>
                 </div>
                 <div class="box-body">
-                    <div id="bills-chart"></div>
+                    {% if Config.get('firefly.chart') == 'google' %}
+                        <div id="bills-chart"></div>
+                    {% endif %}
+                    {% if Config.get('firefly.chart') == 'chartjs' %}
+                        <canvas id="bills-chart" style="width:100%;height:250px;"></canvas>
+                    {% endif %}
                 </div>
             </div>