Add rectRounded point style

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

docs/05-Radar-Chart.md

@@ -50,7 +50,7 @@ hitRadius | `Number or Array<Number>` | The pixel size of the non-displayed poin
 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.
 

samples/line/point-styles.html

@@ -70,6 +70,7 @@
                 'circle',
                 'triangle',
                 'rect',
+                'rectRounded',
                 'rectRot',
                 'cross',
                 'crossRot',

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();

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();