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 ae079fcf79194b8242ee8550b35ba61032ae2d21..1620e61a24b197e968b1d58f845b2ab93ed82db5 100644 (file)
--- 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 fb0d6a0b223fac91a7465e663a08e3cd20694a7b..4eb8b83998d311747e439ff0b18100688b29715f 100644 (file)
--- 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 f207ef5417445781a5461a66278bffa8539ab7ea..21c212195a0ede54450e1c19356b1031c90392a1 100644 (file)
--- 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 (file)
index 0000000..5932fc8
--- /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 (file)
index 0000000..8e55ea4
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 c8be1c4d8c28d0762e79fe091b642756520c4adc..ec6e4f8ea7c680f5955a814dd1ecd97186132807 100644 (file)
--- 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<number>;
+  /**
+   * @default 'rgba(0, 0, 0, 0.1)'
+   */
+  tickColor: ScriptAbleScale<Color> | readonly Color[];
   /**
    * @default 10
    */
-  tickMarkLength: number;
+  tickLength: number;
+  /**
+   * @default 1
+   */
+  tickWidth: number;
   /**
    * @default false
    */