Add alignToPixles option for scales (#8649)

diff --git a/docs/docs/axes/_common.md b/docs/docs/axes/_common.md
index 057b4988fe08b3f3b40d2d6b8e17d7e6d321a539..19311b9fc4bed915fd61da43f1db0f643eb7391b 100644 (file)
--- a/docs/docs/axes/_common.md
+++ b/docs/docs/axes/_common.md
@@ -5,6 +5,7 @@ Namespace: `options.scales[scaleId]`
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `type` | `string` | | Type of scale being employed. Custom scales can be created and registered with a string key. This allows changing the type of an axis for a chart.
+| `alignToPixels` | `boolean` | `false` | Align pixel values to device pixels.
 | `backgroundColor` | [`Color`](../general/colors.md) | | Background color of the scale area.
 | `display` | `boolean`\|`string` | `true` | Controls the axis global visibility (visible when `true`, hidden when `false`). When `display: 'auto'`, the axis is visible only if at least one associated dataset is visible.
 | `grid` | `object` | | Grid line configuration. [more...](./styling.mdx#grid-line-configuration)

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index bc82c91258a4d4a56c3e555901e65c4e884eb96d..f62ec10e9565c7d05a0bfee4de65d532c5141426 100644 (file)
--- a/src/core/core.scale.js
+++ b/src/core/core.scale.js
@@ -674,6 +674,7 @@ export default class Scale extends Element {
     me._endPixel = endPixel;
     me._reversePixels = reversePixels;
     me._length = endPixel - startPixel;
+    me._alignToPixels = me.options.alignToPixels;
   }
 
   afterUpdate() {
@@ -1122,7 +1123,8 @@ export default class Scale extends Element {
       decimal = 1 - decimal;
     }
 
-    return _int16Range(me._startPixel + decimal * me._length);
+    const pixel = me._startPixel + decimal * me._length;
+    return _int16Range(me._alignToPixels ? _alignPixel(me.chart, pixel, 0) : pixel);
   }
 
   /**

diff --git a/test/fixtures/controller.bar/aligned-pixels.js b/test/fixtures/controller.bar/aligned-pixels.js
new file mode 100644 (file)
index 0000000..e0ddd37
--- /dev/null
+++ b/test/fixtures/controller.bar/aligned-pixels.js
@@ -0,0 +1,29 @@
+module.exports = {
+  config: {
+    type: 'bar',
+    data: {
+      labels: ['a'],
+      datasets: [{
+        data: [-1]
+      }, {
+        data: [1]
+      }]
+    },
+    options: {
+      indexAxis: 'y',
+      events: [],
+      backgroundColor: 'navy',
+      devicePixelRatio: 1.25,
+      scales: {
+        x: {display: false, alignToPixels: true},
+        y: {display: false, stacked: true}
+      }
+    }
+  },
+  options: {
+    canvas: {
+      width: 100,
+      height: 500
+    }
+  }
+};

diff --git a/test/fixtures/controller.bar/aligned-pixels.png b/test/fixtures/controller.bar/aligned-pixels.png
new file mode 100644 (file)
index 0000000..d261d2f
Binary files /dev/null and b/test/fixtures/controller.bar/aligned-pixels.png differ

diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
index 936c9f938fed88b79ccec9b039579ee017acf0db..8cdaf99215662fd6854283c4f8123bc8ea03469c 100644 (file)
--- a/types/index.esm.d.ts
+++ b/types/index.esm.d.ts
@@ -1077,6 +1077,10 @@ export interface CoreScaleOptions {
    * @default true
    */
   display: boolean | 'auto';
+  /**
+   * Align pixel values to device pixels
+   */
+  alignToPixels: boolean;
   /**
    * Reverse the scale.
    * @default false