AG-13647: Gridline rendered on top of axis line (dpi fix)

packages/ag-charts-community/src/chart/axis/axis.ts

@@ -513,7 +513,14 @@ export abstract class Axis<S extends Scale<D, number, TickInterval<S>> = Scale<a
 
     private getAxisLineCoordinates(): AxisLineDatum {
         const [min, max] = findMinMax(this.range);
-        return { x: 0, y1: min, y2: max };
+        const dpiFix = this.getDpiOffsetFix(this.direction === ChartAxisDirection.Y ? 0 : 1);
+        return { x: dpiFix, y1: min, y2: max };
+    }
+
+    private getDpiOffsetFix(start: number = 0) {
+        const { pixelRatio } = this.moduleCtx.scene.canvas;
+        const modifier = this.direction === ChartAxisDirection.Y ? 1 : -1;
+        return (pixelRatio === 1 ? start : 1 / pixelRatio) * modifier;
     }
 
     private getTickLineCoordinates(datum: TickDatum) {
@@ -1056,6 +1063,8 @@ export abstract class Axis<S extends Scale<D, number, TickInterval<S>> = Scale<a
         // When the scale domain or the ticks change, the label format may change
         this.onFormatChange(filteredTicks, fractionDigits, rawTicks, this.label.format);
 
+        const dpiFix = this.getDpiOffsetFix();
+
         for (let i = 0; i < filteredTicks.length; i++) {
             const tick = filteredTicks[i];
             const translationY = scale.convert(tick) + halfBandwidth;
@@ -1067,7 +1076,12 @@ export abstract class Axis<S extends Scale<D, number, TickInterval<S>> = Scale<a
             const tickLabel = this.formatTick(tick, start + i, fractionDigits);
 
             // Create a tick id from the label, or as an increment of the last label if this tick label is blank
-            ticks.push({ tick, tickId: idGenerator(tickLabel), tickLabel, translationY: Math.floor(translationY) });
+            ticks.push({
+                tick,
+                tickLabel,
+                tickId: idGenerator(tickLabel),
+                translationY: Math.floor(translationY) + dpiFix,
+            });
 
             if (tickLabel === '' || tickLabel == null) {
                 continue;

packages/ag-charts-community/src/chart/devicePixelRatio.test.ts

@@ -0,0 +1,72 @@
+import { afterEach, describe, expect, it } from '@jest/globals';
+
+import type { AgCartesianChartOptions, AgChartInstance, AgChartOptions } from 'ag-charts-types';
+
+import { AgCharts } from '../api/agCharts';
+import { SIMPLE_SCATTER_CHART_EXAMPLE } from './test/examples';
+import {
+    IMAGE_SNAPSHOT_DEFAULTS,
+    extractImageData,
+    prepareTestOptions,
+    setupMockCanvas,
+    setupMockConsole,
+    waitForChartStability,
+} from './test/utils';
+
+const EXAMPLES = {
+    SIMPLE_SCATTER: SIMPLE_SCATTER_CHART_EXAMPLE,
+};
+
+describe('devicePixelRatio', () => {
+    setupMockConsole();
+
+    let chart: AgChartInstance;
+    const ctx = setupMockCanvas();
+
+    afterEach(() => {
+        if (chart) {
+            chart.destroy();
+            (chart as unknown) = undefined;
+        }
+    });
+
+    describe.each(Object.entries(EXAMPLES))(
+        'for %s it should create chart instance as expected',
+        (_exampleName, exampleOptions) => {
+            it.each([0.75, 0.9, 1, 1.25, 1.33, 1.4, 1.75, 2, 2.25, 2.5, 2.6, 3, 3.5, 4])(
+                'using devicePixelRatio %s',
+                async (overrideDevicePixelRatio) => {
+                    const axisOptions = {
+                        title: { enabled: false },
+                        line: { enabled: true },
+                        gridLine: {
+                            style: [
+                                { stroke: 'gray', lineDash: [10, 5] },
+                                { stroke: 'lightgray', lineDash: [5, 5] },
+                            ],
+                        },
+                    };
+                    const [xAxis, yAxis] = (exampleOptions as unknown as AgCartesianChartOptions).axes!;
+                    const options: AgChartOptions = {
+                        ...exampleOptions,
+                        title: { enabled: false },
+                        subtitle: { enabled: false },
+                        footnote: { enabled: false },
+                        axes: [
+                            { ...xAxis, ...axisOptions },
+                            { ...yAxis, ...axisOptions },
+                        ],
+                        // @ts-expect-error use of undocumented overrideDevicePixelRatio
+                        overrideDevicePixelRatio,
+                    };
+
+                    prepareTestOptions(options);
+                    chart = AgCharts.create(options);
+                    await waitForChartStability(chart);
+
+                    expect(extractImageData(ctx)).toMatchImageSnapshot(IMAGE_SNAPSHOT_DEFAULTS);
+                }
+            );
+        }
+    );
+});