diff --git a/docs/configuration/legend.md b/docs/configuration/legend.md index d9529d8491d..f8ce7eb5a17 100644 --- a/docs/configuration/legend.md +++ b/docs/configuration/legend.md @@ -26,8 +26,8 @@ Position of the legend. Options are: ## Align Alignment of the legend. Options are: -* `'start'` (default for left/right positioned legends) -* `'center'` (default for top/bottom positioned legends) +* `'start'` +* `'center'` * `'end'` Defaults to `'center'` for unrecognized values. diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js index 8c0e38be31b..6e0aaadbf53 100644 --- a/src/plugins/plugin.legend.js +++ b/src/plugins/plugin.legend.js @@ -12,6 +12,7 @@ defaults._set('global', { legend: { display: true, position: 'top', + align: 'center', fullWidth: true, reverse: false, weight: 1000, @@ -105,10 +106,6 @@ var Legend = Element.extend({ var me = this; helpers.extend(me, config); - if (me.options && !me.align) { - // to maintain backward compatibility with existing default - me.options.align = me.isHorizontal() ? 'center' : 'start'; - } // Contains hit boxes for each dataset (in dataset order) me.legendHitBoxes = []; @@ -258,7 +255,7 @@ var Legend = Element.extend({ var boxWidth = getBoxWidth(labelOpts, fontSize); var width = boxWidth + (fontSize / 2) + ctx.measureText(legendItem.text).width; - if (i === 0 || lineWidths[lineWidths.length - 1] + width + labelOpts.padding > minSize.width) { + if (i === 0 || lineWidths[lineWidths.length - 1] + width + labelOpts.padding > minSize.width - labelOpts.padding) { totalHeight += fontSize + labelOpts.padding; lineWidths[lineWidths.length - (i > 0 ? 0 : 1)] = 0; } @@ -418,29 +415,29 @@ var Legend = Element.extend({ }; var alignmentOffset = function(dimension, blockSize) { - if (opts.align === 'start') { + switch (opts.align) { + case 'start': return labelOpts.padding; - } else if (opts.align === 'end') { + case 'end': return dimension - blockSize; + default: // center + return (dimension - blockSize + labelOpts.padding) / 2; } - // default to center - return (dimension - blockSize + labelOpts.padding) / 2; }; // Horizontal var isHorizontal = me.isHorizontal(); - var line = 0; if (isHorizontal) { cursor = { - x: me.left + alignmentOffset(legendWidth, lineWidths[line]), + x: me.left + alignmentOffset(legendWidth, lineWidths[0]), y: me.top + labelOpts.padding, - line: line + line: 0 }; } else { cursor = { x: me.left + labelOpts.padding, - y: me.top + alignmentOffset(legendHeight, columnHeights[line]), - line: line + y: me.top + alignmentOffset(legendHeight, columnHeights[0]), + line: 0 }; } diff --git a/test/fixtures/plugin.legend/legend-doughnut-left-center-mulitiline.json b/test/fixtures/plugin.legend/legend-doughnut-left-center-mulitiline.json index 51359b29470..6665193f637 100644 --- a/test/fixtures/plugin.legend/legend-doughnut-left-center-mulitiline.json +++ b/test/fixtures/plugin.legend/legend-doughnut-left-center-mulitiline.json @@ -4,7 +4,9 @@ "data": { "labels": ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""], "datasets": [{ - "data": [10, 20, 30, 40, 50, 60, 70, 10, 20, 30, 40, 50, 60, 70, 10, 20, 30] + "data": [10, 20, 30, 40, 50, 60, 70, 10, 20, 30, 40, 50, 60, 70, 10, 20, 30], + "backgroundColor": "#00ff00", + "borderWidth": 0 }] }, "options": { diff --git a/test/fixtures/plugin.legend/legend-doughnut-left-center-mulitiline.png b/test/fixtures/plugin.legend/legend-doughnut-left-center-mulitiline.png index 23630db0df2..5160e356f74 100644 Binary files a/test/fixtures/plugin.legend/legend-doughnut-left-center-mulitiline.png and b/test/fixtures/plugin.legend/legend-doughnut-left-center-mulitiline.png differ diff --git a/test/fixtures/plugin.legend/legend-doughnut-left-center-single.json b/test/fixtures/plugin.legend/legend-doughnut-left-center-single.json index 808a6c125b9..4723a860258 100644 --- a/test/fixtures/plugin.legend/legend-doughnut-left-center-single.json +++ b/test/fixtures/plugin.legend/legend-doughnut-left-center-single.json @@ -4,7 +4,9 @@ "data": { "labels": [""], "datasets": [{ - "data": [10] + "data": [10], + "backgroundColor": "#00ff00", + "borderWidth": 0 }] }, "options": { diff --git a/test/fixtures/plugin.legend/legend-doughnut-left-center-single.png b/test/fixtures/plugin.legend/legend-doughnut-left-center-single.png index a1b48f0ea72..72072bfbefd 100644 Binary files a/test/fixtures/plugin.legend/legend-doughnut-left-center-single.png and b/test/fixtures/plugin.legend/legend-doughnut-left-center-single.png differ diff --git a/test/fixtures/plugin.legend/legend-doughnut-left-default-start.json b/test/fixtures/plugin.legend/legend-doughnut-left-default-center.json similarity index 74% rename from test/fixtures/plugin.legend/legend-doughnut-left-default-start.json rename to test/fixtures/plugin.legend/legend-doughnut-left-default-center.json index c8b2c5858ed..bb48a2778b2 100644 --- a/test/fixtures/plugin.legend/legend-doughnut-left-default-start.json +++ b/test/fixtures/plugin.legend/legend-doughnut-left-default-center.json @@ -4,7 +4,9 @@ "data": { "labels": ["", "", "", "", "", ""], "datasets": [{ - "data": [10, 20, 30, 40, 50] + "data": [10, 20, 30, 40, 50], + "backgroundColor": "#00ff00", + "borderWidth": 0 }] }, "options": { diff --git a/test/fixtures/plugin.legend/legend-doughnut-left-default-center.png b/test/fixtures/plugin.legend/legend-doughnut-left-default-center.png new file mode 100644 index 00000000000..3d9829833e2 Binary files /dev/null and b/test/fixtures/plugin.legend/legend-doughnut-left-default-center.png differ diff --git a/test/fixtures/plugin.legend/legend-doughnut-left-default-start.png b/test/fixtures/plugin.legend/legend-doughnut-left-default-start.png deleted file mode 100644 index ac89adbe89e..00000000000 Binary files a/test/fixtures/plugin.legend/legend-doughnut-left-default-start.png and /dev/null differ diff --git a/test/fixtures/plugin.legend/legend-doughnut-left-end-mulitiline.json b/test/fixtures/plugin.legend/legend-doughnut-left-end-mulitiline.json index db96db93ee0..662b16725f4 100644 --- a/test/fixtures/plugin.legend/legend-doughnut-left-end-mulitiline.json +++ b/test/fixtures/plugin.legend/legend-doughnut-left-end-mulitiline.json @@ -4,7 +4,9 @@ "data": { "labels": ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""], "datasets": [{ - "data": [10, 20, 30, 40, 50, 60, 70, 10, 20, 30, 40, 50, 60, 70, 10, 20, 30] + "data": [10, 20, 30, 40, 50, 60, 70, 10, 20, 30, 40, 50, 60, 70, 10, 20, 30], + "backgroundColor": "#00ff00", + "borderWidth": 0 }] }, "options": { diff --git a/test/fixtures/plugin.legend/legend-doughnut-left-end-mulitiline.png b/test/fixtures/plugin.legend/legend-doughnut-left-end-mulitiline.png index e8e66c30e05..46c6014eb6a 100644 Binary files a/test/fixtures/plugin.legend/legend-doughnut-left-end-mulitiline.png and b/test/fixtures/plugin.legend/legend-doughnut-left-end-mulitiline.png differ diff --git a/test/fixtures/plugin.legend/legend-doughnut-left-start-mulitiline.json b/test/fixtures/plugin.legend/legend-doughnut-left-start-mulitiline.json index 2ce4e1a9b28..1d4dc1f7e6f 100644 --- a/test/fixtures/plugin.legend/legend-doughnut-left-start-mulitiline.json +++ b/test/fixtures/plugin.legend/legend-doughnut-left-start-mulitiline.json @@ -4,7 +4,9 @@ "data": { "labels": ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""], "datasets": [{ - "data": [10, 20, 30, 40, 50, 60, 70, 10, 20, 30, 40, 50, 60, 70, 10, 20, 30] + "data": [10, 20, 30, 40, 50, 60, 70, 10, 20, 30, 40, 50, 60, 70, 10, 20, 30], + "backgroundColor": "#00ff00", + "borderWidth": 0 }] }, "options": { diff --git a/test/fixtures/plugin.legend/legend-doughnut-left-start-mulitiline.png b/test/fixtures/plugin.legend/legend-doughnut-left-start-mulitiline.png index a5afe65f124..91c0c31b0a5 100644 Binary files a/test/fixtures/plugin.legend/legend-doughnut-left-start-mulitiline.png and b/test/fixtures/plugin.legend/legend-doughnut-left-start-mulitiline.png differ diff --git a/test/fixtures/plugin.legend/legend-doughnut-top-center-mulitiline.json b/test/fixtures/plugin.legend/legend-doughnut-top-center-mulitiline.json index a2a3467e11d..8bb57e4d58d 100644 --- a/test/fixtures/plugin.legend/legend-doughnut-top-center-mulitiline.json +++ b/test/fixtures/plugin.legend/legend-doughnut-top-center-mulitiline.json @@ -4,7 +4,9 @@ "data": { "labels": ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""], "datasets": [{ - "data": [10, 20, 30, 40, 50, 60, 70, 10, 20, 30, 40, 50, 60, 70, 10, 20, 30, 20, 10] + "data": [10, 20, 30, 40, 50, 60, 70, 10, 20, 30, 40, 50, 60, 70, 10, 20, 30, 20, 10], + "backgroundColor": "#00ff00", + "borderWidth": 0 }] }, "options": { diff --git a/test/fixtures/plugin.legend/legend-doughnut-top-center-mulitiline.png b/test/fixtures/plugin.legend/legend-doughnut-top-center-mulitiline.png index 510e4c5307a..f3b552abe0b 100644 Binary files a/test/fixtures/plugin.legend/legend-doughnut-top-center-mulitiline.png and b/test/fixtures/plugin.legend/legend-doughnut-top-center-mulitiline.png differ diff --git a/test/fixtures/plugin.legend/legend-doughnut-top-center-single.json b/test/fixtures/plugin.legend/legend-doughnut-top-center-single.json index 56c0e486712..310ad7556c5 100644 --- a/test/fixtures/plugin.legend/legend-doughnut-top-center-single.json +++ b/test/fixtures/plugin.legend/legend-doughnut-top-center-single.json @@ -4,7 +4,9 @@ "data": { "labels": [""], "datasets": [{ - "data": [10] + "data": [10], + "backgroundColor": "#00ff00", + "borderWidth": 0 }] }, "options": { diff --git a/test/fixtures/plugin.legend/legend-doughnut-top-center-single.png b/test/fixtures/plugin.legend/legend-doughnut-top-center-single.png index 09d784000d6..6aac5226310 100644 Binary files a/test/fixtures/plugin.legend/legend-doughnut-top-center-single.png and b/test/fixtures/plugin.legend/legend-doughnut-top-center-single.png differ diff --git a/test/fixtures/plugin.legend/legend-doughnut-top-end-mulitiline.json b/test/fixtures/plugin.legend/legend-doughnut-top-end-mulitiline.json index ff9b02a34b4..b150ef789d0 100644 --- a/test/fixtures/plugin.legend/legend-doughnut-top-end-mulitiline.json +++ b/test/fixtures/plugin.legend/legend-doughnut-top-end-mulitiline.json @@ -4,7 +4,9 @@ "data": { "labels": ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""], "datasets": [{ - "data": [10, 20, 30, 40, 50, 60, 70, 10, 20, 30, 40, 50, 60, 70, 10] + "data": [10, 20, 30, 40, 50, 60, 70, 10, 20, 30, 40, 50, 60, 70, 10], + "backgroundColor": "#00ff00", + "borderWidth": 0 }] }, "options": { diff --git a/test/fixtures/plugin.legend/legend-doughnut-top-end-mulitiline.png b/test/fixtures/plugin.legend/legend-doughnut-top-end-mulitiline.png index db064e5d204..e6e56e4701f 100644 Binary files a/test/fixtures/plugin.legend/legend-doughnut-top-end-mulitiline.png and b/test/fixtures/plugin.legend/legend-doughnut-top-end-mulitiline.png differ diff --git a/test/fixtures/plugin.legend/legend-doughnut-top-start-mulitiline.json b/test/fixtures/plugin.legend/legend-doughnut-top-start-mulitiline.json index eaebd9a95f8..ca2111922ab 100644 --- a/test/fixtures/plugin.legend/legend-doughnut-top-start-mulitiline.json +++ b/test/fixtures/plugin.legend/legend-doughnut-top-start-mulitiline.json @@ -4,7 +4,9 @@ "data": { "labels": ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""], "datasets": [{ - "data": [10, 20, 30, 40, 50, 60, 70, 10, 20, 30, 40, 50, 60, 70, 10] + "data": [10, 20, 30, 40, 50, 60, 70, 10, 20, 30, 40, 50, 60, 70, 10], + "backgroundColor": "#00ff00", + "borderWidth": 0 }] }, "options": { diff --git a/test/fixtures/plugin.legend/legend-doughnut-top-start-mulitiline.png b/test/fixtures/plugin.legend/legend-doughnut-top-start-mulitiline.png index 0254988e62f..2e7e7fe88aa 100644 Binary files a/test/fixtures/plugin.legend/legend-doughnut-top-start-mulitiline.png and b/test/fixtures/plugin.legend/legend-doughnut-top-start-mulitiline.png differ diff --git a/test/specs/plugin.legend.tests.js b/test/specs/plugin.legend.tests.js index a30c184c284..18829cac04a 100644 --- a/test/specs/plugin.legend.tests.js +++ b/test/specs/plugin.legend.tests.js @@ -6,6 +6,7 @@ describe('Legend block tests', function() { expect(Chart.defaults.global.legend).toEqual({ display: true, position: 'top', + align: 'center', fullWidth: true, // marks that this box should take the full width of the canvas (pushing down other boxes) reverse: false, weight: 1000,