https://academiaportugaldigital.pt/vendor/chart.js/dist/Chart.exte…0D9vovtXl5Tj5kUAhEfkXZeL5sXShMAvJMKA_rLmiwI

1//
2// Chart extension for making the bars rounded
3// Code from: https://codepen.io/jedtrow/full/ygRYgo
4//
5
6Chart.elements.Rectangle.prototype.draw = function() {
7
8	var ctx = this._chart.ctx;
9	var vm = this._view;
10	var left, right, top, bottom, signX, signY, borderSkipped, radius;
11	var borderWidth = vm.borderWidth;
12	// Set Radius Here
13	// If radius is large enough to cause drawing errors a max radius is imposed
14	var cornerRadius = 6;
15
16	if (!vm.horizontal) {
17		// bar
18		left = vm.x - vm.width / 2;
19		right = vm.x + vm.width / 2;
20		top = vm.y;
21		bottom = vm.base;
22		signX = 1;
23		signY = bottom > top ? 1 : -1;
24		borderSkipped = vm.borderSkipped || 'bottom';
25	} else {
26		// horizontal bar
27		left = vm.base;
28		right = vm.x;
29		top = vm.y - vm.height / 2;
30		bottom = vm.y + vm.height / 2;
31		signX = right > left ? 1 : -1;
32		signY = 1;
33		borderSkipped = vm.borderSkipped || 'left';
34	}
35
36	// Canvas doesn't allow us to stroke inside the width so we can
37	// adjust the sizes to fit if we're setting a stroke on the line
38	if (borderWidth) {
39		// borderWidth shold be less than bar width and bar height.
40		var barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom));
41		borderWidth = borderWidth > barSize ? barSize : borderWidth;
42		var halfStroke = borderWidth / 2;
43		// Adjust borderWidth when bar top position is near vm.base(zero).
44		var borderLeft = left + (borderSkipped !== 'left' ? halfStroke * signX : 0);
45		var borderRight = right + (borderSkipped !== 'right' ? -halfStroke * signX : 0);
46		var borderTop = top + (borderSkipped !== 'top' ? halfStroke * signY : 0);
47		var borderBottom = bottom + (borderSkipped !== 'bottom' ? -halfStroke * signY : 0);
48		// not become a vertical line?
49		if (borderLeft !== borderRight) {
50			top = borderTop;
51			bottom = borderBottom;
52		}
53		// not become a horizontal line?
54		if (borderTop !== borderBottom) {
55			left = borderLeft;
56			right = borderRight;
57		}
58	}
59
60	ctx.beginPath();
61	ctx.fillStyle = vm.backgroundColor;
62	ctx.strokeStyle = vm.borderColor;
63	ctx.lineWidth = borderWidth;
64
65	// Corner points, from bottom-left to bottom-right clockwise
66	// | 1 2 |
67	// | 0 3 |
68	var corners = [
69		[left, bottom],
70		[left, top],
71		[right, top],
72		[right, bottom]
73	];
74
75	// Find first (starting) corner with fallback to 'bottom'
76	var borders = ['bottom', 'left', 'top', 'right'];
77	var startCorner = borders.indexOf(borderSkipped, 0);
78	if (startCorner === -1) {
79		startCorner = 0;
80	}
81
82	function cornerAt(index) {
83		return corners[(startCorner + index) % 4];
84	}
85
86	// Draw rectangle from 'startCorner'
87	var corner = cornerAt(0);
88	ctx.moveTo(corner[0], corner[1]);
89
90	for (var i = 1; i < 4; i++) {
91		corner = cornerAt(i);
92		nextCornerId = i + 1;
93		if (nextCornerId == 4) {
94			nextCornerId = 0
95		}
96
97		nextCorner = cornerAt(nextCornerId);
98
99		width = corners[2][0] - corners[1][0];
100		height = corners[0][1] - corners[1][1];
101		x = corners[1][0];
102		y = corners[1][1];
103
104		var radius = cornerRadius;
105
106		// Fix radius being too large
107		if (radius > height / 2) {
108			radius = height / 2;
109		}
110		if (radius > width / 2) {
111			radius = width / 2;
112		}
113
114		ctx.moveTo(x + radius, y);
115		ctx.lineTo(x + width - radius, y);
116		ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
117		ctx.lineTo(x + width, y + height - radius);
118		ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
119		ctx.lineTo(x + radius, y + height);
120		ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
121		ctx.lineTo(x, y + radius);
122		ctx.quadraticCurveTo(x, y, x + radius, y);
123
124	}
125
126	ctx.fill();
127	if (borderWidth) {
128		ctx.stroke();
129	}
130};