@cdc/chart 4.26.4 → 4.26.6

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

@@ -1,9 +1,11 @@
 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 = {
@@ -14,6 +16,16 @@ const VIZ_TYPES = {
   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
@@ -36,7 +48,6 @@ type RegionsProps = {
   barWidth?: number
   totalBarsInGroup?: number
   xMax?: number
-  yAxisWidth?: number
 }
 
 type HighlightedAreaProps = {
@@ -46,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]
@@ -73,17 +185,12 @@ const isLineLike = (type: string): boolean =>
 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,
-  yAxisWidth = 0
-}) => {
-  const { parseDate, config } = useContext<ChartContext>(ConfigContext)
+const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGroup = 1, yMax, xMax }) => {
+  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
 
@@ -91,15 +198,32 @@ const Regions: React.FC<RegionsProps> = ({
   // 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)
@@ -132,8 +256,8 @@ const Regions: React.FC<RegionsProps> = ({
     } else {
       from = xScale(region.from)
     }
-    // Add left padding (yAxisWidth) + half bandwidth to center on the category
-    let scalePadding = yAxisWidth
+    // Add half bandwidth to center on the category
+    let scalePadding = 0
     if (xScale.bandwidth) {
       scalePadding += xScale.bandwidth() / 2
     }
@@ -145,8 +269,8 @@ const Regions: React.FC<RegionsProps> = ({
       return calculateLineLastDatePosition_Categorical()
     }
     let to = xScale(region.to)
-    // Add left padding (yAxisWidth) + half bandwidth
-    let scalePadding = yAxisWidth
+    // Add half bandwidth to center on the category
+    let scalePadding = 0
     if (xScale.bandwidth) {
       scalePadding += xScale.bandwidth() / 2
     }
@@ -168,8 +292,8 @@ const Regions: React.FC<RegionsProps> = ({
       const closestDate = findClosestDate(parsedDate, domain, d => d)
       from = xScale(closestDate)
     }
-    // Add left padding (yAxisWidth) + half bandwidth
-    let scalePadding = yAxisWidth
+    // Add half bandwidth to center on the date band
+    let scalePadding = 0
     if (xScale.bandwidth) {
       scalePadding += xScale.bandwidth() / 2
     }
@@ -189,8 +313,8 @@ const Regions: React.FC<RegionsProps> = ({
     const closestDate = findClosestDate(parsedDate, domain, d => d)
     let to = xScale(closestDate)
 
-    // Add left padding (yAxisWidth) + half bandwidth
-    let scalePadding = yAxisWidth
+    // Add half bandwidth to center on the date band
+    let scalePadding = 0
     if (xScale.bandwidth) {
       scalePadding += xScale.bandwidth() / 2
     }
@@ -200,13 +324,13 @@ const Regions: React.FC<RegionsProps> = ({
   const getLineFromValue_DateTime = (region: Region): number => {
     if (region.fromType === 'Previous Days') {
       const from = calculatePreviousDaysFrom(region, 'date-time')
-      return from + yAxisWidth
+      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 + yAxisWidth
+    // For date-time, xScale returns the plot-local position (no bandwidth)
+    return from
   }
 
   const getLineToValue_DateTime = (region: Region): number => {
@@ -214,27 +338,24 @@ const Regions: React.FC<RegionsProps> = ({
       return calculateLineLastDatePosition_DateTime()
     }
     let to = xScale(parseDate(region.to).getTime())
-    return to + yAxisWidth
+    return to
   }
 
   const calculateLineLastDatePosition_Categorical = (): number => {
-    const chartStart = yAxisWidth
     // Extend to the right edge of the chart
-    return chartStart + (xMax || 0)
+    return xMax || 0
   }
 
   const calculateLineLastDatePosition_Date = (): number => {
-    const chartStart = yAxisWidth
     // 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 yAxisWidth
-    return Number(lastDatePosition + yAxisWidth)
+    return Number(lastDatePosition)
   }
 
   // ============================================
@@ -333,6 +454,31 @@ const Regions: React.FC<RegionsProps> = ({
     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
   // ============================================
@@ -399,10 +545,12 @@ const Regions: React.FC<RegionsProps> = ({
 
   if (!regions || orientation !== 'vertical') return null
 
-  const chartStart = yAxisWidth
-  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)
 
@@ -419,11 +567,17 @@ const Regions: React.FC<RegionsProps> = ({
     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

@@ -6,7 +6,7 @@ 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, yAxisWidth }) => {
+const ScatterPlot = ({ xScale, yScale, yAxisWidth, getXAxisData }) => {
   const {
     transformedData: data,
     config,
@@ -61,7 +61,7 @@ const ScatterPlot = ({ xScale, yScale, yAxisWidth }) => {
         return config.runtime.seriesKeys.map((s, index) => {
           const transparentArea = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(s) === -1
           const displayArea = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(s) !== -1
-          const seriesColor = config?.general?.palette?.customColors ? config.general.palette.customColors[index] : colorScale(config.runtime.seriesLabels?.[s] || s)
+          const seriesColor = colorScale(config.runtime.seriesLabels?.[s] || s)
 
           let pointStyles = {
             filter: 'unset',
@@ -78,7 +78,7 @@ const ScatterPlot = ({ xScale, yScale, yAxisWidth }) => {
             <circle
               key={`${dataIndex}-${index}`}
               r={circleRadii}
-              cx={xScale(item[config.xAxis.dataKey])}
+              cx={xScale(getXAxisData(item))}
               cy={yScale(item[s])}
               fill={displayArea ? seriesColor : 'transparent'}
               fillOpacity={transparentArea ? 0.25 : 1}

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'
@@ -22,6 +23,7 @@ interface SmallMultipleTileProps {
   parentHeight?: number
   globalYAxisMax?: number
   globalYAxisMin?: number
+  globalYAxisTickValues?: number[]
   isFirstInRow?: boolean
   onHeightChange?: (tileKey: string, height: number) => void
   onChartRef?: (ref: any) => void
@@ -42,6 +44,7 @@ const SmallMultipleTile: React.FC<SmallMultipleTileProps> = ({
   parentWidth,
   globalYAxisMax,
   globalYAxisMin,
+  globalYAxisTickValues,
   isFirstInRow,
   onHeightChange,
   onChartRef,
@@ -107,11 +110,13 @@ 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,
@@ -125,6 +130,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)
@@ -134,6 +141,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)
@@ -146,6 +154,7 @@ const SmallMultipleTile: React.FC<SmallMultipleTileProps> = ({
     tableData: tileData, // Override with tile-specific filtered data (important for tooltip data lookup)
     parentRef: tileParentRef, // Override with tile-specific parentRef
     updateConfig: () => {}, // Prevent tile hooks from modifying global config
+    yAxisTickValues: globalYAxisTickValues,
     ...(customColorScale && { colorScale: customColorScale }) // Override colorScale if provided
   }
 
@@ -164,6 +173,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) {
@@ -173,8 +198,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;