@cdc/chart 4.26.2 → 4.26.4

package/src/components/LinearChart/tests/LinearChart.test.tsx

@@ -4,6 +4,7 @@ import { describe, expect, it, vi, beforeAll } from 'vitest'
 import LinearChart from '../../LinearChart'
 import ConfigContext from '../../../ConfigContext'
 import { createMockChartContext } from './mockConfigContext'
+import forestPlotConfig from '../../../../examples/feature/forest-plot/forest-plot.json'
 
 // Mock ResizeObserver
 vi.stubGlobal(
@@ -66,6 +67,11 @@ const renderLinearChart = (
   )
 }
 
+const getLeftAxisLabelTransforms = container =>
+  Array.from(container.querySelectorAll('.left-axis text.y-label'))
+    .map(label => label.getAttribute('transform'))
+    .filter(Boolean)
+
 describe('LinearChart', () => {
   describe('rendering', () => {
     it('renders without crashing', () => {
@@ -147,6 +153,82 @@ describe('LinearChart', () => {
       })
       expect(container).toBeTruthy()
     })
+
+    it('keeps forest plot lines inside the computed plot bounds at narrow and wide widths', () => {
+      const forestContextOverrides = {
+        transformedData: forestPlotConfig.data,
+        rawData: forestPlotConfig.data
+      }
+
+      const narrowRender = renderLinearChart(forestPlotConfig as any, forestContextOverrides, {
+        parentWidth: 320,
+        parentHeight: 500
+      })
+      const wideRender = renderLinearChart(forestPlotConfig as any, forestContextOverrides, {
+        parentWidth: 960,
+        parentHeight: 500
+      })
+
+      const narrowTopLine = narrowRender.container.querySelector('.forestplot__top-line')
+      const wideTopLine = wideRender.container.querySelector('.forestplot__top-line')
+      const narrowCiLine = narrowRender.container.querySelector('line[class^="line-"]')
+      const wideCiLine = wideRender.container.querySelector('line[class^="line-"]')
+
+      expect(narrowTopLine).toBeTruthy()
+      expect(wideTopLine).toBeTruthy()
+      expect(narrowCiLine).toBeTruthy()
+      expect(wideCiLine).toBeTruthy()
+
+      const narrowStart = Number(narrowTopLine?.getAttribute('x1'))
+      const narrowEnd = Number(narrowTopLine?.getAttribute('x2'))
+      const wideStart = Number(wideTopLine?.getAttribute('x1'))
+      const wideEnd = Number(wideTopLine?.getAttribute('x2'))
+
+      expect(narrowStart).toBe(0)
+      expect(narrowEnd).toBeLessThanOrEqual(320)
+      expect(wideStart).toBe(0)
+      expect(wideEnd).toBeLessThanOrEqual(960)
+      expect(wideEnd - wideStart).toBeGreaterThan(narrowEnd - narrowStart)
+
+      expect(Number(narrowCiLine?.getAttribute('x1'))).toBeGreaterThan(narrowStart)
+      expect(Number(narrowCiLine?.getAttribute('x2'))).toBeLessThanOrEqual(narrowEnd)
+      expect(Number(wideCiLine?.getAttribute('x1'))).toBeGreaterThan(wideStart)
+      expect(Number(wideCiLine?.getAttribute('x2'))).toBeLessThanOrEqual(wideEnd)
+    })
+
+    it('avoids rendering a duplicate manual bottom border when the forest plot x-axis is visible', () => {
+      const { container } = renderLinearChart(
+        forestPlotConfig as any,
+        {
+          transformedData: forestPlotConfig.data,
+          rawData: forestPlotConfig.data
+        },
+        { parentWidth: 800, parentHeight: 500 }
+      )
+
+      expect(container.querySelector('.forestplot__top-line')).toBeTruthy()
+      expect(container.querySelector('.forestplot__bottom-line')).toBeFalsy()
+      const bottomAxisLine = container.querySelector('.bottom-axis > line[stroke="#333"]')
+      expect(bottomAxisLine?.getAttribute('x1')).toBe('0')
+    })
+
+    it('renders forest plot rows from transformedData instead of rawData', () => {
+      const filteredData = forestPlotConfig.data.slice(0, 2)
+      const { container } = renderLinearChart(
+        forestPlotConfig as any,
+        {
+          transformedData: filteredData,
+          rawData: forestPlotConfig.data
+        },
+        { parentWidth: 800, parentHeight: 500 }
+      )
+
+      expect(container.querySelectorAll('.lower-ci')).toHaveLength(filteredData.length)
+      expect(container.querySelectorAll('line[class^="line-"]')).toHaveLength(filteredData.length)
+      expect(container.textContent).not.toContain(
+        String(forestPlotConfig.data[forestPlotConfig.data.length - 1]['Author(s) and Year'])
+      )
+    })
   })
 
   describe('axis rendering', () => {
@@ -181,6 +263,148 @@ describe('LinearChart', () => {
       // The axis line should be hidden, but grid lines may still render
       expect(container.querySelector('svg')).toBeTruthy()
     })
+
+    it('ignores yAxis.labelOffset when positioning the vertical left-axis title', () => {
+      const baseRuntime = {
+        xAxis: {
+          type: 'date',
+          dataKey: 'Date',
+          label: 'X-Axis'
+        },
+        yAxis: {
+          size: 50,
+          label: 'Y-Axis',
+          gridLines: true,
+          labelOffset: 0
+        },
+        originalXAxis: {
+          dataKey: 'Date'
+        },
+        series: [],
+        seriesKeys: [],
+        seriesLabelsAll: [],
+        uniqueId: 'test-chart'
+      }
+
+      const baseRender = renderLinearChart({
+        yAxis: {
+          hideAxis: false,
+          hideLabel: false,
+          hideTicks: false,
+          size: '50',
+          gridLines: true,
+          label: 'Y-Axis',
+          tickRotation: 0,
+          anchors: [],
+          axisPadding: 0,
+          labelPlacement: 'On Date/Category Axis',
+          rightAxisSize: 0,
+          labelOffset: 0
+        },
+        runtime: baseRuntime
+      })
+      const offsetRender = renderLinearChart({
+        yAxis: {
+          hideAxis: false,
+          hideLabel: false,
+          hideTicks: false,
+          size: '50',
+          gridLines: true,
+          label: 'Y-Axis',
+          tickRotation: 0,
+          anchors: [],
+          axisPadding: 0,
+          labelPlacement: 'On Date/Category Axis',
+          rightAxisSize: 0,
+          labelOffset: 240
+        },
+        runtime: {
+          ...baseRuntime,
+          yAxis: {
+            ...baseRuntime.yAxis,
+            labelOffset: 240
+          }
+        }
+      })
+
+      const baseTransforms = getLeftAxisLabelTransforms(baseRender.container)
+      const offsetTransforms = getLeftAxisLabelTransforms(offsetRender.container)
+
+      expect(baseTransforms.length).toBeGreaterThan(0)
+      expect(offsetTransforms).toEqual(baseTransforms)
+    })
+
+    it('ignores horizontal xAxis.labelOffset when positioning the left-side axis title', () => {
+      const baseRuntime = {
+        xAxis: {
+          type: 'linear',
+          dataKey: 'Value',
+          label: 'X-Axis'
+        },
+        yAxis: {
+          size: 50,
+          label: 'Y-Axis',
+          gridLines: true,
+          labelOffset: 0
+        },
+        originalXAxis: {
+          dataKey: 'Date'
+        },
+        series: [],
+        seriesKeys: [],
+        seriesLabelsAll: [],
+        uniqueId: 'test-chart'
+      }
+
+      const baseRender = renderLinearChart({
+        orientation: 'horizontal',
+        xAxis: {
+          type: 'linear',
+          dataKey: 'Value',
+          label: 'X-Axis',
+          hideAxis: false,
+          hideLabel: false,
+          hideTicks: false,
+          size: '50',
+          tickRotation: 0,
+          maxTickRotation: 90,
+          anchors: [],
+          axisPadding: 0,
+          labelOffset: 0
+        },
+        runtime: baseRuntime
+      })
+      const offsetRender = renderLinearChart({
+        orientation: 'horizontal',
+        xAxis: {
+          type: 'linear',
+          dataKey: 'Value',
+          label: 'X-Axis',
+          hideAxis: false,
+          hideLabel: false,
+          hideTicks: false,
+          size: '50',
+          tickRotation: 0,
+          maxTickRotation: 90,
+          anchors: [],
+          axisPadding: 0,
+          labelOffset: 240
+        },
+        runtime: {
+          ...baseRuntime,
+          yAxis: {
+            ...baseRuntime.yAxis,
+            labelOffset: 240
+          }
+        }
+      })
+
+      const baseTransforms = getLeftAxisLabelTransforms(baseRender.container)
+      const offsetTransforms = getLeftAxisLabelTransforms(offsetRender.container)
+
+      expect(baseTransforms.length).toBeGreaterThan(0)
+      expect(offsetTransforms).toEqual(baseTransforms)
+    })
   })
 
   describe('SVG dimensions', () => {

package/src/components/LinearChart/tests/mockConfigContext.ts

@@ -124,6 +124,8 @@ export const createMockChartContext = (
     clean: (s: any) => s,
     formatTooltipsDate: (date: any) => String(date),
     legendId: 'test-legend',
+    rawData: config.data,
+    updateConfig: () => {},
     ...contextOverrides
   } as ChartContext
 }

package/src/components/LinearChart.tsx

@@ -18,8 +18,7 @@ import { Tooltip as ReactTooltip } from 'react-tooltip'
 import 'react-tooltip/dist/react-tooltip.css'
 import { Text } from '@visx/text'
 import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
-import _ from 'lodash'
-
+import ResizeObserver from 'resize-observer-polyfill'
 // CDC Components
 import { isDateScale } from '@cdc/core/helpers/cove/date'
 import ConfigContext from '../ConfigContext'
@@ -36,6 +35,7 @@ import { useTickFormatters } from './LinearChart/utils/tickFormatting'
 import { isLegendWrapViewport, isMobileFontViewport } from '@cdc/core/helpers/viewports'
 import { calcInitialHeight } from '../helpers/sizeHelpers'
 import { calculateHorizontalBarCategoryLabelWidth } from '../helpers/calculateHorizontalBarCategoryLabelWidth'
+import { calculateLeftYAxisWidth } from '../helpers/calculateLeftYAxisWidth'
 
 // Hooks
 import useReduceData from '../hooks/useReduceData'
@@ -52,6 +52,7 @@ import Annotation from './Annotations'
 import { countNumOfTicks } from '../helpers/countNumOfTicks'
 import HoverLine from './HoverLine/HoverLine'
 import { SmallMultiples } from './SmallMultiples'
+import { type TooltipDisplayData } from '../helpers/tooltipHelpers'
 
 type LinearChartProps = {
   parentWidth: number
@@ -63,6 +64,7 @@ const BOTTOM_LABEL_PADDING = 9
 const X_TICK_LABEL_PADDING = 4.5
 const DEFAULT_TICK_LENGTH = 8
 const DEFAULT_MAX_TICK_ROTATION = 90
+const DEFAULT_LEFT_Y_AXIS_WIDTH = 50
 
 // Font sizes
 const TICK_LABEL_FONT_SIZE = 16
@@ -89,10 +91,7 @@ const WARMING_STRIPES_HEIGHT = 78
 // Time constants
 const MONTH_AS_MS = 1000 * 60 * 60 * 24 * 30
 
-type TooltipData = {
-  dataXPosition?: number
-  dataYPosition?: number
-}
+type TooltipData = Partial<TooltipDisplayData>
 
 type UseTooltipReturn<T = TooltipData> = {
   tooltipData: T | null
@@ -152,6 +151,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const [suffixWidth, setSuffixWidth] = useState(0)
   const [calculatedSvgHeight, setCalculatedSvgHeight] = useState<number | null>(null)
   const [axisUpdateKey, setAxisUpdateKey] = useState(0)
+  const [axisBottomSizeKey, setAxisBottomSizeKey] = useState(0)
   const [synchronizedXValue, setSynchronizedXValue] = useState<any>(null)
 
   // REFS
@@ -176,8 +176,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const isDateTime = config.xAxis.type === 'date-time'
   const inlineLabelHasNoSpace = !inlineLabel?.includes(' ')
   const needsYAxisAutoPadding = inlineLabel && !inlineLabelHasNoSpace
-  const padding = orientation === 'horizontal' ? Number(config.xAxis.size) : Number(config.yAxis.size)
-  const yLabelOffset = isNaN(parseInt(`${runtime.yAxis.labelOffset}`)) ? 0 : parseInt(`${runtime.yAxis.labelOffset}`)
   const tickLabelFontSize = isMobileFontViewport(vizViewport) ? TICK_LABEL_FONT_SIZE_SMALL : TICK_LABEL_FONT_SIZE
   const axisLabelFontSize = isMobileFontViewport(vizViewport) ? AXIS_LABEL_FONT_SIZE_SMALL : AXIS_LABEL_FONT_SIZE
   const GET_TEXT_WIDTH_FONT = `normal ${tickLabelFontSize}px Nunito, sans-serif`
@@ -245,13 +243,22 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     setAxisUpdateKey(prev => prev + 1)
   }, [data.length, xAxisDataMapped?.[0], xAxisDataMapped?.[xAxisDataMapped.length - 1]])
 
-  const { yScaleRight, hasRightAxis } = useRightAxis({ config, yMax, data })
+  // Recompute heights when bottom axis size changes (e.g., font load or wrap).
+  useEffect(() => {
+    const axisBottomEl = axisBottomRef.current
+    if (!axisBottomEl) return
+    const observer = new ResizeObserver(() => {
+      setAxisBottomSizeKey(prev => prev + 1)
+    })
+    observer.observe(axisBottomEl)
+    return () => observer.disconnect()
+  }, [axisBottomRef.current])
 
-  // State for computed y-axis width - allows re-render when horizontal bar label space is calculated
-  const [computedYAxisWidth, setComputedYAxisWidth] = useState<number | null>(null)
+  const { yScaleRight, hasRightAxis } = useRightAxis({ config, yMax, data })
 
-  // Use computed width if available, otherwise fall back to config value
-  const yAxisWidth = computedYAxisWidth ?? Number(runtime.yAxis.size)
+  // State for computed left-axis width - shared across all linear-chart types.
+  const [currentYAxisWidth, setCurrentYAxisWidth] = useState<number>(DEFAULT_LEFT_Y_AXIS_WIDTH)
+  const yAxisWidth = currentYAxisWidth
 
   // Chart width calculation using the current y-axis width
   const xMax = parentWidth - yAxisWidth - (hasRightAxis ? config.yAxis.rightAxisSize : 0)
@@ -292,39 +299,77 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     shouldAbbreviate
   })
 
-  // Calculate category label space for horizontal bar charts
+  // Horizontal charts swap axes at runtime, but the left-side category label visibility
+  // still follows config.yAxis.hideLabel to match the actual axis renderers.
   const categoryLabelSpace = useMemo(() => {
+    if (config.yAxis.hideLabel) return 0
+
     return calculateHorizontalBarCategoryLabelWidth({
       yScale,
       chartWidth: parentWidth,
       formatDate,
       parseDate,
       tickLabelFont: GET_TEXT_WIDTH_FONT,
-      xAxisType: config.runtime.xAxis?.type,
+      xAxisType: runtime.xAxis?.type,
       labelPlacement: config.yAxis.labelPlacement
     })
-  }, [isHorizontal, config.visualizationType, config.yAxis.labelPlacement, yScale, parentWidth])
+  }, [
+    config.yAxis.hideLabel,
+    config.yAxis.labelPlacement,
+    yScale,
+    parentWidth,
+    formatDate,
+    parseDate,
+    GET_TEXT_WIDTH_FONT,
+    runtime.xAxis?.type
+  ])
 
   const horizontalYAxisLabelSpace = runtime.yAxis.label && !config.hideYAxisLabel ? 30 : 0
 
-  // Update y-axis width state when computed value changes (for horizontal bar charts)
-  useEffect(() => {
-    if (isHorizontal && config.visualizationType === 'Bar') {
-      const newWidth = categoryLabelSpace + horizontalYAxisLabelSpace
-      if (newWidth !== computedYAxisWidth) {
-        setComputedYAxisWidth(newWidth)
-      }
-    } else if (computedYAxisWidth !== null) {
-      // Reset to null for non-horizontal bar charts so we use config value
-      setComputedYAxisWidth(null)
-    }
-  }, [isHorizontal, config.visualizationType, categoryLabelSpace, horizontalYAxisLabelSpace, computedYAxisWidth])
-
   const [yTickCount, xTickCount] = ['yAxis', 'xAxis'].map(axis =>
     countNumOfTicks({ axis, max, runtime, currentViewport, isHorizontal, data, config, min })
   )
   const handleNumTicks = isForestPlot ? config.data.length : yTickCount
 
+  const calculatedYAxisWidth = useMemo(() => {
+    if (isHorizontal && config.visualizationType === 'Bar') {
+      return categoryLabelSpace + horizontalYAxisLabelSpace
+    }
+
+    return calculateLeftYAxisWidth({
+      config,
+      data,
+      yScale,
+      numTicks: handleNumTicks,
+      parentWidth,
+      tickLabelFont: GET_TEXT_WIDTH_FONT,
+      axisLabelFontSize,
+      handleLeftTickFormatting,
+      categoryLabelSpace,
+      horizontalYAxisLabelSpace
+    })
+  }, [
+    config,
+    data,
+    yScale,
+    handleNumTicks,
+    parentWidth,
+    isHorizontal,
+    GET_TEXT_WIDTH_FONT,
+    axisLabelFontSize,
+    handleLeftTickFormatting,
+    categoryLabelSpace,
+    horizontalYAxisLabelSpace
+  ])
+
+  useLayoutEffect(() => {
+    if (parentWidth <= 0) return
+
+    if (calculatedYAxisWidth !== currentYAxisWidth) {
+      setCurrentYAxisWidth(calculatedYAxisWidth)
+    }
+  }, [calculatedYAxisWidth, currentYAxisWidth, parentWidth])
+
   // Tooltip Helpers
 
   const { tooltipData, showTooltip, hideTooltip, tooltipOpen, tooltipLeft, tooltipTop } =
@@ -342,6 +387,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     xScale,
     yScale,
     seriesScale,
+    yAxisWidth,
     showTooltip,
     hideTooltip,
     interactionLabel
@@ -376,7 +422,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     return manualStep
   }, [config.xAxis.manualStep, config.xAxis.viewportStepCount, currentViewport])
 
-  const smallMultiplesSync = useSmallMultipleSynchronization(xMax, yMax, getXValueFromCoordinate)
+  const smallMultiplesSync = useSmallMultipleSynchronization(xMax, yMax, yAxisWidth, getXValueFromCoordinate)
 
   const onMouseMove = event => {
     const svgRect = event.currentTarget.getBoundingClientRect()
@@ -405,7 +451,9 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const internalSvgRef = useProgrammaticTooltip({
     svgRef,
     getCoordinateFromXValue,
+    getXValueFromCoordinate,
     config,
+    yAxisWidth,
     setPoint,
     setShowHoverLine,
     handleTooltipMouseOver,
@@ -415,7 +463,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
 
   // Make sure the chart is visible if in the editor
   useEffect(() => {
-    const element = document.querySelector('.isEditor')
+    const element = document.querySelector('.is-editor')
     if (element) {
       setAnimatedChart(true)
     }
@@ -498,7 +546,16 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     const legendIsLeftOrRight =
       legend?.position !== 'top' && legend?.position !== 'bottom' && !isLegendWrapViewport(currentViewport)
     legendRef.current.style.transform = legendIsLeftOrRight ? `translateY(${topLabelOnGridlineHeight}px)` : 'none'
-  }, [axisBottomRef.current, config, config.xAxis.brushActive, currentViewport, topYLabelRef.current, initialHeight])
+  }, [
+    axisBottomRef.current,
+    config,
+    config.xAxis.brushActive,
+    currentViewport,
+    topYLabelRef.current,
+    initialHeight,
+    parentWidth,
+    axisBottomSizeKey
+  ])
 
   useEffect(() => {
     if (!tooltipOpen) return
@@ -542,7 +599,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
         <svg
           ref={internalSvgRef}
           onMouseMove={onMouseMove}
-          width={parentWidth + config.yAxis.rightAxisSize}
+          width={parentWidth}
           height={isNoDataAvailable ? 1 : calculatedSvgHeight ?? parentHeight}
           className={`linear ${config.animate ? 'animated' : ''} ${animatedChart && config.animate ? 'animate' : ''} ${
             debugSvg && 'debug'
@@ -569,7 +626,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               xMax={xMax}
               yAxisWidth={yAxisWidth}
               numTicks={handleNumTicks}
-              yLabelOffset={yLabelOffset}
               axisLabelFontSize={axisLabelFontSize}
             />
           )}
@@ -653,8 +709,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                   strokeDasharray={handleLineType(anchor.lineStyle)}
                   stroke={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
                   className='anchor-y'
-                  from={{ x: Number(runtime.yAxis.size), y: position - middleOffset }}
-                  to={{ x: Number(runtime.yAxis.size) + Number(xMax), y: position - middleOffset }}
+                  from={{ x: Number(yAxisWidth), y: position - middleOffset }}
+                  to={{ x: Number(yAxisWidth) + Number(xMax), y: position - middleOffset }}
                 />
               )
             })}
@@ -690,8 +746,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                   stroke={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
                   fill={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
                   className='anchor-x'
-                  from={{ x: Number(anchorPosition) + Number(padding), y: 0 }}
-                  to={{ x: Number(anchorPosition) + Number(padding), y: yMax }}
+                  from={{ x: Number(anchorPosition) + Number(yAxisWidth), y: 0 }}
+                  to={{ x: Number(anchorPosition) + Number(yAxisWidth), y: yMax }}
                 />
               )
             })}
@@ -708,6 +764,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               tooltipData={tooltipData}
               yMax={yMax}
               xMax={xMax}
+              yAxisWidth={yAxisWidth}
             />
           )}
           {isNoDataAvailable && (
@@ -721,8 +778,22 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           )}
           {showHoverLine && (
             <>
-              <HoverLine xMax={xMax} yMax={yMax} point={point} tooltipData={tooltipData} orientation='horizontal' />
-              <HoverLine xMax={xMax} yMax={yMax} point={point} tooltipData={tooltipData} orientation='vertical' />
+              <HoverLine
+                xMax={xMax}
+                yMax={yMax}
+                point={point}
+                tooltipData={tooltipData}
+                orientation='horizontal'
+                yAxisWidth={yAxisWidth}
+              />
+              <HoverLine
+                xMax={xMax}
+                yMax={yMax}
+                point={point}
+                tooltipData={tooltipData}
+                orientation='vertical'
+                yAxisWidth={yAxisWidth}
+              />
             </>
           )}
           <Group left={yAxisWidth}>
@@ -758,7 +829,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                 suffixWidth={suffixWidth}
                 horizontalYAxisLabelSpace={horizontalYAxisLabelSpace}
                 categoryLabelSpace={categoryLabelSpace}
-                yLabelOffset={yLabelOffset}
               />
             )}
           {config.yAxis.type === 'categorical' && config.orientation === 'vertical' && (
@@ -819,10 +889,10 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
         </svg>
         {!isDraggingAnnotation &&
           tooltipData &&
-          Object.entries(tooltipData.data).length > 0 &&
+          tooltipData.data?.length > 0 &&
           tooltipOpen &&
           showTooltip &&
-          !tooltipData?.data?.some(subArray => subArray.some(item => item === undefined)) &&
+          !tooltipData?.data?.some(row => row?.value === undefined) &&
           tooltipData.dataYPosition &&
           tooltipData.dataXPosition &&
           !config.tooltips.singleSeries && (
@@ -834,15 +904,22 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               <TooltipWithBounds
                 ref={tooltipRef}
                 key={Math.random()}
-                className={'tooltip cdc-open-viz-module'}
+                className={'tooltip cove-visualization'}
                 left={tooltipLeft}
                 top={tooltipTop}
               >
                 <ul>
                   {typeof tooltipData === 'object' &&
-                    Object.entries(tooltipData.data)
-                      .filter(([_, values]) => Array.isArray(values) && !values.includes(undefined))
-                      .map((item, index) => <TooltipListItem item={item} key={index} />)}
+                    tooltipData.data
+                      .filter(row => row && row.value !== undefined)
+                      .map((row, index) => (
+                        <TooltipListItem
+                          row={row}
+                          index={index}
+                          key={index}
+                          useMarkerColumn={tooltipData.useMarkerColumn}
+                        />
+                      ))}
                 </ul>
               </TooltipWithBounds>
             </>

package/src/components/PairedBarChart.jsx

@@ -10,7 +10,7 @@ import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
 
-const PairedBarChart = ({ width, height, originalWidth }) => {
+const PairedBarChart = ({ width, height, originalWidth, yAxisWidth }) => {
   const {
     config,
     colorScale,
@@ -93,7 +93,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
           id='cdc-visualization__paired-bar-chart'
           width={originalWidth}
           height={height}
-          viewBox={`0 0 ${width + Number(config.runtime.yAxis.size)} ${height}`}
+          viewBox={`0 0 ${width + yAxisWidth} ${height}`}
           role='img'
           tabIndex={0}
         >