fix: label text not centered when applied rotation (#10773)

* fix: label text not centered on tick when rotated

#10485

* fix: label text not centered on tick when rotated

#10485

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index f741e2e60d433b25287bea4fbebdd18a7c4b7b1b..cae728b4a6f04d616618e15df30af260343453aa 100644 (file)
--- a/src/core/core.scale.js
+++ b/src/core/core.scale.js
@@ -1241,6 +1241,9 @@ export default class Scale extends Element {
         if (mirror) {
           textOffset *= -1;
         }
+        if (rotation !== 0 && !optsAtIndex.showLabelBackdrop) {
+          x += (lineHeight / 2) * Math.sin(rotation);
+        }
       } else {
         y = pixel;
         textOffset = (1 - lineCount) * lineHeight / 2;

diff --git a/test/fixtures/core.layouts/refit-vertical-boxes.png b/test/fixtures/core.layouts/refit-vertical-boxes.png
index c28d8c7dd5d4e6894dd857a24e048b93ee3749e1..a01b75831b89a0f78d5004df52b135f0c1377e2d 100644 (file)
Binary files a/test/fixtures/core.layouts/refit-vertical-boxes.png and b/test/fixtures/core.layouts/refit-vertical-boxes.png differ

diff --git a/test/fixtures/core.scale/autoSkip/fit-after.png b/test/fixtures/core.scale/autoSkip/fit-after.png
index c1def972292e58bc4018167aeb2a78efd5f5d65b..8ca5b8d487f839097b7d4b92505c02e54fb541c3 100644 (file)
Binary files a/test/fixtures/core.scale/autoSkip/fit-after.png and b/test/fixtures/core.scale/autoSkip/fit-after.png differ

diff --git a/test/fixtures/core.scale/label-align-inner-rotate.png b/test/fixtures/core.scale/label-align-inner-rotate.png
index d3aca46fa5c9fc4adaf7c4159e8bd7dc8f905d9e..cd21b41771dda92da6bb6b9b3128051402c9a7ee 100644 (file)
Binary files a/test/fixtures/core.scale/label-align-inner-rotate.png and b/test/fixtures/core.scale/label-align-inner-rotate.png differ

diff --git a/test/fixtures/core.scale/ticks/rotated-long.png b/test/fixtures/core.scale/ticks/rotated-long.png
index 04bc0b6446b284182b15de15ee47e42c02cf2a7a..e50ec2721f5cf1d73c5c471bd226dd9e7664d6cb 100644 (file)
Binary files a/test/fixtures/core.scale/ticks/rotated-long.png and b/test/fixtures/core.scale/ticks/rotated-long.png differ

diff --git a/test/fixtures/core.scale/ticks/rotated-multi-line.png b/test/fixtures/core.scale/ticks/rotated-multi-line.png
index 4c46fc3a0e1be6c6afb7e7503ef64035f6005353..ca9a7ef79c659c370b8df5a3a295a6abd417ff4d 100644 (file)
Binary files a/test/fixtures/core.scale/ticks/rotated-multi-line.png and b/test/fixtures/core.scale/ticks/rotated-multi-line.png differ

diff --git a/test/fixtures/scale.linear/min-max-skip/no-collision.png b/test/fixtures/scale.linear/min-max-skip/no-collision.png
index dfd65961313ac6eaeb56d68694c1cb0d97af7d1a..57180871d517cc180f5289ed1b2763622730cdc7 100644 (file)
Binary files a/test/fixtures/scale.linear/min-max-skip/no-collision.png and b/test/fixtures/scale.linear/min-max-skip/no-collision.png differ

diff --git a/test/fixtures/scale.linear/min-max-skip/rotated-case-1.png b/test/fixtures/scale.linear/min-max-skip/rotated-case-1.png
index 358ef01720eae4387cbbde6be1da0f937ee8d600..f2e445b4d92cb855860de142e83073c42ae1f0e9 100644 (file)
Binary files a/test/fixtures/scale.linear/min-max-skip/rotated-case-1.png and b/test/fixtures/scale.linear/min-max-skip/rotated-case-1.png differ

diff --git a/test/fixtures/scale.linear/min-max-skip/rotated-case-2.png b/test/fixtures/scale.linear/min-max-skip/rotated-case-2.png
index ef7e97d901e8f8921e40b437634a41abc7cfe4c2..6e2a3d6b7d5061d8eced511c16b50a772eaf559c 100644 (file)
Binary files a/test/fixtures/scale.linear/min-max-skip/rotated-case-2.png and b/test/fixtures/scale.linear/min-max-skip/rotated-case-2.png differ

diff --git a/test/fixtures/scale.linear/min-max-skip/rotated-case-3.png b/test/fixtures/scale.linear/min-max-skip/rotated-case-3.png
index a6c31dfaf04e018b4832a1d8b32cbf718bc35ea2..c0c3ddd6eab398b013f2fd52600b58ee6f5b71ac 100644 (file)
Binary files a/test/fixtures/scale.linear/min-max-skip/rotated-case-3.png and b/test/fixtures/scale.linear/min-max-skip/rotated-case-3.png differ

diff --git a/test/fixtures/scale.linear/min-max-skip/rotated-case-4.png b/test/fixtures/scale.linear/min-max-skip/rotated-case-4.png
index 9bdae09e50cf6ae1e7618125dbfed036cbab1c22..33792bcd43d91f400dc224fcdb3276199472caac 100644 (file)
Binary files a/test/fixtures/scale.linear/min-max-skip/rotated-case-4.png and b/test/fixtures/scale.linear/min-max-skip/rotated-case-4.png differ

diff --git a/test/fixtures/scale.linear/rotated-45.png b/test/fixtures/scale.linear/rotated-45.png
index 933aa2280eb28255ea5b3bb362cbbc195d7b2ccb..04b8539a7b64b44c9242b91b5204b289244a86c8 100644 (file)
Binary files a/test/fixtures/scale.linear/rotated-45.png and b/test/fixtures/scale.linear/rotated-45.png differ

diff --git a/test/fixtures/scale.linear/rotated-5.png b/test/fixtures/scale.linear/rotated-5.png
index 64b9fcf8ae7b98df09f20d6c6cb466ec9e5cb04e..4c833348fa29e006e63ec2a150895cc5af2d5dc4 100644 (file)
Binary files a/test/fixtures/scale.linear/rotated-5.png and b/test/fixtures/scale.linear/rotated-5.png differ

diff --git a/test/fixtures/scale.linear/rotated-85.png b/test/fixtures/scale.linear/rotated-85.png
index edf09fae398b4bd796097b99bc4fb72ccd5a16be..da9e20e758ccc16d5fc8cd40af769bc3c5cefc89 100644 (file)
Binary files a/test/fixtures/scale.linear/rotated-85.png and b/test/fixtures/scale.linear/rotated-85.png differ

diff --git a/test/fixtures/scale.time/labels-date.png b/test/fixtures/scale.time/labels-date.png
index 865729c65e62d88dffc1d013eecac7744a6d1793..2e88d0b0a7cd9888f69b1c7100ab6a39b88a3763 100644 (file)
Binary files a/test/fixtures/scale.time/labels-date.png and b/test/fixtures/scale.time/labels-date.png differ

diff --git a/test/fixtures/scale.time/labels-strings.png b/test/fixtures/scale.time/labels-strings.png
index 865729c65e62d88dffc1d013eecac7744a6d1793..2e88d0b0a7cd9888f69b1c7100ab6a39b88a3763 100644 (file)
Binary files a/test/fixtures/scale.time/labels-strings.png and b/test/fixtures/scale.time/labels-strings.png differ

diff --git a/test/fixtures/scale.time/offset-auto-skip-ticks.png b/test/fixtures/scale.time/offset-auto-skip-ticks.png
index 48630badf5927d7e86622dd60aa450c12e994864..a7168a277264323cc19f7d21b6572292c1fc0a52 100644 (file)
Binary files a/test/fixtures/scale.time/offset-auto-skip-ticks.png and b/test/fixtures/scale.time/offset-auto-skip-ticks.png differ

diff --git a/test/fixtures/scale.time/ticks-round.png b/test/fixtures/scale.time/ticks-round.png
index eb1317eaa28e256f5d4a476f2ed70836d7bd9473..4a463d56cf102e36544958fe1b8877a6c83d0aba 100644 (file)
Binary files a/test/fixtures/scale.time/ticks-round.png and b/test/fixtures/scale.time/ticks-round.png differ

diff --git a/test/specs/core.scale.tests.js b/test/specs/core.scale.tests.js
index 3b30e5600ea955cb47d7433d77a40e8b784b5b2e..aedde2a145e048de4bb11c04818de80d0727fc4c 100644 (file)
--- a/test/specs/core.scale.tests.js
+++ b/test/specs/core.scale.tests.js
@@ -700,5 +700,35 @@ describe('Core.scale', function() {
 
       expect(chart.scales.xavier.axis).toBe('y');
     });
+    it('should center labels when rotated in x axis', () => {
+      const chart = window.acquireChart({
+        type: 'line',
+        data: {
+          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+          datasets: [{
+            label: '# of Votes',
+            data: [12, 19, 3, 5, 2, 3]
+          }]
+        },
+        options: {
+          scales: {
+            x: {
+              ticks: {
+                minRotation: 90,
+              }
+            }
+          }
+        }
+      });
+      const mapper = item => parseFloat(item.translation[0].toFixed(2));
+      const expected = [20.15, 113.6, 207.05, 300.5, 393.95, 487.4];
+      const actual = chart.scales.x._labelItems.map(mapper);
+      const len = expected.length;
+      for (let i = 0; i < len; ++i) {
+        const actualValue = actual[i];
+        const expectedValue = expected[i];
+        expect(actualValue).toBeCloseTo(expectedValue, 1);
+      }
+    });
   });
 });