Add spaces to color values and fix indentation and spacing

chartjs · simonbrunel · Jan 29, 2019 · Jan 28, 2019 · Jan 28, 2019 · Jan 28, 2019
commit 186d101352b10330aa89c8559a7bd14d6fe265c2
diff --git a/docs/axes/cartesian/README.md b/docs/axes/cartesian/README.md
@@ -84,7 +84,7 @@ var myChart = new Chart(ctx, {
             label: 'Right dataset',
 
             // This binds the dataset to the right y axis
-            yAxisID: 'right-y-axis',
+            yAxisID: 'right-y-axis'
         }],
         labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
     },

diff --git a/docs/axes/cartesian/time.md b/docs/axes/cartesian/time.md
@@ -115,8 +115,8 @@ var chart = new Chart(ctx, {
 
 The `distribution` property controls the data distribution along the scale:
 
-  * `'linear'`: data are spread according to their time (distances can vary)
-  * `'series'`: data are spread at the same distance from each other
+* `'linear'`: data are spread according to their time (distances can vary)
+* `'series'`: data are spread at the same distance from each other
 
 ```javascript
 var chart = new Chart(ctx, {

diff --git a/docs/axes/radial/linear.md b/docs/axes/radial/linear.md
@@ -20,7 +20,7 @@ The following options are provided by the linear scale. They are all located in
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
-| `backdropColor` | `Color` | `'rgba(255,255,255,0.75)'` | Color of label backdrops.
+| `backdropColor` | `Color` | `'rgba(255, 255, 255, 0.75)'` | Color of label backdrops.
 | `backdropPaddingX` | `number` | `2` | Horizontal padding of label backdrop.
 | `backdropPaddingY` | `number` | `2` | Vertical padding of label backdrop.
 | `beginAtZero` | `boolean` | `false` | if true, scale will include 0 if it is not already included.
@@ -93,7 +93,7 @@ The following options are used to configure angled lines that radiate from the c
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `display` | `boolean` | `true` | if true, angle lines are shown.
-| `color` | `Color` | `'rgba(0,0,0,0.1)'` | Color of angled lines.
+| `color` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Color of angled lines.
 | `lineWidth` | `number` | `1` | Width of angled lines.
 | `borderDash` | `number[]` | `[]` | Length and spacing of dashes on angled lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
 | `borderDashOffset` | `number` | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).

diff --git a/docs/axes/styling.md b/docs/axes/styling.md
@@ -10,7 +10,7 @@ The grid line configuration is nested under the scale configuration in the `grid
 | ---- | ---- | ------- | -----------
 | `display` | `boolean` | `true` | If false, do not display grid lines for this axis.
 | `circular` | `boolean` | `false` | If true, gridlines are circular (on radar chart only).
-| `color` | <code>Color&#124;Color[]</code> | `'rgba(0,0,0,0.1)'` | The color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line and so on.
+| `color` | <code>Color&#124;Color[]</code> | `'rgba(0, 0, 0, 0.1)'` | The color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line and so on.
 | `borderDash` | `number[]` | `[]` | Length and spacing of dashes on grid lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
 | `borderDashOffset` | `number` | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
 | `lineWidth` | <code>number&#124;number[]</code> | `1` | Stroke width of grid lines.
@@ -19,7 +19,7 @@ The grid line configuration is nested under the scale configuration in the `grid
 | `drawTicks` | `boolean` | `true` | If true, draw lines beside the ticks in the axis area beside the chart.
 | `tickMarkLength` | `number` | `10` | Length in pixels that the grid lines will draw into the axis area.
 | `zeroLineWidth` | `number` | `1` | Stroke width of the grid line for the first index (index 0).
-| `zeroLineColor` | `Color` | `'rgba(0,0,0,0.25)'` | Stroke color of the grid line for the first index (index 0).
+| `zeroLineColor` | `Color` | `'rgba(0, 0, 0, 0.25)'` | Stroke color of the grid line for the first index (index 0).
 | `zeroLineBorderDash` | `number[]` | `[]` | Length and spacing of dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
 | `zeroLineBorderDashOffset` | `number` | `0.0` | Offset for line dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
 | `offsetGridLines` | `boolean` | `false` | If true, grid lines will be shifted to be between labels. This is set to `true` for a category scale in a bar chart by default.

diff --git a/docs/charts/area.md b/docs/charts/area.md
@@ -38,7 +38,7 @@ new Chart(ctx, {
 | [`plugins.filler.propagate`](#propagate) | `boolean` | `true` | Fill propagation when target is hidden.
 
 ### propagate
-A boolean value (default: `true`)
+`propagate` takes a `boolean` value (default: `true`).
 
 If `true`, the fill area will be recursively extended to the visible target defined by the `fill` value of hidden dataset targets:
 

diff --git a/docs/charts/bar.md b/docs/charts/bar.md
@@ -66,10 +66,10 @@ The bar chart allows a number of properties to be specified for each dataset.
 These are used to set display properties for a specific dataset. For example,
 the color of the bars is generally set this way.
 
-| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) |  Default
+| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
 | ---- | ---- | :----: | :----: | ----
-| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'`
-| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'`
+| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
+| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
 | [`borderSkipped`](#borderskipped) | `string` | Yes | Yes | `'bottom'`
 | [`borderWidth`](#styling) | `number` | Yes | Yes | `0`
 | [`data`](#data-structure) | `object[]` | - | - | **required**

diff --git a/docs/charts/bubble.md b/docs/charts/bubble.md
@@ -38,10 +38,10 @@ var myBubbleChart = new Chart(ctx, {
 
 The bubble chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of the bubbles is generally set this way.
 
-| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) |  Default
+| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
 | ---- | ---- | :----: | :----: | ----
-| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'`
-| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'`
+| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
+| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
 | [`borderWidth`](#styling) | `number` | Yes | Yes | `3`
 | [`data`](#data-structure) | `object[]` | - | - | **required**
 | [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`

diff --git a/docs/charts/doughnut.md b/docs/charts/doughnut.md
@@ -55,7 +55,7 @@ The doughnut/pie chart allows a number of properties to be specified for each da
 
 | Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
 | ---- | ---- | :----: | :----: | ----
-| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'`
+| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
 | [`borderAlign`](#border-alignment) | `string` | Yes | Yes | `'center'`
 | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'`
 | [`borderWidth`](#styling) | `number` | Yes | Yes | `2`

diff --git a/docs/charts/line.md b/docs/charts/line.md
@@ -41,11 +41,11 @@ var myLineChart = new Chart(ctx, {
 
 The line chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a line is generally set this way.
 
-| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) |  Default
+| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
 | ---- | ---- | :----: | :----: | ----
-| [`backgroundColor`](#line-styling) | [`Color`](../general/colors.md) | - | - | `'rgba(0,0,0,0.1)'`
+| [`backgroundColor`](#line-styling) | [`Color`](../general/colors.md) | - | - | `'rgba(0, 0, 0, 0.1)'`
 | [`borderCapStyle`](#line-styling) | `string` | - | - | `'butt'`
-| [`borderColor`](#line-styling) | [`Color`](../general/colors.md) | - | - | `'rgba(0,0,0,0.1)'`
+| [`borderColor`](#line-styling) | [`Color`](../general/colors.md) | - | - | `'rgba(0, 0, 0, 0.1)'`
 | [`borderDash`](#line-styling) | `number[]` | - | - | `[]`
 | [`borderDashOffset`](#line-styling) | `number` | - | - | `0.0`
 | [`borderJoinStyle`](#line-styling) | `string` | - | - | `'miter'`
@@ -54,8 +54,8 @@ The line chart allows a number of properties to be specified for each dataset. T
 | [`fill`](#line-styling) | <code>boolean&#124;string</code> | - | - | `true`
 | [`label`](#general) | `string` | - | - | `''`
 | [`lineTension`](#line-styling) | `number` | - | - | `0.4`
-| [`pointBackgroundColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0,0,0,0.1)'`
-| [`pointBorderColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0,0,0,0.1)'`
+| [`pointBackgroundColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
+| [`pointBorderColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
 | [`pointBorderWidth`](#point-styling) | `number` | Yes | Yes | `1`
 | [`pointHitRadius`](#point-styling) | `number` | Yes | Yes | `1`
 | [`pointHoverBackgroundColor`](#interactions) | `Color` | Yes | Yes | `undefined`
@@ -139,7 +139,7 @@ If left untouched (`undefined`), the global `options.elements.line.cubicInterpol
 
 ### Stepped Line
 The following values are supported for `steppedLine`.
-* `false`:  No Step Interpolation (default)
+* `false`: No Step Interpolation (default)
 * `true`: Step-before Interpolation (eq. `'before'`)
 * `'before'`: Step-before Interpolation
 * `'after'`: Step-after Interpolation

diff --git a/docs/charts/mixed.md b/docs/charts/mixed.md
@@ -38,35 +38,35 @@ At this point we have a chart rendering how we'd like. It's important to note th
 
 {% chartjs %}
 {
-  "type": "bar",
-  "data": {
-    "labels": [
-      "January",
-      "February",
-      "March",
-      "April"
-    ],
-    "datasets": [{
-      "label": "Bar Dataset",
-      "data": [10, 20, 30, 40],
-      "borderColor": "rgb(255, 99, 132)",
-      "backgroundColor": "rgba(255, 99, 132, 0.2)"
-    }, {
-      "label": "Line Dataset",
-      "data": [50, 50, 50, 50],
-      "type": "line",
-      "fill": false,
-      "borderColor": "rgb(54, 162, 235)"
-    }]
-  },
-  "options": {
-    "scales": {
-      "yAxes": [{
-        "ticks": {
-          "beginAtZero": true
+    "type": "bar",
+    "data": {
+        "labels": [
+            "January",
+            "February",
+            "March",
+            "April"
+        ],
+        "datasets": [{
+            "label": "Bar Dataset",
+            "data": [10, 20, 30, 40],
+            "borderColor": "rgb(255, 99, 132)",
+            "backgroundColor": "rgba(255, 99, 132, 0.2)"
+        }, {
+            "label": "Line Dataset",
+            "data": [50, 50, 50, 50],
+            "type": "line",
+            "fill": false,
+            "borderColor": "rgb(54, 162, 235)"
+        }]
+    },
+    "options": {
+        "scales": {
+            "yAxes": [{
+                "ticks": {
+                    "beginAtZero": true
+                }
+            }]
         }
-      }]
     }
-  }
 }
 {% endchartjs %}
diff --git a/docs/charts/polar.md b/docs/charts/polar.md
@@ -46,7 +46,7 @@ The following options can be included in a polar area chart dataset to configure
 
 | Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
 | ---- | ---- | :----: | :----: | ----
-| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'`
+| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
 | [`borderAlign`](#border-alignment) | `string` | Yes | Yes | `'center'`
 | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'`
 | [`borderWidth`](#styling) | `number` | Yes | Yes | `2`

diff --git a/docs/configuration/README.md b/docs/configuration/README.md
@@ -14,7 +14,7 @@ The following example would set the hover mode to 'nearest' for all charts where
 Chart.defaults.global.hover.mode = 'nearest';
 
 // Hover mode is set to nearest because it was not overridden here
-var chartHoverModeNearest  = new Chart(ctx, {
+var chartHoverModeNearest = new Chart(ctx, {
     type: 'line',
     data: data
 });

diff --git a/docs/configuration/elements.md b/docs/configuration/elements.md
@@ -20,9 +20,9 @@ Global point options: `Chart.defaults.global.elements.point`.
 | `radius` | `number` | `3` | Point radius.
 | [`pointStyle`](#point-styles) | <code>string&#124;Image</code> | `'circle'` | Point style.
 | `rotation` | `number` | `0` | Point rotation (in degrees).
-| `backgroundColor` | `Color` | `'rgba(0,0,0,0.1)'` | Point fill color.
+| `backgroundColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Point fill color.
 | `borderWidth` | `number` | `1` | Point stroke width.
-| `borderColor` | `Color` | `'rgba(0,0,0,0.1)'` | Point stroke color.
+| `borderColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Point stroke color.
 | `hitRadius` | `number` | `1` | Extra radius added to point radius for hit detection.
 | `hoverRadius` | `number` | `4` | Point radius when hovered.
 | `hoverBorderWidth` | `number` | `1` | Stroke width when hovered.
@@ -51,9 +51,9 @@ Global line options: `Chart.defaults.global.elements.line`.
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `tension` | `number` | `0.4` | Bézier curve tension (`0` for no Bézier curves).
-| `backgroundColor` | `Color` | `'rgba(0,0,0,0.1)'` | Line fill color.
+| `backgroundColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Line fill color.
 | `borderWidth` | `number` | `3` | Line stroke width.
-| `borderColor` | `Color` | `'rgba(0,0,0,0.1)'` | Line stroke color.
+| `borderColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Line stroke color.
 | `borderCapStyle` | `string` | `'butt'` | Line cap style. See [MDN](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap).
 | `borderDash` | `number[]` | `[]` | Line dash. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
 | `borderDashOffset` | `number` | `0.0` | Line dash offset. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
@@ -69,9 +69,9 @@ Global rectangle options: `Chart.defaults.global.elements.rectangle`.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
-| `backgroundColor` | `Color` | `'rgba(0,0,0,0.1)'` | Bar fill color.
+| `backgroundColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Bar fill color.
 | `borderWidth` | `number` | `0` | Bar stroke width.
-| `borderColor` | `Color` | `'rgba(0,0,0,0.1)'` | Bar stroke color.
+| `borderColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Bar stroke color.
 | `borderSkipped` | `string` | `'bottom'` | Skipped (excluded) border: `'bottom'`, `'left'`, `'top'` or `'right'`.
 
 ## Arc Configuration
@@ -81,7 +81,7 @@ Global arc options: `Chart.defaults.global.elements.arc`.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
-| `backgroundColor` | `Color` | `'rgba(0,0,0,0.1)'` | Arc fill color.
+| `backgroundColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Arc fill color.
 | `borderAlign` | `string` | `'center'` | Arc stroke alignment.
 | `borderColor` | `Color` | `'#fff'` | Arc stroke color.
 | `borderWidth`| `number` | `2` | Arc stroke width.
diff --git a/docs/configuration/title.md b/docs/configuration/title.md
@@ -10,7 +10,7 @@ The title configuration is passed into the `options.title` namespace. The global
 | `display` | `boolean` | `false` | Is the title shown?
 | `position` | `string` | `'top'` | Position of title. [more...](#position)
 | `fontSize` | `number` | `12` | Font size.
-| `fontFamily` | `string` |  `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the title text.
+| `fontFamily` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the title text.
 | `fontColor` | `Color` | `'#666'` | Font color.
 | `fontStyle` | `string` | `'bold'` | Font style.
 | `padding` | `number` | `10` | Number of pixels to add above and below the title text.

diff --git a/docs/configuration/tooltip.md b/docs/configuration/tooltip.md
@@ -14,7 +14,7 @@ The tooltip configuration is passed into the `options.tooltips` namespace. The g
 | `callbacks` | `object` | | See the [callbacks section](#tooltip-callbacks).
 | `itemSort` | `function` | | Sort tooltip items. [more...](#sort-callback)
 | `filter` | `function` | | Filter tooltip items. [more...](#filter-callback)
-| `backgroundColor` | `Color` | `'rgba(0,0,0,0.8)'` | Background color of the tooltip.
+| `backgroundColor` | `Color` | `'rgba(0, 0, 0, 0.8)'` | Background color of the tooltip.
 | `titleFontFamily` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Title font.
 | `titleFontSize` | `number` | `12` | Title font size.
 | `titleFontStyle` | `string` | `'bold'` | Title font style.
@@ -39,7 +39,7 @@ The tooltip configuration is passed into the `options.tooltips` namespace. The g
 | `cornerRadius` | `number` | `6` | Radius of tooltip corner curves.
 | `multiKeyBackground` | `Color` | `'#fff'` | Color to draw behind the colored boxes when multiple items are in the tooltip.
 | `displayColors` | `boolean` | `true` | If true, color boxes are shown in the tooltip.
-| `borderColor` | `Color` | `'rgba(0,0,0,0)'` | Color of the border.
+| `borderColor` | `Color` | `'rgba(0, 0, 0, 0)'` | Color of the border.
 | `borderWidth` | `number` | `0` | Size of the border.
 
 ### Position Modes

diff --git a/docs/developers/axes.md b/docs/developers/axes.md
@@ -39,7 +39,7 @@ Scale instances are given the following properties during the fitting process.
 ```javascript
 {
     left: number, // left edge of the scale bounding box
-    right: number, // right edge of the bounding box'
+    right: number, // right edge of the bounding box
     top: number,
     bottom: number,
     width: number, // the same as right - left

diff --git a/docs/general/colors.md b/docs/general/colors.md
@@ -1,6 +1,6 @@
 # Colors
 
-When supplying colors to Chart options, you can use a number of formats. You can specify the color as a string in hexadecimal, RGB, or HSL notations. If a color is needed, but not specified, Chart.js will use the global default color. This color is stored at `Chart.defaults.global.defaultColor`. It is initially set to `'rgba(0,0,0,0.1)'`.
+When supplying colors to Chart options, you can use a number of formats. You can specify the color as a string in hexadecimal, RGB, or HSL notations. If a color is needed, but not specified, Chart.js will use the global default color. This color is stored at `Chart.defaults.global.defaultColor`. It is initially set to `'rgba(0, 0, 0, 0.1)'`.
 
 You can also pass a [CanvasGradient](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient) object. You will need to create this before passing to the chart, but using it you can achieve some interesting effects.
 

diff --git a/docs/getting-started/README.md b/docs/getting-started/README.md
@@ -40,4 +40,4 @@ var chart = new Chart(ctx, {
 
 It's that easy to get started using Chart.js! From here you can explore the many options that can help you customise your charts with scales, tooltips, labels, colors, custom actions, and much more.
 
-There are many examples of Chart.js that are available in the `/samples` folder of `Chart.js.zip` that is attached to every [release](https://github.com/chartjs/Chart.js/releases).
+All our examples are [available online](https://www.chartjs.org/samples/latest/) but you can also download the `Chart.js.zip` archive attached to every [release](https://github.com/chartjs/Chart.js/releases) to experiment with our samples locally from the `/samples` folder.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -40,4 +40,4 @@ var chart = new Chart(ctx, {

		It's that easy to get started using Chart.js! From here you can explore the many options that can help you customise your charts with scales, tooltips, labels, colors, custom actions, and much more.

		There are many examples of Chart.js that are available in the `/samples` folder of `Chart.js.zip` that is attached to every [release](https://github.com/chartjs/Chart.js/releases).
		All our examples are [available online](https://www.chartjs.org/samples/latest/) but you can also download the `Chart.js.zip` archive attached to every [release](https://github.com/chartjs/Chart.js/releases) to experiment with our samples locally from the `/samples` folder.