Rename scale gridLines options to be clearer (#8628)

* Rename `options.gridLines` to `options.grid`

* Rename `offsetGridLines` to `offset`
This commit is contained in:
Evert Timberg 2021-03-13 12:49:09 -05:00 committed by GitHub
parent 9799dbd5a0
commit 6ac89cbb25
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
52 changed files with 137 additions and 135 deletions

View File

@ -7,7 +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.
| `backgroundColor` | [`Color`](../general/colors.md) | | Background color of the scale area.
| `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.
| `gridLines` | `object` | | Grid line configuration. [more...](./styling.mdx#grid-line-configuration)
| `grid` | `object` | | Grid line configuration. [more...](./styling.mdx#grid-line-configuration)
| `min` | `number` | | User defined minimum number for the scale, overrides minimum value from data. [more...](./index.mdx#axis-range-settings)
| `max` | `number` | | User defined maximum number for the scale, overrides maximum value from data. [more...](./index.mdx#axis-range-settings)
| `reverse` | `boolean` | `false` | Reverse the scale.

View File

@ -8,7 +8,7 @@ There are a number of options to allow styling an axis. There are settings to co
## Grid Line Configuration
Namespace: `options.scales[scaleId].gridLines`, it defines options for the grid lines that run perpendicular to the axis.
Namespace: `options.scales[scaleId].grid`, it defines options for the grid lines that run perpendicular to the axis.
| Name | Type | Scriptable | Indexable | Default | Description
| ---- | ---- | :-------------------------------: | :-----------------------------: | ------- | -----------
@ -23,7 +23,7 @@ Namespace: `options.scales[scaleId].gridLines`, it defines options for the grid
| `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.
| `offsetGridLines` | `boolean` | | | `false` | If true, grid lines will be shifted to be between labels. This is set to `true` for a bar chart by default.
| `offset` | `boolean` | | | `false` | If true, grid lines will be shifted to be between labels. This is set to `true` for a bar chart by default.
| `tickBorderDash` | `number[]` | | | | Length and spacing of the tick mark line. If not set, defaults to the grid line `borderDash` value.
| `tickBorderDashOffset` | `number` | Yes | Yes | | Offset for the line dash of the tick mark. If unset, defaults to the grid line `borderDashOffset` value
| `tickColor` | [`Color`](../general/colors.md) | Yes | Yes | | Color of the tick line. If unset, defaults to the grid line color.

View File

@ -213,7 +213,7 @@ The bar chart sets unique default values for the following configuration from th
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `offset` | `boolean` | `true` | If true, extra space is added to both edges and the axis is scaled to fit into the chart area.
| `gridLines.offsetGridLines` | `boolean` | `true` | If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval. If false, the grid line will go right down the middle of the bars. [more...](#offsetgridlines)
| `grid.offset` | `boolean` | `true` | If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval. If false, the grid line will go right down the middle of the bars. [more...](#offsetgridlines)
### Example scale configuration
@ -221,15 +221,15 @@ The bar chart sets unique default values for the following configuration from th
options = {
scales: {
x: {
gridLines: {
offsetGridLines: true
grid: {
offset: true
}
}
}
};
```
### offsetGridLines
### Offset Grid Lines
If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval, which is the space between the grid lines. If false, the grid line will go right down the middle of the bars. This is set to true for a category scale in a bar chart while false for other scales or chart types by default.

View File

@ -229,7 +229,9 @@ Animation system was completely rewritten in Chart.js v3. Each property can now
#### Ticks
* `options.gridLines.tickMarkLength` was renamed to `options.gridLines.tickLength`.
* `options.gridLines` was renamed to `options.grid`
* `options.gridLines.offsetGridLines` was renamed to `options.grid.offset`.
* `options.gridLines.tickMarkLength` was renamed to `options.grid.tickLength`.
* `options.ticks.fixedStepSize` is no longer used. Use `options.ticks.stepSize`.
* `options.ticks.major` and `options.ticks.minor` were replaced with scriptable options for tick fonts.
* `Chart.Ticks.formatters.linear` was renamed to `Chart.Ticks.formatters.numeric`.

View File

@ -86,7 +86,7 @@
type: 'linear',
display: true,
position: 'right',
gridLines: {
grid: {
drawOnChartArea: false
}
},

View File

@ -84,7 +84,7 @@
position: 'right',
// grid line settings
gridLines: {
grid: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
},

View File

@ -125,7 +125,7 @@
}
},
gridLines: {
grid: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
}
}

View File

@ -173,7 +173,7 @@
},
y: {
type: 'linear',
gridLines: {
grid: {
drawBorder: false
},
title: {

View File

@ -29,7 +29,7 @@
<body>
<div class="container"></div>
<script>
function createConfig(gridlines, title) {
function createConfig(grid, title) {
return {
type: 'line',
data: {
@ -58,10 +58,10 @@
},
scales: {
x: {
gridLines: gridlines
grid: grid
},
y: {
gridLines: gridlines,
grid: grid,
min: 0,
max: 100,
ticks: {
@ -78,30 +78,30 @@
[{
title: 'Display: true',
gridLines: {
grid: {
display: true
}
}, {
title: 'Display: false',
gridLines: {
grid: {
display: false
}
}, {
title: 'Display: false, no border',
gridLines: {
grid: {
display: false,
drawBorder: false
}
}, {
title: 'DrawOnChartArea: false',
gridLines: {
grid: {
display: true,
drawBorder: true,
drawOnChartArea: false,
}
}, {
title: 'DrawTicks: false',
gridLines: {
grid: {
display: true,
drawBorder: true,
drawOnChartArea: true,
@ -116,7 +116,7 @@
container.appendChild(div);
var ctx = canvas.getContext('2d');
var config = createConfig(details.gridLines, details.title);
var config = createConfig(details.grid, details.title);
new Chart(ctx, config);
});
};

View File

@ -47,7 +47,7 @@
},
scales: {
y: {
gridLines: {
grid: {
drawBorder: false,
color: function(context) {
if (context.tick.value > 0) {

View File

@ -47,7 +47,7 @@
},
scales: {
y: {
gridLines: {
grid: {
drawBorder: false,
color: ['pink', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']
},

View File

@ -535,8 +535,8 @@ BarController.overrides = {
_index_: {
type: 'category',
offset: true,
gridLines: {
offsetGridLines: true
grid: {
offset: true
}
},
_value_: {

View File

@ -187,7 +187,7 @@ PolarAreaController.overrides = {
display: false
},
beginAtZero: true,
gridLines: {
grid: {
circular: true
},
pointLabels: {

View File

@ -37,7 +37,7 @@ defaults.set('scale', {
grace: 0,
// grid line settings
gridLines: {
grid: {
display: true,
lineWidth: 1,
drawBorder: true,
@ -46,7 +46,7 @@ defaults.set('scale', {
tickLength: 10,
tickWidth: (_ctx, options) => options.lineWidth,
tickColor: (_ctx, options) => options.color,
offsetGridLines: false,
offset: false,
borderDash: [],
borderDashOffset: 0.0,
borderColor: (_ctx, options) => options.color,
@ -90,7 +90,7 @@ defaults.set('scale', {
});
defaults.route('scale.ticks', 'color', '', 'color');
defaults.route('scale.gridLines', 'color', '', 'borderColor');
defaults.route('scale.grid', 'color', '', 'borderColor');
defaults.route('scale.title', 'color', '', 'color');
defaults.describe('scale', {
@ -792,7 +792,7 @@ export default class Scale extends Element {
// Allow 3 pixels x2 padding either side for label readability
if (maxLabelWidth + 6 > tickWidth) {
tickWidth = maxWidth / (numTicks - (options.offset ? 0.5 : 1));
maxHeight = me.maxHeight - getTickMarkLength(options.gridLines)
maxHeight = me.maxHeight - getTickMarkLength(options.grid)
- tickOpts.padding - getTitleHeight(options.title, me.chart.options.font);
maxLabelDiagonal = Math.sqrt(maxLabelWidth * maxLabelWidth + maxLabelHeight * maxLabelHeight);
labelRotation = toDegrees(Math.min(
@ -825,7 +825,7 @@ export default class Scale extends Element {
const opts = me.options;
const tickOpts = opts.ticks;
const titleOpts = opts.title;
const gridLineOpts = opts.gridLines;
const gridLineOpts = opts.grid;
const display = me._isVisible();
const labelsBelowTicks = opts.position !== 'top' && me.axis === 'x';
const isHorizontal = me.isHorizontal();
@ -1254,15 +1254,15 @@ export default class Scale extends Element {
const axis = me.axis;
const chart = me.chart;
const options = me.options;
const {gridLines, position} = options;
const offsetGridLines = gridLines.offsetGridLines;
const {grid, position} = options;
const offset = grid.offset;
const isHorizontal = me.isHorizontal();
const ticks = me.ticks;
const ticksLength = ticks.length + (offsetGridLines ? 1 : 0);
const tl = getTickMarkLength(gridLines);
const ticksLength = ticks.length + (offset ? 1 : 0);
const tl = getTickMarkLength(grid);
const items = [];
const borderOpts = gridLines.setContext(me.getContext(0));
const borderOpts = grid.setContext(me.getContext(0));
const axisWidth = borderOpts.drawBorder ? borderOpts.borderWidth : 0;
const axisHalfWidth = axisWidth / 2;
const alignBorderValue = function(pixel) {
@ -1324,11 +1324,11 @@ export default class Scale extends Element {
}
for (i = 0; i < ticksLength; ++i) {
const optsAtIndex = gridLines.setContext(me.getContext(i));
const optsAtIndex = grid.setContext(me.getContext(i));
const lineWidth = optsAtIndex.lineWidth;
const lineColor = optsAtIndex.color;
const borderDash = gridLines.borderDash || [];
const borderDash = grid.borderDash || [];
const borderDashOffset = optsAtIndex.borderDashOffset;
const tickWidth = optsAtIndex.tickWidth;
@ -1336,7 +1336,7 @@ export default class Scale extends Element {
const tickBorderDash = optsAtIndex.tickBorderDash || [];
const tickBorderDashOffset = optsAtIndex.tickBorderDashOffset;
lineValue = getPixelForGridLine(me, i, offsetGridLines);
lineValue = getPixelForGridLine(me, i, offset);
// Skip if the pixel is out of the range
if (lineValue === undefined) {
@ -1388,7 +1388,7 @@ export default class Scale extends Element {
const isHorizontal = me.isHorizontal();
const ticks = me.ticks;
const {align, crossAlign, padding} = optionTicks;
const tl = getTickMarkLength(options.gridLines);
const tl = getTickMarkLength(options.grid);
const tickAndPadding = tl + padding;
const rotation = -toRadians(me.labelRotation);
const items = [];
@ -1609,20 +1609,20 @@ export default class Scale extends Element {
*/
drawGrid(chartArea) {
const me = this;
const gridLines = me.options.gridLines;
const grid = me.options.grid;
const ctx = me.ctx;
const chart = me.chart;
const borderOpts = gridLines.setContext(me.getContext(0));
const axisWidth = gridLines.drawBorder ? borderOpts.borderWidth : 0;
const borderOpts = grid.setContext(me.getContext(0));
const axisWidth = grid.drawBorder ? borderOpts.borderWidth : 0;
const items = me._gridLineItems || (me._gridLineItems = me._computeGridLineItems(chartArea));
let i, ilen;
if (gridLines.display) {
if (grid.display) {
for (i = 0, ilen = items.length; i < ilen; ++i) {
const item = items[i];
const {color, tickColor, tickWidth, width} = item;
if (width && color && gridLines.drawOnChartArea) {
if (width && color && grid.drawOnChartArea) {
ctx.save();
ctx.lineWidth = width;
ctx.strokeStyle = color;
@ -1638,7 +1638,7 @@ export default class Scale extends Element {
ctx.restore();
}
if (tickWidth && tickColor && gridLines.drawTicks) {
if (tickWidth && tickColor && grid.drawTicks) {
ctx.save();
ctx.lineWidth = tickWidth;
ctx.strokeStyle = tickColor;
@ -1658,7 +1658,7 @@ export default class Scale extends Element {
if (axisWidth) {
// Draw the line at the edge of the axis
const edgeOpts = gridLines.setContext(me.getContext(me._ticksLength - 1));
const edgeOpts = grid.setContext(me.getContext(me._ticksLength - 1));
const lastLineWidth = edgeOpts.lineWidth;
const borderValue = me._borderValue;
let x1, x2, y1, y2;
@ -1773,7 +1773,7 @@ export default class Scale extends Element {
const me = this;
const opts = me.options;
const tz = opts.ticks && opts.ticks.z || 0;
const gz = opts.gridLines && opts.gridLines.z || 0;
const gz = opts.grid && opts.grid.z || 0;
if (!me._isVisible() || tz === gz || me.draw !== Scale.prototype.draw) {
// backward compatibility: draw has been overridden by custom scale

View File

@ -148,7 +148,7 @@ function computeCircularBoundary(source) {
value = scale.getBaseValue();
}
if (options.gridLines.circular) {
if (options.grid.circular) {
center = scale.getPointPositionForValue(0, start);
return new simpleArc({
x: center.x,

View File

@ -429,7 +429,7 @@ export default class RadialLinearScale extends LinearScaleBase {
*/
drawBackground() {
const me = this;
const {backgroundColor, gridLines: {circular}} = me.options;
const {backgroundColor, grid: {circular}} = me.options;
if (backgroundColor) {
const ctx = me.ctx;
ctx.save();
@ -449,7 +449,7 @@ export default class RadialLinearScale extends LinearScaleBase {
const me = this;
const ctx = me.ctx;
const opts = me.options;
const {angleLines, gridLines} = opts;
const {angleLines, grid} = opts;
const labelCount = me.getLabels().length;
let i, offset, position;
@ -458,11 +458,11 @@ export default class RadialLinearScale extends LinearScaleBase {
drawPointLabels(me, labelCount);
}
if (gridLines.display) {
if (grid.display) {
me.ticks.forEach((tick, index) => {
if (index !== 0) {
offset = me.getDistanceFromCenterForValue(tick.value);
const optsAtIndex = gridLines.setContext(me.getContext(index - 1));
const optsAtIndex = grid.setContext(me.getContext(index - 1));
drawRadiusLine(me, optsAtIndex, offset, labelCount);
}
});
@ -574,7 +574,7 @@ RadialLinearScale.defaults = {
borderDashOffset: 0.0
},
gridLines: {
grid: {
circular: false
},
@ -624,6 +624,6 @@ RadialLinearScale.defaultRoutes = {
RadialLinearScale.descriptors = {
angleLines: {
_fallback: 'gridLines'
_fallback: 'grid'
}
};

View File

@ -1,7 +1,7 @@
const ticks = {
display: false
};
const gridLines = {
const grid = {
display: false
};
const title = {
@ -19,7 +19,7 @@ module.exports = {
backgroundColor: 'red',
position: 'top',
ticks,
gridLines,
grid,
title
},
left: {
@ -27,7 +27,7 @@ module.exports = {
backgroundColor: 'green',
position: 'left',
ticks,
gridLines,
grid,
title
},
bottom: {
@ -35,7 +35,7 @@ module.exports = {
backgroundColor: 'blue',
position: 'bottom',
ticks,
gridLines,
grid,
title
},
right: {
@ -43,7 +43,7 @@ module.exports = {
backgroundColor: 'gray',
position: 'right',
ticks,
gridLines,
grid,
title
},
}

View File

@ -21,7 +21,7 @@
"axis": "x",
"min": -100,
"max": 100,
"gridLines": {
"grid": {
"borderColor": "blue",
"borderWidth": 5,
"color": "red",
@ -36,7 +36,7 @@
"axis": "y",
"min": -100,
"max": 100,
"gridLines": {
"grid": {
"color": "red",
"drawOnChartArea": false
},

View File

@ -14,7 +14,7 @@
"ticks": {
"display": false
},
"gridLines":{
"grid":{
"display": false,
"drawBorder": false
}
@ -23,7 +23,7 @@
"ticks": {
"labelOffset": 25
},
"gridLines":{
"grid":{
"display": false,
"drawBorder": false
}

View File

@ -15,7 +15,7 @@
"ticks": {
"display": false
},
"gridLines":{
"grid":{
"drawOnChartArea": false,
"drawBorder": false,
"color": "rgba(0, 0, 0, 1)"
@ -27,7 +27,7 @@
"ticks": {
"display": false
},
"gridLines":{
"grid":{
"drawOnChartArea": false,
"drawBorder": false,
"color": "rgba(0, 0, 0, 1)"
@ -43,8 +43,8 @@
"ticks": {
"display": false
},
"gridLines":{
"offsetGridLines": false,
"grid":{
"offset": false,
"drawOnChartArea": false,
"drawBorder": false,
"color": "rgba(0, 0, 0, 1)"
@ -59,8 +59,8 @@
"ticks": {
"display": false
},
"gridLines":{
"offsetGridLines": false,
"grid":{
"offset": false,
"drawOnChartArea": false,
"drawBorder": false,
"color": "rgba(0, 0, 0, 1)"

View File

@ -15,7 +15,7 @@
"ticks": {
"display": false
},
"gridLines":{
"grid":{
"drawOnChartArea": false,
"drawBorder": false,
"color": "rgba(0, 0, 0, 1)",
@ -34,8 +34,8 @@
"ticks": {
"display": false
},
"gridLines":{
"offsetGridLines": false,
"grid":{
"offset": false,
"drawOnChartArea": false,
"drawBorder": false,
"color": "rgba(0, 0, 0, 1)",

View File

@ -10,7 +10,7 @@ module.exports = {
ticks: {
display: false
},
gridLines: {
grid: {
display: false
},
title: {
@ -25,7 +25,7 @@ module.exports = {
ticks: {
display: false
},
gridLines: {
grid: {
display: false
},
title: {
@ -40,7 +40,7 @@ module.exports = {
ticks: {
display: false
},
gridLines: {
grid: {
display: false
},
title: {
@ -55,7 +55,7 @@ module.exports = {
ticks: {
display: false
},
gridLines: {
grid: {
display: false
},
title: {

View File

@ -10,7 +10,7 @@ module.exports = {
ticks: {
display: false
},
gridLines: {
grid: {
display: false
},
title: {
@ -25,7 +25,7 @@ module.exports = {
ticks: {
display: false
},
gridLines: {
grid: {
display: false
},
title: {
@ -40,7 +40,7 @@ module.exports = {
ticks: {
display: false
},
gridLines: {
grid: {
display: false
},
title: {
@ -55,7 +55,7 @@ module.exports = {
ticks: {
display: false
},
gridLines: {
grid: {
display: false
},
title: {

View File

@ -10,7 +10,7 @@ module.exports = {
ticks: {
display: false
},
gridLines: {
grid: {
display: false
},
title: {
@ -24,7 +24,7 @@ module.exports = {
ticks: {
display: false
},
gridLines: {
grid: {
display: false
},
title: {
@ -38,7 +38,7 @@ module.exports = {
ticks: {
display: false
},
gridLines: {
grid: {
display: false
},
title: {
@ -52,7 +52,7 @@ module.exports = {
ticks: {
display: false
},
gridLines: {
grid: {
display: false
},
title: {

View File

@ -10,7 +10,7 @@ module.exports = {
ticks: {
display: false
},
gridLines: {
grid: {
display: false
},
title: {
@ -25,7 +25,7 @@ module.exports = {
ticks: {
display: false
},
gridLines: {
grid: {
display: false
},
title: {
@ -40,7 +40,7 @@ module.exports = {
ticks: {
display: false
},
gridLines: {
grid: {
display: false
},
title: {
@ -55,7 +55,7 @@ module.exports = {
ticks: {
display: false
},
gridLines: {
grid: {
display: false
},
title: {

View File

@ -10,7 +10,7 @@ module.exports = {
ticks: {
display: false
},
gridLines: {
grid: {
display: false
},
title: {
@ -25,7 +25,7 @@ module.exports = {
ticks: {
display: false
},
gridLines: {
grid: {
display: false
},
title: {
@ -40,7 +40,7 @@ module.exports = {
ticks: {
display: false
},
gridLines: {
grid: {
display: false
},
title: {
@ -55,7 +55,7 @@ module.exports = {
ticks: {
display: false
},
gridLines: {
grid: {
display: false
},
title: {

View File

@ -10,7 +10,7 @@ module.exports = {
ticks: {
display: false
},
gridLines: {
grid: {
display: false
},
title: {
@ -24,7 +24,7 @@ module.exports = {
ticks: {
display: false
},
gridLines: {
grid: {
display: false
},
title: {
@ -38,7 +38,7 @@ module.exports = {
ticks: {
display: false
},
gridLines: {
grid: {
display: false
},
title: {
@ -52,7 +52,7 @@ module.exports = {
ticks: {
display: false
},
gridLines: {
grid: {
display: false
},
title: {

View File

@ -22,7 +22,7 @@
"axis": "x",
"min": -100,
"max": 100,
"gridLines": {
"grid": {
"color": "red",
"drawOnChartArea": false
},
@ -35,7 +35,7 @@
"axis": "y",
"min": -100,
"max": 100,
"gridLines": {
"grid": {
"color": "red",
"drawOnChartArea": false
},

View File

@ -24,7 +24,7 @@
"axis": "x",
"min": -100,
"max": 100,
"gridLines": {
"grid": {
"color": "red",
"drawOnChartArea": false
},
@ -37,7 +37,7 @@
"axis": "y",
"min": -100,
"max": 100,
"gridLines": {
"grid": {
"color": "red",
"drawOnChartArea": false
},

View File

@ -22,7 +22,7 @@
"axis": "x",
"min": -100,
"max": 100,
"gridLines": {
"grid": {
"color": "red",
"drawOnChartArea": false
},
@ -35,7 +35,7 @@
"axis": "y",
"min": -100,
"max": 100,
"gridLines": {
"grid": {
"color": "red",
"drawOnChartArea": false
},

View File

@ -22,7 +22,7 @@
"axis": "x",
"min": -100,
"max": 100,
"gridLines": {
"grid": {
"color": "red",
"drawOnChartArea": false
},
@ -37,7 +37,7 @@
"axis": "y",
"min": -100,
"max": 100,
"gridLines": {
"grid": {
"color": "red",
"drawOnChartArea": false
},

View File

@ -28,7 +28,7 @@
"scales": {
"r": {
"display": false,
"gridLines": {
"grid": {
"circular": true
}
}

View File

@ -28,7 +28,7 @@
"scales": {
"r": {
"display": false,
"gridLines": {
"grid": {
"circular": true
}
}

View File

@ -28,7 +28,7 @@
"scales": {
"r": {
"display": false,
"gridLines": {
"grid": {
"circular": true
}
}

View File

@ -16,7 +16,7 @@
"scales": {
"r": {
"display": false,
"gridLines": {
"grid": {
"circular": true
}
}

View File

@ -8,7 +8,7 @@
"responsive": false,
"scales": {
"r": {
"gridLines": {
"grid": {
"color": "rgb(0, 0, 0)",
"lineWidth": 1
},

View File

@ -8,7 +8,7 @@ module.exports = {
responsive: false,
scales: {
r: {
gridLines: {
grid: {
display: true,
},
angleLines: {

View File

@ -8,7 +8,7 @@ module.exports = {
responsive: false,
scales: {
r: {
gridLines: {
grid: {
display: true,
},
angleLines: {

View File

@ -8,7 +8,7 @@
"responsive": false,
"scales": {
"r": {
"gridLines": {
"grid": {
"color": "rgba(0, 0, 255, 0.5)",
"lineWidth": 1,
"borderDash": [4, 2],

View File

@ -21,7 +21,7 @@ module.exports = {
backgroundColor: '#00FF00',
min: 0,
max: 3,
gridLines: {
grid: {
circular: true
},
pointLabels: {

View File

@ -8,7 +8,7 @@
"responsive": false,
"scales": {
"r": {
"gridLines": {
"grid": {
"circular": true,
"color": "rgba(0, 0, 255, 0.5)",
"lineWidth": 1,

View File

@ -8,7 +8,7 @@
"responsive": false,
"scales": {
"r": {
"gridLines": {
"grid": {
"display": false
},
"angleLines": {

View File

@ -14,7 +14,7 @@
"responsive": false,
"scales": {
"r": {
"gridLines": {
"grid": {
"color": "rgba(0, 0, 0, 1)",
"lineWidth": 1
},

View File

@ -8,7 +8,7 @@ module.exports = {
responsive: false,
scales: {
r: {
gridLines: {
grid: {
display: true,
color: function(context) {
return context.index % 2 === 0 ? 'green' : 'red';

View File

@ -14,7 +14,7 @@
"responsive": false,
"scales": {
"r": {
"gridLines": {
"grid": {
"color": "rgba(0, 0, 0, 1)",
"lineWidth": 1,
"z": 1

View File

@ -8,7 +8,7 @@
"responsive": false,
"scales": {
"r": {
"gridLines": {
"grid": {
"display": true,
"color": [
"rgba(0, 0, 0, 0.5)",

View File

@ -45,7 +45,7 @@ module.exports = {
},
y: {
type: 'linear',
gridLines: {
grid: {
drawBorder: false
}
}

View File

@ -130,8 +130,8 @@ describe('Core.scale', function() {
options: {
scales: {
x: {
gridLines: {
offsetGridLines: test.offsetGridLines,
grid: {
offset: test.offsetGridLines,
drawTicks: false
},
ticks: {
@ -178,8 +178,8 @@ describe('Core.scale', function() {
},
y: {
type: 'category',
gridLines: {
offsetGridLines: test.offsetGridLines,
grid: {
offset: test.offsetGridLines,
drawTicks: false
},
ticks: {
@ -466,7 +466,7 @@ describe('Core.scale', function() {
scales: {
x: {
type: 'customScale',
gridLines: {
grid: {
z: 10
},
ticks: {
@ -492,7 +492,7 @@ describe('Core.scale', function() {
ticks: {
z: 10
},
gridLines: {
grid: {
z: 10
}
}
@ -528,7 +528,7 @@ describe('Core.scale', function() {
scales: {
x: {
type: 'linear',
gridLines: {
grid: {
z: 11
}
}
@ -547,7 +547,7 @@ describe('Core.scale', function() {
ticks: {
z: 10
},
gridLines: {
grid: {
z: 11
}
}

View File

@ -953,7 +953,7 @@ describe('Linear Scale', function() {
},
y: {
type: 'linear',
gridLines: {
grid: {
drawTicks: false,
drawBorder: false
},

View File

@ -27,7 +27,7 @@ describe('Test the radial linear scale', function() {
borderDashOffset: 0.0
},
gridLines: {
grid: {
circular: false
},

View File

@ -1101,7 +1101,7 @@ describe('Time scale tests', function() {
},
y: {
type: 'linear',
gridLines: {
grid: {
drawBorder: false
}
}

View File

@ -2619,7 +2619,7 @@ export interface GridLineOptions {
/**
* @default false
*/
offsetGridLines: boolean;
offset: boolean;
}
export interface TickOptions {
@ -2696,7 +2696,7 @@ export interface CartesianScaleOptions extends CoreScaleOptions {
*/
offset: boolean;
gridLines: GridLineOptions;
grid: GridLineOptions;
title: {
display: boolean;
@ -2993,7 +2993,7 @@ export type RadialLinearScaleOptions = CoreScaleOptions & {
*/
beginAtZero: boolean;
gridLines: GridLineOptions;
grid: GridLineOptions;
/**
* User defined minimum number for the scale, overrides minimum value from data.