]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
Move registration migration guide to user migration section (#7620)
authorBen McCann <322311+benmccann@users.noreply.github.com>
Wed, 15 Jul 2020 11:52:59 +0000 (04:52 -0700)
committerGitHub <noreply@github.com>
Wed, 15 Jul 2020 11:52:59 +0000 (07:52 -0400)
docs/docs/getting-started/v3-migration.md

index d296ea60b30b79bed1d89767bb3f0a84f05999c2..2fc9f141f2682c9af5d011b9733ded169f7f88bf 100644 (file)
@@ -20,7 +20,33 @@ Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released
 
 * Distributed files are now in lower case. For example: `dist/chart.js`.
 * Chart.js is no longer providing the `Chart.bundle.js` and `Chart.bundle.min.js`. Please see the [installation](installation.md) and [integration](integration.md) docs for details on the recommended way to setup Chart.js if you were using these builds.
-* `moment` is no longer specified as an npm dependency. If you are using the time scale, you must include one of [the available adapters](https://github.com/chartjs/awesome#adapters) and corresponding date library. You no longer need to exclude moment from your build.
+* `moment` is no longer specified as an npm dependency. If you are using the `time` or `timeseries` scales, you must include one of [the available adapters](https://github.com/chartjs/awesome#adapters) and corresponding date library. You no longer need to exclude moment from your build.
+* Chart.js 3 is tree-shakeable. So if you are using it as an `npm` module in a project, you need to import and register the controllers, elements, scales and plugins you want to use. You will not have to call `register` if importing Chart.js via a `script` tag, but will not get the tree shaking benefits in this case. Here is an example of registering components:
+
+```javascript
+import Chart, LineController, Line, Point, LinearScale, Title from `chart.js`
+
+Chart.register(LineController, Line, Point, LinearScale, Title);
+
+const chart = new Chart(ctx, {
+    type: 'line',
+    // data: ...
+    options: {
+        title: {
+            display: true,
+            text: 'Chart Title'
+        },
+        scales: {
+            x: {
+                type: 'linear'
+            },
+            y: {
+                type: 'linear'
+            }
+        }
+    }
+})
+```
 
 ### Chart types
 
@@ -203,32 +229,6 @@ Some of the biggest things that have changed:
   * `Element._model` and `Element._view` are no longer used and properties are now set directly on the elements. You will have to use the method `getProps` to access these properties inside most methods such as `inXRange`/`inYRange` and `getCenterPoint`. Please take a look at [the Chart.js-provided elements](https://github.com/chartjs/Chart.js/tree/master/src/elements) for examples.
   * When building the elements in a controller, it's now suggested to call `updateElement` to provide the element properties. There are also methods such as `getSharedOptions` and `includeOptions` that have been added to skip redundant computation. Please take a look at [the Chart.js-provided controllers](https://github.com/chartjs/Chart.js/tree/master/src/controllers) for examples.
 * Scales introduced a new parsing API. This API takes user data and converts it into a more standard format. E.g. it allows users to provide numeric data as a `string` and converts it to a `number` where necessary. Previously this was done on the fly as charts were rendered. Now it's done up front with the ability to skip it for better performance if users provide data in the correct format. If you're using standard data format like `x`/`y` you may not need to do anything. If you're using a custom data format you will have to override some of the parse methods in `core.datasetController.js`. An example can be found in [chartjs-chart-financial](https://github.com/chartjs/chartjs-chart-financial), which uses an `{o, h, l, c}` data format.
-* Chart.js 3 is tree-shakeable. So when you use it as a module in a project, you need to import and register the controllers, elements, scales and plugins you want to use:
-
-```javascript
-import Chart, LineController, Line, Point, LinearScale, Title from `chart.js`
-
-Chart.register(LineController, Line, Point, LinearScale, Title);
-
-const chart = new Chart(ctx, {
-    type: 'line',
-    // data: ...
-    options: {
-        title: {
-            display: true,
-            text: 'Chart Title'
-        },
-        scales: {
-            x: {
-                type: 'linear'
-            },
-            y: {
-                type: 'linear'
-            }
-        }
-    }
-})
-```
 
 A few changes were made to controllers that are more straight-forward, but will affect all controllers: