fix: restore chart visibility and responsive layout

- Resolve rendering bug that caused Line, Bar, and Radar charts to appear blank.
- Update integration test snapshots to reflect the corrected and visible charts.

Author: jtblin

package-lock.json

@@ -63,7 +63,7 @@
     "gulp-rimraf": "^1.0.0",
     "gulp-shell": "^0.8.0",
     "gulp-sourcemaps": "^3.0.0",
-    "gulp-tar": "^5.0.0",
+    "gulp-tar": "^3.1.0",
     "gulp-uglify": "^3.0.2",
     "karma": "^6.4.4",
     "karma-chai": "^0.1.0",

package.json

@@ -1,11 +1,16 @@
 import angular from 'angular';
 import Chart from 'chart.js';
 
-Chart.defaults.global.multiTooltipTemplate =
-  '<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value %>';
-Chart.defaults.global.tooltips.mode = 'label';
+
+Chart.defaults.global.tooltips = Chart.defaults.global.tooltips || {};
+Chart.defaults.global.tooltips.mode = 'index';
+Chart.defaults.global.elements = Chart.defaults.global.elements || {};
+Chart.defaults.global.elements.line = Chart.defaults.global.elements.line || {};
 Chart.defaults.global.elements.line.borderWidth = 2;
+Chart.defaults.global.elements.rectangle =
+  Chart.defaults.global.elements.rectangle || {};
 Chart.defaults.global.elements.rectangle.borderWidth = 2;
+Chart.defaults.global.legend = Chart.defaults.global.legend || {};
 Chart.defaults.global.legend.display = false;
 Chart.defaults.global.colors = [
   '#97BBCD', // blue

src/angular-chart.js

@@ -1,10 +1,7 @@
 'use strict';
 
 const app = angular.module('examples', ['chart.js', 'ui.bootstrap']);
-Chart.defaults.global.legend = {
-  display: false,
-};
-
+Chart.defaults.global.legend.display = false;
 app.controller('TabsCtrl', function($scope) {
   $scope.labels = [
     'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday',

test/fixtures/29-tabs.js

@@ -1,10 +1,7 @@
 'use strict';
 
 const app = angular.module('pie', ['chart.js']);
-Chart.defaults.global.legend = {
-  display: false,
-};
-
+Chart.defaults.global.legend.display = false;
 app.controller('PieCtrl', ['$scope', '$timeout', function($scope, $timeout) {
   $scope.labels = ['Series A', 'Series B'];
   $scope.data = [65, 59];

test/fixtures/51-pie-update-colours.js

@@ -1,10 +1,7 @@
 'use strict';
 
 const app = angular.module('pie', ['chart.js']);
-Chart.defaults.global.legend = {
-  display: false,
-};
-
+Chart.defaults.global.legend.display = false;
 app.controller('PieCtrl', ['$scope', function($scope) {
   let cnt = 0;
   $scope.colors = [];

test/fixtures/54-not-enough-colours.js

@@ -1,10 +1,7 @@
 'use strict';
 
 const app = angular.module('pie', ['chart.js']);
-Chart.defaults.global.legend = {
-  display: false,
-};
-
+Chart.defaults.global.legend.display = false;
 app.controller('PieCtrl', ['$scope', function($scope) {
   $scope.labels = ['Series A', 'Series B'];
   $scope.colors = ['#9AFEFF', '#D1D0CE'];

test/fixtures/57-hex-colours.js

@@ -1,9 +1,7 @@
 'use strict';
 
 const app = angular.module('charts', ['chart.js']);
-Chart.defaults.global.legend = {
-  display: false,
-};
+Chart.defaults.global.legend.display = false;
 
 app.controller('LineCtrl', ['$scope', '$timeout', function($scope, $timeout) {
   $scope.labels = [

test/fixtures/charts.js

@@ -1,10 +1,7 @@
 'use strict';
 
 const app = angular.module('pie', ['chart.js']);
-Chart.defaults.global.legend = {
-  display: false,
-};
-
+Chart.defaults.global.legend.display = false;
 app.directive('mySpecialPie', function(ChartJsFactory) {
   return new ChartJsFactory('pie');
 });

test/fixtures/custom-directive.js

@@ -1,9 +1,7 @@
 'use strict';
 
 const app = angular.module('horizontal', ['chart.js']);
-Chart.defaults.global.legend = {
-  display: false,
-};
+Chart.defaults.global.legend.display = false;
 
 app.controller('HorizontalBarCtrl', function($scope) {
   $scope.labels = [