Changed var to const/let in the docs

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: [{

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: {

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: {

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: {

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: {

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: {

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: [{

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: {

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: [{

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: {

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: {

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();
     }
 }

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: {

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: {

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,15 +145,15 @@ 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: {
         plugins: {
             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,32 +309,32 @@ 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>';
                         });
                         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;