LineElement: no fill by default (#8111)

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

diff --git a/docs/docs/charts/area.md b/docs/docs/charts/area.md
index c535b1b1098e9a12d65151cece0140eee28d0f91..9015db50777a369f14c2a59ebd6e85104f98b03c 100644 (file)
--- a/docs/docs/charts/area.md
+++ b/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**
 

diff --git a/docs/docs/charts/bar.mdx b/docs/docs/charts/bar.mdx
index 77b6d87d9d08c4477aa47b04470320bbcade1285..b52b5d09109746e5a4d8395dbdce9dfe857e85ef 100644 (file)
--- a/docs/docs/charts/bar.mdx
+++ b/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)',

diff --git a/docs/docs/charts/line.mdx b/docs/docs/charts/line.mdx
index bd97cffdd3ac528952bd5b5bf1946433eef8c019..7587abfeeac293c4537b871349742541c5aabd89 100644 (file)
--- a/docs/docs/charts/line.mdx
+++ b/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`

diff --git a/docs/docs/charts/radar.mdx b/docs/docs/charts/radar.mdx
index 6fec0ff041f9e8e30b8a3b737119a725b1ae07f3..2e8d94cd91f0095c6531732a93aad4044fc7d2f2 100644 (file)
--- a/docs/docs/charts/radar.mdx
+++ b/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`

diff --git a/docs/docs/configuration/elements.md b/docs/docs/configuration/elements.md
index 4cc3e6b07f638c3d39b126fb20c01b83979c998a..1e65549309f2e0ddcbafe0f537211d5219b06ef4 100644 (file)
--- a/docs/docs/configuration/elements.md
+++ b/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

diff --git a/docs/docs/getting-started/v3-migration.md b/docs/docs/getting-started/v3-migration.md
index aaace7c4550e971bbe3e2388d96d8d50247fea17..ac35edfb689133f936a433ac758b102b00419c5b 100644 (file)
--- a/docs/docs/getting-started/v3-migration.md
+++ b/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
 

diff --git a/src/elements/element.line.js b/src/elements/element.line.js
index fc9fc3fb5337809c681a94d7257c234a82046ee5..5ffca43938fe4b8cf49d5b03d74ca73b08abc19d 100644 (file)
--- a/src/elements/element.line.js
+++ b/src/elements/element.line.js
@@ -382,7 +382,7 @@ LineElement.defaults = {
        borderJoinStyle: 'miter',
        borderWidth: 3,
        capBezierPoints: true,
-       fill: true,
+       fill: false,
        tension: 0
 };
 

diff --git a/test/fixtures/controller.line/backgroundColor/scriptable.js b/test/fixtures/controller.line/backgroundColor/scriptable.js
index ab1ab1580ccb152c1a528fe5dd5b85aa262bc846..b02960ab7acda1fdc69597d2017375efbdb8d0dc 100644 (file)
--- a/test/fixtures/controller.line/backgroundColor/scriptable.js
+++ b/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'

diff --git a/test/fixtures/controller.line/backgroundColor/value.js b/test/fixtures/controller.line/backgroundColor/value.js
index b92a0111fd2870cd3a1fe4d4ba4232fe7f1937a4..adc20f9ef54a33001ba4076be1ba140cc2e75a2b 100644 (file)
--- a/test/fixtures/controller.line/backgroundColor/value.js
+++ b/test/fixtures/controller.line/backgroundColor/value.js
@@ -18,6 +18,7 @@ module.exports = {
                options: {
                        elements: {
                                line: {
+                                       fill: true,
                                        backgroundColor: '#00ff00'
                                },
                                point: {

diff --git a/test/fixtures/controller.line/showLine/false.js b/test/fixtures/controller.line/showLine/false.js
index a90097b0c261bf4fa6d802be4ea28796202f8658..648ee8d06e267a5ef44ad154e60b575ea904f4ce 100644 (file)
--- a/test/fixtures/controller.line/showLine/false.js
+++ b/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']
                },

diff --git a/test/fixtures/scale.time/negative-times.js b/test/fixtures/scale.time/negative-times.js
index 5db06c4128c868d9a5af01d01f2781869d633e89..f48ecf1d6e9bcd9c0626ecdd4ead4cbef1389f4f 100644 (file)
--- a/test/fixtures/scale.time/negative-times.js
+++ b/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}

diff --git a/test/fixtures/scale.time/negative-times.png b/test/fixtures/scale.time/negative-times.png
index b7453937b51e728c7e7086070b546516aaa22a83..e655a234d5e3a6450c0640e2def0c7ef769df51a 100644 (file)
Binary files a/test/fixtures/scale.time/negative-times.png and b/test/fixtures/scale.time/negative-times.png differ