| `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)
| 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.
| `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.
| 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.
* 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.
},
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;
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
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', {
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;
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);
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;
* @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;
}
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);
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
this.drawTitle();
}
}, {
- z: gz + 1, // TODO, v4 move border options to its own object and add z
+ z: bz,
draw: () => {
this.drawBorder();
}
}
}
-function drawRadiusLine(scale, gridLineOpts, radius, labelCount) {
+function drawRadiusLine(scale, gridLineOpts, radius, labelCount, borderOpts) {
const ctx = scale.ctx;
const circular = gridLineOpts.circular;
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);
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;
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);
}
});
}
stackWeight: 2,
offset: true,
bounds: 'data',
- grid: {
- borderColor: 'red'
+ border: {
+ color: 'red'
},
ticks: {
autoSkip: false,
stackWeight: 2,
offset: true,
bounds: 'data',
- grid: {
- borderColor: 'green'
+ border: {
+ color: 'green'
},
ticks: {
autoSkip: false,
stackWeight: 6,
offset: true,
bounds: 'data',
- grid: {
- borderColor: 'blue'
+ border: {
+ color: 'blue'
},
ticks: {
autoSkip: false,
stack: '1',
stackWeight: 2,
offset: true,
- grid: {
- borderColor: 'red'
+ border: {
+ color: 'red'
},
ticks: {
precision: 0
stack: '1',
offset: true,
stackWeight: 2,
- grid: {
- borderColor: 'green'
+ border: {
+ color: 'green'
},
ticks: {
precision: 0
stack: '1',
stackWeight: 3,
offset: true,
- grid: {
- borderColor: 'blue'
+ border: {
+ color: 'blue'
},
ticks: {
precision: 0
stack: '1',
offset: true,
bounds: 'data',
- grid: {
- borderColor: 'red'
+ border: {
+ color: 'red'
},
ticks: {
autoSkip: false,
stack: '1',
offset: true,
bounds: 'data',
- grid: {
- borderColor: 'green'
+ border: {
+ color: 'green'
},
ticks: {
autoSkip: false,
stack: '1',
offset: true,
bounds: 'data',
- grid: {
- borderColor: 'blue'
+ border: {
+ color: 'blue'
},
ticks: {
autoSkip: false,
position: 'left',
stack: '1',
offset: true,
- grid: {
- borderColor: 'red'
+ border: {
+ color: 'red'
},
ticks: {
precision: 0
position: 'left',
stack: '1',
offset: true,
- grid: {
- borderColor: 'green'
+ border: {
+ color: 'green'
},
ticks: {
precision: 0
position: 'left',
stack: '1',
offset: true,
- grid: {
- borderColor: 'blue'
+ border: {
+ color: 'blue',
},
ticks: {
precision: 0
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
}
}
}
"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
}
"axis": "y",
"min": -100,
"max": 100,
+ "border": {
+ "color": "red"
+ },
"grid": {
"color": "red",
- "borderColor": "red",
"drawOnChartArea": false
},
"ticks": {
position: {y: 0},
min: -10,
max: 10,
+ border: {
+ color: 'black',
+ width: 5
+ },
grid: {
- borderColor: 'black',
- borderWidth: 5,
color: 'lightGray',
lineWidth: 3,
},
position: {x: 0},
min: -10,
max: 10,
+ border: {
+ color: 'black',
+ width: 5
+ },
grid: {
- borderColor: 'black',
- borderWidth: 5,
color: 'lightGray',
lineWidth: 3,
},
ticks: {
display: false
},
+ border: {
+ color: 'blue',
+ width: 2,
+ },
grid: {
- borderColor: 'blue',
- borderWidth: 2,
color: 'green',
drawTicks: false,
}
ticks: {
display: false
},
+ border: {
+ color: 'black',
+ width: 2,
+ },
grid: {
- borderColor: 'black',
- borderWidth: 2,
color: 'red',
drawTicks: false,
}
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,
},
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,
},
"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
}
}
}
"ticks": {
"display": false
},
+ "border": {
+ "display": false
+ },
"grid":{
"drawOnChartArea": false,
- "drawBorder": false,
"color": "rgba(0, 0, 0, 1)"
}
},
"ticks": {
"display": false
},
+ "border": {
+ "display": false
+ },
"grid":{
"drawOnChartArea": false,
- "drawBorder": false,
"color": "rgba(0, 0, 0, 1)"
}
},
"ticks": {
"display": false
},
+ "border": {
+ "display": false
+ },
"grid":{
"offset": false,
"drawOnChartArea": false,
- "drawBorder": false,
"color": "rgba(0, 0, 0, 1)"
}
},
"ticks": {
"display": false
},
+ "border": {
+ "display": false
+ },
"grid":{
"offset": false,
"drawOnChartArea": false,
- "drawBorder": false,
"color": "rgba(0, 0, 0, 1)"
}
}
"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)",
"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
"axis": "x",
"min": -100,
"max": 100,
+ "border": {
+ "color": "red"
+ },
"grid": {
"color": "red",
- "borderColor": "red",
"drawOnChartArea": false
},
"ticks": {
- "display": true
+ "display": true,
+ "color": "red"
}
},
"y": {
"axis": "y",
"min": -100,
"max": 100,
+ "border": {
+ "color": "red"
+ },
"grid": {
"color": "red",
- "borderColor": "red",
"drawOnChartArea": false
},
"ticks": {
"axis": "x",
"min": -100,
"max": 100,
+ "border": {
+ "color": "red"
+ },
"grid": {
"color": "red",
- "borderColor": "red",
"drawOnChartArea": false
},
"ticks": {
"axis": "y",
"min": -100,
"max": 100,
+ "border": {
+ "color": "red"
+ },
"grid": {
"color": "red",
- "borderColor": "red",
"drawOnChartArea": false
},
"ticks": {
"axis": "x",
"min": -100,
"max": 100,
+ "border": {
+ "color": "red"
+ },
"grid": {
"color": "red",
- "borderColor": "red",
"drawOnChartArea": false
},
"ticks": {
"axis": "y",
"min": -100,
"max": 100,
+ "border": {
+ "color": "red"
+ },
"grid": {
"color": "red",
- "borderColor": "red",
"drawOnChartArea": false
},
"ticks": {
"axis": "x",
"min": -100,
"max": 100,
+ "border": {
+ "color": "red"
+ },
"grid": {
"color": "red",
- "borderColor": "red",
"drawOnChartArea": false
},
"ticks": {
"axis": "y",
"min": -100,
"max": 100,
+ "border": {
+ "color": "red"
+ },
"grid": {
"color": "red",
- "borderColor": "red",
"drawOnChartArea": false
},
"ticks": {
"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)",
"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)",
},
y: {
type: 'linear',
- grid: {
- drawBorder: false
+ border: {
+ display: false
}
}
}
type: 'linear',
grid: {
drawTicks: false,
- drawBorder: false
+ },
+ border: {
+ display: false
},
title: {
display: false,
},
y: {
type: 'linear',
- grid: {
- drawBorder: false
+ border: {
+ display: false
}
}
}
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
*/
* @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
*/
grid: GridLineOptions;
+ border: BorderOptions;
+
/** Options for the scale title. */
title: {
/** If true, displays the axis title. */
projects / thirdparty / Chart.js.git / commitdiff
