Merge pull request #5732 from chartjs/master

Version 2.7.3

.github/ISSUE_TEMPLATE.md

@@ -1,7 +1,9 @@
 <!--
 Please consider the following before submitting an issue:
 
-- Issues are reserved for BUG reports and FEATURE requests, DO NOT create issues for questions or support requests.
+- Ask questions and get support on StackOverflow: https://stackoverflow.com/questions/tagged/chart.js
+- DO NOT create issues for questions or support requests.
+- Issues are reserved for BUG reports and FEATURE requests.
 - Most features should start as plugins outside of Chart.js (http://www.chartjs.org/docs/#advanced-usage-creating-plugins).
 - Bug reports MUST be submitted with an interactive example (http://codepen.io/pen?template=JXVYzq).
 - Chart.js 1.x is NOT supported anymore, new issues will be disregarded.

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,3 +1,4 @@
+<!--
 Please consider the following before submitting a pull request:
 
 Guidelines for contributing: https://github.com/chartjs/Chart.js/blob/master/docs/developers/contributing.md
@@ -6,4 +7,5 @@ Example of changes on an interactive website such as the following:
 - http://jsbin.com/
 - http://jsfiddle.net/
 - http://codepen.io/pen/
-- Premade template: http://codepen.io/pen?template=JXVYzq
+- Premade template: http://codepen.io/pen?template=JXVYzq
+-->

.htmllintrc

@@ -1,5 +1,6 @@
 {
 	"indent-style": "tabs",
+	"line-end-style": false,
 	"attr-quote-style": "double",
 	"spec-char-escape": false,
 	"attr-bans": [

README.md

@@ -35,7 +35,7 @@ Files:
 * `dist/Chart.bundle.js`
 * `dist/Chart.bundle.min.js`
 
-The bundled build includes Moment.js in a single file. You should use this version if you require time axes and want to include a single file. You should not use this build if your application already included Moment.js. Otherwise, Moment.js will be included twice which results in increasing page load time and possible version compatability issues.
+The bundled build includes Moment.js in a single file. You should use this version if you require time axes and want to include a single file. You should not use this build if your application already included Moment.js. Otherwise, Moment.js will be included twice which results in increasing page load time and possible version compatibility issues. The Moment.js version in the bundled build is private to Chart.js so if you want to use Moment.js yourself, it's better to use Chart.js (non bundled) and import Moment.js manually.
 
 ## Documentation
 

docs/SUMMARY.md

@@ -6,6 +6,7 @@
   * [Integration](getting-started/integration.md)
   * [Usage](getting-started/usage.md)
 * [General](general/README.md)
+  * [Accessibility](general/accessibility.md)
   * [Responsive](general/responsive.md)
   * [Pixel Ratio](general/device-pixel-ratio.md)
   * [Interactions](general/interactions/README.md)

docs/axes/cartesian/README.md

@@ -15,7 +15,7 @@ All of the included cartesian axes support a number of common options.
 | -----| ---- | --------| -----------
 | `type` | `String` | | Type of scale being employed. Custom scales can be created and registered with a string key. This allows changing the type of an axis for a chart.
 | `position` | `String` | | Position of the axis in the chart. Possible values are: `'top'`, `'left'`, `'bottom'`, `'right'`
-| `offset` | `Boolean` | `false` | If true, extra space is added to the both edges and the axis is scaled to fit into the chart area. This is set to `true` in the bar chart by default.
+| `offset` | `Boolean` | `false` | If true, extra space is added to the both edges and the axis is scaled to fit into the chart area. This is set to `true` for a category scale in a bar chart by default.
 | `id` | `String` | | The ID is used to link datasets and scale axes together. [more...](#axis-id)
 | `gridLines` | `Object` | | Grid line configuration. [more...](../styling.md#grid-line-configuration)
 | `scaleLabel` | `Object` | | Scale title configuration. [more...](../labelling.md#scale-title-configuration)

docs/axes/cartesian/linear.md

@@ -12,6 +12,7 @@ The following options are provided by the linear scale. They are all located in
 | `min` | `Number` | | User defined minimum number for the scale, overrides minimum value from data. [more...](#axis-range-settings)
 | `max` | `Number` | | User defined maximum number for the scale, overrides maximum value from data. [more...](#axis-range-settings)
 | `maxTicksLimit` | `Number` | `11` | Maximum number of ticks and gridlines to show.
+| `precision` | `Number` | | if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places.
 | `stepSize` | `Number` | | User defined fixed step size for the scale. [more...](#step-size)
 | `suggestedMax` | `Number` | | Adjustment used when calculating the maximum data value. [more...](#axis-range-settings)
 | `suggestedMin` | `Number` | | Adjustment used when calculating the minimum data value. [more...](#axis-range-settings)

docs/axes/cartesian/time.md

@@ -6,7 +6,7 @@ The time scale is used to display times and dates. When building its ticks, it w
 
 ### Input Data
 
-The x-axis data points may additionally be specified via the `t` attribute when using the time scale.
+The x-axis data points may additionally be specified via the `t` or `x` attribute when using the time scale.
 
     data: [{
         x: new Date(),
@@ -64,6 +64,7 @@ var chart = new Chart(ctx, {
     options: {
         scales: {
             xAxes: [{
+                type: 'time',
                 time: {
                     unit: 'month'
                 }

docs/axes/radial/linear.md

@@ -27,6 +27,7 @@ The following options are provided by the linear scale. They are all located in
 | `min` | `Number` | | User defined minimum number for the scale, overrides minimum value from data. [more...](#axis-range-settings)
 | `max` | `Number` | | User defined maximum number for the scale, overrides maximum value from data. [more...](#axis-range-settings)
 | `maxTicksLimit` | `Number` | `11` | Maximum number of ticks and gridlines to show.
+| `precision` | `Number` | | if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places.
 | `stepSize` | `Number` | | User defined fixed step size for the scale. [more...](#step-size)
 | `suggestedMax` | `Number` | | Adjustment used when calculating the maximum data value. [more...](#axis-range-settings)
 | `suggestedMin` | `Number` | | Adjustment used when calculating the minimum data value. [more...](#axis-range-settings)
@@ -75,14 +76,12 @@ This example sets up a chart with a y axis that creates ticks at `0, 0.5, 1, 1.5
 
 ```javascript
 let options = {
-    scales: {
-        yAxes: [{
-            ticks: {
-                max: 5,
-                min: 0,
-                stepSize: 0.5
-            }
-        }]
+    scale: {
+        ticks: {
+            max: 5,
+            min: 0,
+            stepSize: 0.5
+        }
     }
 };
 ```

docs/axes/styling.md

@@ -9,6 +9,7 @@ The grid line configuration is nested under the scale configuration in the `grid
 | Name | Type | Default | Description
 | -----| ---- | --------| -----------
 | `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.
 | `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` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
@@ -21,7 +22,7 @@ The grid line configuration is nested under the scale configuration in the `grid
 | `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` | 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` in the bar chart by default.
+| `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.
 
 ## Tick Configuration
 The tick configuration is nested under the scale configuration in the `ticks` key. It defines options for the tick marks that are generated by the axis.

docs/charts/README.md

@@ -4,9 +4,10 @@ Chart.js comes with built-in chart types:
 * [line](./line.md)
 * [bar](./bar.md)
 * [radar](./radar.md)
-* [polar area](./polar.md)
 * [doughnut and pie](./doughnut.md)
+* [polar area](./polar.md)
 * [bubble](./bubble.md)
+* [scatter](./scatter.md)
 
 [Area charts](area.md) can be built from a line or radar chart using the dataset `fill` option.
 

docs/charts/bar.md

@@ -95,12 +95,19 @@ The bar chart defines the following configuration options. These options are mer
 | ---- | ---- | ------- | -----------
 | `barPercentage` | `Number` | `0.9` | Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other. [more...](#barpercentage-vs-categorypercentage)
 | `categoryPercentage` | `Number` | `0.8` | Percent (0-1) of the available width each category should be within the sample width. [more...](#barpercentage-vs-categorypercentage)
-| `barThickness` | `Number` | | Manually set width of each bar in pixels. If not set, the base sample widths are calculated automatically so that they take the full available widths without overlap. Then, the bars are sized using `barPercentage` and `categoryPercentage`.
+| `barThickness` | `Number/String` | | Manually set width of each bar in pixels. If set to `'flex'`, it computes "optimal" sample widths that globally arrange bars side by side. If not set (default), bars are equally sized based on the smallest interval. [more...](#barthickness)
 | `maxBarThickness` | `Number` | | Set this to ensure that bars are not sized thicker than this.
 | `gridLines.offsetGridLines` | `Boolean` | `true` | If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval. If false, the grid line will go right down the middle of the bars. [more...](#offsetgridlines)
 
+### barThickness
+If this value is a number, it is applied to the width of each bar, in pixels. When this is enforced, `barPercentage` and `categoryPercentage` are ignored.
+
+If set to `'flex'`, the base sample widths are calculated automatically based on the previous and following samples so that they take the full available widths without overlap. Then, bars are sized using `barPercentage` and `categoryPercentage`. There is no gap when the percentage options are 1. This mode generates bars with different widths when data are not evenly spaced.
+
+If not set (default), the base sample widths are calculated using the smallest interval that prevents bar overlapping, and bars are sized using `barPercentage` and `categoryPercentage`. This mode always generates bars equally sized.
+
 ### offsetGridLines
-If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval, which is the space between the grid lines. If false, the grid line will go right down the middle of the bars. This is set to true for a bar chart while false for other charts by default.
+If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval, which is the space between the grid lines. If false, the grid line will go right down the middle of the bars. This is set to true for a category scale in a bar chart while false for other scales or chart types by default.
 
 This setting applies to the axis configuration. If axes are added to the chart, this setting will need to be set for each new axis.
 

docs/charts/bubble.md

@@ -51,6 +51,7 @@ The bubble chart allows a number of properties to be specified for each dataset.
 | [`hitRadius`](#interactions) | `Number` | Yes | Yes | `1`
 | [`label`](#labeling) | `String` | - | - | `undefined`
 | [`pointStyle`](#styling) | `String` | Yes | Yes | `circle`
+| [`rotation`](#styling) | `Number` | Yes | Yes | `0`
 | [`radius`](#styling) | `Number` | Yes | Yes | `3`
 
 ### Labeling
@@ -67,6 +68,7 @@ The style of each bubble can be controlled with the following properties:
 | `borderColor` | bubble border color
 | `borderWidth` | bubble border width (in pixels)
 | `pointStyle` | bubble [shape style](../configuration/elements#point-styles)
+| `rotation` | bubble rotation (in degrees)
 | `radius` | bubble radius (in pixels)
 
 All these values, if `undefined`, fallback to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options.

docs/charts/line.md

@@ -63,6 +63,7 @@ All point* properties can be specified as an array. If these are set to an array
 | `pointBorderWidth` | `Number/Number[]` | The width of the point border in pixels.
 | `pointRadius` | `Number/Number[]` | The radius of the point shape. If set to 0, the point is not rendered.
 | `pointStyle` | `String/String[]/Image/Image[]` | Style of the point. [more...](../configuration/elements#point-styles)
+| `pointRotation` | `Number/Number[]` | The rotation of the point in degrees.
 | `pointHitRadius` | `Number/Number[]` | The pixel size of the non-displayed point that reacts to mouse events.
 | `pointHoverBackgroundColor` | `Color/Color[]` | Point background color when hovered.
 | `pointHoverBorderColor` | `Color/Color[]` | Point border color when hovered.

docs/charts/radar.md

@@ -82,6 +82,7 @@ All point* properties can be specified as an array. If these are set to an array
 | `pointBorderColor` | `Color/Color[]` | The border color for points.
 | `pointBorderWidth` | `Number/Number[]` | The width of the point border in pixels.
 | `pointRadius` | `Number/Number[]` | The radius of the point shape. If set to 0, the point is not rendered.
+| `pointRotation` | `Number/Number[]` | The rotation of the point in degrees.
 | `pointStyle` | `String/String[]/Image/Image[]` | Style of the point. [more...](#pointstyle)
 | `pointHitRadius` | `Number/Number[]` | The pixel size of the non-displayed point that reacts to mouse events.
 | `pointHoverBackgroundColor` | `Color/Color[]` | Point background color when hovered.

docs/configuration/elements.md

@@ -19,6 +19,7 @@ Global point options: `Chart.defaults.global.elements.point`
 | -----| ---- | --------| -----------
 | `radius` | `Number` | `3` | Point radius.
 | [`pointStyle`](#point-styles) | `String` | `circle` | Point style.
+| `rotation` | `Number` | `0` | Point rotation (in degrees).
 | `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.

docs/configuration/legend.md

@@ -1,6 +1,6 @@
 # Legend Configuration
 
-The chart legend displays data about the datasets that area appearing on the chart.
+The chart legend displays data about the datasets that are appearing on the chart.
 
 ## Configuration options
 The legend configuration is passed into the `options.legend` namespace. The global options for the chart legend is defined in `Chart.defaults.global.legend`.

docs/configuration/tooltip.md

@@ -256,12 +256,13 @@ var myPieChart = new Chart(ctx, {
                 // Display, position, and set styles for font
                 tooltipEl.style.opacity = 1;
                 tooltipEl.style.position = 'absolute';
-                tooltipEl.style.left = position.left + tooltipModel.caretX + 'px';
-                tooltipEl.style.top = position.top + tooltipModel.caretY + 'px';
+                tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
+                tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
                 tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
                 tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
                 tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
                 tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
+                tooltipEl.style.pointerEvents = 'none';
             }
         }
     }

docs/developers/contributing.md

@@ -37,6 +37,7 @@ The following commands are now available from the repository root:
 > gulp lint                 // perform code linting (ESLint)
 > gulp test                 // perform code linting and run unit tests
 > gulp docs                 // build the documentation in ./dist/docs
+> gulp docs --watch         // starts the gitbook live reloaded server
 ```
 
 More information can be found in [gulpfile.js](https://github.com/chartjs/Chart.js/blob/master/gulpfile.js).

docs/general/accessibility.md

@@ -0,0 +1,39 @@
+# Accessible Charts
+
+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.
+
+This [website](http://pauljadam.com/demos/canvas.html) has a more detailed explanation of `canvas` accessibility as well as in depth examples.
+
+## Examples
+
+These are some examples of **accessible** `canvas` elements.
+
+By setting the `role` and `aria-label`, this `canvas` now has an accessible name.
+
+```html
+<canvas id="goodCanvas1" width="400" height="100" aria-label="Hello ARIA World" role="img"></canvas>
+```
+
+This `canvas` element has a text alternative via fallback content.
+
+```html
+<canvas id="okCanvas2" width="400" height="100">
+  <p>Hello Fallback World</p>
+</canvas>
+```
+
+These are some bad examples of **inaccessible** `canvas` elements.
+
+This `canvas` element does not have an accessible name or role.
+
+```html
+<canvas id="badCanvas1" width="400" height="100"></canvas>
+```
+
+This `canvas` element has inaccessible fallback content.
+
+```html
+<canvas id="badCanvas2" width="400" height="100">Your browser does not support the canvas element.</canvas>
+```

docs/general/responsive.md

@@ -16,6 +16,7 @@ Chart.js provides a [few options](#configuration-options) to enable responsivene
 | `responsive` | `Boolean` | `true` | Resizes the chart canvas when its container does ([important note...](#important-note)).
 | `responsiveAnimationDuration` | `Number` | `0` | Duration in milliseconds it takes to animate to new size after a resize event.
 | `maintainAspectRatio` | `Boolean` | `true` | Maintain the original canvas aspect ratio `(width / height)` when resizing.
+| `aspectRatio` | `Number` | `2` | Canvas aspect ratio (i.e. `width / height`, a value of 1 representing a square canvas). Note that this option is ignored if the height is explicitly defined either as attribute or via the style.
 | `onResize` | `Function` | `null` | Called when a resize occurs. Gets passed two arguments: the chart instance and the new size.
 
 ## Important Note

docs/getting-started/installation.md

@@ -54,4 +54,4 @@ Files:
 * `dist/Chart.bundle.js`
 * `dist/Chart.bundle.min.js`
 
-The bundled build includes Moment.js in a single file. You should use this version if you require time axes and want to include a single file. You should not use this build if your application already included Moment.js. Otherwise, Moment.js will be included twice which results in increasing page load time and possible version compatability issues.
+The bundled build includes Moment.js in a single file. You should use this version if you require time axes and want to include a single file. You should not use this build if your application already included Moment.js. Otherwise, Moment.js will be included twice which results in increasing page load time and possible version compatability issues. The Moment.js version in the bundled build is private to Chart.js so if you want to use Moment.js yourself, it's better to use Chart.js (non bundled) and import Moment.js manually.