diff --git a/docs/axes/styling.md b/docs/axes/styling.md index 311b962e177..e26789eaf82 100644 --- a/docs/axes/styling.md +++ b/docs/axes/styling.md @@ -10,10 +10,10 @@ The grid line configuration is nested under the scale configuration in the `grid | ---- | ---- | ------- | ----------- | `display` | `boolean` | `true` | If false, do not display grid lines for this axis. | `circular` | `boolean` | `false` | If true, gridlines are circular (on radar chart only). -| `color` | Color|Color[] | `'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|Color[]|function | `'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` | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset). -| `lineWidth` | number|number[] | `1` | Stroke width of grid lines. +| `borderDashOffset` | number|function | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset). +| `lineWidth` | number|number[]|function | `1` | Stroke width of grid lines. | `drawBorder` | `boolean` | `true` | If true, draw 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. @@ -21,6 +21,15 @@ The grid line configuration is nested under the scale configuration in the `grid | `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. | `z` | `number` | `0` | z-index of gridline layer. Values <= 0 are drawn under datasets, > 0 on top. +For function arguments, the function is passed a context object that is of the form: + +```javscript +{ + scale: // Scale object + tick: // Tick object +} +``` + ## Tick Configuration The tick configuration is nested under the scale configuration in the `ticks` key. It defines options for the tick marks that are generated by the axis. diff --git a/docs/getting-started/v3-migration.md b/docs/getting-started/v3-migration.md index 51035bc90c7..fd04bbab917 100644 --- a/docs/getting-started/v3-migration.md +++ b/docs/getting-started/v3-migration.md @@ -26,7 +26,7 @@ Chart.js is no longer providing the `Chart.bundle.js` and `Chart.bundle.min.js`. ### Customizability * `custom` attribute of elements was removed. Please use scriptable options -* The `zeroLine*` options of axes were removed. +* The `zeroLine*` options of axes were removed. Use scriptable scale options instead. * The `hover` property of scriptable options `context` object was renamed to `active` to align it with the datalabels plugin. ### Options diff --git a/samples/samples.js b/samples/samples.js index c8b26e7be9e..6e06756b204 100644 --- a/samples/samples.js +++ b/samples/samples.js @@ -127,6 +127,9 @@ }, { title: 'Grid lines style', path: 'scales/gridlines-style.html' + }, { + title: 'Scriptable Grid lines', + path: 'scales/gridlines-scriptable.html' }, { title: 'Multiline labels', path: 'scales/multiline-labels.html' diff --git a/samples/scales/gridlines-scriptable.html b/samples/scales/gridlines-scriptable.html new file mode 100644 index 00000000000..44711492095 --- /dev/null +++ b/samples/scales/gridlines-scriptable.html @@ -0,0 +1,72 @@ + + + + + Grid Lines Scriptable Settings + + + + + + +
+ +
+ + + + diff --git a/src/core/core.scale.js b/src/core/core.scale.js index c1e589d218a..52012877d1e 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -8,7 +8,7 @@ const Ticks = require('./core.ticks'); const isArray = helpers.isArray; const isNullOrUndef = helpers.isNullOrUndef; const valueOrDefault = helpers.valueOrDefault; -const valueAtIndexOrDefault = helpers.valueAtIndexOrDefault; +const resolve = helpers.options.resolve; defaults._set('scale', { display: true, @@ -199,7 +199,7 @@ function parseFontOptions(options, nestedOpts) { fontStyle: valueOrDefault(nestedOpts.fontStyle, options.fontStyle), lineHeight: valueOrDefault(nestedOpts.lineHeight, options.lineHeight) }), { - color: helpers.options.resolve([nestedOpts.fontColor, options.fontColor, defaults.global.defaultFontColor]) + color: resolve([nestedOpts.fontColor, options.fontColor, defaults.global.defaultFontColor]) }); } @@ -965,10 +965,16 @@ class Scale extends Element { var isHorizontal = me.isHorizontal(); var ticks = me._ticksToDraw; var ticksLength = ticks.length + (offsetGridLines ? 1 : 0); + var context; var tl = getTickMarkLength(gridLines); var items = []; - var axisWidth = gridLines.drawBorder ? valueAtIndexOrDefault(gridLines.lineWidth, 0, 0) : 0; + + context = { + scale: me, + tick: ticks[0], + }; + var axisWidth = gridLines.drawBorder ? resolve([gridLines.lineWidth, 0], context, 0) : 0; var axisHalfWidth = axisWidth / 2; var alignPixel = helpers._alignPixel; var alignBorderValue = function(pixel) { @@ -1006,10 +1012,15 @@ class Scale extends Element { for (i = 0; i < ticksLength; ++i) { tick = ticks[i] || {}; - const lineWidth = valueAtIndexOrDefault(gridLines.lineWidth, i, 1); - const lineColor = valueAtIndexOrDefault(gridLines.color, i, 'rgba(0,0,0,0.1)'); + context = { + scale: me, + tick, + }; + + const lineWidth = resolve([gridLines.lineWidth], context, i); + const lineColor = resolve([gridLines.color], context, i); const borderDash = gridLines.borderDash || []; - const borderDashOffset = gridLines.borderDashOffset || 0.0; + const borderDashOffset = resolve([gridLines.borderDashOffset], context, i); lineValue = getPixelForGridLine(me, tick._index || i, offsetGridLines); @@ -1127,7 +1138,11 @@ class Scale extends Element { var ctx = me.ctx; var chart = me.chart; var alignPixel = helpers._alignPixel; - var axisWidth = gridLines.drawBorder ? valueAtIndexOrDefault(gridLines.lineWidth, 0, 0) : 0; + var context = { + scale: me, + tick: me._ticksToDraw[0], + }; + var axisWidth = gridLines.drawBorder ? resolve([gridLines.lineWidth, 0], context, 0) : 0; var items = me._gridLineItems || (me._gridLineItems = me._computeGridLineItems(chartArea)); var width, color, i, ilen, item; @@ -1165,7 +1180,11 @@ class Scale extends Element { if (axisWidth) { // Draw the line at the edge of the axis var firstLineWidth = axisWidth; - var lastLineWidth = valueAtIndexOrDefault(gridLines.lineWidth, items.ticksLength - 1, 1); + context = { + scale: me, + tick: me._ticksToDraw[items.ticksLength - 1], + }; + var lastLineWidth = resolve([gridLines.lineWidth, 1], context, items.ticksLength - 1); var borderValue = items.borderValue; var x1, x2, y1, y2; @@ -1180,7 +1199,7 @@ class Scale extends Element { } ctx.lineWidth = axisWidth; - ctx.strokeStyle = valueAtIndexOrDefault(gridLines.color, 0); + ctx.strokeStyle = resolve([gridLines.color], context, 0); ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2);