Mirrors/Chart.js
2
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2026-03-24 00:56:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Put the border opts in own object (#10571)

Browse Source 
* put borderOpts in own object

* document z option

* remove todo and change scaleId to id

* update some tests

* clean bit, remove console log

* fix failing test

* lint

* Remove comment
This commit is contained in:
Jacco van den Berg
2022-08-18 15:07:46 +02:00
committed by GitHub
parent 49b16c9678
commit 3eb947719e
27 changed files with 209 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/axes/_common.md
View File

@@ -7,6 +7,7 @@ Namespace: `options.scales[scaleId]`
| `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.
| `alignToPixels` | `boolean` | `false` | Align pixel values to device pixels.
| `backgroundColor` | [`Color`](/general/colors.md) | | Background color of the scale area.
| `border` | `object` | | Border configuration. [more...](/axes/styling.md#border-configuration)
| `display` | `boolean`\|`string` | `true` | Controls the axis global visibility (visible when `true`, hidden when `false`). When `display: 'auto'`, the axis is visible only if at least one associated dataset is visible.
| `grid` | `object` | | Grid line configuration. [more...](/axes/styling.md#grid-line-configuration)
| `min` | `number` | | User defined minimum number for the scale, overrides minimum value from data. [more...](/axes/index.md#axis-range-settings)

20
docs/axes/styling.md
View File

@@ -8,14 +8,9 @@ Namespace: `options.scales[scaleId].grid`, it defines options for the grid lines
| Name | Type | Scriptable | Indexable | Default | Description
| ---- | ---- | :-------------------------------: | :-----------------------------: | ------- | -----------
| `borderColor` | [`Color`](../general/colors.md) | | | `Chart.defaults.borderColor` | The color of the border line.
| `borderWidth` | `number` | | | `1` | The width of the border line.
| `borderDash` | `number[]` | Yes | | `[]` | Length and spacing of dashes on grid lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `borderDashOffset` | `number` | Yes | | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `circular` | `boolean` | | | `false` | If true, gridlines are circular (on radar and polar area charts only).
| `color` | [`Color`](../general/colors.md) | Yes | Yes | `Chart.defaults.borderColor` | 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.
| `display` | `boolean` | | | `true` | If false, do not display grid lines for this axis.
| `drawBorder` | `boolean` | | | `true` | If true, draw a border at the edge between the axis and the chart area.
| `drawOnChartArea` | `boolean` | | | `true` | If true, draw lines on the chart area inside the axis lines. This is useful when there are multiple axes and you need to control which grid lines are drawn.
| `drawTicks` | `boolean` | | | `true` | If true, draw lines beside the ticks in the axis area beside the chart.
| `lineWidth` | `number` | Yes | Yes | `1` | Stroke width of grid lines.
@@ -25,7 +20,7 @@ Namespace: `options.scales[scaleId].grid`, it defines options for the grid lines
| `tickColor` | [`Color`](../general/colors.md) | Yes | Yes | | Color of the tick line. If unset, defaults to the grid line color.
| `tickLength` | `number` | | | `8` | Length in pixels that the grid lines will draw into the axis area.
| `tickWidth` | `number` | Yes | Yes | | Width of the tick mark in pixels. If unset, defaults to the grid line width.
| `z` | `number` | | | `0` | z-index of gridline layer. Values <= 0 are drawn under datasets, > 0 on top.
| `z` | `number` | | | `-1` | z-index of the gridline layer. Values <= 0 are drawn under datasets, > 0 on top.
The scriptable context is described in [Options](../general/options.md#tick) section.
@@ -42,3 +37,16 @@ Namespace: `options.scales[scaleId].ticks.major`, it defines options for the maj
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `enabled` | `boolean` | `false` | If true, major ticks are generated. A major tick will affect autoskipping and `major` will be defined on ticks in the scriptable options context.
## Border Configuration
Namespace: `options.scales[scaleId].border`, it defines options for the border that run perpendicular to the axis.
| Name | Type | Scriptable | Indexable | Default | Description
| ---- | ---- | :-------------------------------: | :-----------------------------: | ------- | -----------
| `display` | `boolean` | | | `true` | If true, draw a border at the edge between the axis and the chart area.
| `color` | [`Color`](../general/colors.md) | | | `Chart.defaults.borderColor` | The color of the border line.
| `width` | `number` | | | `1` | The width of the border line.
| `dash` | `number[]` | Yes | | `[]` | Length and spacing of dashes on grid lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `dashOffset` | `number` | Yes | | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `z` | `number` | | | `0` | z-index of the border layer. Values <= 0 are drawn under datasets, > 0 on top.

6
docs/migration/v4-migration.md
View File

@@ -17,6 +17,12 @@ A number of changes were made to the configuration options passed to the `Chart`
* The radialLinear grid indexable and scriptable options don't decrease the index of the specified grid line anymore.
* The `destroy` plugin hook has been removed and replaced with `afterDestroy`.
* Ticks callback on time scale now receives timestamp instead of a formatted label.
* `scales[id].grid.drawBorder` has been renamed to `scales[id].border.display`.
* `scales[id].grid.borderWidth` has been renamed to `scales[id].border.width`.
* `scales[id].grid.borderColor` has been renamed to `scales[id].border.color`.
* `scales[id].grid.borderDash` has been renamed to `scales[id].border.dash`.
* `scales[id].grid.borderDashOffset` has been renamed to `scales[id].border.dashOffset`.
* The z index for the border of a scale is now configurable instead of being 1 higher as the grid z index.
* Linear scales now add and subtracts `5%` of the max value to the range if the min and max are the same instead of `1`.
* If the tooltip callback returns `undefined`, then the default callback will be used.

8
docs/samples/scale-options/grid.md
View File

@@ -61,16 +61,20 @@ const config = {
},
scales: {
x: {
border: {
display: BORDER
},
grid: {
display: DISPLAY,
drawBorder: BORDER,
drawOnChartArea: CHART_AREA,
drawTicks: TICKS,
}
},
y: {
border: {
display: false
},
grid: {
drawBorder: false,
color: function(context) {
if (context.tick.value > 0) {
return Utils.CHART_COLORS.green;

15
src/core/core.scale.defaults.js
View File

@@ -26,16 +26,19 @@ export function applyScaleDefaults(defaults) {
grid: {
display: true,
lineWidth: 1,
drawBorder: true,
drawOnChartArea: true,
drawTicks: true,
tickLength: 8,
tickWidth: (_ctx, options) => options.lineWidth,
tickColor: (_ctx, options) => options.color,
offset: false,
borderDash: [],
borderDashOffset: 0.0,
borderWidth: 1
},
border: {
display: true,
dash: [],
dashOffset: 0.0,
width: 1
},
// scale title
@@ -80,13 +83,13 @@ export function applyScaleDefaults(defaults) {
defaults.route('scale.ticks', 'color', '', 'color');
defaults.route('scale.grid', 'color', '', 'borderColor');
defaults.route('scale.grid', 'borderColor', '', 'borderColor');
defaults.route('scale.border', 'color', '', 'borderColor');
defaults.route('scale.title', 'color', '', 'color');
defaults.describe('scale', {
_fallback: false,
_scriptable: (name) => !name.startsWith('before') && !name.startsWith('after') && name !== 'callback' && name !== 'parser',
_indexable: (name) => name !== 'borderDash' && name !== 'tickBorderDash',
_indexable: (name) => name !== 'borderDash' && name !== 'tickBorderDash' && name !== 'dash',
});
defaults.describe('scales', {

27
src/core/core.scale.js
View File

@@ -1004,7 +1004,7 @@ export default class Scale extends Element {
const axis = this.axis;
const chart = this.chart;
const options = this.options;
const {grid, position} = options;
const {grid, position, border} = options;
const offset = grid.offset;
const isHorizontal = this.isHorizontal();
const ticks = this.ticks;
@@ -1012,8 +1012,8 @@ export default class Scale extends Element {
const tl = getTickMarkLength(grid);
const items = [];
const borderOpts = grid.setContext(this.getContext());
const axisWidth = borderOpts.drawBorder ? borderOpts.borderWidth : 0;
const borderOpts = border.setContext(this.getContext());
const axisWidth = borderOpts.display ? borderOpts.width : 0;
const axisHalfWidth = axisWidth / 2;
const alignBorderValue = function(pixel) {
return _alignPixel(chart, pixel, axisWidth);
@@ -1076,12 +1076,14 @@ export default class Scale extends Element {
const limit = valueOrDefault(options.ticks.maxTicksLimit, ticksLength);
const step = Math.max(1, Math.ceil(ticksLength / limit));
for (i = 0; i < ticksLength; i += step) {
const optsAtIndex = grid.setContext(this.getContext(i));
const context = this.getContext(i);
const optsAtIndex = grid.setContext(context);
const optsAtIndexBorder = border.setContext(context);
const lineWidth = optsAtIndex.lineWidth;
const lineColor = optsAtIndex.color;
const borderDash = optsAtIndex.borderDash || [];
const borderDashOffset = optsAtIndex.borderDashOffset;
const borderDash = optsAtIndexBorder.dash || [];
const borderDashOffset = optsAtIndexBorder.dashOffset;
const tickWidth = optsAtIndex.tickWidth;
const tickColor = optsAtIndex.tickColor;
@@ -1496,9 +1498,9 @@ export default class Scale extends Element {
* @protected
*/
drawBorder() {
const {chart, ctx, options: {grid}} = this;
const borderOpts = grid.setContext(this.getContext());
const axisWidth = grid.drawBorder ? borderOpts.borderWidth : 0;
const {chart, ctx, options: {border, grid}} = this;
const borderOpts = border.setContext(this.getContext());
const axisWidth = border.display ? borderOpts.width : 0;
if (!axisWidth) {
return;
}
@@ -1516,8 +1518,8 @@ export default class Scale extends Element {
x1 = x2 = borderValue;
}
ctx.save();
ctx.lineWidth = borderOpts.borderWidth;
ctx.strokeStyle = borderOpts.borderColor;
ctx.lineWidth = borderOpts.width;
ctx.strokeStyle = borderOpts.color;
ctx.beginPath();
ctx.moveTo(x1, y1);
@@ -1622,6 +1624,7 @@ export default class Scale extends Element {
const opts = this.options;
const tz = opts.ticks && opts.ticks.z || 0;
const gz = valueOrDefault(opts.grid && opts.grid.z, -1);
const bz = valueOrDefault(opts.border && opts.border.z, 0);
if (!this._isVisible() || this.draw !== Scale.prototype.draw) {
// backward compatibility: draw has been overridden by custom scale
@@ -1641,7 +1644,7 @@ export default class Scale extends Element {
this.drawTitle();
}
}, {
z: gz + 1, // TODO, v4 move border options to its own object and add z
z: bz,
draw: () => {
this.drawBorder();
}

15
src/scales/scale.radialLinear.js
View File

@@ -264,7 +264,7 @@ function pathRadiusLine(scale, radius, circular, labelCount) {
}
}
function drawRadiusLine(scale, gridLineOpts, radius, labelCount) {
function drawRadiusLine(scale, gridLineOpts, radius, labelCount, borderOpts) {
const ctx = scale.ctx;
const circular = gridLineOpts.circular;
@@ -277,8 +277,8 @@ function drawRadiusLine(scale, gridLineOpts, radius, labelCount) {
ctx.save();
ctx.strokeStyle = color;
ctx.lineWidth = lineWidth;
ctx.setLineDash(gridLineOpts.borderDash);
ctx.lineDashOffset = gridLineOpts.borderDashOffset;
ctx.setLineDash(borderOpts.dash);
ctx.lineDashOffset = borderOpts.dashOffset;
ctx.beginPath();
pathRadiusLine(scale, radius, circular, labelCount);
@@ -527,7 +527,7 @@ export default class RadialLinearScale extends LinearScaleBase {
drawGrid() {
const ctx = this.ctx;
const opts = this.options;
const {angleLines, grid} = opts;
const {angleLines, grid, border} = opts;
const labelCount = this._pointLabels.length;
let i, offset, position;
@@ -540,8 +540,11 @@ export default class RadialLinearScale extends LinearScaleBase {
this.ticks.forEach((tick, index) => {
if (index !== 0) {
offset = this.getDistanceFromCenterForValue(tick.value);
const optsAtIndex = grid.setContext(this.getContext(index));
drawRadiusLine(this, optsAtIndex, offset, labelCount);
const context = this.getContext(index);
const optsAtIndex = grid.setContext(context);
const optsAtIndexBorder = border.setContext(context);
drawRadiusLine(this, optsAtIndex, offset, labelCount, optsAtIndexBorder);
}
});
}

24
test/fixtures/core.layouts/stacked-boxes-with-weight.js vendored
View File

@@ -19,8 +19,8 @@ module.exports = {
stackWeight: 2,
offset: true,
bounds: 'data',
grid: {
borderColor: 'red'
border: {
color: 'red'
},
ticks: {
autoSkip: false,
@@ -35,8 +35,8 @@ module.exports = {
stackWeight: 2,
offset: true,
bounds: 'data',
grid: {
borderColor: 'green'
border: {
color: 'green'
},
ticks: {
autoSkip: false,
@@ -51,8 +51,8 @@ module.exports = {
stackWeight: 6,
offset: true,
bounds: 'data',
grid: {
borderColor: 'blue'
border: {
color: 'blue'
},
ticks: {
autoSkip: false,
@@ -66,8 +66,8 @@ module.exports = {
stack: '1',
stackWeight: 2,
offset: true,
grid: {
borderColor: 'red'
border: {
color: 'red'
},
ticks: {
precision: 0
@@ -79,8 +79,8 @@ module.exports = {
stack: '1',
offset: true,
stackWeight: 2,
grid: {
borderColor: 'green'
border: {
color: 'green'
},
ticks: {
precision: 0
@@ -92,8 +92,8 @@ module.exports = {
stack: '1',
stackWeight: 3,
offset: true,
grid: {
borderColor: 'blue'
border: {
color: 'blue'
},
ticks: {
precision: 0

24
test/fixtures/core.layouts/stacked-boxes.js vendored
View File

@@ -18,8 +18,8 @@ module.exports = {
stack: '1',
offset: true,
bounds: 'data',
grid: {
borderColor: 'red'
border: {
color: 'red'
},
ticks: {
autoSkip: false,
@@ -33,8 +33,8 @@ module.exports = {
stack: '1',
offset: true,
bounds: 'data',
grid: {
borderColor: 'green'
border: {
color: 'green'
},
ticks: {
autoSkip: false,
@@ -48,8 +48,8 @@ module.exports = {
stack: '1',
offset: true,
bounds: 'data',
grid: {
borderColor: 'blue'
border: {
color: 'blue'
},
ticks: {
autoSkip: false,
@@ -62,8 +62,8 @@ module.exports = {
position: 'left',
stack: '1',
offset: true,
grid: {
borderColor: 'red'
border: {
color: 'red'
},
ticks: {
precision: 0
@@ -74,8 +74,8 @@ module.exports = {
position: 'left',
stack: '1',
offset: true,
grid: {
borderColor: 'green'
border: {
color: 'green'
},
ticks: {
precision: 0
@@ -86,8 +86,8 @@ module.exports = {
position: 'left',
stack: '1',
offset: true,
grid: {
borderColor: 'blue'
border: {
color: 'blue',
},
ticks: {
precision: 0

12
test/fixtures/core.scale/border-behind-elements.js vendored
View File

@@ -22,18 +22,18 @@ module.exports = {
ticks: {
display: false
},
grid: {
borderColor: 'red',
borderWidth: 5
border: {
color: 'red',
width: 5
}
},
x: {
ticks: {
display: false
},
grid: {
borderColor: 'red',
borderWidth: 5
border: {
color: 'red',
width: 5
}
}
}

12
test/fixtures/core.scale/cartesian-axis-border-settings.json vendored
View File

@@ -22,12 +22,14 @@
"min": -100,
"max": 100,
"grid": {
"borderColor": "blue",
"borderWidth": 5,
"color": "red",
"drawBorder": true,
"drawOnChartArea": false
},
"border": {
"display": true,
"color": "blue",
"width": 5
},
"ticks": {
"display": false
}
@@ -36,9 +38,11 @@
"axis": "y",
"min": -100,
"max": 100,
"border": {
"color": "red"
},
"grid": {
"color": "red",
"borderColor": "red",
"drawOnChartArea": false
},
"ticks": {

12
test/fixtures/core.scale/grid/border-over-grid.js vendored
View File

@@ -7,9 +7,11 @@ module.exports = {
position: {y: 0},
min: -10,
max: 10,
border: {
color: 'black',
width: 5
},
grid: {
borderColor: 'black',
borderWidth: 5,
color: 'lightGray',
lineWidth: 3,
},
@@ -21,9 +23,11 @@ module.exports = {
position: {x: 0},
min: -10,
max: 10,
border: {
color: 'black',
width: 5
},
grid: {
borderColor: 'black',
borderWidth: 5,
color: 'lightGray',
lineWidth: 3,
},

12
test/fixtures/core.scale/grid/colors.js vendored
View File

@@ -14,9 +14,11 @@ module.exports = {
ticks: {
display: false
},
border: {
color: 'blue',
width: 2,
},
grid: {
borderColor: 'blue',
borderWidth: 2,
color: 'green',
drawTicks: false,
}
@@ -25,9 +27,11 @@ module.exports = {
ticks: {
display: false
},
border: {
color: 'black',
width: 2,
},
grid: {
borderColor: 'black',
borderWidth: 2,
color: 'red',
drawTicks: false,
}

8
test/fixtures/core.scale/grid/scriptable-borderDash.js vendored
View File

@@ -7,8 +7,10 @@ module.exports = {
position: {y: 0},
min: -10,
max: 10,
border: {
dash: (ctx) => ctx.index % 2 === 0 ? [6, 3] : [],
},
grid: {
borderDash: (ctx) => ctx.index % 2 === 0 ? [6, 3] : [],
color: 'lightGray',
lineWidth: 3,
},
@@ -20,8 +22,10 @@ module.exports = {
position: {x: 0},
min: -10,
max: 10,
border: {
dash: (ctx) => ctx.index % 2 === 0 ? [6, 3] : [],
},
grid: {
borderDash: (ctx) => ctx.index % 2 === 0 ? [6, 3] : [],
color: 'lightGray',
lineWidth: 3,
},

12
test/fixtures/core.scale/label-offset-vertical-axes.json vendored
View File

@@ -15,17 +15,21 @@
"display": false
},
"grid":{
"display": false,
"drawBorder": false
"display": false
},
"border": {
"display": false
}
},
"y": {
"ticks": {
"labelOffset": 25
},
"border": {
"display": false
},
"grid":{
"display": false,
"drawBorder": false
"display": false
}
}
}

16
test/fixtures/core.scale/tick-drawing.json vendored
View File

@@ -15,9 +15,11 @@
"ticks": {
"display": false
},
"border": {
"display": false
},
"grid":{
"drawOnChartArea": false,
"drawBorder": false,
"color": "rgba(0, 0, 0, 1)"
}
},
@@ -27,9 +29,11 @@
"ticks": {
"display": false
},
"border": {
"display": false
},
"grid":{
"drawOnChartArea": false,
"drawBorder": false,
"color": "rgba(0, 0, 0, 1)"
}
},
@@ -43,10 +47,12 @@
"ticks": {
"display": false
},
"border": {
"display": false
},
"grid":{
"offset": false,
"drawOnChartArea": false,
"drawBorder": false,
"color": "rgba(0, 0, 0, 1)"
}
},
@@ -59,10 +65,12 @@
"ticks": {
"display": false
},
"border": {
"display": false
},
"grid":{
"offset": false,
"drawOnChartArea": false,
"drawBorder": false,
"color": "rgba(0, 0, 0, 1)"
}
}

9
test/fixtures/core.scale/tick-override-styles.json vendored
View File

@@ -15,9 +15,12 @@
"ticks": {
"display": false
},
"border": {
"display": false
},
"grid":{
"drawOnChartArea": false,
"drawBorder": false,
"color": "rgba(0, 0, 0, 1)",
"width": 1,
"tickColor": "rgba(255, 0, 0, 1)",
@@ -34,10 +37,12 @@
"ticks": {
"display": false
},
"border": {
"display": false
},
"grid":{
"offset": false,
"drawOnChartArea": false,
"drawBorder": false,
"color": "rgba(0, 0, 0, 1)",
"tickColor": "rgba(255, 0, 0, 1)",
"tickWidth": 5

11
test/fixtures/core.scale/x-axis-position-center.json vendored
View File

@@ -22,13 +22,16 @@
"axis": "x",
"min": -100,
"max": 100,
"border": {
"color": "red"
},
"grid": {
"color": "red",
"borderColor": "red",
"drawOnChartArea": false
},
"ticks": {
"display": true
"display": true,
"color": "red"
}
},
"y": {
@@ -36,9 +39,11 @@
"axis": "y",
"min": -100,
"max": 100,
"border": {
"color": "red"
},
"grid": {
"color": "red",
"borderColor": "red",
"drawOnChartArea": false
},
"ticks": {

8
test/fixtures/core.scale/x-axis-position-dynamic.json vendored
View File

@@ -24,9 +24,11 @@
"axis": "x",
"min": -100,
"max": 100,
"border": {
"color": "red"
},
"grid": {
"color": "red",
"borderColor": "red",
"drawOnChartArea": false
},
"ticks": {
@@ -38,9 +40,11 @@
"axis": "y",
"min": -100,
"max": 100,
"border": {
"color": "red"
},
"grid": {
"color": "red",
"borderColor": "red",
"drawOnChartArea": false
},
"ticks": {

8
test/fixtures/core.scale/y-axis-position-center.json vendored
View File

@@ -22,9 +22,11 @@
"axis": "x",
"min": -100,
"max": 100,
"border": {
"color": "red"
},
"grid": {
"color": "red",
"borderColor": "red",
"drawOnChartArea": false
},
"ticks": {
@@ -36,9 +38,11 @@
"axis": "y",
"min": -100,
"max": 100,
"border": {
"color": "red"
},
"grid": {
"color": "red",
"borderColor": "red",
"drawOnChartArea": false
},
"ticks": {

8
test/fixtures/core.scale/y-axis-position-dynamic.json vendored
View File

@@ -22,9 +22,11 @@
"axis": "x",
"min": -100,
"max": 100,
"border": {
"color": "red"
},
"grid": {
"color": "red",
"borderColor": "red",
"drawOnChartArea": false
},
"ticks": {
@@ -38,9 +40,11 @@
"axis": "y",
"min": -100,
"max": 100,
"border": {
"color": "red"
},
"grid": {
"color": "red",
"borderColor": "red",
"drawOnChartArea": false
},
"ticks": {

8
test/fixtures/scale.radialLinear/border-dash.json vendored
View File

@@ -10,9 +10,11 @@
"r": {
"grid": {
"color": "rgba(0, 0, 255, 0.5)",
"lineWidth": 1,
"borderDash": [4, 2],
"borderDashOffset": 2
"lineWidth": 1
},
"border": {
"dash": [4, 2],
"dashOffset": 2
},
"angleLines": {
"color": "rgba(0, 0, 255, 0.5)",

8
test/fixtures/scale.radialLinear/circular-border-dash.json vendored
View File

@@ -8,12 +8,14 @@
"responsive": false,
"scales": {
"r": {
"border": {
"dash": [4, 2],
"dashOffset": 2
},
"grid": {
"circular": true,
"color": "rgba(0, 0, 255, 0.5)",
"lineWidth": 1,
"borderDash": [4, 2],
"borderDashOffset": 2
"lineWidth": 1
},
"angleLines": {
"color": "rgba(0, 0, 255, 0.5)",

4
test/fixtures/scale.timeseries/financial-daily.js vendored
View File

@@ -46,8 +46,8 @@ module.exports = {
},
y: {
type: 'linear',
grid: {
drawBorder: false
border: {
display: false
}
}
}

4
test/specs/scale.linear.tests.js
View File

@@ -1119,7 +1119,9 @@ describe('Linear Scale', function() {
type: 'linear',
grid: {
drawTicks: false,
drawBorder: false
},
border: {
display: false
},
title: {
display: false,

4
test/specs/scale.time.tests.js
View File

@@ -1102,8 +1102,8 @@ describe('Time scale tests', function() {
},
y: {
type: 'linear',
grid: {
drawBorder: false
border: {
display: false
}
}
}

34
types/index.d.ts vendored
View File

@@ -2831,13 +2831,28 @@ export interface PluginChartOptions<TType extends ChartType> {
plugins: PluginOptionsByType<TType>;
}
export interface BorderOptions {
/**
* @default true
*/
display: boolean
/**
* @default []
*/
dash: Scriptable<number[], ScriptableScaleContext>;
/**
* @default 0
*/
dashOffset: Scriptable<number, ScriptableScaleContext>;
color: Color;
width: number;
}
export interface GridLineOptions {
/**
* @default true
*/
display: boolean;
borderColor: Color;
borderWidth: number;
/**
* @default false
*/
@@ -2846,23 +2861,10 @@ export interface GridLineOptions {
* @default 'rgba(0, 0, 0, 0.1)'
*/
color: ScriptableAndArray<Color, ScriptableScaleContext>;
/**
* @default []
*/
borderDash: Scriptable<number[], ScriptableScaleContext>;
/**
* @default 0
*/
borderDashOffset: Scriptable<number, ScriptableScaleContext>;
/**
* @default 1
*/
lineWidth: ScriptableAndArray<number, ScriptableScaleContext>;
/**
* @default true
*/
drawBorder: boolean;
/**
* @default true
*/
@@ -3092,6 +3094,8 @@ export interface CartesianScaleOptions extends CoreScaleOptions {
grid: GridLineOptions;
border: BorderOptions;
/** Options for the scale title. */
title: {
/** If true, displays the axis title. */