diff --git a/docs/configuration/legend.md b/docs/configuration/legend.md index c7d124868ed..d9529d8491d 100644 --- a/docs/configuration/legend.md +++ b/docs/configuration/legend.md @@ -9,6 +9,7 @@ The legend configuration is passed into the `options.legend` namespace. The glob | ---- | ---- | ------- | ----------- | `display` | `boolean` | `true` | Is the legend shown? | `position` | `string` | `'top'` | Position of the legend. [more...](#position) +| `align` | `string` | `'center'` | Alignment of the legend. [more...](#align) | `fullWidth` | `boolean` | `true` | Marks that this box should take the full width of the canvas (pushing down other boxes). This is unlikely to need to be changed in day-to-day use. | `onClick` | `function` | | A callback that is called when a click event is registered on a label item. | `onHover` | `function` | | A callback that is called when a 'mousemove' event is registered on top of a label item. @@ -23,6 +24,14 @@ Position of the legend. Options are: * `'bottom'` * `'right'` +## Align +Alignment of the legend. Options are: +* `'start'` (default for left/right positioned legends) +* `'center'` (default for top/bottom positioned legends) +* `'end'` + +Defaults to `'center'` for unrecognized values. + ## Legend Label Configuration The legend label configuration is nested below the legend configuration using the `labels` key. diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js index 2c6870b279d..3503dc0aed3 100644 --- a/src/plugins/plugin.legend.js +++ b/src/plugins/plugin.legend.js @@ -104,6 +104,10 @@ var Legend = Element.extend({ initialize: function(config) { helpers.extend(this, config); + if (this.options && !this.options.align) { + // to maintain backward compatibility with existing default + this.options.align = this.isHorizontal() ? 'center' : 'start'; + } // Contains hit boxes for each dataset (in dataset order) this.legendHitBoxes = []; @@ -255,7 +259,7 @@ var Legend = Element.extend({ if (i === 0 || lineWidths[lineWidths.length - 1] + width + labelOpts.padding > minSize.width) { totalHeight += fontSize + labelOpts.padding; - lineWidths[lineWidths.length - (i > 0 ? 0 : 1)] = labelOpts.padding; + lineWidths[lineWidths.length - (i > 0 ? 0 : 1)] = 0; } // Store the hitbox width and height here. Final position will be updated in `draw` @@ -274,6 +278,7 @@ var Legend = Element.extend({ } else { var vPadding = labelOpts.padding; var columnWidths = me.columnWidths = []; + var columnHeights = me.columnHeights = []; var totalWidth = labelOpts.padding; var currentColWidth = 0; var currentColHeight = 0; @@ -287,7 +292,7 @@ var Legend = Element.extend({ if (i > 0 && currentColHeight + itemHeight > minSize.height - vPadding) { totalWidth += currentColWidth + labelOpts.padding; columnWidths.push(currentColWidth); // previous column width - + columnHeights.push(currentColHeight); currentColWidth = 0; currentColHeight = 0; } @@ -307,6 +312,7 @@ var Legend = Element.extend({ totalWidth += currentColWidth; columnWidths.push(currentColWidth); + columnHeights.push(currentColHeight); minSize.width += totalWidth; } } @@ -329,6 +335,8 @@ var Legend = Element.extend({ var globalDefaults = defaults.global; var defaultColor = globalDefaults.defaultColor; var lineDefault = globalDefaults.elements.line; + var legendHeight = me.height; + var columnHeights = me.columnHeights; var legendWidth = me.width; var lineWidths = me.lineWidths; @@ -408,19 +416,30 @@ var Legend = Element.extend({ } }; + var alignmentOffset = function(dimension, blockSize) { + if (opts.align === 'start') { + return labelOpts.padding; + } else if (opts.align === 'end') { + return dimension - blockSize; + } + // default to center + return (dimension - blockSize + labelOpts.padding) / 2; + }; + // Horizontal var isHorizontal = me.isHorizontal(); + var line = 0; if (isHorizontal) { cursor = { - x: me.left + ((legendWidth - lineWidths[0]) / 2) + labelOpts.padding, + x: me.left + alignmentOffset(legendWidth, lineWidths[line]), y: me.top + labelOpts.padding, - line: 0 + line: line }; } else { cursor = { x: me.left + labelOpts.padding, - y: me.top + labelOpts.padding, - line: 0 + y: me.top + alignmentOffset(legendHeight, columnHeights[line]), + line: line }; } @@ -438,12 +457,12 @@ var Legend = Element.extend({ if (i > 0 && x + width + labelOpts.padding > me.left + me.minSize.width) { y = cursor.y += itemHeight; cursor.line++; - x = cursor.x = me.left + ((legendWidth - lineWidths[cursor.line]) / 2) + labelOpts.padding; + x = cursor.x = me.left + alignmentOffset(legendWidth, lineWidths[cursor.line]); } } else if (i > 0 && y + itemHeight > me.top + me.minSize.height) { x = cursor.x = x + me.columnWidths[cursor.line] + labelOpts.padding; - y = cursor.y = me.top + labelOpts.padding; cursor.line++; + y = cursor.y = me.top + alignmentOffset(legendHeight, columnHeights[cursor.line]); } drawLegendBox(x, y, legendItem); @@ -459,7 +478,6 @@ var Legend = Element.extend({ } else { cursor.y += itemHeight; } - }); } }, diff --git a/test/fixtures/plugin.legend/legend-doughnut-left-center-mulitiline.json b/test/fixtures/plugin.legend/legend-doughnut-left-center-mulitiline.json new file mode 100644 index 00000000000..c19a109329b --- /dev/null +++ b/test/fixtures/plugin.legend/legend-doughnut-left-center-mulitiline.json @@ -0,0 +1,24 @@ +{ + "config": { + "type": "doughnut", + "data": { + "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16"], + "datasets": [{ + "data": [10, 20, 30, 40, 50, 60, 70, 10, 20, 30, 40, 50, 60, 70, 10, 20, 30] + }] + }, + "options": { + "responsive": false, + "legend": { + "position": "left", + "align": "center" + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/plugin.legend/legend-doughnut-left-center-mulitiline.png b/test/fixtures/plugin.legend/legend-doughnut-left-center-mulitiline.png new file mode 100644 index 00000000000..b9aefa86c9a Binary files /dev/null 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 new file mode 100644 index 00000000000..88d8cac1359 --- /dev/null +++ b/test/fixtures/plugin.legend/legend-doughnut-left-center-single.json @@ -0,0 +1,24 @@ +{ + "config": { + "type": "doughnut", + "data": { + "labels": ["0"], + "datasets": [{ + "data": [10] + }] + }, + "options": { + "responsive": false, + "legend": { + "position": "left", + "align": "center" + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/plugin.legend/legend-doughnut-left-center-single.png b/test/fixtures/plugin.legend/legend-doughnut-left-center-single.png new file mode 100644 index 00000000000..a1b48f0ea72 Binary files /dev/null and b/test/fixtures/plugin.legend/legend-doughnut-left-center-single.png 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 new file mode 100644 index 00000000000..4370fcdd288 --- /dev/null +++ b/test/fixtures/plugin.legend/legend-doughnut-left-end-mulitiline.json @@ -0,0 +1,24 @@ +{ + "config": { + "type": "doughnut", + "data": { + "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16"], + "datasets": [{ + "data": [10, 20, 30, 40, 50, 60, 70, 10, 20, 30, 40, 50, 60, 70, 10, 20, 30] + }] + }, + "options": { + "responsive": false, + "legend": { + "position": "left", + "align": "end" + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/plugin.legend/legend-doughnut-left-end-mulitiline.png b/test/fixtures/plugin.legend/legend-doughnut-left-end-mulitiline.png new file mode 100644 index 00000000000..308ebe94da4 Binary files /dev/null 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 new file mode 100644 index 00000000000..86cd0eca1b9 --- /dev/null +++ b/test/fixtures/plugin.legend/legend-doughnut-left-start-mulitiline.json @@ -0,0 +1,24 @@ +{ + "config": { + "type": "doughnut", + "data": { + "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16"], + "datasets": [{ + "data": [10, 20, 30, 40, 50, 60, 70, 10, 20, 30, 40, 50, 60, 70, 10, 20, 30] + }] + }, + "options": { + "responsive": false, + "legend": { + "position": "left", + "align": "start" + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/plugin.legend/legend-doughnut-left-start-mulitiline.png b/test/fixtures/plugin.legend/legend-doughnut-left-start-mulitiline.png new file mode 100644 index 00000000000..362cd71f4d1 Binary files /dev/null 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 new file mode 100644 index 00000000000..4b4e2e866f2 --- /dev/null +++ b/test/fixtures/plugin.legend/legend-doughnut-top-center-mulitiline.json @@ -0,0 +1,24 @@ +{ + "config": { + "type": "doughnut", + "data": { + "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16"], + "datasets": [{ + "data": [10, 20, 30, 40, 50, 60, 70, 10, 20, 30, 40, 50, 60, 70, 10, 20, 30] + }] + }, + "options": { + "responsive": false, + "legend": { + "position": "top", + "align": "center" + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/plugin.legend/legend-doughnut-top-center-mulitiline.png b/test/fixtures/plugin.legend/legend-doughnut-top-center-mulitiline.png new file mode 100644 index 00000000000..7449703add8 Binary files /dev/null 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 new file mode 100644 index 00000000000..d8542512ca7 --- /dev/null +++ b/test/fixtures/plugin.legend/legend-doughnut-top-center-single.json @@ -0,0 +1,24 @@ +{ + "config": { + "type": "doughnut", + "data": { + "labels": ["0"], + "datasets": [{ + "data": [10] + }] + }, + "options": { + "responsive": false, + "legend": { + "position": "top", + "align": "center" + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/plugin.legend/legend-doughnut-top-center-single.png b/test/fixtures/plugin.legend/legend-doughnut-top-center-single.png new file mode 100644 index 00000000000..09d784000d6 Binary files /dev/null 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 new file mode 100644 index 00000000000..b349210a4c0 --- /dev/null +++ b/test/fixtures/plugin.legend/legend-doughnut-top-end-mulitiline.json @@ -0,0 +1,24 @@ +{ + "config": { + "type": "doughnut", + "data": { + "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16"], + "datasets": [{ + "data": [10, 20, 30, 40, 50, 60, 70, 10, 20, 30, 40, 50, 60, 70, 10, 20, 30] + }] + }, + "options": { + "responsive": false, + "legend": { + "position": "top", + "align": "end" + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/plugin.legend/legend-doughnut-top-end-mulitiline.png b/test/fixtures/plugin.legend/legend-doughnut-top-end-mulitiline.png new file mode 100644 index 00000000000..1764487e64f Binary files /dev/null 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 new file mode 100644 index 00000000000..7139e180c3d --- /dev/null +++ b/test/fixtures/plugin.legend/legend-doughnut-top-start-mulitiline.json @@ -0,0 +1,24 @@ +{ + "config": { + "type": "doughnut", + "data": { + "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16"], + "datasets": [{ + "data": [10, 20, 30, 40, 50, 60, 70, 10, 20, 30, 40, 50, 60, 70, 10, 20, 30] + }] + }, + "options": { + "responsive": false, + "legend": { + "position": "top", + "align": "start" + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/plugin.legend/legend-doughnut-top-start-mulitiline.png b/test/fixtures/plugin.legend/legend-doughnut-top-start-mulitiline.png new file mode 100644 index 00000000000..8dc26c2ec7f Binary files /dev/null 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 e970c596a82..a30c184c284 100644 --- a/test/specs/plugin.legend.tests.js +++ b/test/specs/plugin.legend.tests.js @@ -1,5 +1,7 @@ // Test the rectangle element describe('Legend block tests', function() { + describe('auto', jasmine.fixture.specs('plugin.legend')); + it('should have the correct default config', function() { expect(Chart.defaults.global.legend).toEqual({ display: true, @@ -177,358 +179,6 @@ describe('Legend block tests', function() { expect(makeChart).not.toThrow(); }); - it('should draw correctly when the legend is positioned on the top', function() { - var chart = window.acquireChart({ - type: 'bar', - data: { - datasets: [{ - label: 'dataset1', - backgroundColor: '#f31', - borderCapStyle: 'butt', - borderDash: [2, 2], - borderDashOffset: 5.5, - data: [] - }, { - label: 'dataset2', - hidden: true, - borderJoinStyle: 'miter', - data: [] - }, { - label: 'dataset3', - borderWidth: 10, - borderColor: 'green', - data: [] - }], - labels: [] - } - }); - - expect(chart.legend.legendHitBoxes.length).toBe(3); - - [ - {h: 12, l: 106, t: 10, w: 93}, - {h: 12, l: 209, t: 10, w: 93}, - {h: 12, l: 312, t: 10, w: 93} - ].forEach(function(expected, i) { - expect(chart.legend.legendHitBoxes[i].height).toBeCloseToPixel(expected.h); - expect(chart.legend.legendHitBoxes[i].left).toBeCloseToPixel(expected.l); - expect(chart.legend.legendHitBoxes[i].top).toBeCloseToPixel(expected.t); - expect(chart.legend.legendHitBoxes[i].width).toBeCloseToPixel(expected.w); - }); - - // NOTE(SB) We should get ride of the following tests and use image diff instead. - // For now, as discussed with Evert Timberg, simply comment out. - // See https://humblesoftware.github.io/js-imagediff/test.html - /* chart.legend.ctx = window.createMockContext(); - chart.update(); - - expect(chart.legend.ctx .getCalls()).toEqual([{ - "name": "measureText", - "args": ["dataset1"] - }, { - "name": "measureText", - "args": ["dataset2"] - }, { - "name": "measureText", - "args": ["dataset3"] - }, { - "name": "measureText", - "args": ["dataset1"] - }, { - "name": "measureText", - "args": ["dataset2"] - }, { - "name": "measureText", - "args": ["dataset3"] - }, { - "name": "setLineWidth", - "args": [0.5] - }, { - "name": "setStrokeStyle", - "args": ["#666"] - }, { - "name": "setFillStyle", - "args": ["#666"] - }, { - "name": "measureText", - "args": ["dataset1"] - }, { - "name": "save", - "args": [] - }, { - "name": "setFillStyle", - "args": ["#f31"] - }, { - "name": "setLineCap", - "args": ["butt"] - }, { - "name": "setLineDashOffset", - "args": [5.5] - }, { - "name": "setLineJoin", - "args": ["miter"] - }, { - "name": "setLineWidth", - "args": [3] - }, { - "name": "setStrokeStyle", - "args": ["rgba(0,0,0,0.1)"] - }, { - "name": "setLineDash", - "args": [ - [2, 2] - ] - }, { - "name": "strokeRect", - "args": [114, 110, 40, 12] - }, { - "name": "fillRect", - "args": [114, 110, 40, 12] - }, { - "name": "restore", - "args": [] - }, { - "name": "fillText", - "args": ["dataset1", 160, 110] - }, { - "name": "measureText", - "args": ["dataset2"] - }, { - "name": "save", - "args": [] - }, { - "name": "setFillStyle", - "args": ["rgba(0,0,0,0.1)"] - }, { - "name": "setLineCap", - "args": ["butt"] - }, { - "name": "setLineDashOffset", - "args": [0] - }, { - "name": "setLineJoin", - "args": ["miter"] - }, { - "name": "setLineWidth", - "args": [3] - }, { - "name": "setStrokeStyle", - "args": ["rgba(0,0,0,0.1)"] - }, { - "name": "setLineDash", - "args": [ - [] - ] - }, { - "name": "strokeRect", - "args": [250, 110, 40, 12] - }, { - "name": "fillRect", - "args": [250, 110, 40, 12] - }, { - "name": "restore", - "args": [] - }, { - "name": "fillText", - "args": ["dataset2", 296, 110] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "setLineWidth", - "args": [2] - }, { - "name": "moveTo", - "args": [296, 116] - }, { - "name": "lineTo", - "args": [376, 116] - }, { - "name": "stroke", - "args": [] - }, { - "name": "measureText", - "args": ["dataset3"] - }, { - "name": "save", - "args": [] - }, { - "name": "setFillStyle", - "args": ["rgba(0,0,0,0.1)"] - }, { - "name": "setLineCap", - "args": ["butt"] - }, { - "name": "setLineDashOffset", - "args": [0] - }, { - "name": "setLineJoin", - "args": ["miter"] - }, { - "name": "setLineWidth", - "args": [10] - }, { - "name": "setStrokeStyle", - "args": ["green"] - }, { - "name": "setLineDash", - "args": [ - [] - ] - }, { - "name": "strokeRect", - "args": [182, 132, 40, 12] - }, { - "name": "fillRect", - "args": [182, 132, 40, 12] - }, { - "name": "restore", - "args": [] - }, { - "name": "fillText", - "args": ["dataset3", 228, 132] - }]);*/ - }); - - it('should draw correctly when the legend is positioned on the left', function() { - var chart = window.acquireChart({ - type: 'bar', - data: { - datasets: [{ - label: 'dataset1', - backgroundColor: '#f31', - borderCapStyle: 'butt', - borderDash: [2, 2], - borderDashOffset: 5.5, - data: [] - }, { - label: 'dataset2', - hidden: true, - borderJoinStyle: 'miter', - data: [] - }, { - label: 'dataset3', - borderWidth: 10, - borderColor: 'green', - data: [] - }], - labels: [] - }, - options: { - legend: { - position: 'left' - } - } - }); - - expect(chart.legend.legendHitBoxes.length).toBe(3); - - [ - {h: 12, l: 10, t: 16, w: 93}, - {h: 12, l: 10, t: 38, w: 93}, - {h: 12, l: 10, t: 60, w: 93} - ].forEach(function(expected, i) { - expect(chart.legend.legendHitBoxes[i].height).toBeCloseToPixel(expected.h); - expect(chart.legend.legendHitBoxes[i].left).toBeCloseToPixel(expected.l); - expect(chart.legend.legendHitBoxes[i].top).toBeCloseToPixel(expected.t); - expect(chart.legend.legendHitBoxes[i].width).toBeCloseToPixel(expected.w); - }); - }); - - it('should draw correctly when the legend is positioned on the top and has multiple rows', function() { - var chart = window.acquireChart({ - type: 'bar', - data: { - datasets: Array.apply(null, Array(9)).map(function() { - return { - label: ' ', - data: [] - }; - }), - labels: [] - } - }); - - expect(chart.legend.left).toBeCloseToPixel(0); - expect(chart.legend.top).toBeCloseToPixel(0); - expect(chart.legend.width).toBeCloseToPixel(512); - expect(chart.legend.height).toBeCloseToPixel(54); - expect(chart.legend.legendHitBoxes.length).toBe(9); - - [ - {h: 12, l: 24, t: 10, w: 49}, - {h: 12, l: 83, t: 10, w: 49}, - {h: 12, l: 142, t: 10, w: 49}, - {h: 12, l: 202, t: 10, w: 49}, - {h: 12, l: 261, t: 10, w: 49}, - {h: 12, l: 320, t: 10, w: 49}, - {h: 12, l: 380, t: 10, w: 49}, - {h: 12, l: 439, t: 10, w: 49}, - {h: 12, l: 231, t: 32, w: 49} - ].forEach(function(expected, i) { - expect(chart.legend.legendHitBoxes[i].height).toBeCloseToPixel(expected.h); - expect(chart.legend.legendHitBoxes[i].left).toBeCloseToPixel(expected.l); - expect(chart.legend.legendHitBoxes[i].top).toBeCloseToPixel(expected.t); - expect(chart.legend.legendHitBoxes[i].width).toBeCloseToPixel(expected.w); - }); - }); - - it('should draw correctly when the legend is positioned on the left and has multiple columns', function() { - var chart = window.acquireChart({ - type: 'bar', - data: { - datasets: Array.apply(null, Array(22)).map(function() { - return { - label: ' ', - data: [] - }; - }), - labels: [] - }, - options: { - legend: { - position: 'left' - } - } - }); - - expect(chart.legend.left).toBeCloseToPixel(0); - expect(chart.legend.top).toBeCloseToPixel(6); - expect(chart.legend.width).toBeCloseToPixel(128); - expect(chart.legend.height).toBeCloseToPixel(476); - expect(chart.legend.legendHitBoxes.length).toBe(22); - - [ - {h: 12, l: 10, t: 16, w: 49}, - {h: 12, l: 10, t: 38, w: 49}, - {h: 12, l: 10, t: 60, w: 49}, - {h: 12, l: 10, t: 82, w: 49}, - {h: 12, l: 10, t: 104, w: 49}, - {h: 12, l: 10, t: 126, w: 49}, - {h: 12, l: 10, t: 148, w: 49}, - {h: 12, l: 10, t: 170, w: 49}, - {h: 12, l: 10, t: 192, w: 49}, - {h: 12, l: 10, t: 214, w: 49}, - {h: 12, l: 10, t: 236, w: 49}, - {h: 12, l: 10, t: 258, w: 49}, - {h: 12, l: 10, t: 280, w: 49}, - {h: 12, l: 10, t: 302, w: 49}, - {h: 12, l: 10, t: 324, w: 49}, - {h: 12, l: 10, t: 346, w: 49}, - {h: 12, l: 10, t: 368, w: 49}, - {h: 12, l: 10, t: 390, w: 49}, - {h: 12, l: 10, t: 412, w: 49}, - {h: 12, l: 10, t: 434, w: 49}, - {h: 12, l: 10, t: 456, w: 49}, - {h: 12, l: 69, t: 16, w: 49} - ].forEach(function(expected, i) { - expect(chart.legend.legendHitBoxes[i].height).toBeCloseToPixel(expected.h); - expect(chart.legend.legendHitBoxes[i].left).toBeCloseToPixel(expected.l); - expect(chart.legend.legendHitBoxes[i].top).toBeCloseToPixel(expected.t); - expect(chart.legend.legendHitBoxes[i].width).toBeCloseToPixel(expected.w); - }); - }); - it('should not draw legend items outside of the chart bounds', function() { var chart = window.acquireChart( { @@ -704,3 +354,4 @@ describe('Legend block tests', function() { }); }); }); +