@cdc/chart 4.26.3 → 4.26.5

package/src/components/Regions/components/Regions.tsx

@@ -1,18 +1,31 @@
 import React, { useContext } from 'react'
 import ConfigContext from '../../../ConfigContext'
 import { ChartContext } from '../../../types/ChartContext'
-import { Text } from '@visx/text'
+import { Text, useText } from '@visx/text'
 import { Group } from '@visx/group'
-import { formatDate, isDateScale } from '@cdc/core/helpers/cove/date.js'
+import { formatDate } from '@cdc/core/helpers/cove/date.js'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
+import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
 
 // Constants for visualization types
 const VIZ_TYPES = {
   BAR: 'Bar',
   LINE: 'Line',
   AREA: 'Area Chart',
-  COMBO: 'Combo'
+  COMBO: 'Combo',
+  HORIZON: 'Horizon Chart'
 } as const
 
+const DEFAULT_REGION_BACKGROUND = 'var(--cool-gray-50, #71767a)'
+const TICK_LABEL_FONT_SIZE = 16
+const TICK_LABEL_FONT_SIZE_SMALL = 13
+const REGION_LABEL_HORIZONTAL_PADDING = 8
+const REGION_LABEL_TOP_PADDING = 6
+const REGION_LABEL_MAX_PLOT_WIDTH_RATIO = 1 / 3
+const REGION_LABEL_COMFORTABLE_MIN_WIDTH = 120
+const REGION_LABEL_COMFORTABLE_MIN_WIDTH_SMALL = 96
+const REGION_LABEL_FONT_FAMILY = 'Nunito, sans-serif'
+
 type Region = {
   from: string
   to: string
@@ -44,10 +57,111 @@ type HighlightedAreaProps = {
   background: string
 }
 
+type RegionLabelLayout = {
+  x: number
+  width: number
+}
+
+type RegionLabelProps = {
+  label: string
+  color: string
+  clippedFrom: number
+  regionWidth: number
+  plotWidth: number
+  fontSize: number
+  isMobileViewport: boolean
+}
+
 const HighlightedArea: React.FC<HighlightedAreaProps> = ({ x, width, yMax, background }) => (
-  <rect x={x} y={0} width={width} height={yMax} fill={background} opacity={0.3} />
+  <rect x={x} y={0} width={width} height={yMax} fill={background || DEFAULT_REGION_BACKGROUND} opacity={0.3} />
 )
 
+const clamp = (value: number, min: number, max: number): number => Math.min(Math.max(value, min), max)
+
+const getRegionLabelY = (fontSize: number): number => REGION_LABEL_TOP_PADDING + fontSize * 0.25
+
+const getComfortableRegionLabelWidth = (plotWidth: number, isMobileViewport: boolean): number => {
+  const maxPlotLabelWidth = Math.max(1, plotWidth * REGION_LABEL_MAX_PLOT_WIDTH_RATIO)
+  const comfortableMinWidth = isMobileViewport
+    ? REGION_LABEL_COMFORTABLE_MIN_WIDTH_SMALL
+    : REGION_LABEL_COMFORTABLE_MIN_WIDTH
+  return Math.min(comfortableMinWidth, maxPlotLabelWidth, plotWidth)
+}
+
+// Region labels prefer to sit centered inside their highlighted region when the measured text
+// fits with padding. If the visible region is too narrow, keep a readable fixed wrapping width
+// and pin the measured text near the region's right edge, clamped so the text stays inside the plot.
+const getRegionLabelLayout = (
+  clippedFrom: number,
+  regionWidth: number,
+  plotWidth: number,
+  comfortableLabelWidth: number,
+  estimatedWrappedWidth: number
+): RegionLabelLayout => {
+  const maxPlotLabelWidth = Math.max(1, plotWidth * REGION_LABEL_MAX_PLOT_WIDTH_RATIO)
+  const regionInnerWidth = Math.max(0, regionWidth - REGION_LABEL_HORIZONTAL_PADDING * 2)
+  const insideThreshold = Math.min(comfortableLabelWidth, estimatedWrappedWidth || comfortableLabelWidth)
+
+  const isInsideRegion = regionInnerWidth >= insideThreshold
+  const labelWidth = isInsideRegion ? Math.min(regionInnerWidth, maxPlotLabelWidth) : comfortableLabelWidth
+
+  const regionCenter = clippedFrom + regionWidth / 2
+  const halfLabelWidth = labelWidth / 2
+  const measuredTextWidth = Math.min(estimatedWrappedWidth || labelWidth, labelWidth)
+  const halfMeasuredTextWidth = measuredTextWidth / 2
+  const overflowLabelX = clamp(
+    clippedFrom + regionWidth - REGION_LABEL_HORIZONTAL_PADDING - halfMeasuredTextWidth,
+    halfMeasuredTextWidth,
+    plotWidth - halfMeasuredTextWidth
+  )
+  const insideLabelX =
+    labelWidth >= plotWidth ? plotWidth / 2 : clamp(regionCenter, halfLabelWidth, plotWidth - halfLabelWidth)
+
+  return { x: isInsideRegion ? insideLabelX : overflowLabelX, width: labelWidth }
+}
+
+const RegionLabel: React.FC<RegionLabelProps> = ({
+  label,
+  color,
+  clippedFrom,
+  regionWidth,
+  plotWidth,
+  fontSize,
+  isMobileViewport
+}) => {
+  const style = { fontFamily: REGION_LABEL_FONT_FAMILY, fontSize }
+  const comfortableLabelWidth = getComfortableRegionLabelWidth(plotWidth, isMobileViewport)
+  const { wordsByLines } = useText({
+    children: label,
+    width: comfortableLabelWidth,
+    style
+  })
+  const estimatedWrappedWidth = Math.max(...wordsByLines.map(line => line.width || 0), 0)
+  const labelLayout = getRegionLabelLayout(
+    clippedFrom,
+    regionWidth,
+    plotWidth,
+    comfortableLabelWidth,
+    estimatedWrappedWidth
+  )
+
+  return (
+    <Text
+      x={labelLayout.x}
+      y={getRegionLabelY(fontSize)}
+      width={labelLayout.width}
+      fill={color || APP_FONT_COLOR}
+      fontSize={fontSize}
+      style={style}
+      lineHeight='1.1em'
+      verticalAnchor='start'
+      textAnchor='middle'
+    >
+      {label}
+    </Text>
+  )
+}
+
 /** Find the closest date in domain to a target date */
 const findClosestDate = <T,>(targetTime: number, domain: T[], getTime: (d: T) => number): T => {
   let closest = domain[0]
@@ -63,17 +177,20 @@ const findClosestDate = <T,>(targetTime: number, domain: T[], getTime: (d: T) =>
   return closest
 }
 
-/** Check if visualization type is line-like (Line or Area Chart) */
-const isLineLike = (type: string): boolean => type === VIZ_TYPES.LINE || type === VIZ_TYPES.AREA
+/** Check if visualization type is line-like (Line, Area Chart, or Horizon Chart) */
+const isLineLike = (type: string): boolean =>
+  type === VIZ_TYPES.LINE || type === VIZ_TYPES.AREA || type === VIZ_TYPES.HORIZON
 
 /** Check if visualization type is bar-like (Bar or Combo) */
 const isBarLike = (type: string): boolean => type === VIZ_TYPES.BAR || type === VIZ_TYPES.COMBO
 
 // TODO: should regions be removed on categorical axis?
 const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGroup = 1, yMax, xMax }) => {
-  const { parseDate, config } = useContext<ChartContext>(ConfigContext)
+  const { parseDate, config, tableData, vizViewport } = useContext<ChartContext>(ConfigContext)
 
   const { regions, visualizationType, orientation, xAxis } = config
+  const isMobileViewport = isMobileFontViewport(vizViewport || 'lg')
+  const regionLabelFontSize = isMobileViewport ? TICK_LABEL_FONT_SIZE_SMALL : TICK_LABEL_FONT_SIZE
 
   const getBarOffset = (): number => (barWidth * totalBarsInGroup) / 2
 
@@ -81,15 +198,32 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
   // HELPER FUNCTIONS FOR PREVIOUS DAYS
   // ============================================
 
+  const getDataLastTime = (): number => {
+    const dataKey = config.xAxis.dataKey
+    if (!Array.isArray(tableData) || tableData.length === 0 || !dataKey) return NaN
+    let last = NaN
+    for (const row of tableData) {
+      const value = (row as Record<string, unknown>)[dataKey]
+      const t = parseDate(String(value))?.getTime()
+      if (typeof t === 'number' && !isNaN(t) && (isNaN(last) || t > last)) {
+        last = t
+      }
+    }
+    return last
+  }
+
   const calculatePreviousDaysFrom = (region: Region, axisType: string): number => {
     const previousDays = Number(region.from) || 0
     const domain = xScale.domain()
 
     // Determine the "to" reference date
-    const toRefDate =
-      region.toType === 'Last Date'
-        ? new Date(domain[domain.length - 1] as string | number).getTime()
-        : new Date(region.to)
+    let toRefDate: number | Date
+    if (region.toType === 'Last Date') {
+      const dataLastTime = getDataLastTime()
+      toRefDate = !isNaN(dataLastTime) ? dataLastTime : new Date(domain[domain.length - 1] as string | number).getTime()
+    } else {
+      toRefDate = new Date(region.to)
+    }
 
     const toFormatted = formatDate(config.xAxis.dateParseFormat, toRefDate, config.locale)
     const toDate = new Date(toFormatted)
@@ -122,8 +256,8 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
     } else {
       from = xScale(region.from)
     }
-    // Add left padding (yAxis.size) + half bandwidth to center on the category
-    let scalePadding = Number(config.yAxis.size)
+    // Add half bandwidth to center on the category
+    let scalePadding = 0
     if (xScale.bandwidth) {
       scalePadding += xScale.bandwidth() / 2
     }
@@ -135,8 +269,8 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       return calculateLineLastDatePosition_Categorical()
     }
     let to = xScale(region.to)
-    // Add left padding (yAxis.size) + half bandwidth
-    let scalePadding = Number(config.yAxis.size)
+    // Add half bandwidth to center on the category
+    let scalePadding = 0
     if (xScale.bandwidth) {
       scalePadding += xScale.bandwidth() / 2
     }
@@ -158,8 +292,8 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       const closestDate = findClosestDate(parsedDate, domain, d => d)
       from = xScale(closestDate)
     }
-    // Add left padding (yAxis.size) + half bandwidth
-    let scalePadding = Number(config.yAxis.size)
+    // Add half bandwidth to center on the date band
+    let scalePadding = 0
     if (xScale.bandwidth) {
       scalePadding += xScale.bandwidth() / 2
     }
@@ -179,8 +313,8 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
     const closestDate = findClosestDate(parsedDate, domain, d => d)
     let to = xScale(closestDate)
 
-    // Add left padding (yAxis.size) + half bandwidth
-    let scalePadding = Number(config.yAxis.size)
+    // Add half bandwidth to center on the date band
+    let scalePadding = 0
     if (xScale.bandwidth) {
       scalePadding += xScale.bandwidth() / 2
     }
@@ -190,13 +324,13 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
   const getLineFromValue_DateTime = (region: Region): number => {
     if (region.fromType === 'Previous Days') {
       const from = calculatePreviousDaysFrom(region, 'date-time')
-      return from + Number(config.yAxis.size)
+      return from
     }
     const date = new Date(region.from)
     const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date, config.locale)).getTime()
     let from = xScale(parsedDate)
-    // For date-time, xScale returns correct position (no bandwidth), just add left padding
-    return from + Number(config.yAxis.size)
+    // For date-time, xScale returns the plot-local position (no bandwidth)
+    return from
   }
 
   const getLineToValue_DateTime = (region: Region): number => {
@@ -204,27 +338,24 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       return calculateLineLastDatePosition_DateTime()
     }
     let to = xScale(parseDate(region.to).getTime())
-    return to + Number(config.yAxis.size)
+    return to
   }
 
   const calculateLineLastDatePosition_Categorical = (): number => {
-    const chartStart = Number(config.yAxis.size || 0)
     // Extend to the right edge of the chart
-    return chartStart + (xMax || 0)
+    return xMax || 0
   }
 
   const calculateLineLastDatePosition_Date = (): number => {
-    const chartStart = Number(config.yAxis.size || 0)
     // For date scale line charts with Last Date, extend to the right edge of the chart
-    return chartStart + (xMax || 0)
+    return xMax || 0
   }
 
   const calculateLineLastDatePosition_DateTime = (): number => {
     const domain = xScale.domain()
     const lastDate = domain[domain.length - 1]
     const lastDatePosition = xScale(lastDate)
-    // Match the non-Last Date logic: just add yAxis.size
-    return Number(lastDatePosition + Number(config.yAxis.size))
+    return Number(lastDatePosition)
   }
 
   // ============================================
@@ -323,6 +454,31 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
     return Number(lastDatePosition)
   }
 
+  const isRegionInVisibleDomain = (region: Region): boolean => {
+    if (region.toType !== 'Last Date') return true
+    if (xAxis.type !== 'date' && xAxis.type !== 'date-time') return true
+
+    const domain = xScale.domain()
+    if (!domain || domain.length === 0) return true
+    const visEnd = Number(domain[domain.length - 1])
+    if (isNaN(visEnd)) return true
+
+    let fromTime: number | undefined
+    if (region.fromType === 'Previous Days') {
+      const dataLastTime = getDataLastTime()
+      if (isNaN(dataLastTime)) return true
+      const previousDays = Number(region.from) || 0
+      const fromDate = new Date(dataLastTime)
+      fromDate.setDate(fromDate.getDate() - previousDays)
+      fromTime = fromDate.getTime()
+    } else {
+      fromTime = parseDate(formatDate(config.xAxis.dateParseFormat, new Date(region.from), config.locale))?.getTime()
+    }
+
+    if (fromTime === undefined || isNaN(fromTime)) return true
+    return fromTime < visEnd
+  }
+
   // ============================================
   // MAIN ROUTING FUNCTIONS
   // ============================================
@@ -389,10 +545,12 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
 
   if (!regions || orientation !== 'vertical') return null
 
-  const chartStart = Number(config.yAxis.size || 0)
-  const chartEnd = xMax !== undefined ? chartStart + xMax : chartStart + 1000
+  const chartStart = 0
+  const chartEnd = xMax !== undefined ? xMax : 1000
 
   return regions.map((region: Region) => {
+    if (!isRegionInVisibleDomain(region)) return null
+
     const from = getFromValue(region)
     const to = getToValue(region)
 
@@ -409,11 +567,17 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
     if (width <= 0) return null
 
     return (
-      <Group height={100} fill='red' className='regions regions-group--line' key={region.label} pointerEvents='none'>
+      <Group height={100} className='regions regions-group--line' key={region.label} pointerEvents='none'>
         <HighlightedArea x={clippedFrom} width={width} yMax={yMax} background={region.background} />
-        <Text x={clippedFrom + width / 2} y={5} fill={region.color} verticalAnchor='start' textAnchor='middle'>
-          {region.label}
-        </Text>
+        <RegionLabel
+          label={region.label}
+          color={region.color}
+          clippedFrom={clippedFrom}
+          regionWidth={width}
+          plotWidth={chartEnd}
+          fontSize={regionLabelFontSize}
+          isMobileViewport={isMobileViewport}
+        />
       </Group>
     )
   })

package/src/components/Sankey/components/Sankey.tsx

@@ -16,8 +16,10 @@ import useSankeyAlert from '../useSankeyAlert'
 import { getSankeyTooltip } from '../helpers/getSankeyTooltip'
 
 const Sankey = ({ width, height, runtime }: SankeyProps) => {
-  const { config } = useContext<ChartContext>(ConfigContext)
+  const { config, handleChartAriaLabels } = useContext<ChartContext>(ConfigContext)
   const { sankey: sankeyConfig } = config
+
+  const a11y = handleChartAriaLabels(config)
   const [largestGroupWidth, setLargestGroupWidth] = useState(0)
   const [tooltipID, setTooltipID] = useState<string>('')
   const { showAlert, alert } = useSankeyAlert()
@@ -43,7 +45,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
   useEffect(() => {
     let largest = 0
     groupRefs?.current?.map(g => {
-      const groupWidth = g?.getBoundingClientRect().width
+      const groupWidth = g?.getBBox?.().width || g?.getBoundingClientRect?.().width || 0
       if (groupWidth > largest) {
         largest = groupWidth
       }
@@ -455,10 +457,12 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
           width={width}
           height={Number(config.heights.vertical)}
           style={{ overflow: 'visible' }}
+          role='img'
+          aria-label={a11y}
         >
           <Group className='links'>{allLinks}</Group>
           <Group className='nodes'>{allNodes}</Group>
-          <Group className='finalNodes' style={{ display: 'none' }}>
+          <Group className='finalNodes' style={{ visibility: 'hidden', pointerEvents: 'none' }} aria-hidden='true'>
             {finalNodes}
           </Group>
         </svg>

package/src/components/Sankey/helpers/getSankeyTooltip.tsx

@@ -2,12 +2,13 @@ import ReactDOMServer from 'react-dom/server'
 import ColumnList from '../components/ColumnList'
 
 export const getSankeyTooltip = (data: Object, tooltipID: string) => {
-  const tooltipVal = `${(data?.tooltips?.find(item => item.node === tooltipID) || {}).value}`
-  const tooltipSummary = `${(data?.tooltips?.find(item => item.node === tooltipID) || {}).summary}`
-  const tooltipColumn1Label = (data?.tooltips?.find(item => item.node === tooltipID) || {}).column1Label
-  const tooltipColumn2Label = (data?.tooltips?.find(item => item.node === tooltipID) || {}).column2Label
-  const tooltipColumn1 = (data?.tooltips?.find(item => item.node === tooltipID) || {}).column1
-  const tooltipColumn2 = (data?.tooltips?.find(item => item.node === tooltipID) || {}).column2
+  const tooltips = Array.isArray(data?.tooltips) ? data.tooltips : []
+  const tooltipVal = `${(tooltips.find(item => item.node === tooltipID) || {}).value}`
+  const tooltipSummary = `${(tooltips.find(item => item.node === tooltipID) || {}).summary}`
+  const tooltipColumn1Label = (tooltips.find(item => item.node === tooltipID) || {}).column1Label
+  const tooltipColumn2Label = (tooltips.find(item => item.node === tooltipID) || {}).column2Label
+  const tooltipColumn1 = (tooltips.find(item => item.node === tooltipID) || {}).column1
+  const tooltipColumn2 = (tooltips.find(item => item.node === tooltipID) || {}).column2
 
   const tooltipColumn1Data = ReactDOMServer.renderToString(<ColumnList columnData={tooltipColumn1} />)
   const tooltipColumn2Data = ReactDOMServer.renderToString(<ColumnList columnData={tooltipColumn2} />)

package/src/components/ScatterPlot/ScatterPlot.jsx

@@ -4,22 +4,21 @@ import { Group } from '@visx/group'
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+import { buildSeriesTooltipListHtml } from '../../helpers/tooltipHelpers'
 
-const ScatterPlot = ({ xScale, yScale }) => {
+const ScatterPlot = ({ xScale, yScale, yAxisWidth }) => {
   const {
     transformedData: data,
     config,
     tableData,
     formatNumber,
     seriesHighlight,
-    colorPalettes,
     colorScale,
     interactionLabel
   } = useContext(ConfigContext)
 
   // TODO: copied from line chart should probably be a constant somewhere.
   const circleRadii = 4.5
-  const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
 
   // Track current hover for analytics
   const [currentHover, setCurrentHover] = useState({ dataIndex: null, seriesKey: null })
@@ -37,23 +36,26 @@ const ScatterPlot = ({ xScale, yScale }) => {
       }
     ])
   const handleTooltip = (item, s, dataIndex) => `<div>
-    ${
-      config.legend.showLegendValuesTooltip && config.runtime.seriesLabels && hasMultipleSeries
-        ? `${config.runtime.seriesLabels[s] || ''}<br/>`
-        : ''
-    }
-    ${config.runtime?.xAxis?.label || config.xAxis.label}: ${formatNumber(item[config.xAxis.dataKey], 'bottom')} <br/>
-    ${config.runtime?.yAxis?.label || config.yAxis.label}: ${formatNumber(item[s], 'left')}<br/>
-   ${additionalColumns
-     .map(
-       ([label, name, options]) =>
-         `${label} : ${formatColNumber(tableData[dataIndex][name], 'left', false, config, options)}<br/>`
-     )
-     .join('')}
+    ${buildSeriesTooltipListHtml({
+      config,
+      colorScale,
+      heading: `${config.runtime?.xAxis?.label || config.xAxis.label}: ${formatNumber(
+        item[config.xAxis.dataKey],
+        'bottom'
+      )}`,
+      seriesKey: s,
+      seriesText: `${config.runtime.seriesLabels[s] || s}: ${formatNumber(item[s], 'left')}`,
+      extraRows: additionalColumns
+        .map(
+          ([label, name, options]) =>
+            `${label} : ${formatColNumber(tableData[dataIndex][name], 'left', false, config, options)}`
+        )
+        .filter(Boolean)
+    })}
 </div>`
 
   return (
-    <Group className='scatter-plot' left={config.yAxis.size}>
+    <Group className='scatter-plot' left={yAxisWidth}>
       {data.map((item, dataIndex) => {
         // prettier-ignore
         return config.runtime.seriesKeys.map((s, index) => {

package/src/components/SmallMultiples/SmallMultipleTile.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useRef, useEffect } from 'react'
+import React, { useContext, useRef, useEffect, useState } from 'react'
 import LinearChart from '../LinearChart'
 import ParentSize from '@visx/responsive/lib/components/ParentSize'
 import ConfigContext from '../../ConfigContext'
@@ -7,6 +7,7 @@ import cloneConfig from '@cdc/core/helpers/cloneConfig'
 import { getTileDisplayTitle } from '../../helpers/smallMultiplesHelpers'
 import getViewport from '@cdc/core/helpers/getViewport'
 import { ChartConfig } from '../../types/ChartConfig'
+import { getAxisLabelFontSize } from '../../helpers/axisLabelFontSize'
 
 interface SmallMultipleTileProps {
   mode: 'by-series' | 'by-column'
@@ -107,13 +108,16 @@ const SmallMultipleTile: React.FC<SmallMultipleTileProps> = ({
     }
   }
 
+  const titlePlacementIsTop = tileConfig.yAxis?.titlePlacement === 'top'
+
   // Small multiples-specific modifications
   tileConfig = {
     ...tileConfig,
     hideXAxisLabel: !isFirstInRow,
-    hideYAxisLabel: !isFirstInRow,
+    hideYAxisLabel: config.hideYAxisLabel || (!isFirstInRow && !titlePlacementIsTop),
     legend: {
       ...tileConfig.legend,
+      tooltipLegendVisible: !config.legend?.hide,
       hide: true // Hide legends for all small multiple tiles
     },
     xAxis: {
@@ -124,6 +128,8 @@ const SmallMultipleTile: React.FC<SmallMultipleTileProps> = ({
   }
 
   const displayTitle = getTileDisplayTitle(mode, seriesKey, tileValue, tileKey, config)
+  const showTopYAxisTitle =
+    titlePlacementIsTop && isFirstInRow && !config.hideYAxisLabel && Boolean(tileConfig.runtime?.yAxis?.label)
 
   // Get the original context values to merge with our filtered config
   const originalContextValues = useContext(ConfigContext)
@@ -133,6 +139,7 @@ const SmallMultipleTile: React.FC<SmallMultipleTileProps> = ({
 
   // Create a ref for the entire tile (including header) for height measurement
   const fullTileRef = useRef<HTMLDivElement>(null)
+  const [tileChartWidth, setTileChartWidth] = useState(0)
 
   // Create a ref for the LinearChart instance for tooltip coordination
   const linearChartRef = useRef<any>(null)
@@ -163,6 +170,22 @@ const SmallMultipleTile: React.FC<SmallMultipleTileProps> = ({
     return () => resizeObserver.disconnect()
   }, [tileKey, onHeightChange])
 
+  useEffect(() => {
+    if (!tileParentRef.current) return
+
+    const resizeObserver = new ResizeObserver(entries => {
+      entries.forEach(entry => {
+        setTileChartWidth(entry.contentRect.width)
+      })
+    })
+
+    resizeObserver.observe(tileParentRef.current)
+    return () => resizeObserver.disconnect()
+  }, [])
+
+  const tileVizViewport = tileChartWidth > 0 ? getViewport(tileChartWidth) : originalContextValues.vizViewport || 'lg'
+  const topYAxisTitleFontSize = getAxisLabelFontSize(tileVizViewport)
+
   // Pass chart ref to parent SmallMultiples component for tooltip coordination
   useEffect(() => {
     if (onChartRef && linearChartRef.current) {
@@ -172,8 +195,13 @@ const SmallMultipleTile: React.FC<SmallMultipleTileProps> = ({
 
   return (
     <div ref={fullTileRef} className='small-multiple-tile'>
-      <div ref={onHeaderRef} className='tile-header'>
+      <div ref={onHeaderRef} className={`tile-header${showTopYAxisTitle ? ' tile-header--with-top-y-axis-title' : ''}`}>
         <div className='tile-title'>{displayTitle}</div>
+        {showTopYAxisTitle && (
+          <div className='y-axis-top-title' style={{ fontSize: `${topYAxisTitleFontSize}px` }}>
+            {tileConfig.runtime.yAxis.label}
+          </div>
+        )}
       </div>
       <div ref={tileParentRef} className='tile-chart'>
         <ParentSize

package/src/components/SmallMultiples/SmallMultiples.css

@@ -19,6 +19,18 @@
   margin-bottom: 0.5rem;
 }
 
+.small-multiples-container--with-top-y-axis-title .tile-header {
+  margin-bottom: 0;
+}
+
+.tile-header--with-top-y-axis-title {
+  margin-bottom: 0;
+}
+
+.tile-header--with-top-y-axis-title .tile-title {
+  margin-bottom: 0.5rem;
+}
+
 .tile-title {
   font-weight: 700;
   line-height: 1.3;

package/src/components/SmallMultiples/SmallMultiples.tsx

@@ -1,8 +1,9 @@
-import React, { useContext, useEffect, useRef, useState, useMemo, useCallback } from 'react'
+import React, { useContext, useRef, useState, useMemo, useCallback, useLayoutEffect } from 'react'
 import SmallMultipleTile from './SmallMultipleTile'
 import ConfigContext from '../../ConfigContext'
 import useReduceData from '../../hooks/useReduceData'
 import useScales from '../../hooks/useScales'
+import { getYAxisAutoPaddingMode } from '../../helpers/getYAxisAutoPaddingMode'
 import { createCombinedDataForYAxis, applyTileOrder, createTileColorScale } from '../../helpers/smallMultiplesHelpers'
 import { isMobileSmallMultiplesViewport } from '@cdc/core/helpers/viewports'
 import './SmallMultiples.css'
@@ -105,9 +106,7 @@ const SmallMultiples: React.FC<SmallMultiplesProps> = ({ config, data, svgRef, p
     combinedDataForYAxis.data
   )
 
-  const inlineLabel = config.yAxis?.inlineLabel
-  const inlineLabelHasNoSpace = !inlineLabel?.includes(' ')
-  const needsYAxisAutoPadding = inlineLabel && !inlineLabelHasNoSpace
+  const yAxisAutoPaddingMode = getYAxisAutoPaddingMode(config)
 
   const { min, max } = useScales({
     config: combinedDataForYAxis.config,
@@ -120,7 +119,7 @@ const SmallMultiples: React.FC<SmallMultiplesProps> = ({ config, data, svgRef, p
     xAxisDataMapped: [],
     xMax: parentWidth,
     yMax: parentHeight,
-    needsYAxisAutoPadding,
+    yAxisAutoPaddingMode,
     currentViewport
   })
 
@@ -168,7 +167,7 @@ const SmallMultiples: React.FC<SmallMultiplesProps> = ({ config, data, svgRef, p
   )
 
   // Align tile header heights per row
-  useEffect(() => {
+  useLayoutEffect(() => {
     const headerEntries = Object.entries(headerRefs.current).filter(([_, ref]) => ref) as TileHeaderEntries
     if (headerEntries.length === 0) return
 
@@ -209,7 +208,7 @@ const SmallMultiples: React.FC<SmallMultiplesProps> = ({ config, data, svgRef, p
   }, [tileItems, tilesPerRow])
 
   // Calculate container height from measured tile heights
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!parentRef.current) return
 
     const measuredHeights = Object.values(tileHeights)
@@ -223,14 +222,21 @@ const SmallMultiples: React.FC<SmallMultiplesProps> = ({ config, data, svgRef, p
     const totalHeight = numberOfRows * maxTileHeight + totalGapsHeight
 
     parentRef.current.style.height = `${totalHeight}px`
-  }, [tileHeights, numberOfRows, isMobile, parentRef, tilesPerRow])
+  }, [tileHeights, numberOfRows, isMobile])
 
   if (tileItems.length === 0) {
     return null
   }
 
+  const hasTopYAxisTitle =
+    config.yAxis?.titlePlacement === 'top' && !config.hideYAxisLabel && Boolean(config.runtime?.yAxis?.label)
+
   return (
-    <div className='small-multiples-container'>
+    <div
+      className={`small-multiples-container${
+        hasTopYAxisTitle ? ' small-multiples-container--with-top-y-axis-title' : ''
+      }`}
+    >
       <div className='small-multiples-grid' style={gridStyle}>
         {tileItems.map((item, index) => {
           const customColorScale = createTileColorScale(item, config, colorScale, index, tileItems.length)