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 += '' + title + ''; @@ -320,21 +320,21 @@ var myPieChart = new Chart(ctx, { innerHtml += ''; 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 = ''; + const span = ''; innerHtml += '' + span + body + ''; }); innerHtml += ''; - 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 a17b2a5d6b7..beec9fdaa05 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 6bc4507126c..6512371270a 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 0144839c3b2..64efe2096ba 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 d93fe28adb6..697d25bd3de 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 0a65a46c4b7..c9b101693ca 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 ebc4ce994d4..55f90480c04 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 e609ffecd61..25d944a206f 100644 --- a/docs/getting-started/index.md +++ b/docs/getting-started/index.md @@ -59,7 +59,7 @@ Finally, render the chart using our configuration: ``` ## 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 81b93d6cf84..620245c0e91 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