LineElement: no fill by default (#8111)

* LineElement: no fill by default
* Update negative-times fixture

docs/docs/charts/area.md

@@ -17,7 +17,7 @@ Both [line](./line.mdx) and [radar](./radar.mdx) charts support a `fill` option
 | Stacked value below <sup>4</sup> | `string` | `'stack'` |
 | Axis value | `object` | `{ value: number; }` |
 
-> <sup>1</sup> for backward compatibility, `fill: true` (default) is equivalent to `fill: 'origin'`<br/>
+> <sup>1</sup> for backward compatibility, `fill: true` is equivalent to `fill: 'origin'`<br/>
 
 **Example**
 

docs/docs/charts/bar.mdx

@@ -23,7 +23,6 @@ export const ExampleChart0 = () => {
         datasets: [{
           label: 'My First Dataset',
           data: [65, 59, 80, 81, 56, 55, 40],
-          fill: false,
           backgroundColor: [
             'rgba(255, 99, 132, 0.2)',
             'rgba(255, 159, 64, 0.2)',

docs/docs/charts/line.mdx

@@ -64,7 +64,7 @@ The line chart allows a number of properties to be specified for each dataset. T
 | [`borderWidth`](#line-styling) | `number` | Yes | - | `3`
 | [`clip`](#general) | `number`\|`object` | - | - | `undefined`
 | [`cubicInterpolationMode`](#cubicinterpolationmode) | `string` | Yes | - | `'default'`
-| [`fill`](#line-styling) | `boolean`\|`string` | Yes | - | `true`
+| [`fill`](#line-styling) | `boolean`\|`string` | Yes | - | `false`
 | [`hoverBackgroundColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`
 | [`hoverBorderCapStyle`](#line-styling) | `string` | Yes | - | `undefined`
 | [`hoverBorderColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`

docs/docs/charts/radar.mdx

@@ -31,8 +31,7 @@ export const ExampleChart = () => {
           pointBackgroundColor: 'rgb(255, 99, 132)',
           pointBorderColor: '#fff',
           pointHoverBackgroundColor: '#fff',
-          pointHoverBorderColor: 'rgb(255, 99, 132)',
-          fill: true
+          pointHoverBorderColor: 'rgb(255, 99, 132)'
         }, {
           label: 'My Second Dataset',
           data: [28, 48, 40, 19, 96, 27, 100],
@@ -42,8 +41,7 @@ export const ExampleChart = () => {
           pointBackgroundColor: 'rgb(54, 162, 235)',
           pointBorderColor: '#fff',
           pointHoverBackgroundColor: '#fff',
-          pointHoverBorderColor: 'rgb(54, 162, 235)',
-          fill: true
+          pointHoverBorderColor: 'rgb(54, 162, 235)'
         }]
       },
       options: {
@@ -94,7 +92,7 @@ The radar chart allows a number of properties to be specified for each dataset.
 | [`hoverBorderJoinStyle`](#line-styling) | `string` | Yes | - | `undefined`
 | [`hoverBorderWidth`](#line-styling) | `number` | Yes | - | `undefined`
 | [`clip`](#general) | <code>number&#124;object</code> | - | - | `undefined`
-| [`fill`](#line-styling) | <code>boolean&#124;string</code> | Yes | - | `true`
+| [`fill`](#line-styling) | <code>boolean&#124;string</code> | Yes | - | `false`
 | [`label`](#general) | `string` | - | - | `''`
 | [`order`](#general) | `number` | - | - | `0`
 | [`tension`](#line-styling) | `number` | - | - | `0`

docs/docs/configuration/elements.md

@@ -65,7 +65,7 @@ Global line options: `Chart.defaults.elements.line`.
 | `borderJoinStyle` | `string` | `'miter'` | Line join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
 | `capBezierPoints` | `boolean` | `true` | `true` to keep Bézier control inside the chart, `false` for no restriction.
 | `cubicInterpolationMode` | `string` | `'default'` |  Interpolation mode to apply. [See more...](./charts/line.mdx/#cubicinterpolationmode)
-| `fill` | `boolean`\|`string` | `true` | How to fill the area under the line. See [area charts](../charts/area.md#filling-modes).
+| `fill` | `boolean`\|`string` | `false` | How to fill the area under the line. See [area charts](../charts/area.md#filling-modes).
 | `stepped` | `boolean` | `false` | `true` to show the line as a stepped line (`tension` will be ignored).
 
 ## Bar Configuration

docs/docs/getting-started/v3-migration.md

@@ -110,6 +110,7 @@ A number of changes were made to the configuration options passed to the `Chart`
 * `defaultLineHeight` was renamed to `font.lineHeight`
 * Horizontal Bar default tooltip mode was changed from `'index'` to `'nearest'` to match vertical bar charts
 * `legend`, `title` and `tooltip` namespaces were moved from `Chart.defaults` to `Chart.defaults.plugins`.
+* `elements.line.fill` default changed from `true` to `false`.
 
 #### Scales
 

src/elements/element.line.js

@@ -382,7 +382,7 @@ LineElement.defaults = {
 	borderJoinStyle: 'miter',
 	borderWidth: 3,
 	capBezierPoints: true,
-	fill: true,
+	fill: false,
 	tension: 0
 };
 

test/fixtures/controller.line/backgroundColor/scriptable.js

@@ -23,6 +23,7 @@ module.exports = {
 		options: {
 			elements: {
 				line: {
+					fill: true,
 					backgroundColor: function(ctx) {
 						var index = ctx.index;
 						return index === 0 ? '#ff0000'

test/fixtures/controller.line/backgroundColor/value.js

@@ -18,6 +18,7 @@ module.exports = {
 		options: {
 			elements: {
 				line: {
+					fill: true,
 					backgroundColor: '#00ff00'
 				},
 				point: {

test/fixtures/controller.line/showLine/false.js

@@ -7,7 +7,8 @@ module.exports = {
 				data: [10, 15, 0, -4],
 				label: 'dataset1',
 				borderColor: 'red',
-				backgroundColor: 'green'
+				backgroundColor: 'green',
+				fill: true
 			}],
 			labels: ['label1', 'label2', 'label3', 'label4']
 		},

test/fixtures/scale.time/negative-times.js

@@ -3,6 +3,8 @@ module.exports = {
 		type: 'line',
 		data: {
 			datasets: [{
+				fill: true,
+				backgroundColor: 'red',
 				data: [
 					{x: -1000000, y: 1},
 					{x: 1000000000, y: 2}