add an offset to y-axis label in linechart

Shopify · Nov 7, 2023 · 972299e · 972299e
1 parent 12c5eb5
commit 972299e
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md
@@ -5,7 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-<!-- ## Unreleased -->
+## Unreleased
+
+### Changed
+
+- Added an offset to y-axis labels for `<LineChart />` to accommodate variations in font rendering
 
 ## [9.16.0] - 2023-10-17
 

diff --git a/packages/polaris-viz/src/components/LineChart/Chart.tsx b/packages/polaris-viz/src/components/LineChart/Chart.tsx
@@ -53,6 +53,7 @@ import {
 import {
   ChartMargin,
   ANNOTATIONS_LABELS_OFFSET,
+  Y_AXIS_LABEL_OFFSET,
   CROSSHAIR_ID,
 } from '../../constants';
 import {VisuallyHiddenRows} from '../VisuallyHiddenRows';
@@ -316,7 +317,7 @@ export function Chart({
 
         <YAxis
           ticks={ticks}
-          width={yAxisLabelWidth}
+          width={yAxisLabelWidth + Y_AXIS_LABEL_OFFSET}
           textAlign="right"
           ariaHidden
           x={yAxisBounds.x}

diff --git a/packages/polaris-viz/src/constants.ts b/packages/polaris-viz/src/constants.ts
@@ -48,6 +48,7 @@ export const DEFAULT_LEGEND_HEIGHT = 24;
 export const DEFAULT_LEGEND_WIDTH = 29;
 export const BAR_CONTAINER_TEXT_HEIGHT = 48;
 export const ANNOTATIONS_LABELS_OFFSET = 10;
+export const Y_AXIS_LABEL_OFFSET = 2;
 export const TOOLTIP_BG_OPACITY = 0.8;
 export const COLLAPSED_ANNOTATIONS_COUNT = 3;
 export const PREVIEW_ICON_SIZE = 12;