Skip to content

Commit 2354e2f

Browse files
etimbergetimberg
authored
Allow functions to be specified for scale grid line options (#6700)
Add scriptable options for scale styling
1 parent d5b6698 commit 2354e2f

File tree

5 files changed

+116
-13
lines changed

5 files changed

+116
-13
lines changed

‎docs/axes/styling.md‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,26 @@ The grid line configuration is nested under the scale configuration in the `grid
1010
| ---- | ---- | ------- | -----------
1111
| `display` | `boolean` | `true` | If false, do not display grid lines for this axis.
1212
| `circular` | `boolean` | `false` | If true, gridlines are circular (on radar chart only).
13-
| `color` | <code>Color&#124;Color[]</code> | `'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.
13+
| `color` | <code>Color&#124;Color[]&#124;function</code> | `'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.
1414
| `borderDash` | `number[]` | `[]` | Length and spacing of dashes on grid lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
15-
| `borderDashOffset` | `number` | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
16-
| `lineWidth` | <code>number&#124;number[]</code> | `1` | Stroke width of grid lines.
15+
| `borderDashOffset` | <code>number&#124;function</code> | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
16+
| `lineWidth` | <code>number&#124;number[]&#124;function</code> | `1` | Stroke width of grid lines.
1717
| `drawBorder` | `boolean` | `true` | If true, draw border at the edge between the axis and the chart area.
1818
| `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.
1919
| `drawTicks` | `boolean` | `true` | If true, draw lines beside the ticks in the axis area beside the chart.
2020
| `tickMarkLength` | `number` | `10` | Length in pixels that the grid lines will draw into the axis area.
2121
| `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.
2222
| `z` | `number` | `0` | z-index of gridline layer. Values &lt;= 0 are drawn under datasets, &gt; 0 on top.
2323

24+
For function arguments, the function is passed a context object that is of the form:
25+
26+
```javscript
27+
{
28+
scale: // Scale object
29+
tick: // Tick object
30+
}
31+
```
32+
2433
## Tick Configuration
2534
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.
2635

‎docs/getting-started/v3-migration.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ Chart.js is no longer providing the `Chart.bundle.js` and `Chart.bundle.min.js`.
2626
### Customizability
2727

2828
* `custom` attribute of elements was removed. Please use scriptable options
29-
* The `zeroLine*` options of axes were removed.
29+
* The `zeroLine*` options of axes were removed. Use scriptable scale options instead.
3030
* The `hover` property of scriptable options `context` object was renamed to `active` to align it with the datalabels plugin.
3131

3232
### Options

‎samples/samples.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,9 @@
127127
}, {
128128
title: 'Grid lines style',
129129
path: 'scales/gridlines-style.html'
130+
}, {
131+
title: 'Scriptable Grid lines',
132+
path: 'scales/gridlines-scriptable.html'
130133
}, {
131134
title: 'Multiline labels',
132135
path: 'scales/multiline-labels.html'

‎samples/scales/gridlines-scriptable.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>Grid Lines Scriptable Settings</title>
6+
<script src="../../dist/Chart.min.js"></script>
7+
<script src="../utils.js"></script>
8+
<style>
9+
canvas{
10+
-moz-user-select: none;
11+
-webkit-user-select: none;
12+
-ms-user-select: none;
13+
}
14+
</style>
15+
</head>
16+
17+
<body>
18+
<div style="width:75%;">
19+
<canvas id="canvas"></canvas>
20+
</div>
21+
<script>
22+
var config = {
23+
type: 'line',
24+
data: {
25+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
26+
datasets: [{
27+
label: 'My First dataset',
28+
backgroundColor: window.chartColors.red,
29+
borderColor: window.chartColors.red,
30+
data: [10, 30, 39, 20, 25, 34, -10],
31+
fill: false,
32+
}, {
33+
label: 'My Second dataset',
34+
fill: false,
35+
backgroundColor: window.chartColors.blue,
36+
borderColor: window.chartColors.blue,
37+
data: [18, 33, 22, 19, 11, -39, 30],
38+
}]
39+
},
40+
options: {
41+
responsive: true,
42+
title: {
43+
display: true,
44+
text: 'Grid Line Settings'
45+
},
46+
scales: {
47+
yAxes: [{
48+
gridLines: {
49+
drawBorder: false,
50+
color: function(context) {
51+
if (context.tick.value > 0) {
52+
return window.chartColors.green;
53+
} else if (context.tick.value < 0) {
54+
return window.chartColors.red;
55+
}
56+
57+
return '#000000';
58+
},
59+
},
60+
}]
61+
}
62+
}
63+
};
64+
65+
window.onload = function() {
66+
var ctx = document.getElementById('canvas').getContext('2d');
67+
window.myLine = new Chart(ctx, config);
68+
};
69+
</script>
70+
</body>
71+
72+
</html>

‎src/core/core.scale.js‎

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const Ticks = require('./core.ticks');
88
const isArray = helpers.isArray;
99
const isNullOrUndef = helpers.isNullOrUndef;
1010
const valueOrDefault = helpers.valueOrDefault;
11-
const valueAtIndexOrDefault = helpers.valueAtIndexOrDefault;
11+
const resolve = helpers.options.resolve;
1212

1313
defaults._set('scale', {
1414
display: true,
@@ -199,7 +199,7 @@ function parseFontOptions(options, nestedOpts) {
199199
fontStyle: valueOrDefault(nestedOpts.fontStyle, options.fontStyle),
200200
lineHeight: valueOrDefault(nestedOpts.lineHeight, options.lineHeight)
201201
}), {
202-
color: helpers.options.resolve([nestedOpts.fontColor, options.fontColor, defaults.global.defaultFontColor])
202+
color: resolve([nestedOpts.fontColor, options.fontColor, defaults.global.defaultFontColor])
203203
});
204204
}
205205

@@ -965,10 +965,16 @@ class Scale extends Element {
965965
var isHorizontal = me.isHorizontal();
966966
var ticks = me._ticksToDraw;
967967
var ticksLength = ticks.length + (offsetGridLines ? 1 : 0);
968+
var context;
968969

969970
var tl = getTickMarkLength(gridLines);
970971
var items = [];
971-
var axisWidth = gridLines.drawBorder ? valueAtIndexOrDefault(gridLines.lineWidth, 0, 0) : 0;
972+
973+
context = {
974+
scale: me,
975+
tick: ticks[0],
976+
};
977+
var axisWidth = gridLines.drawBorder ? resolve([gridLines.lineWidth, 0], context, 0) : 0;
972978
var axisHalfWidth = axisWidth / 2;
973979
var alignPixel = helpers._alignPixel;
974980
var alignBorderValue = function(pixel) {
@@ -1006,10 +1012,15 @@ class Scale extends Element {
10061012
for (i = 0; i < ticksLength; ++i) {
10071013
tick = ticks[i] || {};
10081014

1009-
const lineWidth = valueAtIndexOrDefault(gridLines.lineWidth, i, 1);
1010-
const lineColor = valueAtIndexOrDefault(gridLines.color, i, 'rgba(0,0,0,0.1)');
1015+
context = {
1016+
scale: me,
1017+
tick,
1018+
};
1019+
1020+
const lineWidth = resolve([gridLines.lineWidth], context, i);
1021+
const lineColor = resolve([gridLines.color], context, i);
10111022
const borderDash = gridLines.borderDash || [];
1012-
const borderDashOffset = gridLines.borderDashOffset || 0.0;
1023+
const borderDashOffset = resolve([gridLines.borderDashOffset], context, i);
10131024

10141025
lineValue = getPixelForGridLine(me, tick._index || i, offsetGridLines);
10151026

@@ -1127,7 +1138,11 @@ class Scale extends Element {
11271138
var ctx = me.ctx;
11281139
var chart = me.chart;
11291140
var alignPixel = helpers._alignPixel;
1130-
var axisWidth = gridLines.drawBorder ? valueAtIndexOrDefault(gridLines.lineWidth, 0, 0) : 0;
1141+
var context = {
1142+
scale: me,
1143+
tick: me._ticksToDraw[0],
1144+
};
1145+
var axisWidth = gridLines.drawBorder ? resolve([gridLines.lineWidth, 0], context, 0) : 0;
11311146
var items = me._gridLineItems || (me._gridLineItems = me._computeGridLineItems(chartArea));
11321147
var width, color, i, ilen, item;
11331148

@@ -1165,7 +1180,11 @@ class Scale extends Element {
11651180
if (axisWidth) {
11661181
// Draw the line at the edge of the axis
11671182
var firstLineWidth = axisWidth;
1168-
var lastLineWidth = valueAtIndexOrDefault(gridLines.lineWidth, items.ticksLength - 1, 1);
1183+
context = {
1184+
scale: me,
1185+
tick: me._ticksToDraw[items.ticksLength - 1],
1186+
};
1187+
var lastLineWidth = resolve([gridLines.lineWidth, 1], context, items.ticksLength - 1);
11691188
var borderValue = items.borderValue;
11701189
var x1, x2, y1, y2;
11711190

@@ -1180,7 +1199,7 @@ class Scale extends Element {
11801199
}
11811200

11821201
ctx.lineWidth = axisWidth;
1183-
ctx.strokeStyle = valueAtIndexOrDefault(gridLines.color, 0);
1202+
ctx.strokeStyle = resolve([gridLines.color], context, 0);
11841203
ctx.beginPath();
11851204
ctx.moveTo(x1, y1);
11861205
ctx.lineTo(x2, y2);

0 commit comments

Comments
 (0)