feat: modernize examples and resolve mixed chart visual regressions

Author: jtblin

examples/amd.js

@@ -4,8 +4,8 @@
   require.config({
     paths: {
       'angular': '../node_modules/angular/angular.min',
-      'chart': '../node_modules/chart.js/dist/Chart.min',
-      'angular-chart': '../src/angular-chart',
+      'chart': '../node_modules/chart.js/dist/chart.umd',
+      'angular-chart': '../dist/angular-chart',
     },
     shim: {
       'angular': {

examples/app.ts

@@ -1,5 +1,6 @@
-import type { ChartJsProviderInterface, ChartJsService, DirectiveScope } from '../src/angular-chart';
-import type { ActiveElement } from 'chart.js';
+// / <reference types="angular" />
+import type {ChartJsProviderInterface} from '../src/angular-chart';
+import type {ActiveElement} from 'chart.js';
 
 interface ExampleScope extends angular.IScope {
   labels: (string | string[])[];
@@ -36,6 +37,7 @@ interface NoDataScope extends ExampleScope {
 (() => {
   'use strict';
 
+  const angular = (window as any).angular as angular.IAngularStatic;
   const app = angular.module('examples', ['chart.js', 'ui.bootstrap']);
 
   app.config(['ChartJsProvider', (ChartJsProvider: ChartJsProviderInterface) => {
@@ -62,7 +64,8 @@ interface NoDataScope extends ExampleScope {
     });
     ChartJsProvider.setOptions('bubble', {
       plugins: {
-        tooltip: { enabled: false },
+        legend: {display: false},
+        tooltip: {enabled: false},
       },
     });
   }]);
@@ -104,7 +107,7 @@ interface NoDataScope extends ExampleScope {
         console.log('No point');
       }
     };
-    $scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
+    $scope.datasetOverride = [{yAxisID: 'y-axis-1'}, {yAxisID: 'y-axis-2'}];
 
     $scope.options = {
       tension: 0.4,
@@ -127,7 +130,7 @@ interface NoDataScope extends ExampleScope {
   app.controller('BarCtrl', ['$scope', ($scope: ExampleScope) => {
     $scope.options = {
       plugins: {
-        legend: { display: true },
+        legend: {display: true},
       },
     };
     $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
@@ -152,7 +155,7 @@ interface NoDataScope extends ExampleScope {
     $scope.data = [300, 500, 100];
     $scope.options = {
       plugins: {
-        legend: { display: false },
+        legend: {display: false},
       },
     };
   }]);
@@ -165,7 +168,7 @@ interface NoDataScope extends ExampleScope {
     $scope.data = [300, 500, 100, 40, 120];
     $scope.options = {
       plugins: {
-        legend: { display: false },
+        legend: {display: false},
       },
     };
   }]);
@@ -190,7 +193,7 @@ interface NoDataScope extends ExampleScope {
     ];
     $scope.options = {
       plugins: {
-        legend: { display: false },
+        legend: {display: false},
       },
     };
 
@@ -256,6 +259,7 @@ interface NoDataScope extends ExampleScope {
         label: 'Bar chart',
         borderWidth: 1,
         type: 'bar',
+        backgroundColor: 'rgba(69, 183, 205, 0.2)',
       },
       {
         label: 'Line chart',
@@ -297,7 +301,7 @@ interface NoDataScope extends ExampleScope {
     ];
     $scope.options = {
       plugins: {
-        legend: { display: false },
+        legend: {display: false},
       },
     };
     $scope.randomize = () => {
@@ -336,14 +340,15 @@ interface NoDataScope extends ExampleScope {
     $interval(createChart, 2000);
 
     function createChart() {
-      $scope.data = [];
+      const data = [];
       for (let i = 0; i < 50; i++) {
-        $scope.data.push([{
+        data.push({
           x: randomScalingFactor(),
           y: randomScalingFactor(),
           r: randomRadius(),
-        }]);
+        });
       }
+      $scope.data = [data];
     }
 
     function randomScalingFactor() {

examples/bubble.js

@@ -10,39 +10,38 @@ angular.module('app', ['chart.js'])
 
     $scope.options = {
       scales: {
-        xAxes: [{
-          display: false,
-          ticks: {
-            max: 125,
-            min: -125,
-            stepSize: 10,
-          },
-        }],
-        yAxes: [{
+        x: {
+          type: 'linear',
+          position: 'bottom',
+          min: -125,
+          max: 125,
+        },
+        y: {
+          min: -125,
+          max: 125,
+        },
+      },
+      plugins: {
+        legend: {
           display: false,
-          ticks: {
-            max: 125,
-            min: -125,
-            stepSize: 10,
-          },
-        }],
+        },
       },
     };
 
     createChart();
     $interval(createChart, 2000);
 
     function createChart() {
-      $scope.series = [];
-      $scope.data = [];
+      $scope.series = ['Series A'];
+      const data = [];
       for (let i = 0; i < 50; i++) {
-        $scope.series.push(`Series ${i}`);
-        $scope.data.push([{
+        data.push({
           x: randomScalingFactor(),
           y: randomScalingFactor(),
           r: randomRadius(),
-        }]);
+        });
       }
+      $scope.data = [data];
     }
 
     function randomScalingFactor() {