Skip to content

Commit 7821a20

Browse files
nagixnagix
committed
Add support for gridLines/angleLines borderDash for polarArea/radar charts
1 parent f6d9a39 commit 7821a20

File tree

11 files changed

+166
-34
lines changed

11 files changed

+166
-34
lines changed

‎docs/axes/radial/linear.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,8 @@ The following options are used to configure angled lines that radiate from the c
9595
| `display` | `Boolean` | `true` | if true, angle lines are shown.
9696
| `color` | `Color` | `rgba(0, 0, 0, 0.1)` | Color of angled lines.
9797
| `lineWidth` | `Number` | `1` | Width of angled lines.
98+
| `borderDash` | `Number[]` | `[]` | Length and spacing of dashes on angled lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
99+
| `borderDashOffset` | `Number` | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
98100

99101
## Point Label Options
100102

‎docs/axes/styling.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ The grid line configuration is nested under the scale configuration in the `grid
1212
| `circular` | `Boolean` | `false` | If true, gridlines are circular (on radar chart only).
1313
| `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.
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` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
15+
| `borderDashOffset` | `Number` | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
1616
| `lineWidth` | `Number/Number[]` | `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.
@@ -21,7 +21,7 @@ The grid line configuration is nested under the scale configuration in the `grid
2121
| `zeroLineWidth` | `Number` | `1` | Stroke width of the grid line for the first index (index 0).
2222
| `zeroLineColor` | Color | `'rgba(0, 0, 0, 0.25)'` | Stroke color of the grid line for the first index (index 0).
2323
| `zeroLineBorderDash` | `Number[]` | `[]` | Length and spacing of dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
24-
| `zeroLineBorderDashOffset` | `Number` | `0` | Offset for line dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
24+
| `zeroLineBorderDashOffset` | `Number` | `0.0` | Offset for line dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
2525
| `offsetGridLines` | `Boolean` | `false` | If true, grid lines will be shifted to be between labels. This is set to `true` for a category scale in a bar chart by default.
2626

2727
## Tick Configuration

‎src/core/core.scale.js

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -728,13 +728,13 @@ module.exports = Element.extend({
728728
// Draw the first index specially
729729
lineWidth = gridLines.zeroLineWidth;
730730
lineColor = gridLines.zeroLineColor;
731-
borderDash = gridLines.zeroLineBorderDash;
732-
borderDashOffset = gridLines.zeroLineBorderDashOffset;
731+
borderDash = gridLines.zeroLineBorderDash || [];
732+
borderDashOffset = gridLines.zeroLineBorderDashOffset || 0.0;
733733
} else {
734734
lineWidth = helpers.valueAtIndexOrDefault(gridLines.lineWidth, index);
735735
lineColor = helpers.valueAtIndexOrDefault(gridLines.color, index);
736-
borderDash = helpers.valueOrDefault(gridLines.borderDash, globalDefaults.borderDash);
737-
borderDashOffset = helpers.valueOrDefault(gridLines.borderDashOffset, globalDefaults.borderDashOffset);
736+
borderDash = gridLines.borderDash || [];
737+
borderDashOffset = gridLines.borderDashOffset || 0.0;
738738
}
739739

740740
// Common properties
@@ -825,10 +825,13 @@ module.exports = Element.extend({
825825

826826
// Draw all of the tick labels, tick marks, and grid lines at the correct places
827827
helpers.each(itemsToDraw, function(itemToDraw) {
828-
if (gridLines.display) {
828+
var glWidth = itemToDraw.glWidth;
829+
var glColor = itemToDraw.glColor;
830+
831+
if (gridLines.display && glWidth && glColor) {
829832
context.save();
830-
context.lineWidth = itemToDraw.glWidth;
831-
context.strokeStyle = itemToDraw.glColor;
833+
context.lineWidth = glWidth;
834+
context.strokeStyle = glColor;
832835
if (context.setLineDash) {
833836
context.setLineDash(itemToDraw.glBorderDash);
834837
context.lineDashOffset = itemToDraw.glBorderDashOffset;

‎src/scales/scale.radialLinear.js

Lines changed: 40 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ module.exports = function(Chart) {
1919
angleLines: {
2020
display: true,
2121
color: 'rgba(0, 0, 0, 0.1)',
22-
lineWidth: 1
22+
lineWidth: 1,
23+
borderDash: [],
24+
borderDashOffset: 0.0
2325
},
2426

2527
gridLines: {
@@ -240,26 +242,34 @@ module.exports = function(Chart) {
240242
var ctx = scale.ctx;
241243
var opts = scale.options;
242244
var angleLineOpts = opts.angleLines;
245+
var gridLineOpts = opts.gridLines;
243246
var pointLabelOpts = opts.pointLabels;
244-
245-
ctx.lineWidth = angleLineOpts.lineWidth;
246-
ctx.strokeStyle = angleLineOpts.color;
247+
var lineWidth = helpers.valueOrDefault(angleLineOpts.lineWidth, gridLineOpts.lineWidth);
248+
var lineColor = helpers.valueOrDefault(angleLineOpts.color, gridLineOpts.color);
249+
250+
ctx.save();
251+
ctx.lineWidth = lineWidth;
252+
ctx.strokeStyle = lineColor;
253+
if (ctx.setLineDash) {
254+
ctx.setLineDash(helpers.valueOrDefault(angleLineOpts.borderDash, gridLineOpts.borderDash) || []);
255+
ctx.lineDashOffset = helpers.valueOrDefault(angleLineOpts.borderDashOffset, gridLineOpts.borderDashOffset) || 0.0;
256+
}
247257

248258
var outerDistance = scale.getDistanceFromCenterForValue(opts.ticks.reverse ? scale.min : scale.max);
249259

250260
// Point Label Font
251261
var plFont = getPointLabelFontOptions(scale);
252262

263+
ctx.font = plFont.font;
253264
ctx.textBaseline = 'top';
254265

255266
for (var i = getValueCount(scale) - 1; i >= 0; i--) {
256-
if (angleLineOpts.display) {
267+
if (angleLineOpts.display && lineWidth && lineColor) {
257268
var outerPosition = scale.getPointPosition(i, outerDistance);
258269
ctx.beginPath();
259270
ctx.moveTo(scale.xCenter, scale.yCenter);
260271
ctx.lineTo(outerPosition.x, outerPosition.y);
261272
ctx.stroke();
262-
ctx.closePath();
263273
}
264274

265275
if (pointLabelOpts.display) {
@@ -268,7 +278,6 @@ module.exports = function(Chart) {
268278

269279
// Keep this in loop since we may support array properties here
270280
var pointLabelFontColor = helpers.valueAtIndexOrDefault(pointLabelOpts.fontColor, i, globalDefaults.defaultFontColor);
271-
ctx.font = plFont.font;
272281
ctx.fillStyle = pointLabelFontColor;
273282

274283
var angleRadians = scale.getIndexAngle(i);
@@ -278,39 +287,46 @@ module.exports = function(Chart) {
278287
fillText(ctx, scale.pointLabels[i] || '', pointLabelPosition, plFont.size);
279288
}
280289
}
290+
ctx.restore();
281291
}
282292

283293
function drawRadiusLine(scale, gridLineOpts, radius, index) {
284294
var ctx = scale.ctx;
285-
ctx.strokeStyle = helpers.valueAtIndexOrDefault(gridLineOpts.color, index - 1);
286-
ctx.lineWidth = helpers.valueAtIndexOrDefault(gridLineOpts.lineWidth, index - 1);
295+
var circular = gridLineOpts.circular;
296+
var valueCount = getValueCount(scale);
297+
var lineColor = helpers.valueAtIndexOrDefault(gridLineOpts.color, index - 1);
298+
var lineWidth = helpers.valueAtIndexOrDefault(gridLineOpts.lineWidth, index - 1);
299+
var pointPosition;
287300

288-
if (scale.options.gridLines.circular) {
301+
if ((!circular && !valueCount) || !lineColor || !lineWidth) {
302+
return;
303+
}
304+
305+
ctx.save();
306+
ctx.strokeStyle = lineColor;
307+
ctx.lineWidth = lineWidth;
308+
if (ctx.setLineDash) {
309+
ctx.setLineDash(gridLineOpts.borderDash || []);
310+
ctx.lineDashOffset = gridLineOpts.borderDashOffset || 0.0;
311+
}
312+
313+
ctx.beginPath();
314+
if (gridLineOpts.circular) {
289315
// Draw circular arcs between the points
290-
ctx.beginPath();
291316
ctx.arc(scale.xCenter, scale.yCenter, radius, 0, Math.PI * 2);
292-
ctx.closePath();
293-
ctx.stroke();
294317
} else {
295318
// Draw straight lines connecting each index
296-
var valueCount = getValueCount(scale);
297-
298-
if (valueCount === 0) {
299-
return;
300-
}
301-
302-
ctx.beginPath();
303-
var pointPosition = scale.getPointPosition(0, radius);
319+
pointPosition = scale.getPointPosition(0, radius);
304320
ctx.moveTo(pointPosition.x, pointPosition.y);
305321

306322
for (var i = 1; i < valueCount; i++) {
307323
pointPosition = scale.getPointPosition(i, radius);
308324
ctx.lineTo(pointPosition.x, pointPosition.y);
309325
}
310-
311-
ctx.closePath();
312-
ctx.stroke();
313326
}
327+
ctx.closePath();
328+
ctx.stroke();
329+
ctx.restore();
314330
}
315331

316332
function numberOrZero(param) {

‎test/fixtures/scale.radialLinear/border-dash.json

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"config": {
3+
"type": "radar",
4+
"data": {
5+
"labels": ["A", "B", "C", "D", "E"]
6+
},
7+
"options": {
8+
"responsive": false,
9+
"legend": false,
10+
"title": false,
11+
"scale": {
12+
"gridLines": {
13+
"color": "rgba(0, 0, 255, 0.5)",
14+
"lineWidth": 1,
15+
"borderDash": [4, 2],
16+
"borderDashOffset": 2
17+
},
18+
"angleLines": {
19+
"color": "rgba(0, 0, 255, 0.5)",
20+
"lineWidth": 1,
21+
"borderDash": [4, 2],
22+
"borderDashOffset": 2
23+
},
24+
"pointLabels": {
25+
"display": false
26+
},
27+
"ticks": {
28+
"display": false
29+
}
30+
}
31+
}
32+
}
33+
}

‎test/fixtures/scale.radialLinear/border-dash.png

30.5 KB
Loading

‎test/fixtures/scale.radialLinear/circular-border-dash.json

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"config": {
3+
"type": "radar",
4+
"data": {
5+
"labels": ["A", "B", "C", "D", "E"]
6+
},
7+
"options": {
8+
"responsive": false,
9+
"legend": false,
10+
"title": false,
11+
"scale": {
12+
"gridLines": {
13+
"circular": true,
14+
"color": "rgba(0, 0, 255, 0.5)",
15+
"lineWidth": 1,
16+
"borderDash": [4, 2],
17+
"borderDashOffset": 2
18+
},
19+
"angleLines": {
20+
"color": "rgba(0, 0, 255, 0.5)",
21+
"lineWidth": 1,
22+
"borderDash": [4, 2],
23+
"borderDashOffset": 2
24+
},
25+
"pointLabels": {
26+
"display": false
27+
},
28+
"ticks": {
29+
"display": false
30+
}
31+
}
32+
}
33+
}
34+
}

‎test/fixtures/scale.radialLinear/circular-border-dash.png

38.2 KB
Loading

‎test/fixtures/scale.radialLinear/indexable-gridlines.json

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"config": {
3+
"type": "radar",
4+
"data": {
5+
"labels": ["A", "B", "C", "D", "E"]
6+
},
7+
"options": {
8+
"responsive": false,
9+
"legend": false,
10+
"title": false,
11+
"scale": {
12+
"gridLines": {
13+
"color": [
14+
"rgba(0, 0, 0, 0.5)",
15+
"rgba(255, 255, 255, 0.5)",
16+
false,
17+
"",
18+
"rgba(255, 0, 0, 0.5)",
19+
"rgba(0, 255, 0, 0.5)",
20+
"rgba(0, 0, 255, 0.5)",
21+
"rgba(255, 255, 0, 0.5)",
22+
"rgba(255, 0, 255, 0.5)",
23+
"rgba(0, 255, 255, 0.5)"
24+
],
25+
"lineWidth": [false, 0, 1, 2, 1, 2, 1, 2, 1, 2]
26+
},
27+
"angleLines": {
28+
"color": "rgba(255, 255, 255, 0.5)",
29+
"lineWidth": 2
30+
},
31+
"pointLabels": {
32+
"display": false
33+
},
34+
"ticks": {
35+
"display": false
36+
}
37+
}
38+
}
39+
}
40+
}

‎test/fixtures/scale.radialLinear/indexable-gridlines.png

53.1 KB
Loading

0 commit comments

Comments
 (0)