Merge pull request #1845 from Shopify/envex/line-chart-annotations

Render xAxis annotations above yAxisLine

Author: envex

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
+
+- Render xAxis annotations after yAxis annotations in `<LineChart />` and `<StackedAreaChart />`.
 
 ## [16.15.1] - 2025-05-01
 

packages/polaris-viz/src/components/LineChart/Chart.tsx

@@ -383,6 +383,21 @@ export function Chart({
           />
         </g>
 
+        {hasYAxisAnnotations && (
+          <g
+            transform={`translate(${chartXPosition},${chartYPosition})`}
+            tabIndex={-1}
+          >
+            <YAxisAnnotations
+              annotationsLookupTable={annotationsLookupTable}
+              drawableHeight={annotationsDrawableHeight}
+              drawableWidth={drawableWidth}
+              ticks={ticks}
+              yScale={yScale}
+            />
+          </g>
+        )}
+
         {hasXAxisAnnotations && (
           <g transform={`translate(${chartXPosition},0)`} tabIndex={-1}>
             <Annotations
@@ -398,21 +413,6 @@ export function Chart({
             />
           </g>
         )}
-
-        {hasYAxisAnnotations && (
-          <g
-            transform={`translate(${chartXPosition},${chartYPosition})`}
-            tabIndex={-1}
-          >
-            <YAxisAnnotations
-              annotationsLookupTable={annotationsLookupTable}
-              drawableHeight={annotationsDrawableHeight}
-              drawableWidth={drawableWidth}
-              ticks={ticks}
-              yScale={yScale}
-            />
-          </g>
-        )}
       </ChartElements.Svg>
 
       {longestSeriesLength !== -1 && (

packages/polaris-viz/src/components/LineChart/stories/Annotations.stories.tsx

@@ -27,7 +27,7 @@ Annotations.args = {
       axis: 'x',
     },
     {
-      startKey: '540',
+      startKey: '700',
       label: 'Sales target',
       axis: 'y',
     },
@@ -41,9 +41,20 @@ Annotations.args = {
     },
   ],
   renderAnnotationContent: (data) => (
-    <p>
-      Rendering custom content for the label <b>{data.annotation.label}</b>
-    </p>
+    <div>
+      <p>
+        Rendering custom content for the label <b>{data.annotation.label}</b>
+      </p>
+      <p>
+        Rendering custom content for the label <b>{data.annotation.label}</b>
+      </p>
+      <p>
+        Rendering custom content for the label <b>{data.annotation.label}</b>
+      </p>
+      <p>
+        Rendering custom content for the label <b>{data.annotation.label}</b>
+      </p>
+    </div>
   ),
   xAxisOptions: {
     labelFormatter: (value) =>

packages/polaris-viz/src/components/StackedAreaChart/Chart.tsx

@@ -348,6 +348,21 @@ export function Chart({
           />
         </g>
 
+        {hasYAxisAnnotations && (
+          <g
+            transform={`translate(${chartXPosition},${chartYPosition})`}
+            tabIndex={-1}
+          >
+            <YAxisAnnotations
+              annotationsLookupTable={annotationsLookupTable}
+              drawableHeight={annotationsDrawableHeight}
+              drawableWidth={drawableWidth}
+              ticks={ticks}
+              yScale={yScale}
+            />
+          </g>
+        )}
+
         {hasXAxisAnnotations && (
           <g transform={`translate(${chartXPosition},0)`} tabIndex={-1}>
             <Annotations
@@ -363,21 +378,6 @@ export function Chart({
             />
           </g>
         )}
-
-        {hasYAxisAnnotations && (
-          <g
-            transform={`translate(${chartXPosition},${chartYPosition})`}
-            tabIndex={-1}
-          >
-            <YAxisAnnotations
-              annotationsLookupTable={annotationsLookupTable}
-              drawableHeight={annotationsDrawableHeight}
-              drawableWidth={drawableWidth}
-              ticks={ticks}
-              yScale={yScale}
-            />
-          </g>
-        )}
       </ChartElements.Svg>
 
       {longestSeriesLength !== -1 && (

packages/polaris-viz/src/components/StackedAreaChart/stories/Annotations.stories.tsx

@@ -27,7 +27,7 @@ Annotations.args = {
       axis: 'x',
     },
     {
-      startKey: '13000',
+      startKey: '24000',
       label: 'Sales target',
       axis: 'y',
     },
@@ -40,4 +40,20 @@ Annotations.args = {
       },
     },
   ],
+  renderAnnotationContent: (data) => (
+    <div>
+      <p>
+        Rendering custom content for the label <b>{data.annotation.label}</b>
+      </p>
+      <p>
+        Rendering custom content for the label <b>{data.annotation.label}</b>
+      </p>
+      <p>
+        Rendering custom content for the label <b>{data.annotation.label}</b>
+      </p>
+      <p>
+        Rendering custom content for the label <b>{data.annotation.label}</b>
+      </p>
+    </div>
+  ),
 };