diff --git a/webapp/src/components/BarChart.vue b/webapp/src/components/BarChart.vue
index 28d3ee54..145f70cb 100644
--- a/webapp/src/components/BarChart.vue
+++ b/webapp/src/components/BarChart.vue
@@ -18,14 +18,13 @@ import { GChart } from 'vue-google-charts';
 var data: any;
 export const type = 'ColumnChart';
 export const options = {
-    height: 600,
+    height: 300,
     chartArea: { top: 25, width: '85%', height: '80%' },
     legend: {
         position: 'none'
     },
     hAxis: {
-        format: 'dd.MM.YY HH:mm',
-        slantedText: true
+        format: 'HH',
     },
     vAxis: {
         format: '# Wh'
diff --git a/webapp/src/components/CalendarChart.vue b/webapp/src/components/CalendarChart.vue
index 87d6c283..01f757a0 100644
--- a/webapp/src/components/CalendarChart.vue
+++ b/webapp/src/components/CalendarChart.vue
@@ -17,6 +17,9 @@ var data: any;
 export const type = 'Calendar';
 export const options = {
     height: 250,
+    colorAxis: {
+            colors: ['#FFFFFF', '#0000FF']
+        },
     calendar: {
         cellSize: 20,
         daysOfWeek: 'MTWTFSS',