Merge branch 'master' into log-refine

.codeclimate.yml

@@ -8,9 +8,12 @@ plugins:
   fixme:
     enabled: true
 checks:
+  argument-count:
+    config:
+      threshold: 5
   method-complexity:
     config:
-      threshold: 6
+      threshold: 7
 exclude_patterns:
   - "dist/"
   - "docs/"

.eslintrc.yml

@@ -1,15 +1,19 @@
 extends:
   - chartjs
-  - plugin:es/no-new-in-es2019
+  - plugin:es/restrict-to-es2018
   - plugin:markdown/recommended
 
+settings:
+  es:
+    aggressive: true
+
 env:
   es6: true
   browser: true
   node: true
 
 parserOptions:
-  ecmaVersion: 2018
+  ecmaVersion: 2021
   sourceType: module
   ecmaFeatures:
     impliedStrict: true

.github/ISSUE_TEMPLATE/DOCS.md

@@ -21,5 +21,5 @@ Documentation Is:
 ### Example
 <!--
   Provide a link to a live example demonstrating the issue or feature to be documented:
-  https://codepen.io/pen?template=JXVYzq
+  https://codepen.io/pen?template=wvezeOq
 -->

.github/PULL_REQUEST_TEMPLATE.md

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

.gitignore

@@ -27,3 +27,6 @@ docs/api
 *.log
 *.swp
 *.stackdump
+
+# Generated
+/types/tests/autogen*.ts

README.md

@@ -33,4 +33,4 @@ Instructions on building and testing Chart.js can be found in [the documentation
 
 ## License
 
-Chart.js is available under the [MIT license](https://opensource.org/licenses/MIT).
+Chart.js is available under the [MIT license](LICENSE.md).

auto/auto.esm.d.ts

@@ -1,4 +1,4 @@
-import { Chart } from '../dist/chart.esm';
+import { Chart } from '../types/index.esm';
 
-export * from '../dist/chart.esm';
+export * from '../types/index.esm';
 export default Chart;

docs/.vuepress/config.js

@@ -29,12 +29,13 @@ module.exports = {
         {base: '/samples', alternative: ['bar/vertical']},
       ],
     }],
+    ['vuepress-plugin-code-copy', true],
     [
       'vuepress-plugin-typedoc',
       {
         entryPoints: ['../../types/index.esm.d.ts'],
         hideInPageTOC: true,
-        tsconfig: '../../tsconfig.json',
+        tsconfig: 'tsconfig.json',
         sidebar: {
           fullNames: true,
           parentCategory: 'API',
@@ -188,6 +189,7 @@ module.exports = {
             'scales/time-line',
             'scales/time-max-span',
             'scales/time-combo',
+            'scales/stacked'
           ]
         },
         {
@@ -216,6 +218,11 @@ module.exports = {
           ]
         },
         {
+          title: 'Subtitle',
+          children: [
+            'subtitle/basic',
+          ]
+        },        {
           title: 'Tooltip',
           children: [
             'tooltip/position',
@@ -264,6 +271,7 @@ module.exports = {
             'plugins/quadrants',
           ]
         },
+        'utils'
       ],
       '/': [
         '',
@@ -302,6 +310,7 @@ module.exports = {
             'configuration/layout',
             'configuration/legend',
             'configuration/title',
+            'configuration/subtitle',
             'configuration/tooltip',
             'configuration/elements',
             'configuration/decimation'

docs/.vuepress/styles/index.styl

@@ -1,5 +1,9 @@
 @require '~vuepress-plugin-tabs/dist/themes/default.styl'
 
+.theme-default-content
+  &:not(.custom)
+    max-width: unset
+
 .sidebar-group.is-sub-group.depth-1
   > .sidebar-group-items
     border-left 1px solid rgba($accentColor, 0.25)

docs/axes/_common_ticks.md

@@ -5,7 +5,7 @@ Namespace: `options.scales[scaleId].ticks`
 | Name | Type | Scriptable | Default | Description
 | ---- | ---- | :-------------------------------: | ------- | -----------
 | `backdropColor` | [`Color`](../../general/colors.md) | Yes | `'rgba(255, 255, 255, 0.75)'` | Color of label backdrops.
-| `backdropPadding` | [`Padding`](../../general/padding.md) | Yes | `2` | Padding of label backdrop.
+| `backdropPadding` | [`Padding`](../../general/padding.md) | | `2` | Padding of label backdrop.
 | `callback` | `function` | | | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](/axes/labelling.md#creating-custom-tick-formats).
 | `display` | `boolean` | | `true` | If true, show tick labels.
 | `color` | [`Color`](/general/colors.md) | Yes | `Chart.defaults.color` | Color of ticks.

docs/axes/cartesian/_common.md

@@ -6,6 +6,8 @@ Namespace: `options.scales[scaleId]`
 | ---- | ---- | ------- | -----------
 | `bounds` | `string` | `'ticks'` | Determines the scale bounds. [more...](./index.md#scale-bounds)
 | `position` | `string` | | Position of the axis. [more...](./index.md#axis-position)
+| `stack` | `string` | | Stack group. Axes at the same `position` with same `stack` are stacked.
+| `stackWeight` | `number` | 1 | Weight of the scale in stack group. Used to determine the amount of allocated space for the scale within the group.
 | `axis` | `string` | | Which type of axis this is. Possible values are: `'x'`, `'y'`. If not set, this is inferred from the first character of the ID which should be `'x'` or `'y'`.
 | `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 bar chart by default.
 | `title` | `object` | | Scale title configuration. [more...](../labelling.md#scale-title-configuration)

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: [{

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: {

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: {

docs/axes/index.md

@@ -11,6 +11,86 @@ Scales in Chart.js >v2.0 are significantly more powerful, but also different tha
 * Scale titles are supported.
 * New scale types can be extended without writing an entirely new chart type.
 
+## Default scales
+
+The default `scaleId`'s for carterian charts are `'x'` and `'y'`. For radial charts: `'r'`.
+Each dataset is mapped to a scale for each axis (x, y or r) it requires. The scaleId's that a dataset is mapped to, is determined by the `xAxisID`, `yAxisID` or `rAxisID`.
+If the ID for an axis is not specified, first scale for that axis is used. If no scale for an axis is found, a new scale is created.
+
+Some examples:
+
+The following chart will have `'x'` and `'y'` scales:
+
+```js
+let chart = new Chart(ctx, {
+  type: 'line'
+});
+```
+
+The following chart will have scales `'x'` and `'myScale'`:
+
+```js
+let chart = new Chart(ctx, {
+  type: 'bar',
+  data: {
+    datasets: [{
+      data: [1, 2, 3]
+    }]
+  },
+  options: {
+    scales: {
+      myScale: {
+        type: 'logarithmic',
+        position: 'right', // `axis` is determined by the position as `'y'`
+      }
+    }
+  }
+});
+```
+
+The following chart will have scales `'xAxis'` and `'yAxis'`:
+
+```js
+let chart = new Chart(ctx, {
+  type: 'bar',
+  data: {
+    datasets: [{
+      yAxisID: 'yAxis'
+    }]
+  },
+  options: {
+    scales: {
+      xAxis: {
+        // The axis for this scale is determined from the first letter of the id as `'x'`
+        // It is recommended to specify `position` and / or `axis` explicitly.
+        type: 'time',
+      }
+    }
+  }
+});
+```
+
+The following chart will have `'r'` scale:
+
+```js
+let chart = new Chart(ctx, {
+  type: 'radar'
+});
+```
+
+The following chart will have `'myScale'` scale:
+
+```js
+let chart = new Chart(ctx, {
+  type: 'radar',
+  scales: {
+    myScale: {
+      axis: 'r'
+    }
+  }
+});
+```
+
 ## Common Configuration
 
 !!!include(axes/_common.md)!!!
@@ -77,8 +157,8 @@ Namespace: `options.scales[scaleId]`
 | `afterBuildTicks` | `axis` | Callback that runs after ticks are created. Useful for filtering ticks.
 | `beforeTickToLabelConversion` | `axis` | Callback that runs before ticks are converted into strings.
 | `afterTickToLabelConversion` | `axis` | Callback that runs after ticks are converted into strings.
-| `beforeCalculateTickRotation` | `axis` | Callback that runs before tick rotation is determined.
-| `afterCalculateTickRotation` | `axis` | Callback that runs after tick rotation is determined.
+| `beforeCalculateLabelRotation` | `axis` | Callback that runs before tick rotation is determined.
+| `afterCalculateLabelRotation` | `axis` | Callback that runs after tick rotation is determined.
 | `beforeFit` | `axis` | Callback that runs before the scale fits to the canvas.
 | `afterFit` | `axis` | Callback that runs after the scale fits to the canvas.
 | `afterUpdate` | `axis` | Callback that runs at the end of the update process.

docs/axes/labelling.md

@@ -20,11 +20,11 @@ Namespace: `options.scales[scaleId].title`, it defines options for the scale tit
 It is also common to want to change the tick marks to include information about the data type. For example, adding a dollar sign ('$').
 To do this, you need to override the `ticks.callback` method in the axis configuration.
 
-The method receiver 3 arguments:
+The method receives 3 arguments:
 
 * `value` - the tick value in the **internal data format** of the associated scale.
 * `index` - the tick index in the ticks array.
-* `ticks` - the array containing all of the [tick objects](../api/interfaces/tick).
+* `ticks` - the array containing all of the [tick objects](../api/interfaces/Tick).
 
 The call to the method is scoped to the scale. `this` inside the method is the scale object.
 
@@ -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: {

docs/charts/area.md

@@ -16,6 +16,7 @@ This feature is implemented by the [`filler` plugin](https://github.com/chartjs/
 | Disabled <sup>1</sup> | `boolean` | `false` |
 | Stacked value below | `string` | `'stack'` |
 | Axis value | `object` | `{ value: number; }` |
+| Shape (fill inside line) | `string` | `'shape'` |
 
 > <sup>1</sup> for backward compatibility, `fill: true` is equivalent to `fill: 'origin'`<br/>
 

docs/charts/bar.md

@@ -86,11 +86,12 @@ Only the `data` option needs to be specified in the dataset namespace.
 | [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `1`
 | [`hoverBorderRadius`](#interactions) | `number` | Yes | Yes | `0`
 | [`indexAxis`](#general) | `string` | - | - | `'x'`
+| [`inflateAmount`](#inflateamount) | `number`\|`'auto'` | Yes | Yes | `'auto'`
 | [`maxBarThickness`](#maxbarthickness) | `number` | - | - | |
 | [`minBarLength`](#styling) | `number` | - | - | |
 | [`label`](#general) | `string` | - | - | `''`
 | [`order`](#general) | `number` | - | - | `0`
-| [`pointStyle`](../configuration/elements.md#point-styles) | `string`\|`Image` | Yes | - | `'circle'`
+| [`pointStyle`](../configuration/elements.md#point-styles) | [`pointStyle`](../configuration/elements.md#types) | Yes | - | `'circle'`
 | [`skipNull`](#general) | `boolean` | - | - | |
 | [`stack`](#general) | `string` | - | - | `'bar'` |
 | [`xAxisID`](#general) | `string` | - | - | first x axis
@@ -121,9 +122,9 @@ data: {
 | `grouped` | Should the bars be grouped on index axis. When `true`, all the datasets at same index value will be placed next to each other centering on that index value. When `false`, each bar is placed on its actual index-axis value.
 | `indexAxis` | The base axis of the dataset. `'x'` for vertical bars and `'y'` for horizontal bars.
 | `label` | The label for the dataset which appears in the legend and tooltips.
-| `order` | The drawing order of dataset. Also affects order for stacking, tooltip, and legend.
+| `order` | The drawing order of dataset. Also affects order for stacking, tooltip and legend. [more](mixed.md#drawing-order)
 | `skipNull` | If `true`, null or undefined values will not be used for spacing calculations when determining bar size.
-| `stack` | The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack). [more](#stacked-bar-charts)
+| `stack` | The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack). [more](#stacked-bar-chart)
 | `xAxisID` | The ID of the x-axis to plot this dataset on.
 | `yAxisID` | The ID of the y-axis to plot this dataset on.
 
@@ -157,6 +158,7 @@ Options are:
 
 * `'start'`
 * `'end'`
+* `'middle'` (only valid on stacked bars: the borders between bars are skipped)
 * `'bottom'`
 * `'left'`
 * `'top'`
@@ -175,6 +177,10 @@ If this value is a number, it is applied to all corners of the rectangle (topLef
 When the border radius is supplied as a number and the chart is stacked, the radius will only be applied to the bars that are at the edges of the stack or where the bar is floating. The object syntax can be used to override this behavior.
 :::
 
+#### inflateAmount
+
+This option can be used to inflate the rects that are used to draw the bars. This can be used to hide artifacts between bars when `barPercentage`(#barpercentage) * `categoryPercentage`(#categorypercentage) is 1. The default value `'auto'` should work in most cases.
+
 ### Interactions
 
 The interaction with each bar can be controlled with the following properties:
@@ -272,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: {