Fix legend alignment issues (#8168)

diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js
index a1614187c467111e8aec79e7c171d1bb7da6ad6e..3fbed828c8976a449f53a7a2da16cdc867439389 100644 (file)
--- a/src/plugins/plugin.legend.js
+++ b/src/plugins/plugin.legend.js
@@ -231,7 +231,7 @@ export class Legend extends Element {
         */
        _draw() {
                const me = this;
-               const {options: opts, height: legendHeight, width: legendWidth, columnSizes, lineWidths, ctx, legendHitBoxes} = me;
+               const {options: opts, columnSizes, lineWidths, ctx, legendHitBoxes} = me;
                const {align, labels: labelOpts} = opts;
                const defaultColor = defaults.color;
                const rtlHelper = getRtlAdapter(opts.rtl, me.left, me.width);
@@ -320,14 +320,14 @@ export class Legend extends Element {
                const titleHeight = this._computeTitleHeight();
                if (isHorizontal) {
                        cursor = {
-                               x: me.left + _alignStartEnd(align, padding, legendWidth - lineWidths[0]),
+                               x: _alignStartEnd(align, me.left + padding, me.right - lineWidths[0]),
                                y: me.top + padding + titleHeight,
                                line: 0
                        };
                } else {
                        cursor = {
                                x: me.left + padding,
-                               y: me.top + _alignStartEnd(align, padding, legendHeight - columnSizes[0].height) + titleHeight,
+                               y: _alignStartEnd(align, me.top + titleHeight + padding, me.bottom - columnSizes[0].height),
                                line: 0
                        };
                }
@@ -347,12 +347,12 @@ export class Legend extends Element {
                                if (i > 0 && x + width + padding > me.right) {
                                        y = cursor.y += lineHeight;
                                        cursor.line++;
-                                       x = cursor.x = me.left + _alignStartEnd(align, padding, legendWidth - lineWidths[cursor.line]);
+                                       x = cursor.x = _alignStartEnd(align, me.left + padding, me.right - lineWidths[cursor.line]);
                                }
                        } else if (i > 0 && y + lineHeight > me.bottom) {
                                x = cursor.x = x + columnSizes[cursor.line].width + padding;
                                cursor.line++;
-                               y = cursor.y = me.top + _alignStartEnd(align, padding, legendHeight - columnSizes[cursor.line].height);
+                               y = cursor.y = _alignStartEnd(align, me.top + titleHeight + padding, me.bottom - columnSizes[cursor.line].height);
                        }
 
                        const realX = rtlHelper.x(x);
@@ -393,7 +393,8 @@ export class Legend extends Element {
                const ctx = me.ctx;
                const position = titleOpts.position;
                const halfFontSize = titleFont.size / 2;
-               let y = me.top + titlePadding.top + halfFontSize;
+               const topPaddingPlusHalfFontSize = titlePadding.top + halfFontSize;
+               let y;
 
                // These defaults are used when the legend is vertical.
                // When horizontal, they are computed below.
@@ -403,11 +404,12 @@ export class Legend extends Element {
                if (this.isHorizontal()) {
                        // Move left / right so that the title is above the legend lines
                        maxWidth = Math.max(...me.lineWidths);
+                       y = me.top + topPaddingPlusHalfFontSize;
                        left = _alignStartEnd(opts.align, left, me.right - maxWidth);
                } else {
                        // Move down so that the title is above the legend stack in every alignment
                        const maxHeight = me.columnSizes.reduce((acc, size) => Math.max(acc, size.height), 0);
-                       y = _alignStartEnd(opts.align, y, me.height - maxHeight);
+                       y = topPaddingPlusHalfFontSize + _alignStartEnd(opts.align, me.top, me.bottom - maxHeight - opts.labels.padding - me._computeTitleHeight());
                }
 
                // Now that we know the left edge of the inner legend box, compute the correct

diff --git a/test/fixtures/plugin.legend/title/bottom-center-center.js b/test/fixtures/plugin.legend/title/bottom-center-center.js
new file mode 100644 (file)
index 0000000..487e867
--- /dev/null
+++ b/test/fixtures/plugin.legend/title/bottom-center-center.js
@@ -0,0 +1,36 @@
+module.exports = {
+       config: {
+               type: 'line',
+               data: {
+                       datasets: [
+                               {label: 'a', data: []},
+                               {label: 'b', data: []},
+                               {label: 'c', data: []}
+                       ]
+               },
+               options: {
+                       plugins: {
+                               legend: {
+                                       position: 'bottom',
+                                       align: 'center',
+                                       title: {
+                                               display: true,
+                                               position: 'center',
+                                               text: 'title'
+                                       }
+                               }
+                       },
+                       scales: {
+                               x: {display: false},
+                               y: {display: false}
+                       }
+               }
+       },
+       options: {
+               spriteText: true,
+               canvas: {
+                       height: 256,
+                       width: 256
+               }
+       }
+};

diff --git a/test/fixtures/plugin.legend/title/bottom-center-center.png b/test/fixtures/plugin.legend/title/bottom-center-center.png
new file mode 100644 (file)
index 0000000..7782dc7
Binary files /dev/null and b/test/fixtures/plugin.legend/title/bottom-center-center.png differ

diff --git a/test/fixtures/plugin.legend/title/bottom-end-end.js b/test/fixtures/plugin.legend/title/bottom-end-end.js
new file mode 100644 (file)
index 0000000..71c3e96
--- /dev/null
+++ b/test/fixtures/plugin.legend/title/bottom-end-end.js
@@ -0,0 +1,36 @@
+module.exports = {
+       config: {
+               type: 'line',
+               data: {
+                       datasets: [
+                               {label: 'a', data: []},
+                               {label: 'b', data: []},
+                               {label: 'c', data: []}
+                       ]
+               },
+               options: {
+                       plugins: {
+                               legend: {
+                                       position: 'bottom',
+                                       align: 'end',
+                                       title: {
+                                               display: true,
+                                               position: 'end',
+                                               text: 'title'
+                                       }
+                               }
+                       },
+                       scales: {
+                               x: {display: false},
+                               y: {display: false}
+                       }
+               }
+       },
+       options: {
+               spriteText: true,
+               canvas: {
+                       height: 256,
+                       width: 256
+               }
+       }
+};

diff --git a/test/fixtures/plugin.legend/title/bottom-end-end.png b/test/fixtures/plugin.legend/title/bottom-end-end.png
new file mode 100644 (file)
index 0000000..1fb3cbe
Binary files /dev/null and b/test/fixtures/plugin.legend/title/bottom-end-end.png differ

diff --git a/test/fixtures/plugin.legend/title/bottom-start-start.js b/test/fixtures/plugin.legend/title/bottom-start-start.js
new file mode 100644 (file)
index 0000000..18f2d5a
--- /dev/null
+++ b/test/fixtures/plugin.legend/title/bottom-start-start.js
@@ -0,0 +1,36 @@
+module.exports = {
+       config: {
+               type: 'line',
+               data: {
+                       datasets: [
+                               {label: 'a', data: []},
+                               {label: 'b', data: []},
+                               {label: 'c', data: []}
+                       ]
+               },
+               options: {
+                       plugins: {
+                               legend: {
+                                       position: 'bottom',
+                                       align: 'start',
+                                       title: {
+                                               display: true,
+                                               position: 'start',
+                                               text: 'title'
+                                       }
+                               }
+                       },
+                       scales: {
+                               x: {display: false},
+                               y: {display: false}
+                       }
+               }
+       },
+       options: {
+               spriteText: true,
+               canvas: {
+                       height: 256,
+                       width: 256
+               }
+       }
+};

diff --git a/test/fixtures/plugin.legend/title/bottom-start-start.png b/test/fixtures/plugin.legend/title/bottom-start-start.png
new file mode 100644 (file)
index 0000000..def1008
Binary files /dev/null and b/test/fixtures/plugin.legend/title/bottom-start-start.png differ

diff --git a/test/fixtures/plugin.legend/title/left-center-center.js b/test/fixtures/plugin.legend/title/left-center-center.js
new file mode 100644 (file)
index 0000000..f834ab6
--- /dev/null
+++ b/test/fixtures/plugin.legend/title/left-center-center.js
@@ -0,0 +1,36 @@
+module.exports = {
+       config: {
+               type: 'line',
+               data: {
+                       datasets: [
+                               {label: 'a', data: []},
+                               {label: 'b', data: []},
+                               {label: 'c', data: []}
+                       ]
+               },
+               options: {
+                       plugins: {
+                               legend: {
+                                       position: 'left',
+                                       align: 'center',
+                                       title: {
+                                               display: true,
+                                               position: 'center',
+                                               text: 'title'
+                                       }
+                               }
+                       },
+                       scales: {
+                               x: {display: false},
+                               y: {display: false}
+                       }
+               }
+       },
+       options: {
+               spriteText: true,
+               canvas: {
+                       height: 256,
+                       width: 256
+               }
+       }
+};

diff --git a/test/fixtures/plugin.legend/title/left-center-center.png b/test/fixtures/plugin.legend/title/left-center-center.png
new file mode 100644 (file)
index 0000000..7ffd400
Binary files /dev/null and b/test/fixtures/plugin.legend/title/left-center-center.png differ

diff --git a/test/fixtures/plugin.legend/title/left-end-end.js b/test/fixtures/plugin.legend/title/left-end-end.js
new file mode 100644 (file)
index 0000000..ecb01b0
--- /dev/null
+++ b/test/fixtures/plugin.legend/title/left-end-end.js
@@ -0,0 +1,36 @@
+module.exports = {
+       config: {
+               type: 'line',
+               data: {
+                       datasets: [
+                               {label: 'a', data: []},
+                               {label: 'b', data: []},
+                               {label: 'c', data: []}
+                       ]
+               },
+               options: {
+                       plugins: {
+                               legend: {
+                                       position: 'left',
+                                       align: 'end',
+                                       title: {
+                                               display: true,
+                                               position: 'end',
+                                               text: 'title'
+                                       }
+                               }
+                       },
+                       scales: {
+                               x: {display: false},
+                               y: {display: false}
+                       }
+               }
+       },
+       options: {
+               spriteText: true,
+               canvas: {
+                       height: 256,
+                       width: 256
+               }
+       }
+};

diff --git a/test/fixtures/plugin.legend/title/left-end-end.png b/test/fixtures/plugin.legend/title/left-end-end.png
new file mode 100644 (file)
index 0000000..a60610a
Binary files /dev/null and b/test/fixtures/plugin.legend/title/left-end-end.png differ

diff --git a/test/fixtures/plugin.legend/title/left-start-start.js b/test/fixtures/plugin.legend/title/left-start-start.js
new file mode 100644 (file)
index 0000000..feb9bef
--- /dev/null
+++ b/test/fixtures/plugin.legend/title/left-start-start.js
@@ -0,0 +1,36 @@
+module.exports = {
+       config: {
+               type: 'line',
+               data: {
+                       datasets: [
+                               {label: 'a', data: []},
+                               {label: 'b', data: []},
+                               {label: 'c', data: []}
+                       ]
+               },
+               options: {
+                       plugins: {
+                               legend: {
+                                       position: 'left',
+                                       align: 'start',
+                                       title: {
+                                               display: true,
+                                               position: 'start',
+                                               text: 'title'
+                                       }
+                               }
+                       },
+                       scales: {
+                               x: {display: false},
+                               y: {display: false}
+                       }
+               }
+       },
+       options: {
+               spriteText: true,
+               canvas: {
+                       height: 256,
+                       width: 256
+               }
+       }
+};

diff --git a/test/fixtures/plugin.legend/title/left-start-start.png b/test/fixtures/plugin.legend/title/left-start-start.png
new file mode 100644 (file)
index 0000000..c1d4267
Binary files /dev/null and b/test/fixtures/plugin.legend/title/left-start-start.png differ

diff --git a/test/fixtures/plugin.legend/title/right-center-center.js b/test/fixtures/plugin.legend/title/right-center-center.js
new file mode 100644 (file)
index 0000000..bc35dcc
--- /dev/null
+++ b/test/fixtures/plugin.legend/title/right-center-center.js
@@ -0,0 +1,36 @@
+module.exports = {
+       config: {
+               type: 'line',
+               data: {
+                       datasets: [
+                               {label: 'a', data: []},
+                               {label: 'b', data: []},
+                               {label: 'c', data: []}
+                       ]
+               },
+               options: {
+                       plugins: {
+                               legend: {
+                                       position: 'right',
+                                       align: 'center',
+                                       title: {
+                                               display: true,
+                                               position: 'center',
+                                               text: 'title'
+                                       }
+                               }
+                       },
+                       scales: {
+                               x: {display: false},
+                               y: {display: false}
+                       }
+               }
+       },
+       options: {
+               spriteText: true,
+               canvas: {
+                       height: 256,
+                       width: 256
+               }
+       }
+};

diff --git a/test/fixtures/plugin.legend/title/right-center-center.png b/test/fixtures/plugin.legend/title/right-center-center.png
new file mode 100644 (file)
index 0000000..9900784
Binary files /dev/null and b/test/fixtures/plugin.legend/title/right-center-center.png differ

diff --git a/test/fixtures/plugin.legend/title/right-end-end.js b/test/fixtures/plugin.legend/title/right-end-end.js
new file mode 100644 (file)
index 0000000..1dad12c
--- /dev/null
+++ b/test/fixtures/plugin.legend/title/right-end-end.js
@@ -0,0 +1,36 @@
+module.exports = {
+       config: {
+               type: 'line',
+               data: {
+                       datasets: [
+                               {label: 'a', data: []},
+                               {label: 'b', data: []},
+                               {label: 'c', data: []}
+                       ]
+               },
+               options: {
+                       plugins: {
+                               legend: {
+                                       position: 'right',
+                                       align: 'end',
+                                       title: {
+                                               display: true,
+                                               position: 'end',
+                                               text: 'title'
+                                       }
+                               }
+                       },
+                       scales: {
+                               x: {display: false},
+                               y: {display: false}
+                       }
+               }
+       },
+       options: {
+               spriteText: true,
+               canvas: {
+                       height: 256,
+                       width: 256
+               }
+       }
+};

diff --git a/test/fixtures/plugin.legend/title/right-end-end.png b/test/fixtures/plugin.legend/title/right-end-end.png
new file mode 100644 (file)
index 0000000..ec2acbf
Binary files /dev/null and b/test/fixtures/plugin.legend/title/right-end-end.png differ

diff --git a/test/fixtures/plugin.legend/title/right-start-start.js b/test/fixtures/plugin.legend/title/right-start-start.js
new file mode 100644 (file)
index 0000000..fee2f38
--- /dev/null
+++ b/test/fixtures/plugin.legend/title/right-start-start.js
@@ -0,0 +1,36 @@
+module.exports = {
+       config: {
+               type: 'line',
+               data: {
+                       datasets: [
+                               {label: 'a', data: []},
+                               {label: 'b', data: []},
+                               {label: 'c', data: []}
+                       ]
+               },
+               options: {
+                       plugins: {
+                               legend: {
+                                       position: 'right',
+                                       align: 'start',
+                                       title: {
+                                               display: true,
+                                               position: 'start',
+                                               text: 'title'
+                                       }
+                               }
+                       },
+                       scales: {
+                               x: {display: false},
+                               y: {display: false}
+                       }
+               }
+       },
+       options: {
+               spriteText: true,
+               canvas: {
+                       height: 256,
+                       width: 256
+               }
+       }
+};

diff --git a/test/fixtures/plugin.legend/title/right-start-start.png b/test/fixtures/plugin.legend/title/right-start-start.png
new file mode 100644 (file)
index 0000000..89c5286
Binary files /dev/null and b/test/fixtures/plugin.legend/title/right-start-start.png differ

diff --git a/test/fixtures/plugin.legend/title/top-center-center.js b/test/fixtures/plugin.legend/title/top-center-center.js
new file mode 100644 (file)
index 0000000..4ea2e46
--- /dev/null
+++ b/test/fixtures/plugin.legend/title/top-center-center.js
@@ -0,0 +1,36 @@
+module.exports = {
+       config: {
+               type: 'line',
+               data: {
+                       datasets: [
+                               {label: 'a', data: []},
+                               {label: 'b', data: []},
+                               {label: 'c', data: []}
+                       ]
+               },
+               options: {
+                       plugins: {
+                               legend: {
+                                       position: 'top',
+                                       align: 'center',
+                                       title: {
+                                               display: true,
+                                               position: 'center',
+                                               text: 'title'
+                                       }
+                               }
+                       },
+                       scales: {
+                               x: {display: false},
+                               y: {display: false}
+                       }
+               }
+       },
+       options: {
+               spriteText: true,
+               canvas: {
+                       height: 256,
+                       width: 256
+               }
+       }
+};

diff --git a/test/fixtures/plugin.legend/title/top-center-center.png b/test/fixtures/plugin.legend/title/top-center-center.png
new file mode 100644 (file)
index 0000000..0a1a3f3
Binary files /dev/null and b/test/fixtures/plugin.legend/title/top-center-center.png differ

diff --git a/test/fixtures/plugin.legend/title/top-end-end.js b/test/fixtures/plugin.legend/title/top-end-end.js
new file mode 100644 (file)
index 0000000..faa8739
--- /dev/null
+++ b/test/fixtures/plugin.legend/title/top-end-end.js
@@ -0,0 +1,36 @@
+module.exports = {
+       config: {
+               type: 'line',
+               data: {
+                       datasets: [
+                               {label: 'a', data: []},
+                               {label: 'b', data: []},
+                               {label: 'c', data: []}
+                       ]
+               },
+               options: {
+                       plugins: {
+                               legend: {
+                                       position: 'top',
+                                       align: 'end',
+                                       title: {
+                                               display: true,
+                                               position: 'end',
+                                               text: 'title'
+                                       }
+                               }
+                       },
+                       scales: {
+                               x: {display: false},
+                               y: {display: false}
+                       }
+               }
+       },
+       options: {
+               spriteText: true,
+               canvas: {
+                       height: 256,
+                       width: 256
+               }
+       }
+};

diff --git a/test/fixtures/plugin.legend/title/top-end-end.png b/test/fixtures/plugin.legend/title/top-end-end.png
new file mode 100644 (file)
index 0000000..76b8a0b
Binary files /dev/null and b/test/fixtures/plugin.legend/title/top-end-end.png differ

diff --git a/test/fixtures/plugin.legend/title/top-start-start.js b/test/fixtures/plugin.legend/title/top-start-start.js
new file mode 100644 (file)
index 0000000..9a893fb
--- /dev/null
+++ b/test/fixtures/plugin.legend/title/top-start-start.js
@@ -0,0 +1,36 @@
+module.exports = {
+       config: {
+               type: 'line',
+               data: {
+                       datasets: [
+                               {label: 'a', data: []},
+                               {label: 'b', data: []},
+                               {label: 'c', data: []}
+                       ]
+               },
+               options: {
+                       plugins: {
+                               legend: {
+                                       position: 'top',
+                                       align: 'start',
+                                       title: {
+                                               display: true,
+                                               position: 'start',
+                                               text: 'title'
+                                       }
+                               }
+                       },
+                       scales: {
+                               x: {display: false},
+                               y: {display: false}
+                       }
+               }
+       },
+       options: {
+               spriteText: true,
+               canvas: {
+                       height: 256,
+                       width: 256
+               }
+       }
+};

diff --git a/test/fixtures/plugin.legend/title/top-start-start.png b/test/fixtures/plugin.legend/title/top-start-start.png
new file mode 100644 (file)
index 0000000..b29e80e
Binary files /dev/null and b/test/fixtures/plugin.legend/title/top-start-start.png differ