feat: add scales.grid.step option

docs/axes/styling.md

@@ -15,6 +15,7 @@ Namespace: `options.scales[scaleId].grid`, it defines options for the grid lines
 | `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.
 | `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.
+| `step` | `number` | | | 1 | Setting higher value allows skipping ticks before the next grid line.
 | `tickBorderDash` | `number[]` | Yes | Yes | `[]` | 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.

src/core/core.scale.defaults.js

@@ -30,6 +30,7 @@ export function applyScaleDefaults(defaults) {
       lineWidth: 1,
       drawOnChartArea: true,
       drawTicks: true,
+      step: 1,
       tickLength: 8,
       tickWidth: (_ctx, options) => options.lineWidth,
       tickColor: (_ctx, options) => options.color,

src/core/core.scale.js

@@ -1490,7 +1490,7 @@ export default class Scale extends Element {
     };
 
     if (grid.display) {
-      for (i = 0, ilen = items.length; i < ilen; ++i) {
+      for (i = 0, ilen = items.length; i < ilen; i += (grid.step || 1)) {
         const item = items[i];
 
         if (grid.drawOnChartArea) {

src/types/index.d.ts

@@ -2989,6 +2989,10 @@ export interface GridLineOptions {
    * @default true
    */
   drawTicks: boolean;
+  /**
+   * @default 1
+   */
+  step: number;
   /**
    * @default []
    */