From: PrashoonB <prashoonbhattacharjee@gmail.com>
Date: Wed, 13 Oct 2021 18:51:33 +0000 (+0530)
Subject: Changed var to const/let in the docs (#9744)
X-Git-Tag: v3.6.0~12
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=6f7e09540ca4dab3f678bd346caae5975606afd1;p=thirdparty%2FChart.js.git

Changed var to const/let in the docs (#9744)

Changed var to const/let in the docs
---

diff --git a/docs/axes/cartesian/index.md b/docs/axes/cartesian/index.md
index a824576ff..6054f4d84 100644
--- a/docs/axes/cartesian/index.md
+++ b/docs/axes/cartesian/index.md
@@ -294,7 +294,7 @@ The `crossAlign` setting is only effective when these preconditions are met:
 The properties `dataset.xAxisID` or `dataset.yAxisID` have to match to `scales` property. This is especially needed if multi-axes charts are used.
 
 ```javascript
-var myChart = new Chart(ctx, {
+const myChart = new Chart(ctx, {
     type: 'line',
     data: {
         datasets: [{
@@ -325,7 +325,7 @@ With cartesian axes, it is possible to create multiple X and Y axes. To do so, y
 In the example below, we are creating two Y axes. We then use the `yAxisID` property to map the datasets to their correct axes.
 
 ```javascript
-var myChart = new Chart(ctx, {
+const myChart = new Chart(ctx, {
     type: 'line',
     data: {
         datasets: [{
diff --git a/docs/axes/cartesian/time.md b/docs/axes/cartesian/time.md
index 3ec4755ab..5c609d217 100644
--- a/docs/axes/cartesian/time.md
+++ b/docs/axes/cartesian/time.md
@@ -57,7 +57,7 @@ The following time measurements are supported. The names can be passed as string
 For example, to create a chart with a time scale that always displayed units per month, the following config could be used.
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
@@ -92,7 +92,7 @@ The format string used as a value depends on the date adapter you chose to use.
 For example, to set the display format for the `quarter` unit to show the month and year, the following config might be passed to the chart constructor.
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
diff --git a/docs/axes/cartesian/timeseries.md b/docs/axes/cartesian/timeseries.md
index ab7f978a9..daac4df28 100644
--- a/docs/axes/cartesian/timeseries.md
+++ b/docs/axes/cartesian/timeseries.md
@@ -5,7 +5,7 @@ The time series scale extends from the time scale and supports all the same opti
 ## Example
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
diff --git a/docs/axes/labelling.md b/docs/axes/labelling.md
index 527e53fd1..4f0496e3b 100644
--- a/docs/axes/labelling.md
+++ b/docs/axes/labelling.md
@@ -37,7 +37,7 @@ The [category axis](../axes/cartesian/category), which is the default x-axis for
 In the following example, every label of the Y-axis would be displayed with a dollar sign at the front.
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
diff --git a/docs/charts/bar.md b/docs/charts/bar.md
index 325ca9c36..261beec47 100644
--- a/docs/charts/bar.md
+++ b/docs/charts/bar.md
@@ -278,7 +278,7 @@ All of the supported [data structures](../general/data-structures.md) can be use
 Bar charts can be configured into stacked bar charts by changing the settings on the X and Y axes to enable stacking. Stacked bar charts can be used to show how one data series is made up of a number of smaller pieces.
 
 ```javascript
-var stackedBar = new Chart(ctx, {
+const stackedBar = new Chart(ctx, {
     type: 'bar',
     data: data,
     options: {
diff --git a/docs/charts/line.md b/docs/charts/line.md
index fc245fcb0..bfd9927d1 100644
--- a/docs/charts/line.md
+++ b/docs/charts/line.md
@@ -209,7 +209,7 @@ All of the supported [data structures](../general/data-structures.md) can be use
 Line charts can be configured into stacked area charts by changing the settings on the y-axis to enable stacking. Stacked area charts can be used to show how one data trend is made up of a number of smaller pieces.
 
 ```javascript
-var stackedLine = new Chart(ctx, {
+const stackedLine = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
diff --git a/docs/charts/mixed.md b/docs/charts/mixed.md
index 84f42f130..79bf9b6e0 100644
--- a/docs/charts/mixed.md
+++ b/docs/charts/mixed.md
@@ -5,7 +5,7 @@ With Chart.js, it is possible to create mixed charts that are a combination of t
 When creating a mixed chart, we specify the chart type on each dataset.
 
 ```javascript
-var mixedChart = new Chart(ctx, {
+const mixedChart = new Chart(ctx, {
     data: {
         datasets: [{
             type: 'bar',
@@ -76,7 +76,7 @@ module.exports = {
 The `order` property behaves like a weight instead of a specific order, so the higher the number, the sooner that dataset is drawn on the canvas and thus other datasets with a lower order number will get drawn over it.
 
  ```javascript
-var mixedChart = new Chart(ctx, {
+const mixedChart = new Chart(ctx, {
     type: 'bar',
     data: {
         datasets: [{
diff --git a/docs/configuration/animations.md b/docs/configuration/animations.md
index 36ac0e7c1..21b5994bf 100644
--- a/docs/configuration/animations.md
+++ b/docs/configuration/animations.md
@@ -269,7 +269,7 @@ The callback is passed the following object:
 The following example fills a progress bar during the chart animation.
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
diff --git a/docs/configuration/index.md b/docs/configuration/index.md
index a5193bf31..b689fc328 100644
--- a/docs/configuration/index.md
+++ b/docs/configuration/index.md
@@ -14,13 +14,13 @@ The following example would set the interaction mode to 'nearest' for all charts
 Chart.defaults.interaction.mode = 'nearest';
 
 // Interaction mode is set to nearest because it was not overridden here
-var chartInteractionModeNearest = new Chart(ctx, {
+const chartInteractionModeNearest = new Chart(ctx, {
     type: 'line',
     data: data
 });
 
 // This chart would have the interaction mode that was passed in
-var chartDifferentInteractionMode = new Chart(ctx, {
+const chartDifferentInteractionMode = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
@@ -43,7 +43,7 @@ The following example would set the `showLine` option to 'false' for all line da
 Chart.defaults.datasets.line.showLine = false;
 
 // This chart would show a line only for the third dataset
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     type: 'line',
     data: {
         datasets: [{
diff --git a/docs/configuration/interactions.md b/docs/configuration/interactions.md
index 370244bae..a2b924495 100644
--- a/docs/configuration/interactions.md
+++ b/docs/configuration/interactions.md
@@ -26,7 +26,7 @@ Namespace: `options`
 For example, to have the chart only respond to click events, you could do:
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
   type: 'line',
   data: data,
   options: {
@@ -39,7 +39,7 @@ var chart = new Chart(ctx, {
 Events for each plugin can be further limited by defining (allowed) events array in plugin options:
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
   type: 'line',
   data: data,
   options: {
@@ -59,7 +59,7 @@ var chart = new Chart(ctx, {
 Events that do not fire over chartArea, like `mouseout`, can be captured using a simple plugin:
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
   type: 'line',
   data: data,
   options: {
@@ -113,7 +113,7 @@ The modes are detailed below and how they behave in conjunction with the `inters
 Finds all of the items that intersect the point.
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
@@ -129,7 +129,7 @@ var chart = new Chart(ctx, {
 Gets the items that are at the nearest distance to the point. The nearest item is determined based on the distance to the center of the chart item (point, bar). You can use the `axis` setting to define which directions are used in distance calculation. If `intersect` is true, this is only triggered when the mouse position intersects an item in the graph. This is very useful for combo charts where points are hidden behind bars.
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
@@ -145,7 +145,7 @@ var chart = new Chart(ctx, {
 Finds item at the same index. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item, in the x direction, is used to determine the index.
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
@@ -159,7 +159,7 @@ var chart = new Chart(ctx, {
 To use index mode in a chart like the horizontal bar chart, where we search along the y direction, you can use the `axis` setting introduced in v2.7.0. By setting this value to `'y'` on the y direction is used.
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     type: 'bar',
     data: data,
     options: {
@@ -176,7 +176,7 @@ var chart = new Chart(ctx, {
 Finds items in the same dataset. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item is used to determine the index.
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
@@ -192,7 +192,7 @@ var chart = new Chart(ctx, {
 Returns all items that would intersect based on the `X` coordinate of the position only. Would be useful for a vertical cursor implementation. Note that this only applies to cartesian charts.
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
@@ -208,7 +208,7 @@ var chart = new Chart(ctx, {
 Returns all items that would intersect based on the `Y` coordinate of the position. This would be useful for a horizontal cursor implementation. Note that this only applies to cartesian charts.
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
diff --git a/docs/configuration/legend.md b/docs/configuration/legend.md
index 876ae11e4..10fa89cd3 100644
--- a/docs/configuration/legend.md
+++ b/docs/configuration/legend.md
@@ -131,7 +131,7 @@ Items passed to the legend `onClick` function are the ones returned from `labels
 The following example will create a chart with the legend enabled and turn all of the text red in color.
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     type: 'bar',
     data: data,
     options: {
@@ -170,11 +170,11 @@ function(e, legendItem, legend) {
 Lets say we wanted instead to link the display of the first two datasets. We could change the click handler accordingly.
 
 ```javascript
-var defaultLegendClickHandler = Chart.defaults.plugins.legend.onClick;
-var pieDoughnutLegendClickHandler = Chart.controllers.doughnut.overrides.plugins.legend.onClick;
-var newLegendClickHandler = function (e, legendItem, legend) {
-    var index = legendItem.datasetIndex;
-    var type = legend.chart.config.type;
+const defaultLegendClickHandler = Chart.defaults.plugins.legend.onClick;
+const pieDoughnutLegendClickHandler = Chart.controllers.doughnut.overrides.plugins.legend.onClick;
+const newLegendClickHandler = function (e, legendItem, legend) {
+    const index = legendItem.datasetIndex;
+    const type = legend.chart.config.type;
 
     if (index > 1) {
         // Do the original logic
@@ -196,7 +196,7 @@ var newLegendClickHandler = function (e, legendItem, legend) {
     }
 };
 
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
diff --git a/docs/configuration/responsive.md b/docs/configuration/responsive.md
index 8f2564b1d..3254ccb8c 100644
--- a/docs/configuration/responsive.md
+++ b/docs/configuration/responsive.md
@@ -47,7 +47,7 @@ CSS media queries allow changing styles when printing a page. The CSS applied fr
 
 ```javascript
 function beforePrintHandler () {
-    for (var id in Chart.instances) {
+    for (let id in Chart.instances) {
         Chart.instances[id].resize();
     }
 }
diff --git a/docs/configuration/subtitle.md b/docs/configuration/subtitle.md
index 41fa26d07..e50f08f02 100644
--- a/docs/configuration/subtitle.md
+++ b/docs/configuration/subtitle.md
@@ -13,7 +13,7 @@ Excactly the same configuration options with [title](./title.md) are available f
 The example below would enable a title of 'Custom Chart Subtitle' on the chart that is created.
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
diff --git a/docs/configuration/title.md b/docs/configuration/title.md
index 3bd78c07d..f15b25b4b 100644
--- a/docs/configuration/title.md
+++ b/docs/configuration/title.md
@@ -39,7 +39,7 @@ Alignment of the title. Options are:
 The example below would enable a title of 'Custom Chart Title' on the chart that is created.
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
@@ -56,7 +56,7 @@ var chart = new Chart(ctx, {
 This example shows how to specify separate top and bottom title text padding:
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
diff --git a/docs/configuration/tooltip.md b/docs/configuration/tooltip.md
index 2c68ed9d7..bac1a0b94 100644
--- a/docs/configuration/tooltip.md
+++ b/docs/configuration/tooltip.md
@@ -70,7 +70,7 @@ Example:
 const tooltipPlugin = Chart.registry.getPlugin('tooltip');
 tooltipPlugin.positioners.myCustomPositioner = function(elements, eventPosition) {
     /** @type {Tooltip} */
-    var tooltip = this;
+    const tooltip = this;
 
     /* ... */
 
@@ -145,7 +145,7 @@ A [tooltip item context](#tooltip-item-context) is generated for each item that
 The `label` callback can change the text that displays for a given data point. A common example to show a unit. The example below puts a `'$'` before every row.
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
@@ -153,7 +153,7 @@ var chart = new Chart(ctx, {
             tooltip: {
                 callbacks: {
                     label: function(context) {
-                        var label = context.dataset.label || '';
+                        const label = context.dataset.label || '';
 
                         if (label) {
                             label += ': ';
@@ -175,7 +175,7 @@ var chart = new Chart(ctx, {
 For example, to return a red box with a blue dashed border that has a border radius for each item in the tooltip you could do:
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
@@ -206,7 +206,7 @@ var chart = new Chart(ctx, {
 For example, to draw triangles instead of the regular color box for each item in the tooltip you could do:
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
@@ -267,7 +267,7 @@ The tooltip items passed to the tooltip callbacks implement the following interf
 External tooltips allow you to hook into the tooltip rendering process so that you can render the tooltip in your own custom way. Generally this is used to create an HTML tooltip instead of an on-canvas tooltip. The `external` option takes a function which is passed a context parameter containing the `chart` and `tooltip`. You can enable external tooltips in the global or chart configuration like so:
 
 ```javascript
-var myPieChart = new Chart(ctx, {
+const myPieChart = new Chart(ctx, {
     type: 'pie',
     data: data,
     options: {
@@ -278,7 +278,7 @@ var myPieChart = new Chart(ctx, {
 
                 external: function(context) {
                     // Tooltip Element
-                    var tooltipEl = document.getElementById('chartjs-tooltip');
+                    const tooltipEl = document.getElementById('chartjs-tooltip');
 
                     // Create element on first render
                     if (!tooltipEl) {
@@ -289,7 +289,7 @@ var myPieChart = new Chart(ctx, {
                     }
 
                     // Hide if no tooltip
-                    var tooltipModel = context.tooltip;
+                    const tooltipModel = context.tooltip;
                     if (tooltipModel.opacity === 0) {
                         tooltipEl.style.opacity = 0;
                         return;
@@ -309,10 +309,10 @@ var myPieChart = new Chart(ctx, {
 
                     // Set Text
                     if (tooltipModel.body) {
-                        var titleLines = tooltipModel.title || [];
-                        var bodyLines = tooltipModel.body.map(getBody);
+                        const titleLines = tooltipModel.title || [];
+                        const bodyLines = tooltipModel.body.map(getBody);
 
-                        var innerHtml = '<thead>';
+                        const innerHtml = '<thead>';
 
                         titleLines.forEach(function(title) {
                             innerHtml += '<tr><th>' + title + '</th></tr>';
@@ -320,21 +320,21 @@ var myPieChart = new Chart(ctx, {
                         innerHtml += '</thead><tbody>';
 
                         bodyLines.forEach(function(body, i) {
-                            var colors = tooltipModel.labelColors[i];
-                            var style = 'background:' + colors.backgroundColor;
+                            const colors = tooltipModel.labelColors[i];
+                            const style = 'background:' + colors.backgroundColor;
                             style += '; border-color:' + colors.borderColor;
                             style += '; border-width: 2px';
-                            var span = '<span style="' + style + '"></span>';
+                            const span = '<span style="' + style + '"></span>';
                             innerHtml += '<tr><td>' + span + body + '</td></tr>';
                         });
                         innerHtml += '</tbody>';
 
-                        var tableRoot = tooltipEl.querySelector('table');
+                        const tableRoot = tooltipEl.querySelector('table');
                         tableRoot.innerHTML = innerHtml;
                     }
 
-                    var position = context.chart.canvas.getBoundingClientRect();
-                    var bodyFont = Chart.helpers.toFont(tooltipModel.options.bodyFont);
+                    const position = context.chart.canvas.getBoundingClientRect();
+                    const bodyFont = Chart.helpers.toFont(tooltipModel.options.bodyFont);
 
                     // Display, position, and set styles for font
                     tooltipEl.style.opacity = 1;
diff --git a/docs/developers/api.md b/docs/developers/api.md
index a17b2a5d6..beec9fdaa 100644
--- a/docs/developers/api.md
+++ b/docs/developers/api.md
@@ -4,7 +4,7 @@ For each chart, there are a set of global prototype methods on the shared chart
 
 ```javascript
 // For example:
-var myLineChart = new Chart(ctx, config);
+const myLineChart = new Chart(ctx, config);
 ```
 
 ## .destroy()
@@ -107,8 +107,8 @@ function clickHandler(evt) {
 
     if (points.length) {
         const firstPoint = points[0];
-        var label = myChart.data.labels[firstPoint.index];
-        var value = myChart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
+        const label = myChart.data.labels[firstPoint.index];
+        const value = myChart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
     }
 }
 ```
@@ -122,8 +122,8 @@ The `data` property of the metadata will contain information about each point, b
 Extensive examples of usage are available in the [Chart.js tests](https://github.com/chartjs/Chart.js/tree/master/test).
 
 ```javascript
-var meta = myChart.getDatasetMeta(0);
-var x = meta.data[0].x;
+const meta = myChart.getDatasetMeta(0);
+const x = meta.data[0].x;
 ```
 
 ## setDatasetVisibility(datasetIndex, visibility)
@@ -149,7 +149,7 @@ chart.update(); // chart now renders with item hidden
 Returns the stored visibility state of an data index for all datasets. Set by [toggleDataVisibility](#toggleDataVisibility). A dataset controller should use this method to determine if an item should not be visible.
 
 ```javascript
-var visible = chart.getDataVisibility(2);
+const visible = chart.getDataVisibility(2);
 ```
 
 ## hide(datasetIndex, dataIndex?)
diff --git a/docs/developers/axes.md b/docs/developers/axes.md
index 6bc450712..651237127 100644
--- a/docs/developers/axes.md
+++ b/docs/developers/axes.md
@@ -26,7 +26,7 @@ Chart.register(MyScale);
 To use the new scale, simply pass in the string key to the config when creating a chart.
 
 ```javascript
-var lineChart = new Chart(ctx, {
+const lineChart = new Chart(ctx, {
     data: data,
     type: 'line',
     options: {
diff --git a/docs/developers/plugins.md b/docs/developers/plugins.md
index 0144839c3..64efe2096 100644
--- a/docs/developers/plugins.md
+++ b/docs/developers/plugins.md
@@ -7,19 +7,19 @@ Plugins are the most efficient way to customize or change the default behavior o
 Plugins can be shared between chart instances:
 
 ```javascript
-var plugin = { /* plugin implementation */ };
+const plugin = { /* plugin implementation */ };
 
 // chart1 and chart2 use "plugin"
-var chart1 = new Chart(ctx, {
+const chart1 = new Chart(ctx, {
     plugins: [plugin]
 });
 
-var chart2 = new Chart(ctx, {
+const chart2 = new Chart(ctx, {
     plugins: [plugin]
 });
 
 // chart3 doesn't use "plugin"
-var chart3 = new Chart(ctx, {});
+const chart3 = new Chart(ctx, {});
 ```
 
 Plugins can also be defined directly in the chart `plugins` config (a.k.a. *inline plugins*):
@@ -29,7 +29,7 @@ Plugins can also be defined directly in the chart `plugins` config (a.k.a. *inli
 :::
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     plugins: [{
         beforeInit: function(chart, args, options) {
             //..
@@ -74,7 +74,7 @@ If a plugin is intended to be released publicly, you may want to check the [regi
 Plugin options are located under the `options.plugins` config and are scoped by the plugin ID: `options.plugins.{plugin-id}`.
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     options: {
         foo: { ... },           // chart 'foo' option
         plugins: {
@@ -101,7 +101,7 @@ Chart.register({
     // ...
 });
 
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     options: {
         plugins: {
             p1: false   // disable plugin 'p1' for this instance
@@ -113,7 +113,7 @@ var chart = new Chart(ctx, {
 To disable all plugins for a specific chart instance, set `options.plugins` to `false`:
 
 ```javascript
-var chart = new Chart(ctx, {
+const chart = new Chart(ctx, {
     options: {
         plugins: false // all plugins are disabled for this instance
     }
diff --git a/docs/developers/updates.md b/docs/developers/updates.md
index d93fe28ad..697d25bd3 100644
--- a/docs/developers/updates.md
+++ b/docs/developers/updates.md
@@ -66,8 +66,8 @@ Variables referencing any one from `chart.scales` would be lost after updating s
 
 ```javascript
 function updateScales(chart) {
-    var xScale = chart.scales.x;
-    var yScale = chart.scales.y;
+    const xScale = chart.scales.x;
+    const yScale = chart.scales.y;
     chart.options.scales = {
         newId: {
             display: true
diff --git a/docs/general/colors.md b/docs/general/colors.md
index 0a65a46c4..c9b101693 100644
--- a/docs/general/colors.md
+++ b/docs/general/colors.md
@@ -17,13 +17,13 @@ An alternative option is to pass a [CanvasPattern](https://developer.mozilla.org
 For example, if you wanted to fill a dataset with a pattern from an image you could do the following.
 
 ```javascript
-var img = new Image();
+const img = new Image();
 img.src = 'https://example.com/my_image.png';
 img.onload = function() {
-    var ctx = document.getElementById('canvas').getContext('2d');
-    var fillPattern = ctx.createPattern(img, 'repeat');
+    const ctx = document.getElementById('canvas').getContext('2d');
+    const fillPattern = ctx.createPattern(img, 'repeat');
 
-    var chart = new Chart(ctx, {
+    const chart = new Chart(ctx, {
         data: {
             labels: ['Item 1', 'Item 2', 'Item 3'],
             datasets: [{
@@ -40,7 +40,7 @@ Using pattern fills for data graphics can help viewers with vision deficiencies
 Using the [Patternomaly](https://github.com/ashiguruma/patternomaly) library you can generate patterns to fill datasets.
 
 ```javascript
-var chartData = {
+const chartData = {
     datasets: [{
         data: [45, 25, 20, 10],
         backgroundColor: [
diff --git a/docs/general/options.md b/docs/general/options.md
index ebc4ce994..55f90480c 100644
--- a/docs/general/options.md
+++ b/docs/general/options.md
@@ -78,14 +78,14 @@ Example:
 
 ```javascript
 color: function(context) {
-    var index = context.dataIndex;
-    var value = context.dataset.data[index];
+    const index = context.dataIndex;
+    const value = context.dataset.data[index];
     return value < 0 ? 'red' :  // draw negative values in red
         index % 2 ? 'blue' :    // else, alternate values in blue and green
         'green';
 },
 borderColor: function(context, options) {
-    var color = options.color; // resolve the value of another scriptable option: 'red', 'blue' or 'green'
+    const color = options.color; // resolve the value of another scriptable option: 'red', 'blue' or 'green'
     return Chart.helpers.color(color).lighten(0.2);
 }
 ```
diff --git a/docs/getting-started/index.md b/docs/getting-started/index.md
index e609ffecd..25d944a20 100644
--- a/docs/getting-started/index.md
+++ b/docs/getting-started/index.md
@@ -59,7 +59,7 @@ Finally, render the chart using our configuration:
 <script>
   // === include 'setup' then 'config' above ===
 
-  var myChart = new Chart(
+  const myChart = new Chart(
     document.getElementById('myChart'),
     config
   );
diff --git a/docs/getting-started/integration.md b/docs/getting-started/integration.md
index 13a87048b..d8f0707d1 100644
--- a/docs/getting-started/integration.md
+++ b/docs/getting-started/integration.md
@@ -7,15 +7,15 @@ Chart.js can be integrated with plain JavaScript or with different module loader
 ```html
 <script src="path/to/chartjs/dist/chart.js"></script>
 <script>
-    var myChart = new Chart(ctx, {...});
+    const myChart = new Chart(ctx, {...});
 </script>
 ```
 
 ## Common JS
 
 ```javascript
-var Chart = require('chart.js');
-var myChart = new Chart(ctx, {...});
+const Chart = require('chart.js');
+const myChart = new Chart(ctx, {...});
 ```
 
 ## Bundlers (Webpack, Rollup, etc.)
@@ -80,7 +80,7 @@ Chart.register(
   SubTitle
 );
 
-var myChart = new Chart(ctx, {...});
+const myChart = new Chart(ctx, {...});
 ```
 
 A short registration format is also available to quickly register everything.
@@ -127,7 +127,7 @@ const chart = new Chart(ctx, {
 
 ```javascript
 require(['path/to/chartjs/dist/chart.min.js'], function(Chart){
-    var myChart = new Chart(ctx, {...});
+    const myChart = new Chart(ctx, {...});
 });
 ```
 
diff --git a/docs/getting-started/usage.md b/docs/getting-started/usage.md
index 81b93d6cf..620245c0e 100644
--- a/docs/getting-started/usage.md
+++ b/docs/getting-started/usage.md
@@ -12,10 +12,10 @@ To create a chart, we need to instantiate the `Chart` class. To do this, we need
 
 ```javascript
 // Any of the following formats may be used
-var ctx = document.getElementById('myChart');
-var ctx = document.getElementById('myChart').getContext('2d');
-var ctx = $('#myChart');
-var ctx = 'myChart';
+const ctx = document.getElementById('myChart');
+const ctx = document.getElementById('myChart').getContext('2d');
+const ctx = $('#myChart');
+const ctx = 'myChart';
 ```
 
 Once you have the element or context, you're ready to instantiate a pre-defined chart-type or create your own!
@@ -25,8 +25,8 @@ The following example instantiates a bar chart showing the number of votes for d
 ```html
 <canvas id="myChart" width="400" height="400"></canvas>
 <script>
-var ctx = document.getElementById('myChart');
-var myChart = new Chart(ctx, {
+const ctx = document.getElementById('myChart');
+const myChart = new Chart(ctx, {
     type: 'bar',
     data: {
         labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
diff --git a/docs/index.md b/docs/index.md
index 8e90dd040..076b2debb 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -15,8 +15,8 @@ In this example, we create a bar chart for a single dataset and render that in o
 ```html
 <canvas id="myChart" width="400" height="400"></canvas>
 <script>
-var ctx = document.getElementById('myChart').getContext('2d');
-var myChart = new Chart(ctx, {
+const ctx = document.getElementById('myChart').getContext('2d');
+const myChart = new Chart(ctx, {
     type: 'bar',
     data: {
         labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
diff --git a/docs/samples/advanced/linear-gradient.md b/docs/samples/advanced/linear-gradient.md
index 4b0896353..07d13d18d 100644
--- a/docs/samples/advanced/linear-gradient.md
+++ b/docs/samples/advanced/linear-gradient.md
@@ -19,7 +19,7 @@ const actions = [
       if (data.datasets.length > 0) {
         data.labels = Utils.months({count: data.labels.length + 1});
 
-        for (var index = 0; index < data.datasets.length; ++index) {
+        for (let index = 0; index < data.datasets.length; ++index) {
           data.datasets[index].data.push(Utils.rand(-100, 100));
         }
 
diff --git a/docs/samples/advanced/progress-bar.md b/docs/samples/advanced/progress-bar.md
index 1ba5554db..70af7c658 100644
--- a/docs/samples/advanced/progress-bar.md
+++ b/docs/samples/advanced/progress-bar.md
@@ -42,7 +42,7 @@ const actions = [
       if (data.datasets.length > 0) {
         data.labels = Utils.months({count: data.labels.length + 1});
 
-        for (var index = 0; index < data.datasets.length; ++index) {
+        for (let index = 0; index < data.datasets.length; ++index) {
           data.datasets[index].data.push(Utils.rand(-100, 100));
         }
 
diff --git a/docs/samples/advanced/radial-gradient.md b/docs/samples/advanced/radial-gradient.md
index c38833efc..45211d6ab 100644
--- a/docs/samples/advanced/radial-gradient.md
+++ b/docs/samples/advanced/radial-gradient.md
@@ -38,7 +38,7 @@ function createRadialGradient3(context, c1, c2, c3) {
   if (width !== chartWidth || height !== chartHeight) {
     cache.clear();
   }
-  var gradient = cache.get(c1 + c2 + c3);
+  let gradient = cache.get(c1 + c2 + c3);
   if (!gradient) {
     // Create the gradient because this is either the first render
     // or the size of the chart has changed
@@ -50,7 +50,7 @@ function createRadialGradient3(context, c1, c2, c3) {
       (chartArea.right - chartArea.left) / 2,
       (chartArea.bottom - chartArea.top) / 2
     );
-    var ctx = context.chart.ctx;
+    const ctx = context.chart.ctx;
     gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, r);
     gradient.addColorStop(0, c1);
     gradient.addColorStop(0.5, c2);
diff --git a/docs/samples/animations/delay.md b/docs/samples/animations/delay.md
index 3e7a8d4f9..767110fe8 100644
--- a/docs/samples/animations/delay.md
+++ b/docs/samples/animations/delay.md
@@ -43,7 +43,7 @@ const data = {
 // </block:setup>
 
 // <block:config:0>
-var delayed;
+let delayed;
 const config = {
   type: 'bar',
   data: data,
diff --git a/docs/samples/animations/drop.md b/docs/samples/animations/drop.md
index bdeaeb31a..e9401014f 100644
--- a/docs/samples/animations/drop.md
+++ b/docs/samples/animations/drop.md
@@ -34,7 +34,7 @@ const actions = [
       if (data.datasets.length > 0) {
         data.labels = Utils.months({count: data.labels.length + 1});
 
-        for (var index = 0; index < data.datasets.length; ++index) {
+        for (let index = 0; index < data.datasets.length; ++index) {
           data.datasets[index].data.push(Utils.rand(-100, 100));
         }
 
diff --git a/docs/samples/animations/loop.md b/docs/samples/animations/loop.md
index d6eeb0fc3..05a4a62c9 100644
--- a/docs/samples/animations/loop.md
+++ b/docs/samples/animations/loop.md
@@ -34,7 +34,7 @@ const actions = [
       if (data.datasets.length > 0) {
         data.labels = Utils.months({count: data.labels.length + 1});
 
-        for (var index = 0; index < data.datasets.length; ++index) {
+        for (let index = 0; index < data.datasets.length; ++index) {
           data.datasets[index].data.push(Utils.rand(-100, 100));
         }
 
diff --git a/docs/samples/area/line-stacked.md b/docs/samples/area/line-stacked.md
index 4394b6aee..a03d45225 100644
--- a/docs/samples/area/line-stacked.md
+++ b/docs/samples/area/line-stacked.md
@@ -56,7 +56,7 @@ const actions = [
       if (data.datasets.length > 0) {
         data.labels = Utils.months({count: data.labels.length + 1});
 
-        for (var index = 0; index < data.datasets.length; ++index) {
+        for (let index = 0; index < data.datasets.length; ++index) {
           data.datasets[index].data.push(Utils.rand(-100, 100));
         }
 
diff --git a/docs/samples/bar/horizontal.md b/docs/samples/bar/horizontal.md
index a56eaa027..f9d85b966 100644
--- a/docs/samples/bar/horizontal.md
+++ b/docs/samples/bar/horizontal.md
@@ -35,7 +35,7 @@ const actions = [
       if (data.datasets.length > 0) {
         data.labels = Utils.months({count: data.labels.length + 1});
 
-        for (var index = 0; index < data.datasets.length; ++index) {
+        for (let index = 0; index < data.datasets.length; ++index) {
           data.datasets[index].data.push(Utils.rand(-100, 100));
         }
 
diff --git a/docs/samples/bar/vertical.md b/docs/samples/bar/vertical.md
index e5540565e..5ce29a3f1 100644
--- a/docs/samples/bar/vertical.md
+++ b/docs/samples/bar/vertical.md
@@ -35,7 +35,7 @@ const actions = [
       if (data.datasets.length > 0) {
         data.labels = Utils.months({count: data.labels.length + 1});
 
-        for (var index = 0; index < data.datasets.length; ++index) {
+        for (let index = 0; index < data.datasets.length; ++index) {
           data.datasets[index].data.push(Utils.rand(-100, 100));
         }
 
diff --git a/docs/samples/line/line.md b/docs/samples/line/line.md
index f88a3c5e5..f157d394e 100644
--- a/docs/samples/line/line.md
+++ b/docs/samples/line/line.md
@@ -34,7 +34,7 @@ const actions = [
       if (data.datasets.length > 0) {
         data.labels = Utils.months({count: data.labels.length + 1});
 
-        for (var index = 0; index < data.datasets.length; ++index) {
+        for (let index = 0; index < data.datasets.length; ++index) {
           data.datasets[index].data.push(Utils.rand(-100, 100));
         }
 
diff --git a/docs/samples/other-charts/bubble.md b/docs/samples/other-charts/bubble.md
index 3d330fb19..0276e65d8 100644
--- a/docs/samples/other-charts/bubble.md
+++ b/docs/samples/other-charts/bubble.md
@@ -33,7 +33,7 @@ const actions = [
       const data = chart.data;
       if (data.datasets.length > 0) {
 
-        for (var index = 0; index < data.datasets.length; ++index) {
+        for (let index = 0; index < data.datasets.length; ++index) {
           data.datasets[index].data.push(Utils.bubbles({count: 1, rmin: 5, rmax: 15, min: 0, max: 100})[0]);
         }
 
diff --git a/docs/samples/other-charts/combo-bar-line.md b/docs/samples/other-charts/combo-bar-line.md
index 16013d9ad..30fbfadbf 100644
--- a/docs/samples/other-charts/combo-bar-line.md
+++ b/docs/samples/other-charts/combo-bar-line.md
@@ -35,7 +35,7 @@ const actions = [
       if (data.datasets.length > 0) {
         data.labels = Utils.months({count: data.labels.length + 1});
 
-        for (var index = 0; index < data.datasets.length; ++index) {
+        for (let index = 0; index < data.datasets.length; ++index) {
           data.datasets[index].data.push(Utils.rand(-100, 100));
         }
 
diff --git a/docs/samples/other-charts/doughnut.md b/docs/samples/other-charts/doughnut.md
index 21e98c68e..76829eb48 100644
--- a/docs/samples/other-charts/doughnut.md
+++ b/docs/samples/other-charts/doughnut.md
@@ -40,7 +40,7 @@ const actions = [
       if (data.datasets.length > 0) {
         data.labels.push('data #' + (data.labels.length + 1));
 
-        for (var index = 0; index < data.datasets.length; ++index) {
+        for (let index = 0; index < data.datasets.length; ++index) {
           data.datasets[index].data.push(Utils.rand(0, 100));
         }
 
diff --git a/docs/samples/other-charts/multi-series-pie.md b/docs/samples/other-charts/multi-series-pie.md
index 4a7d11e47..e3f83bcd0 100644
--- a/docs/samples/other-charts/multi-series-pie.md
+++ b/docs/samples/other-charts/multi-series-pie.md
@@ -44,7 +44,7 @@ const config = {
             const labelsOriginal = original.call(this, chart);
 
             // Build an array of colors used in the datasets of the chart
-            var datasetColors = chart.data.datasets.map(function(e) {
+            let datasetColors = chart.data.datasets.map(function(e) {
               return e.backgroundColor;
             });
             datasetColors = datasetColors.flat();
diff --git a/docs/samples/other-charts/pie.md b/docs/samples/other-charts/pie.md
index 357862507..3715ad337 100644
--- a/docs/samples/other-charts/pie.md
+++ b/docs/samples/other-charts/pie.md
@@ -40,7 +40,7 @@ const actions = [
       if (data.datasets.length > 0) {
         data.labels.push('data #' + (data.labels.length + 1));
 
-        for (var index = 0; index < data.datasets.length; ++index) {
+        for (let index = 0; index < data.datasets.length; ++index) {
           data.datasets[index].data.push(Utils.rand(0, 100));
         }
 
diff --git a/docs/samples/other-charts/polar-area.md b/docs/samples/other-charts/polar-area.md
index 826a39991..ee7c75841 100644
--- a/docs/samples/other-charts/polar-area.md
+++ b/docs/samples/other-charts/polar-area.md
@@ -19,7 +19,7 @@ const actions = [
       if (data.datasets.length > 0) {
         data.labels.push('data #' + (data.labels.length + 1));
 
-        for (var index = 0; index < data.datasets.length; ++index) {
+        for (let index = 0; index < data.datasets.length; ++index) {
           data.datasets[index].data.push(Utils.rand(0, 100));
         }
 
diff --git a/docs/samples/other-charts/radar.md b/docs/samples/other-charts/radar.md
index e6fc7a890..a6bc12b57 100644
--- a/docs/samples/other-charts/radar.md
+++ b/docs/samples/other-charts/radar.md
@@ -34,7 +34,7 @@ const actions = [
       if (data.datasets.length > 0) {
         data.labels = Utils.months({count: data.labels.length + 1});
 
-        for (var index = 0; index < data.datasets.length; ++index) {
+        for (let index = 0; index < data.datasets.length; ++index) {
           data.datasets[index].data.push(Utils.rand(0, 100));
         }
 
diff --git a/docs/samples/other-charts/scatter-multi-axis.md b/docs/samples/other-charts/scatter-multi-axis.md
index 9241d720d..d63120d70 100644
--- a/docs/samples/other-charts/scatter-multi-axis.md
+++ b/docs/samples/other-charts/scatter-multi-axis.md
@@ -33,7 +33,7 @@ const actions = [
       const data = chart.data;
       if (data.datasets.length > 0) {
 
-        for (var index = 0; index < data.datasets.length; ++index) {
+        for (let index = 0; index < data.datasets.length; ++index) {
           data.datasets[index].data.push(Utils.bubbles({count: 1, rmin: 1, rmax: 1, min: -100, max: 100})[0]);
         }
 
diff --git a/docs/samples/other-charts/scatter.md b/docs/samples/other-charts/scatter.md
index d6690575e..c5696b93b 100644
--- a/docs/samples/other-charts/scatter.md
+++ b/docs/samples/other-charts/scatter.md
@@ -33,7 +33,7 @@ const actions = [
       const data = chart.data;
       if (data.datasets.length > 0) {
 
-        for (var index = 0; index < data.datasets.length; ++index) {
+        for (let index = 0; index < data.datasets.length; ++index) {
           data.datasets[index].data.push(Utils.bubbles({count: 1, rmin: 1, rmax: 1, min: 0, max: 100})[0]);
         }
 
diff --git a/docs/samples/other-charts/stacked-bar-line.md b/docs/samples/other-charts/stacked-bar-line.md
index 1afbbd4aa..8a29c7b44 100644
--- a/docs/samples/other-charts/stacked-bar-line.md
+++ b/docs/samples/other-charts/stacked-bar-line.md
@@ -36,7 +36,7 @@ const actions = [
       if (data.datasets.length > 0) {
         data.labels = Utils.months({count: data.labels.length + 1});
 
-        for (var index = 0; index < data.datasets.length; ++index) {
+        for (let index = 0; index < data.datasets.length; ++index) {
           data.datasets[index].data.push(Utils.rand(0, 100));
         }
 
diff --git a/docs/samples/scales/linear-step-size.md b/docs/samples/scales/linear-step-size.md
index 049b0ae5d..3173ee80b 100644
--- a/docs/samples/scales/linear-step-size.md
+++ b/docs/samples/scales/linear-step-size.md
@@ -34,7 +34,7 @@ const actions = [
       if (data.datasets.length > 0) {
         data.labels = Utils.months({count: data.labels.length + 1});
 
-        for (var index = 0; index < data.datasets.length; ++index) {
+        for (let index = 0; index < data.datasets.length; ++index) {
           data.datasets[index].data.push(Utils.rand(0, 100));
         }
 
diff --git a/docs/samples/scriptable/bar.md b/docs/samples/scriptable/bar.md
index 8842c6a9c..27cd71228 100644
--- a/docs/samples/scriptable/bar.md
+++ b/docs/samples/scriptable/bar.md
@@ -2,7 +2,7 @@
 
 ```js chart-editor
 // <block:setup:2>
-var DATA_COUNT = 16;
+const DATA_COUNT = 16;
 Utils.srand(110);
 
 const actions = [
@@ -38,8 +38,8 @@ const data = {
 // <block:options:0>
 function colorize(opaque) {
   return (ctx) => {
-    var v = ctx.parsed.y;
-    var c = v < -50 ? '#D60000'
+    const v = ctx.parsed.y;
+    const c = v < -50 ? '#D60000'
       : v < 0 ? '#F46300'
       : v < 50 ? '#0358B6'
       : '#44DE28';
diff --git a/docs/samples/scriptable/bubble.md b/docs/samples/scriptable/bubble.md
index d466172cd..7ed304ac0 100644
--- a/docs/samples/scriptable/bubble.md
+++ b/docs/samples/scriptable/bubble.md
@@ -22,8 +22,8 @@ const actions = [
 
 // <block:data:1>
 function generateData() {
-  var data = [];
-  var i;
+  const data = [];
+  let i;
 
   for (i = 0; i < DATA_COUNT; ++i) {
     data.push({
@@ -51,13 +51,13 @@ function channelValue(x, y, values) {
 }
 
 function colorize(opaque, context) {
-  var value = context.raw;
-  var x = value.x / 100;
-  var y = value.y / 100;
-  var r = channelValue(x, y, [250, 150, 50, 0]);
-  var g = channelValue(x, y, [0, 50, 150, 250]);
-  var b = channelValue(x, y, [0, 150, 150, 250]);
-  var a = opaque ? 1 : 0.5 * value.v / 1000;
+  const value = context.raw;
+  const x = value.x / 100;
+  const y = value.y / 100;
+  const r = channelValue(x, y, [250, 150, 50, 0]);
+  const g = channelValue(x, y, [0, 50, 150, 250]);
+  const b = channelValue(x, y, [0, 150, 150, 250]);
+  const a = opaque ? 1 : 0.5 * value.v / 1000;
 
   return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
 }
@@ -92,8 +92,8 @@ const config = {
         },
 
         radius: function(context) {
-          var size = context.chart.width;
-          var base = Math.abs(context.raw.v) / 1000;
+          const size = context.chart.width;
+          const base = Math.abs(context.raw.v) / 1000;
           return (size / 24) * base;
         }
       }
diff --git a/docs/samples/scriptable/line.md b/docs/samples/scriptable/line.md
index beeff9ed4..9b634a8b8 100644
--- a/docs/samples/scriptable/line.md
+++ b/docs/samples/scriptable/line.md
@@ -41,7 +41,7 @@ function getLineColor(ctx) {
 }
 
 function alternatePointStyles(ctx) {
-  var index = ctx.dataIndex;
+  const index = ctx.dataIndex;
   return index % 2 === 0 ? 'circle' : 'rect';
 }
 
@@ -50,7 +50,7 @@ function makeHalfAsOpaque(ctx) {
 }
 
 function adjustRadiusBasedOnData(ctx) {
-  var v = ctx.parsed.y;
+  const v = ctx.parsed.y;
   return v < 10 ? 5
     : v < 25 ? 7
     : v < 50 ? 9
diff --git a/docs/samples/scriptable/pie.md b/docs/samples/scriptable/pie.md
index 423e213f8..c69101dcf 100644
--- a/docs/samples/scriptable/pie.md
+++ b/docs/samples/scriptable/pie.md
@@ -47,13 +47,13 @@ const data = {
 
 // <block:options:0>
 function colorize(opaque, hover, ctx) {
-  var v = ctx.parsed;
-  var c = v < -50 ? '#D60000'
+  const v = ctx.parsed;
+  const c = v < -50 ? '#D60000'
     : v < 0 ? '#F46300'
     : v < 50 ? '#0358B6'
     : '#44DE28';
 
-  var opacity = hover ? 1 - Math.abs(v / 150) - 0.2 : 1 - Math.abs(v / 150);
+  const opacity = hover ? 1 - Math.abs(v / 150) - 0.2 : 1 - Math.abs(v / 150);
 
   return opaque ? c : Utils.transparentize(c, opacity);
 }
diff --git a/docs/samples/scriptable/polar.md b/docs/samples/scriptable/polar.md
index 4fe6e04b9..15f656935 100644
--- a/docs/samples/scriptable/polar.md
+++ b/docs/samples/scriptable/polar.md
@@ -37,13 +37,13 @@ const data = {
 
 // <block:options:0>
 function colorize(opaque, hover, ctx) {
-  var v = ctx.raw;
-  var c = v < 35 ? '#D60000'
+  const v = ctx.raw;
+  const c = v < 35 ? '#D60000'
     : v < 55 ? '#F46300'
     : v < 75 ? '#0358B6'
     : '#44DE28';
 
-  var opacity = hover ? 1 - Math.abs(v / 150) - 0.2 : 1 - Math.abs(v / 150);
+  const opacity = hover ? 1 - Math.abs(v / 150) - 0.2 : 1 - Math.abs(v / 150);
 
   return opaque ? c : Utils.transparentize(c, opacity);
 }
diff --git a/docs/samples/scriptable/radar.md b/docs/samples/scriptable/radar.md
index fc3b686b8..53634f330 100644
--- a/docs/samples/scriptable/radar.md
+++ b/docs/samples/scriptable/radar.md
@@ -41,7 +41,7 @@ function getLineColor(ctx) {
 }
 
 function alternatePointStyles(ctx) {
-  var index = ctx.dataIndex;
+  const index = ctx.dataIndex;
   return index % 2 === 0 ? 'circle' : 'rect';
 }
 
@@ -54,7 +54,7 @@ function make20PercentOpaque(ctx) {
 }
 
 function adjustRadiusBasedOnData(ctx) {
-  var v = ctx.parsed.y;
+  const v = ctx.parsed.y;
   return v < 10 ? 5
     : v < 25 ? 7
     : v < 50 ? 9