Tuning of chart.js display options for the info dashboard.

package-lock.json

 {
   "name": "webapp",
-  "version": "2.5.2",
+  "version": "2.6.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

src/app/dataset-detail/components/dataset-info/info-chart/info-chart.component.ts

@@ -28,37 +28,41 @@ export class InfoChartComponent implements OnInit {
             backgroundColor: '#7BC0F5',
             hoverBackgroundColor: '#7BC0F5',
             hoverBorderColor: '#DA322F',
-            hoverBorderWidth: 2,
+            hoverBorderWidth: 0,
+            ttBackgroundColor: '#7BC0F5',
             barThickness: this.barWidth,
             stack: 'a',
           },
           {
             data: this.statistics.data.wfs || [],
             label: 'WFS',
+            backgroundColor: '#7BC0F5',
+            hoverBackgroundColor: '#7BC0F5',
             hoverBorderColor: '#DA322F',
-            hoverBorderWidth: 2,
-            backgroundColor: '#E5A1F1',
-            hoverBackgroundColor: '#E5A1F1',
+            hoverBorderWidth: 0,
+            ttBackgroundColor: '#E5A1F1',
             barThickness: this.barWidth,
             stack: 'a',
           },
           {
             data: this.statistics.data.ws || [],
             label: 'WS',
+            backgroundColor: '#7BC0F5',
+            hoverBackgroundColor: '#7BC0F5',
             hoverBorderColor: '#DA322F',
-            hoverBorderWidth: 2,
-            backgroundColor: '#78D7D7',
-            hoverBackgroundColor: '#78D7D7',
+            hoverBorderWidth: 0,
+            ttBackgroundColor: '#78D7D7',
             barThickness: this.barWidth,
             stack: 'a',
           },
           {
             data: this.aggregateOtherServicesStats(this.statistics.data),
             label: datasetStatistics.otherServices,
+            backgroundColor: '#7BC0F5',
+            hoverBackgroundColor: '#7BC0F5',
             hoverBorderColor: '#DA322F',
-            hoverBorderWidth: 2,
-            backgroundColor: '#F2C774',
-            hoverBackgroundColor: '#F2C774',
+            hoverBorderWidth: 0,
+            ttBackgroundColor: '#F2C774',
             barThickness: this.barWidth,
             stack: 'a',
           },
@@ -90,18 +94,23 @@ export class InfoChartComponent implements OnInit {
             },
             labelTextColor: (tooltipItem, data) => {
               // for each tooltiplabel get the bar color
-              return data.data.datasets[tooltipItem.datasetIndex].backgroundColor.toString();
+              return data.data.datasets[tooltipItem.datasetIndex].ttBackgroundColor.toString();
             },
           },
         },
         legend: {
-          position: 'bottom',
-          fullWidth: true,
-          labels: {
-            boxWidth: 13,
-            padding: 30,
-            fontColor: '#000',
-          },
+          display: false
+        },
+        annotation: {
+          annotations: [{
+            type: 'box',
+            yScaleID: 'y-axis-0',
+            yMin: 1,
+            yMax: 2000000,
+            borderColor: 'rgb(242,242,242)',
+            borderWidth:2,
+            backgroundColor: 'rgb(242,242,242)',
+          }]
         },
         scales: {
           yAxes: [{