Migrate to Chart.js v3.0.0-beta.7 (#203)

chartjs · Dec 9, 2020 · ade8c87 · ade8c87
1 parent 8572a7b
commit ade8c87
Show file tree

Hide file tree

Showing 68 changed files with 471 additions and 507 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 .DS_Store
+.idea
 .vscode/
 bower.json
 cc-test-reporter

diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
@@ -91,13 +91,13 @@ The [plugin options](options.md) can be changed at 3 different levels and are ev
 
 - per dataset: `dataset.datalabels.*`
 - per chart: `options.plugins.datalabels.*`
-- or globally: `Chart.defaults.global.plugins.datalabels.*`
+- or globally: `Chart.defaults.plugins.datalabels.*`
 
 For example:
 
 ```javascript
 // Change default options for ALL charts
-Chart.helpers.merge(Chart.defaults.global.plugins.datalabels, {
+Chart.defaults.set('plugins.datalabels', {
     color: '#FE777B'
 });
 

diff --git a/docs/guide/options.md b/docs/guide/options.md
@@ -12,12 +12,12 @@ The following table lists all available options:
 | `borderWidth` | `number` | Yes | Yes | `0`
 | [`clamp`](positioning.md#clamping) | `boolean` | Yes | Yes | `false`
 | [`clip`](positioning.md#clipping) | `boolean` | Yes | Yes | `false`
-| `color` | [`Style`](#style-options) | Yes | Yes | [`defaultFontColor`](http://www.chartjs.org/docs/latest/general/fonts.html)
+| `color` | [`Style`](#style-options) | Yes | Yes | [`color`](http://www.chartjs.org/docs/latest/general/fonts.html)
 | [`display`](positioning.md#visibility) | `boolean` \| `string` | Yes | Yes | `true`
 | `font` | `object` | Yes | Yes | -
-| `font.family` | `string` | - | - | [`defaultFontFamily`](http://www.chartjs.org/docs/latest/general/fonts.html)
-| `font.size` | `string` | - | - | [`defaultFontSize`](http://www.chartjs.org/docs/latest/general/fonts.html)
-| `font.style` | `string` | - | - | [`defaultFontStyle`](http://www.chartjs.org/docs/latest/general/fonts.html)
+| `font.family` | `string` | - | - | [`font.family`](http://www.chartjs.org/docs/latest/general/fonts.html)
+| `font.size` | `string` | - | - | [`font.size`](http://www.chartjs.org/docs/latest/general/fonts.html)
+| `font.style` | `string` | - | - | [`font.style`](http://www.chartjs.org/docs/latest/general/fonts.html)
 | `font.weight` | `string` | - | - | `'normal'`
 | [`font.lineHeight`](formatting.md#multiline-labels) | `number` \| `string` | - | - | `1.2`
 | [`formatter`](formatting.md#data-transformation) | `function` \| `null` | - | - | -

diff --git a/karma.config.js b/karma.config.js
@@ -22,7 +22,7 @@ module.exports = function(karma) {
 		files: [
 			{pattern: './test/fixtures/**/*.js', included: false},
 			{pattern: './test/fixtures/**/*.png', included: false},
-			'node_modules/chart.js/dist/Chart.js',
+			'node_modules/chart.js/dist/chart.js',
 			'test/index.js',
 			'src/plugin.js'
 		].concat(args.inputs),

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,9 +21,8 @@
     "types/*.d.ts"
   ],
   "devDependencies": {
-    "@types/chart.js": "^2.9.27",
     "@vuepress/plugin-google-analytics": "^1.7.1",
-    "chart.js": "~2.8.0",
+    "chart.js": "^3.0.0-beta.7",
     "eslint-config-chartjs": "^0.1.0",
     "eslint-plugin-es": "^3.0.1",
     "eslint-plugin-html": "^6.1.1",
@@ -53,6 +52,6 @@
     "yargs": "^16.1.0"
   },
   "peerDependencies": {
-    "chart.js": ">= 2.7.0 < 3"
+    "chart.js": "^3.0.0-beta.7"
   }
 }
diff --git a/samples/advanced/custom-labels.html b/samples/advanced/custom-labels.html
@@ -6,7 +6,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" type="text/css" href="../style.css">
 	<link rel="icon" type="image/ico" href="../favicon.ico">
-	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
+	<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0-beta.7"></script>
 	<script src="../../dist/chartjs-plugin-datalabels.js"></script>
 	<script src="../utils.js"></script>
 </head>
@@ -44,22 +44,25 @@
 
 		Samples.srand(0);
 
-		Chart.helpers.merge(Chart.defaults.global, {
+		Chart.defaults.set({
 			aspectRatio: 4 / 3,
-			tooltips: false,
 			layout: {
 				padding: {
 					top: 32
 				}
 			},
 			elements: {
 				line: {
-					fill: false
+					fill: false,
+					tension: 0.4
 				}
 			},
 			plugins: {
-				legend: false,
-				title: false
+				legend: {
+					display: false
+				},
+				title: false,
+				tooltip: false
 			}
 		});
 	</script>
@@ -98,15 +101,13 @@
 					}
 				},
 				scales: {
-					xAxes: [{
+					x: {
 						display: false,
 						offset: true
-					}],
-					yAxes: [{
-						ticks: {
-							beginAtZero: true
-						}
-					}]
+					},
+					y: {
+						beginAtZero: true
+					}
 				}
 			}
 		});

diff --git a/samples/advanced/multiple-labels.html b/samples/advanced/multiple-labels.html
@@ -6,7 +6,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" type="text/css" href="../style.css">
 	<link rel="icon" type="image/ico" href="../favicon.ico">
-	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.7.0/dist/Chart.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0-beta.7"></script>
 	<script src="../../dist/chartjs-plugin-datalabels.js"></script>
 	<script src="../utils.js"></script>
 </head>
@@ -43,9 +43,8 @@
 
 		Samples.srand(4);
 
-		Chart.helpers.merge(Chart.defaults.global, {
+		Chart.defaults.set({
 			aspectRatio: 4 / 3,
-			tooltips: false,
 			layout: {
 				padding: {
 					top: 42,
@@ -56,16 +55,20 @@
 			},
 			elements: {
 				line: {
-					fill: false
+					fill: false,
+					tension: 0.4
 				},
 				point: {
 					hoverRadius: 7,
 					radius: 5
 				}
 			},
 			plugins: {
-				legend: false,
-				title: false
+				legend: {
+					display: false,
+				},
+				title: false,
+				tooltip: false
 			}
 		});
 	</script>

diff --git a/samples/charts/bar.html b/samples/charts/bar.html
@@ -6,7 +6,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" type="text/css" href="../style.css">
 	<link rel="icon" type="image/ico" href="../favicon.ico">
-	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
+	<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0-beta.7"></script>
 	<script src="../../dist/chartjs-plugin-datalabels.js"></script>
 	<script src="../utils.js"></script>
 </head>
@@ -41,9 +41,8 @@
 			labels.push('' + i);
 		}
 
-		Chart.helpers.merge(Chart.defaults.global, {
+		Chart.defaults.set({
 			aspectRatio: 4 / 3,
-			tooltips: false,
 			layout: {
 				padding: {
 					top: 42,
@@ -62,8 +61,11 @@
 				}
 			},
 			plugins: {
-				legend: false,
-				title: false
+				legend: {
+					display: false
+				},
+				title: false,
+				tooltip: false
 			}
 		});
 	</script>
@@ -122,12 +124,12 @@
 					}
 				},
 				scales: {
-					xAxes: [{
+					x: {
 						stacked: true
-					}],
-					yAxes: [{
+					},
+					y: {
 						stacked: true
-					}]
+					}
 				}
 			}
 		});

diff --git a/samples/charts/bubble.html b/samples/charts/bubble.html
@@ -6,7 +6,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" type="text/css" href="../style.css">
 	<link rel="icon" type="image/ico" href="../favicon.ico">
-	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
+	<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0-beta.7"></script>
 	<script src="../../dist/chartjs-plugin-datalabels.js"></script>
 	<script src="../utils.js"></script>
 </head>
@@ -53,9 +53,8 @@
 			return data;
 		}
 
-		Chart.helpers.merge(Chart.defaults.global, {
+		Chart.defaults.set({
 			aspectRatio: 1,
-			tooltips: false,
 			layout: {
 				padding: {
 					top: 42,
@@ -75,8 +74,11 @@
 				}
 			},
 			plugins: {
-				legend: false,
-				title: false
+				legend: {
+					display: false
+				},
+				title: false,
+				tooltip: false
 			}
 		});
 	</script>

diff --git a/samples/charts/doughnut.html b/samples/charts/doughnut.html
@@ -6,7 +6,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" type="text/css" href="../style.css">
 	<link rel="icon" type="image/ico" href="../favicon.ico">
-	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
+	<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0-beta.7"></script>
 	<script src="../../dist/chartjs-plugin-datalabels.js"></script>
 	<script src="../utils.js"></script>
 </head>
@@ -41,9 +41,8 @@
 			labels.push('' + i);
 		}
 
-		Chart.helpers.merge(Chart.defaults.global, {
+		Chart.defaults.set({
 			maintainAspectRatio: false,
-			tooltips: false,
 			layout: {
 				padding: 32
 			},
@@ -57,8 +56,11 @@
 				}
 			},
 			plugins: {
-				legend: false,
-				title: false
+				legend: {
+					display: false,
+				},
+				title: false,
+				tooltip: false
 			}
 		});
 	</script>