Add more fixes in docs

docs/README.md

@@ -31,7 +31,7 @@ var myChart = new Chart(ctx, {
                 'rgba(255, 159, 64, 0.2)'
             ],
             borderColor: [
-                'rgba(255,99,132,1)',
+                'rgba(255, 99, 132, 1)',
                 'rgba(54, 162, 235, 1)',
                 'rgba(255, 206, 86, 1)',
                 'rgba(75, 192, 192, 1)',

docs/axes/cartesian/category.md

@@ -2,7 +2,7 @@
 
 If global configuration is used, labels are drawn from one of the label arrays included in the chart data. If only `data.labels` is defined, this will be used. If `data.xLabels` is defined and the axis is horizontal, this will be used. Similarly, if `data.yLabels` is defined and the axis is vertical, this property will be used. Using both `xLabels` and `yLabels` together can create a chart that uses strings for both the X and Y axes.
 
-Specifying any of the settings above defines the x axis as `type: category` if not defined otherwise. For more fine-grained control of category labels it is also possible to add `labels` as part of the category axis definition. Doing so does not apply the global defaults.
+Specifying any of the settings above defines the x axis as `type: 'category'` if not defined otherwise. For more fine-grained control of category labels it is also possible to add `labels` as part of the category axis definition. Doing so does not apply the global defaults.
 
 ## Category Axis Definition
 

docs/axes/cartesian/time.md

@@ -8,14 +8,15 @@ The time scale is used to display times and dates. When building its ticks, it w
 
 The x-axis data points may additionally be specified via the `t` or `x` attribute when using the time scale.
 
-    data: [{
-        x: new Date(),
-        y: 1
-    }, {
-        t: new Date(),
-        y: 10
-    }]
-
+```javascript
+data: [{
+    x: new Date(),
+    y: 1
+}, {
+    t: new Date(),
+    y: 10
+}]
+```
 
 ### Date Formats
 

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).
@@ -107,6 +107,6 @@ The following options are used to configure the point labels that are shown on t
 | `callback` | `Function` | | Callback function to transform data labels to point labels. The default implementation simply returns the current string.
 | `fontColor` | `Color/Color[]` | `'#666'` | Font color for point labels.
 | `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family to use when rendering labels.
-| `fontSize` | `Number` | 10 | font size in pixels.
+| `fontSize` | `Number` | `10` | font size in pixels.
 | `fontStyle` | `String` | `'normal'` | Font style to use when rendering point labels.
 | `lineHeight` | `Number/String` | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).

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` | `Color/Color[]` | `'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` | `Color/Color[]` | `'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` | `Number/Number[]` | `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.

docs/charts/bubble.md

@@ -19,7 +19,7 @@ A bubble chart is used to display three dimensions of data at the same time. The
             }],
             "backgroundColor": "rgb(255, 99, 132)"
         }]
-    },
+    }
 }
 {% endchartjs %}
 

docs/charts/doughnut.md

@@ -14,18 +14,18 @@ They are also registered under two aliases in the `Chart` core. Other than their
         "labels": [
             "Red",
             "Blue",
-            "Yellow",
+            "Yellow"
         ],
         "datasets": [{
             "label": "My First Dataset",
             "data": [300, 50, 100],
             "backgroundColor": [
                 "rgb(255, 99, 132)",
                 "rgb(54, 162, 235)",
-                "rgb(255, 205, 86)",
+                "rgb(255, 205, 86)"
             ]
         }]
-    },
+    }
 }
 {% endchartjs %}
 

docs/configuration/layout.md

@@ -4,10 +4,10 @@ The layout configuration is passed into the `options.layout` namespace. The glob
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
-| `padding` | `Number` or `Object` | `0` | The padding to add inside the chart. [more...](#padding)
+| `padding` | `Number/Object` | `0` | The padding to add inside the chart. [more...](#padding)
 
 ## Padding
-If this value is a number, it is applied to all sides of the chart (left, top, right, bottom). If this value is an object, the `left` property defines the left padding. Similarly the `right`, `top`, and `bottom` properties can also be specified.
+If this value is a number, it is applied to all sides of the chart (left, top, right, bottom). If this value is an object, the `left` property defines the left padding. Similarly the `right`, `top` and `bottom` properties can also be specified.
 
 Lets say you wanted to add 50px of padding to the left side of the chart canvas, you would do:
 

docs/configuration/legend.md

@@ -126,8 +126,10 @@ var newLegendClickHandler = function (e, legendItem) {
         defaultLegendClickHandler(e, legendItem);
     } else {
         let ci = this.chart;
-        [ci.getDatasetMeta(0),
-         ci.getDatasetMeta(1)].forEach(function(meta) {
+        [
+            ci.getDatasetMeta(0),
+            ci.getDatasetMeta(1)
+        ].forEach(function(meta) {
             meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
         });
         ci.update();

docs/configuration/tooltip.md

@@ -5,7 +5,7 @@
 The tooltip configuration is passed into the `options.tooltips` namespace. The global options for the chart tooltips is defined in `Chart.defaults.global.tooltips`.
 
 | Name | Type | Default | Description
-| -----| ---- | --------| -----------
+| ---- | ---- | ------- | -----------
 | `enabled` | `Boolean` | `true` | Are on-canvas tooltips enabled?
 | `custom` | `Function` | `null` | See [custom tooltip](#external-custom-tooltips) section.
 | `mode` | `String` | `'nearest'` | Sets which elements appear in the tooltip. [more...](../general/interactions/modes.md#interaction-modes).

docs/developers/api.md

@@ -1,6 +1,6 @@
 # Chart Prototype Methods
 
-For each chart, there are a set of global prototype methods on the shared `ChartType` which you may find useful. These are available on all charts created with Chart.js, but for the examples, let's use a line chart we've made.
+For each chart, there are a set of global prototype methods on the shared chart type which you may find useful. These are available on all charts created with Chart.js, but for the examples, let's use a line chart we've made.
 
 ```javascript
 // For example:

docs/developers/updates.md

@@ -52,7 +52,7 @@ function updateConfigAsNewObject(chart) {
                 display: true
             }]
         }
-    }
+    };
     chart.update();
 }
 ```
@@ -75,7 +75,7 @@ function updateScales(chart) {
             display: true,
             type: 'logarithmic'
         }]
-    }
+    };
     chart.update();
     // need to update the reference
     xScale = chart.scales['newId'];
@@ -89,7 +89,7 @@ You can also update a specific scale either by specifying its index or id.
 function updateScale(chart) {
     chart.options.scales.yAxes[0] = {
         type: 'logarithmic'
-    }
+    };
     chart.update();
 }
 ```

docs/general/accessibility.md

@@ -2,7 +2,7 @@
 
 Chart.js charts are rendered on user provided `canvas` elements. Thus, it is up to the user to create the `canvas` element in a way that is accessible. The `canvas` element has support in all browsers and will render on screen but the `canvas` content will not be accessible to screen readers.
 
-With `canvas`, the accessibility has to be added with `ARIA` attributes on the `canvas` element or added using internal fallback content placed within the opening and closing canvas tags.
+With `canvas`, the accessibility has to be added with ARIA attributes on the `canvas` element or added using internal fallback content placed within the opening and closing canvas tags.
 
 This [website](http://pauljadam.com/demos/canvas.html) has a more detailed explanation of `canvas` accessibility as well as in depth examples.
 

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.
 

docs/general/device-pixel-ratio.md

@@ -10,4 +10,4 @@ Setting `devicePixelRatio` to a value other than 1 will force the canvas size to
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
-| `devicePixelRatio` | `Number` | window.devicePixelRatio | Override the window's default devicePixelRatio.
+| `devicePixelRatio` | `Number` | `window.devicePixelRatio` | Override the window's default devicePixelRatio.

docs/general/interactions/README.md

@@ -6,5 +6,5 @@ The hover configuration is passed into the `options.hover` namespace. The global
 | ---- | ---- | ------- | -----------
 | `mode` | `String` | `'nearest'` | Sets which elements appear in the tooltip. See [Interaction Modes](./modes.md#interaction-modes) for details.
 | `intersect` | `Boolean` | `true` | if true, the hover mode only applies when the mouse position intersects an item on the chart.
-| `axis` | `String` | `'x'` | Can be set to `'x'`, `'y'`, or `'xy'` to define which directions are used in calculating distances. Defaults to `'x'` for `index` mode and `'xy'` in `dataset` and `nearest` modes.
+| `axis` | `String` | `'x'` | Can be set to `'x'`, `'y'`, or `'xy'` to define which directions are used in calculating distances. Defaults to `'x'` for `'index'` mode and `'xy'` in `dataset` and `'nearest'` modes.
 | `animationDuration` | `Number` | `400` | Duration in milliseconds it takes to animate hover style changes.

docs/general/responsive.md

@@ -21,7 +21,7 @@ Chart.js provides a [few options](#configuration-options) to enable responsivene
 
 ## Important Note
 
-Detecting when the canvas size changes can not be done directly from the `CANVAS` element. Chart.js uses its parent container to update the canvas *render* and *display* sizes. However, this method requires the container to be **relatively positioned** and **dedicated to the chart canvas only**. Responsiveness can then be achieved by setting relative values for the container size ([example](https://codepen.io/chartjs/pen/YVWZbz)):
+Detecting when the canvas size changes can not be done directly from the `canvas` element. Chart.js uses its parent container to update the canvas *render* and *display* sizes. However, this method requires the container to be **relatively positioned** and **dedicated to the chart canvas only**. Responsiveness can then be achieved by setting relative values for the container size ([example](https://codepen.io/chartjs/pen/YVWZbz)):
 
 ```html
 <div class="chart-container" style="position: relative; height:40vh; width:80vw">

docs/getting-started/installation.md

@@ -40,7 +40,7 @@ If you download or clone the repository, you must [build](../developers/contribu
 
 # Selecting the Correct Build
 
-Chart.js provides two different builds for you to choose: `Stand-Alone Build`, `Bundled Build`.
+Chart.js provides two different builds for you to choose: **Stand-Alone Build**, **Bundled Build**.
 
 ## Stand-Alone Build
 Files:

docs/getting-started/integration.md

@@ -33,4 +33,4 @@ require(['path/to/chartjs/dist/Chart.js'], function(Chart) {
 });
 ```
 
-> **Important:** RequireJS [can **not** load CommonJS module as is](http://www.requirejs.org/docs/commonjs.html#intro), so be sure to require one of the built UMD files instead (i.e. `dist/Chart.js`, `dist/Chart.min.js`, etc.).
+> **Important:** RequireJS [can **not** load CommonJS module as is](https://requirejs.org/docs/commonjs.html#intro), so be sure to require one of the built UMD files instead (i.e. `dist/Chart.js`, `dist/Chart.min.js`, etc.).

docs/getting-started/usage.md

@@ -41,7 +41,7 @@ var myChart = new Chart(ctx, {
                 'rgba(255, 159, 64, 0.2)'
             ],
             borderColor: [
-                'rgba(255,99,132,1)',
+                'rgba(255, 99, 132, 1)',
                 'rgba(54, 162, 235, 1)',
                 'rgba(255, 206, 86, 1)',
                 'rgba(75, 192, 192, 1)',