From: Evert Timberg Date: Tue, 22 Dec 2020 16:27:57 +0000 (-0500) Subject: Add options to configure tick styling independent of grid lines (#8215) X-Git-Tag: v3.0.0-beta.8~39 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=55a26e69bab9b6d9ec1463198b78ab10779f0037;p=thirdparty%2FChart.js.git Add options to configure tick styling independent of grid lines (#8215) * Enable axis tick styling independent of grid lines * Change tickMarkLength to tickLength for consistency with new options * Add new scale options to TS definitions --- diff --git a/docs/docs/axes/styling.mdx b/docs/docs/axes/styling.mdx index ae079fcf7..1620e61a2 100644 --- a/docs/docs/axes/styling.mdx +++ b/docs/docs/axes/styling.mdx @@ -12,19 +12,24 @@ The grid line configuration is nested under the scale configuration in the `grid | Name | Type | Scriptable | Indexable | Default | Description | ---- | ---- | :-------------------------------: | :-----------------------------: | ------- | ----------- -| `display` | `boolean` | | | `true` | If false, do not display grid lines for this axis. | `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. -| `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. | `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). -| `lineWidth` | `number` | Yes | Yes | `1` | Stroke width of grid lines. +| `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. +| `display` | `boolean` | | | `true` | If false, do not display grid lines for this axis. | `drawBorder` | `boolean` | | | `true` | If true, draw a border at the edge between the axis and the chart area. | `drawOnChartArea` | `boolean` | | | `true` | If true, draw lines on the chart area inside the axis lines. This is useful when there are multiple axes and you need to control which grid lines are drawn. | `drawTicks` | `boolean` | | | `true` | If true, draw lines beside the ticks in the axis area beside the chart. -| `tickMarkLength` | `number` | | | `10` | Length in pixels that the grid lines will draw into the axis area. +| `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. +| `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. +| `tickLength` | `number` | | | `10` | Length in pixels that the grid lines will draw into the axis area. +| `tickWidth` | `number` | Yes | Yes | | Width of the tick mark in pixels. If unset, defaults to the grid line width. + | `z` | `number` | | | `0` | z-index of gridline layer. Values <= 0 are drawn under datasets, > 0 on top. The scriptable context is described in [Options](../general/options.md#tick) section. diff --git a/docs/docs/getting-started/v3-migration.md b/docs/docs/getting-started/v3-migration.md index fb0d6a0b2..4eb8b8399 100644 --- a/docs/docs/getting-started/v3-migration.md +++ b/docs/docs/getting-started/v3-migration.md @@ -219,6 +219,7 @@ Animation system was completely rewritten in Chart.js v3. Each property can now #### Ticks +* `options.gridLines.tickMarkLength` was renamed to `options.gridLines.tickLength`. * `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`. diff --git a/src/core/core.scale.js b/src/core/core.scale.js index f207ef541..21c212195 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -33,7 +33,7 @@ defaults.set('scale', { drawBorder: true, drawOnChartArea: true, drawTicks: true, - tickMarkLength: 10, + tickLength: 10, offsetGridLines: false, borderDash: [], borderDashOffset: 0.0 @@ -150,7 +150,7 @@ function garbageCollect(caches, length) { * @param {object} options */ function getTickMarkLength(options) { - return options.drawTicks ? options.tickMarkLength : 0; + return options.drawTicks ? options.tickLength : 0; } /** @@ -1269,6 +1269,11 @@ export default class Scale extends Element { const borderDash = gridLines.borderDash || []; const borderDashOffset = resolve([gridLines.borderDashOffset], context, i); + const tickWidth = resolve([gridLines.tickWidth, lineWidth], context, i); + const tickColor = resolve([gridLines.tickColor, lineColor], context, i); + const tickBorderDash = gridLines.tickBorderDash || borderDash; + const tickBorderDashOffset = resolve([gridLines.tickBorderDashOffset, borderDashOffset], context, i); + lineValue = getPixelForGridLine(me, i, offsetGridLines); // Skip if the pixel is out of the range @@ -1297,6 +1302,10 @@ export default class Scale extends Element { color: lineColor, borderDash, borderDashOffset, + tickWidth, + tickColor, + tickBorderDash, + tickBorderDashOffset, }); } @@ -1509,10 +1518,9 @@ export default class Scale extends Element { if (gridLines.display) { for (i = 0, ilen = items.length; i < ilen; ++i) { const item = items[i]; - const width = item.width; - const color = item.color; + const {color, tickColor, tickWidth, width} = item; - if (width && color) { + if (width && color && gridLines.drawOnChartArea) { ctx.save(); ctx.lineWidth = width; ctx.strokeStyle = color; @@ -1522,17 +1530,24 @@ export default class Scale extends Element { } ctx.beginPath(); + ctx.moveTo(item.x1, item.y1); + ctx.lineTo(item.x2, item.y2); + ctx.stroke(); + ctx.restore(); + } - if (gridLines.drawTicks) { - ctx.moveTo(item.tx1, item.ty1); - ctx.lineTo(item.tx2, item.ty2); - } - - if (gridLines.drawOnChartArea) { - ctx.moveTo(item.x1, item.y1); - ctx.lineTo(item.x2, item.y2); + if (tickWidth && tickColor && gridLines.drawTicks) { + ctx.save(); + ctx.lineWidth = tickWidth; + ctx.strokeStyle = tickColor; + if (ctx.setLineDash) { + ctx.setLineDash(item.tickBorderDash); + ctx.lineDashOffset = item.tickBorderDashOffset; } + ctx.beginPath(); + ctx.moveTo(item.tx1, item.ty1); + ctx.lineTo(item.tx2, item.ty2); ctx.stroke(); ctx.restore(); } diff --git a/test/fixtures/core.scale/tick-override-styles.json b/test/fixtures/core.scale/tick-override-styles.json new file mode 100644 index 000000000..5932fc8dd --- /dev/null +++ b/test/fixtures/core.scale/tick-override-styles.json @@ -0,0 +1,55 @@ +{ + "config": { + "type": "bar", + "data": { + "labels": ["January", "February", "March", "April", "May", "June", "July"], + "datasets": [] + }, + "options": { + "indexAxis": "y", + "scales": { + "x": { + "type": "category", + "position": "top", + "id": "x-axis-1", + "ticks": { + "display": false + }, + "gridLines":{ + "drawOnChartArea": false, + "drawBorder": false, + "color": "rgba(0, 0, 0, 1)", + "width": 1, + "tickColor": "rgba(255, 0, 0, 1)", + "tickWidth": 5 + } + }, + "y": { + "position": "left", + "id": "y-axis-1", + "type": "linear", + "offset": false, + "min": -100, + "max": 100, + "ticks": { + "display": false + }, + "gridLines":{ + "offsetGridLines": false, + "drawOnChartArea": false, + "drawBorder": false, + "color": "rgba(0, 0, 0, 1)", + "tickColor": "rgba(255, 0, 0, 1)", + "tickWidth": 5 + } + } + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/core.scale/tick-override-styles.png b/test/fixtures/core.scale/tick-override-styles.png new file mode 100644 index 000000000..8e55ea433 Binary files /dev/null and b/test/fixtures/core.scale/tick-override-styles.png differ diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts index c8be1c4d8..ec6e4f8ea 100644 --- a/types/index.esm.d.ts +++ b/types/index.esm.d.ts @@ -2581,10 +2581,26 @@ export interface GridLineOptions { * @default true */ drawTicks: boolean; + /** + * @default [] + */ + tickBorderDash: number[]; + /** + * @default 0 + */ + tickBorderDashOffset: ScriptAbleScale; + /** + * @default 'rgba(0, 0, 0, 0.1)' + */ + tickColor: ScriptAbleScale | readonly Color[]; /** * @default 10 */ - tickMarkLength: number; + tickLength: number; + /** + * @default 1 + */ + tickWidth: number; /** * @default false */