| `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.
## 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
| ---- | ---- | :-------------------------------: | :-----------------------------: | ------- | -----------
| `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.
| 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
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.
#### 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`.
type: 'linear',
display: true,
position: 'right',
- gridLines: {
+ grid: {
drawOnChartArea: false
}
},
position: 'right',
// grid line settings
- gridLines: {
+ grid: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
},
}
},
- gridLines: {
+ grid: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
}
}
},
y: {
type: 'linear',
- gridLines: {
+ grid: {
drawBorder: false
},
title: {
<body>
<div class="container"></div>
<script>
- function createConfig(gridlines, title) {
+ function createConfig(grid, title) {
return {
type: 'line',
data: {
},
scales: {
x: {
- gridLines: gridlines
+ grid: grid
},
y: {
- gridLines: gridlines,
+ grid: grid,
min: 0,
max: 100,
ticks: {
[{
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,
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);
});
};
},
scales: {
y: {
- gridLines: {
+ grid: {
drawBorder: false,
color: function(context) {
if (context.tick.value > 0) {
},
scales: {
y: {
- gridLines: {
+ grid: {
drawBorder: false,
color: ['pink', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']
},
_index_: {
type: 'category',
offset: true,
- gridLines: {
- offsetGridLines: true
+ grid: {
+ offset: true
}
},
_value_: {
display: false
},
beginAtZero: true,
- gridLines: {
+ grid: {
circular: true
},
pointLabels: {
grace: 0,
// grid line settings
- gridLines: {
+ grid: {
display: true,
lineWidth: 1,
drawBorder: true,
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,
});
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', {
// 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(
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();
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) {
}
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;
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) {
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 = [];
*/
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;
ctx.restore();
}
- if (tickWidth && tickColor && gridLines.drawTicks) {
+ if (tickWidth && tickColor && grid.drawTicks) {
ctx.save();
ctx.lineWidth = tickWidth;
ctx.strokeStyle = tickColor;
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;
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
value = scale.getBaseValue();
}
- if (options.gridLines.circular) {
+ if (options.grid.circular) {
center = scale.getPointPositionForValue(0, start);
return new simpleArc({
x: center.x,
*/
drawBackground() {
const me = this;
- const {backgroundColor, gridLines: {circular}} = me.options;
+ const {backgroundColor, grid: {circular}} = me.options;
if (backgroundColor) {
const ctx = me.ctx;
ctx.save();
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;
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);
}
});
borderDashOffset: 0.0
},
- gridLines: {
+ grid: {
circular: false
},
RadialLinearScale.descriptors = {
angleLines: {
- _fallback: 'gridLines'
+ _fallback: 'grid'
}
};
const ticks = {
display: false
};
-const gridLines = {
+const grid = {
display: false
};
const title = {
backgroundColor: 'red',
position: 'top',
ticks,
- gridLines,
+ grid,
title
},
left: {
backgroundColor: 'green',
position: 'left',
ticks,
- gridLines,
+ grid,
title
},
bottom: {
backgroundColor: 'blue',
position: 'bottom',
ticks,
- gridLines,
+ grid,
title
},
right: {
backgroundColor: 'gray',
position: 'right',
ticks,
- gridLines,
+ grid,
title
},
}
"axis": "x",
"min": -100,
"max": 100,
- "gridLines": {
+ "grid": {
"borderColor": "blue",
"borderWidth": 5,
"color": "red",
"axis": "y",
"min": -100,
"max": 100,
- "gridLines": {
+ "grid": {
"color": "red",
"drawOnChartArea": false
},
"ticks": {
"display": false
},
- "gridLines":{
+ "grid":{
"display": false,
"drawBorder": false
}
"ticks": {
"labelOffset": 25
},
- "gridLines":{
+ "grid":{
"display": false,
"drawBorder": false
}
"ticks": {
"display": false
},
- "gridLines":{
+ "grid":{
"drawOnChartArea": false,
"drawBorder": false,
"color": "rgba(0, 0, 0, 1)"
"ticks": {
"display": false
},
- "gridLines":{
+ "grid":{
"drawOnChartArea": false,
"drawBorder": false,
"color": "rgba(0, 0, 0, 1)"
"ticks": {
"display": false
},
- "gridLines":{
- "offsetGridLines": false,
+ "grid":{
+ "offset": false,
"drawOnChartArea": false,
"drawBorder": false,
"color": "rgba(0, 0, 0, 1)"
"ticks": {
"display": false
},
- "gridLines":{
- "offsetGridLines": false,
+ "grid":{
+ "offset": false,
"drawOnChartArea": false,
"drawBorder": false,
"color": "rgba(0, 0, 0, 1)"
"ticks": {
"display": false
},
- "gridLines":{
+ "grid":{
"drawOnChartArea": false,
"drawBorder": false,
"color": "rgba(0, 0, 0, 1)",
"ticks": {
"display": false
},
- "gridLines":{
- "offsetGridLines": false,
+ "grid":{
+ "offset": false,
"drawOnChartArea": false,
"drawBorder": false,
"color": "rgba(0, 0, 0, 1)",
ticks: {
display: false
},
- gridLines: {
+ grid: {
display: false
},
title: {
ticks: {
display: false
},
- gridLines: {
+ grid: {
display: false
},
title: {
ticks: {
display: false
},
- gridLines: {
+ grid: {
display: false
},
title: {
ticks: {
display: false
},
- gridLines: {
+ grid: {
display: false
},
title: {
ticks: {
display: false
},
- gridLines: {
+ grid: {
display: false
},
title: {
ticks: {
display: false
},
- gridLines: {
+ grid: {
display: false
},
title: {
ticks: {
display: false
},
- gridLines: {
+ grid: {
display: false
},
title: {
ticks: {
display: false
},
- gridLines: {
+ grid: {
display: false
},
title: {
ticks: {
display: false
},
- gridLines: {
+ grid: {
display: false
},
title: {
ticks: {
display: false
},
- gridLines: {
+ grid: {
display: false
},
title: {
ticks: {
display: false
},
- gridLines: {
+ grid: {
display: false
},
title: {
ticks: {
display: false
},
- gridLines: {
+ grid: {
display: false
},
title: {
ticks: {
display: false
},
- gridLines: {
+ grid: {
display: false
},
title: {
ticks: {
display: false
},
- gridLines: {
+ grid: {
display: false
},
title: {
ticks: {
display: false
},
- gridLines: {
+ grid: {
display: false
},
title: {
ticks: {
display: false
},
- gridLines: {
+ grid: {
display: false
},
title: {
ticks: {
display: false
},
- gridLines: {
+ grid: {
display: false
},
title: {
ticks: {
display: false
},
- gridLines: {
+ grid: {
display: false
},
title: {
ticks: {
display: false
},
- gridLines: {
+ grid: {
display: false
},
title: {
ticks: {
display: false
},
- gridLines: {
+ grid: {
display: false
},
title: {
ticks: {
display: false
},
- gridLines: {
+ grid: {
display: false
},
title: {
ticks: {
display: false
},
- gridLines: {
+ grid: {
display: false
},
title: {
ticks: {
display: false
},
- gridLines: {
+ grid: {
display: false
},
title: {
ticks: {
display: false
},
- gridLines: {
+ grid: {
display: false
},
title: {
"axis": "x",
"min": -100,
"max": 100,
- "gridLines": {
+ "grid": {
"color": "red",
"drawOnChartArea": false
},
"axis": "y",
"min": -100,
"max": 100,
- "gridLines": {
+ "grid": {
"color": "red",
"drawOnChartArea": false
},
"axis": "x",
"min": -100,
"max": 100,
- "gridLines": {
+ "grid": {
"color": "red",
"drawOnChartArea": false
},
"axis": "y",
"min": -100,
"max": 100,
- "gridLines": {
+ "grid": {
"color": "red",
"drawOnChartArea": false
},
"axis": "x",
"min": -100,
"max": 100,
- "gridLines": {
+ "grid": {
"color": "red",
"drawOnChartArea": false
},
"axis": "y",
"min": -100,
"max": 100,
- "gridLines": {
+ "grid": {
"color": "red",
"drawOnChartArea": false
},
"axis": "x",
"min": -100,
"max": 100,
- "gridLines": {
+ "grid": {
"color": "red",
"drawOnChartArea": false
},
"axis": "y",
"min": -100,
"max": 100,
- "gridLines": {
+ "grid": {
"color": "red",
"drawOnChartArea": false
},
"scales": {
"r": {
"display": false,
- "gridLines": {
+ "grid": {
"circular": true
}
}
"scales": {
"r": {
"display": false,
- "gridLines": {
+ "grid": {
"circular": true
}
}
"scales": {
"r": {
"display": false,
- "gridLines": {
+ "grid": {
"circular": true
}
}
"scales": {
"r": {
"display": false,
- "gridLines": {
+ "grid": {
"circular": true
}
}
"responsive": false,
"scales": {
"r": {
- "gridLines": {
+ "grid": {
"color": "rgb(0, 0, 0)",
"lineWidth": 1
},
responsive: false,
scales: {
r: {
- gridLines: {
+ grid: {
display: true,
},
angleLines: {
responsive: false,
scales: {
r: {
- gridLines: {
+ grid: {
display: true,
},
angleLines: {
"responsive": false,
"scales": {
"r": {
- "gridLines": {
+ "grid": {
"color": "rgba(0, 0, 255, 0.5)",
"lineWidth": 1,
"borderDash": [4, 2],
backgroundColor: '#00FF00',
min: 0,
max: 3,
- gridLines: {
+ grid: {
circular: true
},
pointLabels: {
"responsive": false,
"scales": {
"r": {
- "gridLines": {
+ "grid": {
"circular": true,
"color": "rgba(0, 0, 255, 0.5)",
"lineWidth": 1,
"responsive": false,
"scales": {
"r": {
- "gridLines": {
+ "grid": {
"display": false
},
"angleLines": {
"responsive": false,
"scales": {
"r": {
- "gridLines": {
+ "grid": {
"color": "rgba(0, 0, 0, 1)",
"lineWidth": 1
},
responsive: false,
scales: {
r: {
- gridLines: {
+ grid: {
display: true,
color: function(context) {
return context.index % 2 === 0 ? 'green' : 'red';
"responsive": false,
"scales": {
"r": {
- "gridLines": {
+ "grid": {
"color": "rgba(0, 0, 0, 1)",
"lineWidth": 1,
"z": 1
"responsive": false,
"scales": {
"r": {
- "gridLines": {
+ "grid": {
"display": true,
"color": [
"rgba(0, 0, 0, 0.5)",
},
y: {
type: 'linear',
- gridLines: {
+ grid: {
drawBorder: false
}
}
options: {
scales: {
x: {
- gridLines: {
- offsetGridLines: test.offsetGridLines,
+ grid: {
+ offset: test.offsetGridLines,
drawTicks: false
},
ticks: {
},
y: {
type: 'category',
- gridLines: {
- offsetGridLines: test.offsetGridLines,
+ grid: {
+ offset: test.offsetGridLines,
drawTicks: false
},
ticks: {
scales: {
x: {
type: 'customScale',
- gridLines: {
+ grid: {
z: 10
},
ticks: {
ticks: {
z: 10
},
- gridLines: {
+ grid: {
z: 10
}
}
scales: {
x: {
type: 'linear',
- gridLines: {
+ grid: {
z: 11
}
}
ticks: {
z: 10
},
- gridLines: {
+ grid: {
z: 11
}
}
},
y: {
type: 'linear',
- gridLines: {
+ grid: {
drawTicks: false,
drawBorder: false
},
borderDashOffset: 0.0
},
- gridLines: {
+ grid: {
circular: false
},
},
y: {
type: 'linear',
- gridLines: {
+ grid: {
drawBorder: false
}
}
/**
* @default false
*/
- offsetGridLines: boolean;
+ offset: boolean;
}
export interface TickOptions {
*/
offset: boolean;
- gridLines: GridLineOptions;
+ grid: GridLineOptions;
title: {
display: boolean;
*/
beginAtZero: boolean;
- gridLines: GridLineOptions;
+ grid: GridLineOptions;
/**
* User defined minimum number for the scale, overrides minimum value from data.
projects / thirdparty / Chart.js.git / commitdiff
