bar chart with new formatting

client/js/site-app.js

@@ -15,12 +15,13 @@ import Cropper from 'cropperjs';
 
 import { EmojiButton } from '@joeattardi/emoji-button';
 
-const GRID_COLOR = '#a0a0a0';
+const GRID_COLOR = 'rgb(64, 64, 64)';
-const GRID_TICK_COLOR = '#707070';
+const GRID_TICK_COLOR = 'rgb(192,192,192)';
 
-const AXIS_TICK_COLOR = '#c0c0c0';
+const AXIS_TICK_COLOR = 'rgb(192, 192, 192)';
 
 const CHART_LINE_USER = 'rgb(0, 192, 0)';
+const CHART_FILL_USER = 'rgb(0, 128, 0)';
 
 export default class DtpSiteApp extends DtpApp {
 
@@ -579,7 +580,7 @@ export default class DtpSiteApp extends DtpApp {
       const canvas = document.querySelector(selector);
       const ctx = canvas.getContext('2d');
       this.charts.profileStats = new Chart(ctx, {
-        type: 'line',
+        type: 'bar',
         data: {
           labels: data.map((item) => new Date(item.date)),
           datasets: [
@@ -587,7 +588,9 @@ export default class DtpSiteApp extends DtpApp {
               label: title,
               data: data.map((item) => item.count),
               borderColor: CHART_LINE_USER,
-              tension: 0.5,
+              borderWidth: 1,
+              backgroundColor: CHART_FILL_USER,
+              tension: 0,
             },
           ],
         },