mirror of
https://github.com/chartjs/Chart.js.git
synced 2026-03-06 08:24:05 +01:00
Dissociate border options from grid options (#8823)
* Dissociate border options from grid options * Update docs
This commit is contained in:
Jukka Kurkela
@@ -6,14 +6,14 @@ Namespace: `options.scales[scaleId]`
|
||||
| ---- | ---- | ------- | -----------
|
||||
| `type` | `string` | | Type of scale being employed. Custom scales can be created and registered with a string key. This allows changing the type of an axis for a chart.
|
||||
| `alignToPixels` | `boolean` | `false` | Align pixel values to device pixels.
|
||||
| `backgroundColor` | [`Color`](../general/colors.md) | | Background color of the scale area.
|
||||
| `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.
|
||||
| `grid` | `object` | | Grid line configuration. [more...](./styling.md#grid-line-configuration)
|
||||
| `min` | `number` | | User defined minimum number for the scale, overrides minimum value from data. [more...](./index.md#axis-range-settings)
|
||||
| `max` | `number` | | User defined maximum number for the scale, overrides maximum value from data. [more...](./index.md#axis-range-settings)
|
||||
| `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)
|
||||
| `max` | `number` | | User defined maximum number for the scale, overrides maximum value from data. [more...](/axes/index.md#axis-range-settings)
|
||||
| `reverse` | `boolean` | `false` | Reverse the scale.
|
||||
| `stacked` | `boolean`\|`string` | `false` | Should the data be stacked. [more...](./index.md#stacking)
|
||||
| `suggestedMax` | `number` | | Adjustment used when calculating the maximum data value. [more...](./index.md#axis-range-settings)
|
||||
| `suggestedMin` | `number` | | Adjustment used when calculating the minimum data value. [more...](./index.md#axis-range-settings)
|
||||
| `ticks` | `object` | | Tick configuration. [more...](#tick-configuration)
|
||||
| `stacked` | `boolean`\|`string` | `false` | Should the data be stacked. [more...](/axes/index.md#stacking)
|
||||
| `suggestedMax` | `number` | | Adjustment used when calculating the maximum data value. [more...](/axes/index.md#axis-range-settings)
|
||||
| `suggestedMin` | `number` | | Adjustment used when calculating the minimum data value. [more...](/axes/index.md#axis-range-settings)
|
||||
| `ticks` | `object` | | Tick configuration. [more...](/axes/index.md#tick-configuration)
|
||||
| `weight` | `number` | `0` | The weight used to sort the axis. Higher weights are further away from the chart area.
|
||||
|
||||
@@ -4,12 +4,12 @@ Namespace: `options.scales[scaleId].ticks`
|
||||
|
||||
| Name | Type | Scriptable | Default | Description
|
||||
| ---- | ---- | :-------------------------------: | ------- | -----------
|
||||
| `callback` | `function` | | | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](../axes/labelling.md#creating-custom-tick-formats).
|
||||
| `callback` | `function` | | | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](/axes/labelling.md#creating-custom-tick-formats).
|
||||
| `display` | `boolean` | | `true` | If true, show tick labels.
|
||||
| `color` | [`Color`](../general/colors.md) | Yes | `Chart.defaults.color` | Color of ticks.
|
||||
| `font` | `Font` | Yes | `Chart.defaults.font` | See [Fonts](../general/fonts.md)
|
||||
| `major` | `object` | | `{}` | [Major ticks configuration](./styling.md#major-tick-configuration).
|
||||
| `color` | [`Color`](/general/colors.md) | Yes | `Chart.defaults.color` | Color of ticks.
|
||||
| `font` | `Font` | Yes | `Chart.defaults.font` | See [Fonts](/general/fonts.md)
|
||||
| `major` | `object` | | `{}` | [Major ticks configuration](/axes/styling.md#major-tick-configuration).
|
||||
| `padding` | `number` | | `3` | Sets the offset of the tick labels from the axis
|
||||
| `textStrokeColor` | [`Color`](../general/colors.md) | Yes | `` | The color of the stroke around the text.
|
||||
| `textStrokeColor` | [`Color`](/general/colors.md) | Yes | `` | The color of the stroke around the text.
|
||||
| `textStrokeWidth` | `number` | Yes | `0` | Stroke width around the text.
|
||||
| `z` | `number` | | `0` | z-index of tick layer. Useful when ticks are drawn on chart area. Values <= 0 are drawn under datasets, > 0 on top.
|
||||
|
||||
@@ -8,12 +8,12 @@ Namespace: `options.scales[scaleId].grid`, it defines options for the grid lines
|
||||
|
||||
| Name | Type | Scriptable | Indexable | Default | Description
|
||||
| ---- | ---- | :-------------------------------: | :-----------------------------: | ------- | -----------
|
||||
| `borderColor` | [`Color`](../general/colors.md) | | | | If set, used as the color of the border line. If unset, the first `color` option is resolved and used.
|
||||
| `borderWidth` | `number` | | | | If set, used as the width of the border line. If unset, the first `lineWidth` option is resolved and used.
|
||||
| `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[]` | | | `[]` | 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 chart only).
|
||||
| `color` | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'` | 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.
|
||||
| `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.
|
||||
|
||||
@@ -35,8 +35,7 @@ defaults.set('scale', {
|
||||
offset: false,
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
borderColor: (_ctx, options) => options.color,
|
||||
borderWidth: (_ctx, options) => options.lineWidth
|
||||
borderWidth: 1
|
||||
},
|
||||
|
||||
// scale title
|
||||
@@ -77,6 +76,7 @@ defaults.set('scale', {
|
||||
|
||||
defaults.route('scale.ticks', 'color', '', 'color');
|
||||
defaults.route('scale.grid', 'color', '', 'borderColor');
|
||||
defaults.route('scale.grid', 'borderColor', '', 'borderColor');
|
||||
defaults.route('scale.title', 'color', '', 'color');
|
||||
|
||||
defaults.describe('scale', {
|
||||
|
||||
@@ -1356,7 +1356,7 @@ export default class Scale extends Element {
|
||||
const grid = me.options.grid;
|
||||
const ctx = me.ctx;
|
||||
const chart = me.chart;
|
||||
const borderOpts = grid.setContext(me.getContext(0));
|
||||
const borderOpts = grid.setContext(me.getContext());
|
||||
const axisWidth = grid.drawBorder ? borderOpts.borderWidth : 0;
|
||||
const items = me._gridLineItems || (me._gridLineItems = me._computeGridLineItems(chartArea));
|
||||
let i, ilen;
|
||||
@@ -1407,8 +1407,7 @@ export default class Scale extends Element {
|
||||
|
||||
if (axisWidth) {
|
||||
// Draw the line at the edge of the axis
|
||||
const edgeOpts = grid.setContext(me.getContext(me._ticksLength - 1));
|
||||
const lastLineWidth = edgeOpts.lineWidth;
|
||||
const lastLineWidth = borderOpts.lineWidth;
|
||||
const borderValue = me._borderValue;
|
||||
let x1, x2, y1, y2;
|
||||
|
||||
@@ -1424,7 +1423,7 @@ export default class Scale extends Element {
|
||||
drawLine(
|
||||
{x: x1, y: y1},
|
||||
{x: x2, y: y2},
|
||||
{width: axisWidth, color: edgeOpts.borderColor});
|
||||
{width: axisWidth, color: borderOpts.borderColor});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -38,6 +38,7 @@
|
||||
"max": 100,
|
||||
"grid": {
|
||||
"color": "red",
|
||||
"borderColor": "red",
|
||||
"drawOnChartArea": false
|
||||
},
|
||||
"ticks": {
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
"max": 100,
|
||||
"grid": {
|
||||
"color": "red",
|
||||
"borderColor": "red",
|
||||
"drawOnChartArea": false
|
||||
},
|
||||
"ticks": {
|
||||
@@ -37,6 +38,7 @@
|
||||
"max": 100,
|
||||
"grid": {
|
||||
"color": "red",
|
||||
"borderColor": "red",
|
||||
"drawOnChartArea": false
|
||||
},
|
||||
"ticks": {
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
"max": 100,
|
||||
"grid": {
|
||||
"color": "red",
|
||||
"borderColor": "red",
|
||||
"drawOnChartArea": false
|
||||
},
|
||||
"ticks": {
|
||||
@@ -39,6 +40,7 @@
|
||||
"max": 100,
|
||||
"grid": {
|
||||
"color": "red",
|
||||
"borderColor": "red",
|
||||
"drawOnChartArea": false
|
||||
},
|
||||
"ticks": {
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
"max": 100,
|
||||
"grid": {
|
||||
"color": "red",
|
||||
"borderColor": "red",
|
||||
"drawOnChartArea": false
|
||||
},
|
||||
"ticks": {
|
||||
@@ -37,6 +38,7 @@
|
||||
"max": 100,
|
||||
"grid": {
|
||||
"color": "red",
|
||||
"borderColor": "red",
|
||||
"drawOnChartArea": false
|
||||
},
|
||||
"ticks": {
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
"max": 100,
|
||||
"grid": {
|
||||
"color": "red",
|
||||
"borderColor": "red",
|
||||
"drawOnChartArea": false
|
||||
},
|
||||
"ticks": {
|
||||
@@ -39,6 +40,7 @@
|
||||
"max": 100,
|
||||
"grid": {
|
||||
"color": "red",
|
||||
"borderColor": "red",
|
||||
"drawOnChartArea": false
|
||||
},
|
||||
"ticks": {
|
||||
|
||||
Reference in New Issue
Block a user