archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Rename scale gridLines options to be clearer (#8628)

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/docs/axes/_common.md
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. | `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. | `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. | `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) | `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) | `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. | `reverse` | `boolean` | `false` | Reverse the scale.

4
docs/docs/axes/styling.mdx
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 ## 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 | 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. | `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. | `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. | `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. | `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 | `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. | `tickColor` | [`Color`](../general/colors.md) | Yes | Yes | | Color of the tick line. If unset, defaults to the grid line color.

8
docs/docs/charts/bar.mdx
View File

@ -213,7 +213,7 @@ The bar chart sets unique default values for the following configuration from th
| Name | Type | Default | Description | 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. | `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 ### Example scale configuration
@ -221,15 +221,15 @@ The bar chart sets unique default values for the following configuration from th
options = { options = {
scales: { scales: {
x: { x: {
gridLines: { grid: {
offsetGridLines: true 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. 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.

4
docs/docs/getting-started/v3-migration.md
View File

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

2
samples/charts/bar/multi-axis.html
View File

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

2
samples/charts/line/multi-axis.html
View File

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

2
samples/charts/scatter/multi-axis.html
View File

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

2
samples/scales/financial.html
View File

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

18
samples/scales/gridlines-display.html
View File

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

2
samples/scales/gridlines-scriptable.html
View File

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

2
samples/scales/gridlines-style.html
View File

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

4
src/controllers/controller.bar.js
View File

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

2
src/controllers/controller.polarArea.js
View File

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

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

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

2
src/plugins/plugin.filler.js
View File

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

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

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

10
test/fixtures/core.scale/backgroundColor.js vendored
View File

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

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

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

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

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

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

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

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

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

8
test/fixtures/core.scale/title/align-end.js vendored
View File

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

8
test/fixtures/core.scale/title/align-start.js vendored
View File

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

8
test/fixtures/core.scale/title/default.js vendored
View File

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

8
test/fixtures/core.scale/title/multi-line/align-end.js vendored
View File

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

8
test/fixtures/core.scale/title/multi-line/align-start.js vendored
View File

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

8
test/fixtures/core.scale/title/multi-line/default.js vendored
View File

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

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

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

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

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

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

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

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

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

2
test/fixtures/plugin.filler/fill-radar-boundary-end-circular.json vendored
View File

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

2
test/fixtures/plugin.filler/fill-radar-boundary-origin-circular.json vendored
View File

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

2
test/fixtures/plugin.filler/fill-radar-boundary-start-circular.json vendored
View File

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

2
test/fixtures/plugin.filler/fill-radar-value.json vendored
View File

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

2
test/fixtures/scale.radialLinear/anglelines-disable.json vendored
View File

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

2
test/fixtures/scale.radialLinear/anglelines-indexable.js vendored
View File

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

2
test/fixtures/scale.radialLinear/anglelines-scriptable.js vendored
View File

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

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

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

2
test/fixtures/scale.radialLinear/circular-backgroundColor.js vendored
View File

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

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

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

2
test/fixtures/scale.radialLinear/gridlines-disable.json vendored
View File

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

2
test/fixtures/scale.radialLinear/gridlines-no-z.json vendored
View File

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

2
test/fixtures/scale.radialLinear/gridlines-scriptable.js vendored
View File

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

2
test/fixtures/scale.radialLinear/gridlines-z.json vendored
View File

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

2
test/fixtures/scale.radialLinear/indexable-gridlines.json vendored
View File

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

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

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

16
test/specs/core.scale.tests.js
View File

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

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

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

2
test/specs/scale.radialLinear.tests.js
View File

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

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

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

6
types/index.esm.d.ts vendored
View File

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