fix: y axis categorical height data issue (#2470)

adamdoe · web-flow · commit aa5ef3be231e · 2026-01-02T13:02:45.000-08:00
diff --git a/packages/chart/index.html b/packages/chart/index.html
@@ -1,4 +1,4 @@
-﻿<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 
 <head>
@@ -14,19 +14,17 @@
       min-height: 100vh;
     }
 
-    /* .react-container + .react-container {
-        margin-top: 3rem;
-      } */
+    /* Add 1rem padding to mimic DFE when editor is not visible */
+    .cdc-open-viz-module:not(.isEditor) {
+      padding: 1rem;
+    }
   </style>
   <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
 </head>
 
 <body>
-
   <!-- GENERIC CHART TYPES -->
-  <div class="react-container" data-config="/examples/feature/combo/planet-combo-example-config.json"></div>
-
-
+  <div class="react-container" data-config="/examples/private/height.json"></div>
 
   <noscript>You need to enable JavaScript to run this app.</noscript>
 
diff --git a/packages/chart/src/components/Axis/Categorical.Axis.tsx b/packages/chart/src/components/Axis/Categorical.Axis.tsx
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
 import { BarStack, Line } from '@visx/shape'
-import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale'
+import { scaleBand, scaleOrdinal } from '@visx/scale'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
 import ConfigContext from '../../ConfigContext'
@@ -9,7 +9,7 @@ import createBarElement from '@cdc/core/components/createBarElement'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
 
-const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
+const CategoricalYAxis = ({ yScale, yMax, leftSize, xMax }) => {
   const { config } = useContext(ConfigContext)
 
   const { orientation } = config
@@ -24,6 +24,9 @@ const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
 
   const categories = config.yAxis?.categories
 
+  // Get max from the yScale domain
+  const max = yScale.domain()[1]
+
   const createDataShape = categories => {
     const categoryObj = [...categories].reduce((acc, item) => {
       acc[item.label] = item.height
@@ -68,11 +71,7 @@ const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
     range: [0, leftSize]
   })
 
-  const yScale = scaleLinear({
-    domain: [0, max],
-    range: [yMax, 0],
-    clamp: true
-  })
+  // Use the yScale passed from useScales instead of creating a new one
 
   const colorScale = scaleOrdinal({
     domain: categories.map(d => d?.label),
diff --git a/packages/chart/src/components/LinearChart.tsx b/packages/chart/src/components/LinearChart.tsx
@@ -1310,9 +1310,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           )}
           {config.yAxis.type === 'categorical' && config.orientation === 'vertical' && (
             <CategoricalYAxis
-              max={max}
-              maxValue={maxValue}
-              height={initialHeight}
+              yScale={yScale}
               xMax={xMax}
               yMax={yMax}
               leftSize={Number(runtime.yAxis.size) - config.yAxis.axisPadding}
diff --git a/packages/chart/src/hooks/useScales.ts b/packages/chart/src/hooks/useScales.ts
@@ -133,7 +133,17 @@ const useScales = (properties: useScaleProps) => {
   // handle  Vertical bars
   if (!isHorizontal) {
     xScale = composeScaleBand(xAxisDataMapped, [0, xMax], paddingRange)
-    yScale = composeYScale({ min, max, yMax, config, leftMax })
+    // For categorical y-axis, use [0, max] domain and [yMax, 0] range to match CategoricalYAxis
+    // This ensures line data aligns with categorical bars and bars go to 100% height
+    if (config.yAxis.type === 'categorical') {
+      yScale = scaleLinear({
+        domain: [0, max],
+        range: [yMax, 0],
+        clamp: true
+      })
+    } else {
+      yScale = composeYScale({ min, max, yMax, config, leftMax })
+    }
     seriesScale = composeScaleBand(seriesDomain, [0, xScale.bandwidth()], 0)
   }
 
