From aa093ab45274d902a499056bc96692447b60c4bb Mon Sep 17 00:00:00 2001
From: Prashoon123 <64588766+Prashoon123@users.noreply.github.com>
Date: Fri, 8 Oct 2021 23:18:30 +0530
Subject: [PATCH 1/3] Changed var to const/let in the docs
---
docs/axes/cartesian/index.md | 4 +--
docs/axes/cartesian/time.md | 4 +--
docs/axes/cartesian/timeseries.md | 2 +-
docs/axes/labelling.md | 2 +-
docs/charts/bar.md | 2 +-
docs/charts/line.md | 2 +-
docs/charts/mixed.md | 4 +--
docs/configuration/animations.md | 2 +-
docs/configuration/index.md | 6 ++--
docs/configuration/interactions.md | 20 +++++------
docs/configuration/legend.md | 14 ++++----
docs/configuration/responsive.md | 2 +-
docs/configuration/subtitle.md | 2 +-
docs/configuration/title.md | 4 +--
docs/configuration/tooltip.md | 34 +++++++++----------
docs/developers/api.md | 12 +++----
docs/developers/axes.md | 2 +-
docs/developers/plugins.md | 16 ++++-----
docs/developers/updates.md | 4 +--
docs/general/colors.md | 10 +++---
docs/general/options.md | 6 ++--
docs/getting-started/index.md | 2 +-
docs/getting-started/integration.md | 10 +++---
docs/getting-started/usage.md | 12 +++----
docs/index.md | 4 +--
docs/samples/advanced/linear-gradient.md | 2 +-
docs/samples/advanced/progress-bar.md | 2 +-
docs/samples/advanced/radial-gradient.md | 4 +--
docs/samples/animations/delay.md | 2 +-
docs/samples/animations/drop.md | 2 +-
docs/samples/animations/loop.md | 2 +-
docs/samples/area/line-stacked.md | 2 +-
docs/samples/bar/horizontal.md | 2 +-
docs/samples/bar/vertical.md | 2 +-
docs/samples/line/line.md | 2 +-
docs/samples/other-charts/bubble.md | 2 +-
docs/samples/other-charts/combo-bar-line.md | 2 +-
docs/samples/other-charts/doughnut.md | 2 +-
docs/samples/other-charts/multi-series-pie.md | 2 +-
docs/samples/other-charts/pie.md | 2 +-
docs/samples/other-charts/polar-area.md | 2 +-
docs/samples/other-charts/radar.md | 2 +-
.../other-charts/scatter-multi-axis.md | 2 +-
docs/samples/other-charts/scatter.md | 2 +-
docs/samples/other-charts/stacked-bar-line.md | 2 +-
docs/samples/scales/linear-step-size.md | 2 +-
docs/samples/scriptable/bar.md | 6 ++--
docs/samples/scriptable/bubble.md | 22 ++++++------
docs/samples/scriptable/line.md | 4 +--
docs/samples/scriptable/pie.md | 6 ++--
docs/samples/scriptable/polar.md | 6 ++--
docs/samples/scriptable/radar.md | 4 +--
52 files changed, 137 insertions(+), 137 deletions(-)
diff --git a/docs/axes/cartesian/index.md b/docs/axes/cartesian/index.md
index a824576ffa6..6054f4d84a7 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 3ec4755ab52..5c609d2175d 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 ab7f978a92c..daac4df28bf 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 527e53fd175..4f0496e3b86 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 325ca9c3678..261beec470e 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 fc245fcb035..bfd9927d175 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 84f42f1303c..79bf9b6e01c 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 36ac0e7c11c..21b5994bf16 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 a5193bf31e5..b689fc328ea 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 370244bae41..a2b92449583 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 876ae11e4fb..10fa89cd32a 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 8f2564b1d1d..3254ccb8cb6 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 41fa26d077f..e50f08f022c 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 3bd78c07d2a..f15b25b4b79 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 2c68ed9d773..bac1a0b9407 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 = '';
+ const innerHtml = '';
titleLines.forEach(function(title) {
innerHtml += ' ';
@@ -320,21 +320,21 @@ var myPieChart = new Chart(ctx, {
innerHtml += '' + title + '