diff --git a/docs/docs/charts/area.md b/docs/docs/charts/area.md index c535b1b10..9015db507 100644 --- 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 4 | `string` | `'stack'` | | Axis value | `object` | `{ value: number; }` | -> 1 for backward compatibility, `fill: true` (default) is equivalent to `fill: 'origin'`
+> 1 for backward compatibility, `fill: true` is equivalent to `fill: 'origin'`
**Example** diff --git a/docs/docs/charts/bar.mdx b/docs/docs/charts/bar.mdx index 77b6d87d9..b52b5d091 100644 --- 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 bd97cffdd..7587abfee 100644 --- 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 6fec0ff04..2e8d94cd9 100644 --- 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) | number|object | - | - | `undefined` -| [`fill`](#line-styling) | boolean|string | Yes | - | `true` +| [`fill`](#line-styling) | boolean|string | 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 4cc3e6b07..1e6554930 100644 --- 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 aaace7c45..ac35edfb6 100644 --- 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 fc9fc3fb5..5ffca4393 100644 --- 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 ab1ab1580..b02960ab7 100644 --- 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 b92a0111f..adc20f9ef 100644 --- 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 a90097b0c..648ee8d06 100644 --- 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 5db06c412..f48ecf1d6 100644 --- 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 b7453937b..e655a234d 100644 Binary files a/test/fixtures/scale.time/negative-times.png and b/test/fixtures/scale.time/negative-times.png differ