Add alignToPixles option for scales (#8649)

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)

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);
   }
 
   /**

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
+    }
+  }
+};

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