Make legend appearance consistent with chart elements

- Use the default value for each element type if a property is not set
- Stroke after fill to move borders to the front
- Support property arrays
- Use point's colors and border width when usePointStyle is true
- Disable line styles when usePointStyle is true or the dataset type is not 'line' or 'radar'
- Fix the existing tests and add more tests

Author: nagix

src/plugins/plugin.legend.js

@@ -47,17 +47,36 @@ defaults._set('global', {
 			generateLabels: function(chart) {
 				var data = chart.data;
 				return helpers.isArray(data.datasets) ? data.datasets.map(function(dataset, i) {
+					var type = chart.getDatasetMeta(i).type;
+					var options = chart.options;
+					var legendOpts = options.legend;
+					var valueAtIndexOrDefault = helpers.valueAtIndexOrDefault;
+					var valueOrDefault = helpers.valueOrDefault;
+
+					var usePointStyle = legendOpts && legendOpts.labels && legendOpts.labels.usePointStyle;
+					var backgroundColor = usePointStyle ? valueAtIndexOrDefault(dataset.pointBackgroundColor, 0, dataset.backgroundColor) : dataset.backgroundColor;
+					var borderWidth = usePointStyle ? valueAtIndexOrDefault(dataset.pointBorderWidth, 0, dataset.borderWidth) : dataset.borderWidth;
+					var borderColor = usePointStyle ? valueAtIndexOrDefault(dataset.pointBorderColor, 0, dataset.borderColor) : dataset.borderColor;
+
+					var useLineStyles = (type === 'line' || type === 'radar') && !usePointStyle;
+					var borderCapStyle = useLineStyles ? dataset.borderCapStyle : 'butt';
+					var borderDash = useLineStyles ? dataset.borderDash : [];
+					var borderDashOffset = useLineStyles ? dataset.borderDashOffset : 0;
+					var borderJoinStyle = useLineStyles ? dataset.borderJoinStyle : 'miter';
+
+					var elementOpts = options.elements[useLineStyles ? 'line' : type === 'bar' ? 'rectangle' : 'point'];
+
 					return {
 						text: dataset.label,
-						fillStyle: (!helpers.isArray(dataset.backgroundColor) ? dataset.backgroundColor : dataset.backgroundColor[0]),
+						fillStyle: valueAtIndexOrDefault(backgroundColor, 0, elementOpts.backgroundColor),
 						hidden: !chart.isDatasetVisible(i),
-						lineCap: dataset.borderCapStyle,
-						lineDash: dataset.borderDash,
-						lineDashOffset: dataset.borderDashOffset,
-						lineJoin: dataset.borderJoinStyle,
-						lineWidth: dataset.borderWidth,
-						strokeStyle: dataset.borderColor,
-						pointStyle: dataset.pointStyle,
+						lineCap: valueOrDefault(borderCapStyle, elementOpts.borderCapStyle),
+						lineDash: valueOrDefault(borderDash, elementOpts.borderDash),
+						lineDashOffset: valueOrDefault(borderDashOffset, elementOpts.borderDashOffset),
+						lineJoin: valueOrDefault(borderJoinStyle, elementOpts.borderJoinStyle),
+						lineWidth: valueAtIndexOrDefault(borderWidth, 0, elementOpts.borderWidth),
+						strokeStyle: valueAtIndexOrDefault(borderColor, 0, elementOpts.borderColor),
+						pointStyle: valueAtIndexOrDefault(dataset.pointStyle, 0, elementOpts.pointStyle),
 
 						// Below is extra data used for toggling the datasets
 						datasetIndex: i
@@ -383,10 +402,10 @@ var Legend = Element.extend({
 					helpers.canvas.drawPoint(ctx, legendItem.pointStyle, radius, centerX, centerY);
 				} else {
 					// Draw box as legend symbol
+					ctx.fillRect(x, y, boxWidth, fontSize);
 					if (!isLineWidthZero) {
 						ctx.strokeRect(x, y, boxWidth, fontSize);
 					}
-					ctx.fillRect(x, y, boxWidth, fontSize);
 				}
 
 				ctx.restore();