diff --git a/app/Generator/Chart/Account/ChartJsAccountChartGenerator.php b/app/Generator/Chart/Account/ChartJsAccountChartGenerator.php
index 74afc56272..597d120d04 100644
--- a/app/Generator/Chart/Account/ChartJsAccountChartGenerator.php
+++ b/app/Generator/Chart/Account/ChartJsAccountChartGenerator.php
@@ -19,6 +19,7 @@ class ChartJsAccountChartGenerator implements AccountChartGenerator
 
 
     /**
+     * @codeCoverageIgnore
      * @param Collection $accounts
      * @param Carbon     $start
      * @param Carbon     $end
diff --git a/app/Generator/Chart/Bill/ChartJsBillChartGenerator.php b/app/Generator/Chart/Bill/ChartJsBillChartGenerator.php
index 5fd08c24ec..4afa0c6ea7 100644
--- a/app/Generator/Chart/Bill/ChartJsBillChartGenerator.php
+++ b/app/Generator/Chart/Bill/ChartJsBillChartGenerator.php
@@ -8,9 +8,11 @@
 
 namespace FireflyIII\Generator\Chart\Bill;
 
+use Config;
 use FireflyIII\Models\Bill;
 use FireflyIII\Models\TransactionJournal;
 use Illuminate\Support\Collection;
+use Preferences;
 
 /**
  * Class ChartJsBillChartGenerator
@@ -79,5 +81,45 @@ class ChartJsBillChartGenerator implements BillChartGenerator
      */
     public function single(Bill $bill, Collection $entries)
     {
+        // language:
+        $language = Preferences::get('language', 'en')->data;
+        $format   = Config::get('firefly.month.' . $language);
+
+        $data = [
+            'count'    => 3,
+            'labels'   => [],
+            'datasets' => [],
+        ];
+
+        // dataset: max amount
+        // dataset: min amount
+        // dataset: actual amount
+
+        $minAmount    = [];
+        $maxAmount    = [];
+        $actualAmount = [];
+        foreach ($entries as $entry) {
+            $data['labels'][] = $entry->date->formatLocalized($format);
+            $minAmount[]      = round($bill->amount_min, 2);
+            $maxAmount[]      = round($bill->amount_max, 2);
+            $actualAmount[]   = round($entry->amount, 2);
+        }
+
+        $data['datasets'][] = [
+            'label' => trans('firefly.minAmount'),
+            'data'  => $minAmount,
+        ];
+        $data['datasets'][] = [
+            'label' => trans('firefly.billEntry'),
+            'data'  => $actualAmount,
+        ];
+        $data['datasets'][] = [
+            'label' => trans('firefly.maxAmount'),
+            'data'  => $maxAmount,
+        ];
+
+        $data['count'] = count($data['datasets']);
+
+        return $data;
     }
 }
diff --git a/app/Generator/Chart/Budget/ChartJsBudgetChartGenerator.php b/app/Generator/Chart/Budget/ChartJsBudgetChartGenerator.php
index bb256648c3..b17cfe7f04 100644
--- a/app/Generator/Chart/Budget/ChartJsBudgetChartGenerator.php
+++ b/app/Generator/Chart/Budget/ChartJsBudgetChartGenerator.php
@@ -44,6 +44,7 @@ class ChartJsBudgetChartGenerator implements BudgetChartGenerator
     }
 
     /**
+     * @codeCoverageIgnore
      * @param Collection $entries
      *
      * @return array
diff --git a/app/Http/Controllers/Chart/BillController.php b/app/Http/Controllers/Chart/BillController.php
index 67e88779a8..dd1ab20a61 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/public/js/bills.js b/public/js/bills.js
index 19c8c4f634..31abb961ee 100644
--- a/public/js/bills.js
+++ b/public/js/bills.js
@@ -1,9 +1,9 @@
 /* global comboChart, billID */
 
-$(document).ready(function () {
-                      "use strict";
-                      if (typeof(comboChart) === 'function' && typeof(billID) !== 'undefined') {
-                          comboChart('chart/bill/' + billID, 'bill-overview');
-                      }
-                  }
+$(function () {
+      "use strict";
+      if (typeof(comboChart) === 'function' && typeof(billID) !== 'undefined') {
+          comboChart('chart/bill/' + billID, 'bill-overview');
+      }
+  }
 );
\ No newline at end of file
diff --git a/public/js/charts.js b/public/js/charts.js
index 555c0a3108..7259043b83 100644
--- a/public/js/charts.js
+++ b/public/js/charts.js
@@ -84,7 +84,7 @@ var defaultLineOptions = {
     datasetFill: false,
     scaleFontSize: 10,
     responsive: true,
-    scaleLabel:           "<%= '" + currencySymbol + " ' + Number(value).toFixed(2).replace('.', ',') %>",
+    scaleLabel:      "<%= '" + currencySymbol + " ' + Number(value).toFixed(2).replace('.', ',') %>",
     tooltipFillColor: "rgba(0,0,0,0.5)",
     tooltipTemplate: "<%if (label){%><%=label%>: <%}%>" + currencySymbol + " <%= value %>",
 };
@@ -97,10 +97,10 @@ var defaultColumnOptions = {
     datasetFill: false,
     scaleFontSize: 10,
     responsive: true,
-    scaleLabel:      "<%= '" + currencySymbol + " ' + Number(value).toFixed(2).replace('.', ',') %>",
+    scaleLabel:           "<%= '" + currencySymbol + " ' + Number(value).toFixed(2).replace('.', ',') %>",
     tooltipFillColor: "rgba(0,0,0,0.5)",
-    tooltipTemplate: "<%if (label){%><%=label%>: <%}%>" + currencySymbol + " <%= value %>",
-    multiTooltipTemplate: "<%=datasetLabel%>: "+currencySymbol+" <%= Number(value).toFixed(2).replace('.', ',') %>"
+    tooltipTemplate:      "<%if (label){%><%=label%>: <%}%>" + currencySymbol + " <%= value %>",
+    multiTooltipTemplate: "<%=datasetLabel%>: " + currencySymbol + " <%= Number(value).toFixed(2).replace('.', ',') %>"
 };
 
 var defaultStackedColumnOptions = {
@@ -113,7 +113,7 @@ var defaultStackedColumnOptions = {
     responsive: true,
     scaleLabel:           "<%= '" + currencySymbol + " ' + Number(value).toFixed(2).replace('.', ',') %>",
     tooltipFillColor: "rgba(0,0,0,0.5)",
-    multiTooltipTemplate: "<%=datasetLabel%>: "+currencySymbol+" <%= Number(value).toFixed(2).replace('.', ',') %>"
+    multiTooltipTemplate: "<%=datasetLabel%>: " + currencySymbol + " <%= Number(value).toFixed(2).replace('.', ',') %>"
 
 };
 
@@ -265,7 +265,8 @@ function stackedColumnChart(URL, container, options) {
  */
 function comboChart(URL, container, options) {
     "use strict";
-    console.log('no impl for comboChart');
+    columnChart(URL, container, options);
+
 }
 
 /**
diff --git a/resources/twig/bills/show.twig b/resources/twig/bills/show.twig
index 3ad0d9ec74..839ff0e556 100644
--- a/resources/twig/bills/show.twig
+++ b/resources/twig/bills/show.twig
@@ -85,7 +85,13 @@
                     <h3 class="box-title">Chart</h3>
                 </div>
                 <div class="box-body">
-                    <div id="bill-overview"></div>
+
+                    {% if Config.get('firefly.chart') == 'google' %}
+                        <div id="bill-overview"></div>
+                    {% endif %}
+                    {% if Config.get('firefly.chart') == 'chartjs' %}
+                        <canvas id="bill-overview" style="width:100%;height:400px;"></canvas>
+                    {% endif %}
                 </div>
             </div>
         </div>