Add rectRounded point style

diff --git a/docs/03-Line-Chart.md b/docs/03-Line-Chart.md
index f62a20879df64db8d3e2f5af1c946162cbcd88e3..24b77cfe6df3603ef27a801818f8d46a68140cc7 100644 (file)
--- a/docs/03-Line-Chart.md
+++ b/docs/03-Line-Chart.md
@@ -57,7 +57,7 @@ pointHitRadius | `Number or Array<Number>` | The pixel size of the non-displayed
 pointHoverBackgroundColor | `Color or Array<Color>` | Point background color when hovered
 pointHoverBorderColor | `Color or Array<Color>` | Point border color when hovered
 pointHoverBorderWidth | `Number or Array<Number>` | Border width of point when hovered
-pointStyle | `String, Array<String>, Image, Array<Image>` | The style of point. Options are 'circle', 'triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'. If the option is an image, that image is drawn on the canvas using `drawImage`. 
+pointStyle | `String, Array<String>, Image, Array<Image>` | The style of point. Options are 'circle', 'triangle', 'rect', 'rectRounded', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'. If the option is an image, that image is drawn on the canvas using `drawImage`.
 showLine | `Boolean` | If false, the line is not drawn for this dataset
 spanGaps | `Boolean` | If true, lines will be drawn between points with no or null data
 steppedLine | `Boolean` | If true, the line is shown as a stepped line and 'lineTension' will be ignored

diff --git a/docs/05-Radar-Chart.md b/docs/05-Radar-Chart.md
index 8fc560b3f043501dd11385df08054d9f942e686c..977574faf6ce17fa8f4f604bdd58bfc0d7b7d4a4 100644 (file)
--- a/docs/05-Radar-Chart.md
+++ b/docs/05-Radar-Chart.md
@@ -50,7 +50,7 @@ pointHitRadius | `Number or Array<Number>` | The pixel size of the non-displayed
 pointHoverBackgroundColor | `Color or Array<Color>` | Point background color when hovered
 pointHoverBorderColor | `Color or Array<Color>` | Point border color when hovered
 pointHoverBorderWidth | `Number or Array<Number>` | Border width of point when hovered
-pointStyle | `String or Array<String>` | The style of point. Options include 'circle', 'triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'
+pointStyle | `String or Array<String>` | The style of point. Options include 'circle', 'triangle', 'rect', 'rectRounded', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'
 
 An example data object using these attributes is shown below.
 

diff --git a/src/core/core.canvasHelpers.js b/src/core/core.canvasHelpers.js
index 439df7dba1b893ad060cdebe81c09f5aa5cb851e..42fac5c00b519c06828a29ff4baeff2fe8d93688 100644 (file)
--- a/src/core/core.canvasHelpers.js
+++ b/src/core/core.canvasHelpers.js
@@ -43,6 +43,14 @@ module.exports = function(Chart) {
                        ctx.fillRect(x - size, y - size, 2 * size, 2 * size);
                        ctx.strokeRect(x - size, y - size, 2 * size, 2 * size);
                        break;
+               case 'rectRounded':
+                       var offset = radius / Math.SQRT2;
+                       var leftX = x - offset;
+                       var topY = y - offset;
+                       var sideSize = Math.SQRT2 * radius;
+                       Chart.helpers.drawRoundedRectangle(ctx, leftX, topY, sideSize, sideSize, radius / 2);
+                       ctx.fill();
+                       break;
                case 'rectRot':
                        size = 1 / Math.SQRT2 * radius;
                        ctx.beginPath();

diff --git a/test/element.point.tests.js b/test/element.point.tests.js
index 61fe3d09a4ea151b2d6eb35149d349cddfb8030f..01eba3046ef2d258db391d6023c2e80f19f663a3 100644 (file)
--- a/test/element.point.tests.js
+++ b/test/element.point.tests.js
@@ -208,6 +208,30 @@ describe('Point element tests', function() {
                        args: []
                }]);
 
+               var drawRoundedRectangleSpy = jasmine.createSpy('drawRoundedRectangle');
+               var drawRoundedRectangle = Chart.helpers.drawRoundedRectangle;
+               var offset = point._view.radius / Math.SQRT2;
+               Chart.helpers.drawRoundedRectangle = drawRoundedRectangleSpy;
+               mockContext.resetCalls();
+               point._view.pointStyle = 'rectRounded';
+               point.draw();
+
+               expect(drawRoundedRectangleSpy).toHaveBeenCalledWith(
+                       mockContext,
+                       10 - offset,
+                       15 - offset,
+                       Math.SQRT2 * 2,
+                       Math.SQRT2 * 2,
+                       2 / 2
+               );
+               expect(mockContext.getCalls()).toContain(
+                       jasmine.objectContaining({
+                               name: 'fill',
+                               args: [],
+                       })
+               );
+
+               Chart.helpers.drawRoundedRectangle = drawRoundedRectangle;
                mockContext.resetCalls();
                point._view.pointStyle = 'rectRot';
                point.draw();