@cdc/chart 4.26.2 → 4.26.4

package/src/helpers/tests/tooltipHelpers.test.ts

@@ -0,0 +1,151 @@
+import { describe, expect, it } from 'vitest'
+import {
+  buildTooltipListHtml,
+  getTooltipMarkerColor,
+  getTooltipMarkerShape,
+  shouldUseTooltipLegendMarkers,
+  tooltipHasMarkerColumn,
+  tooltipShouldUseMarkerColumn,
+  type TooltipRow
+} from '../tooltipHelpers'
+
+const buildConfig = overrides => ({
+  visualizationType: 'Line',
+  legend: {
+    hide: false,
+    style: 'circles',
+    groupBy: '',
+    patterns: {},
+    ...overrides?.legend
+  },
+  runtime: {
+    seriesLabels: { cases: 'Cases', deaths: 'Deaths' },
+    seriesLabelsAll: ['Cases', 'Deaths'],
+    seriesKeys: ['cases', 'deaths'],
+    ...overrides?.runtime
+  },
+  series: [{ dataKey: 'cases' }, { dataKey: 'deaths' }],
+  smallMultiples: {
+    mode: '',
+    ...overrides?.smallMultiples
+  },
+  ...overrides
+})
+
+describe('tooltipHelpers', () => {
+  it('enables marker rendering for supported multi-series charts with visible legends', () => {
+    expect(shouldUseTooltipLegendMarkers(buildConfig())).toBe(true)
+  })
+
+  it('allows small-multiple tiles to use markers when the source legend is visible', () => {
+    expect(shouldUseTooltipLegendMarkers(buildConfig({ legend: { hide: true, tooltipLegendVisible: true } }))).toBe(
+      true
+    )
+  })
+
+  it('disables markers when the source legend is hidden or the legend is in a special mode', () => {
+    expect(shouldUseTooltipLegendMarkers(buildConfig({ legend: { hide: true } }))).toBe(false)
+    expect(shouldUseTooltipLegendMarkers(buildConfig({ legend: { hide: true, tooltipLegendVisible: false } }))).toBe(
+      false
+    )
+    expect(shouldUseTooltipLegendMarkers(buildConfig({ legend: { style: 'gradient' } }))).toBe(false)
+    expect(shouldUseTooltipLegendMarkers(buildConfig({ legend: { groupBy: 'category' } }))).toBe(false)
+    expect(
+      shouldUseTooltipLegendMarkers(
+        buildConfig({
+          runtime: { seriesLabelsAll: ['Cases'], seriesKeys: ['cases'] },
+          series: [{ dataKey: 'cases' }]
+        })
+      )
+    ).toBe(false)
+  })
+
+  it('disables markers for single-series small-multiple tiles even when the source legend is visible', () => {
+    expect(
+      shouldUseTooltipLegendMarkers(
+        buildConfig({
+          legend: { hide: true, tooltipLegendVisible: true },
+          runtime: { seriesLabelsAll: ['Cases'], seriesKeys: ['cases'] },
+          series: [{ dataKey: 'cases' }]
+        })
+      )
+    ).toBe(false)
+  })
+
+  it('keeps patterned legends eligible and still uses the base series color', () => {
+    expect(shouldUseTooltipLegendMarkers(buildConfig({ legend: { patterns: { striped: { color: '#000' } } } }))).toBe(
+      true
+    )
+  })
+
+  it('resolves marker colors using the legend label mapping', () => {
+    const colorScale = value => ({ Cases: '#1f77b4', deaths: '#d62728' }[value] || null)
+
+    expect(getTooltipMarkerColor(buildConfig(), colorScale as any, 'cases')).toBe('#1f77b4')
+    expect(getTooltipMarkerColor(buildConfig(), colorScale as any, 'unknown')).toBe(null)
+  })
+
+  it('uses square markers only when the legend explicitly uses boxes', () => {
+    expect(getTooltipMarkerShape(buildConfig())).toBe('circle')
+    expect(getTooltipMarkerShape(buildConfig({ legend: { style: 'boxes' } }))).toBe('square')
+  })
+
+  it('only reserves a marker column when at least one series row has a marker', () => {
+    const rows: TooltipRow[] = [
+      { key: 'Date', value: '2024-01-01', kind: 'heading' },
+      { key: 'Cases', value: '10', kind: 'series', markerColor: '#1f77b4' },
+      { key: 'Source', value: 'CDC', kind: 'extra' }
+    ]
+    const rowsWithoutMarkers: TooltipRow[] = [
+      { key: 'Date', value: '2024-01-01', kind: 'heading' },
+      { key: 'Source', value: 'CDC', kind: 'extra' }
+    ]
+
+    expect(tooltipHasMarkerColumn(rows)).toBe(true)
+    expect(tooltipHasMarkerColumn(rowsWithoutMarkers)).toBe(false)
+  })
+
+  it('suppresses the marker column when two series would render identical marker signatures', () => {
+    expect(
+      tooltipShouldUseMarkerColumn([
+        { markerColor: '#f28e2b', markerShape: 'circle' },
+        { markerColor: '#f28e2b', markerShape: 'circle' }
+      ])
+    ).toBe(false)
+
+    expect(
+      tooltipShouldUseMarkerColumn([
+        { markerColor: '#f28e2b', markerShape: 'circle' },
+        { markerColor: '#f28e2b', markerShape: 'square' }
+      ])
+    ).toBe(true)
+  })
+
+  it('renders aligned raw HTML rows only when the tooltip contains a marker', () => {
+    const withMarker = buildTooltipListHtml({
+      heading: 'Date: Jan 1, 2024',
+      bodyRows: [{ text: 'Cases: 10', markerColor: '#1f77b4', markerShape: 'square' }, { text: 'Source: CDC' }]
+    })
+    const withoutMarker = buildTooltipListHtml({
+      heading: 'Date: Jan 1, 2024',
+      bodyRows: [{ text: 'Source: CDC' }]
+    })
+    const ambiguousMarkers = buildTooltipListHtml({
+      heading: 'Date: Jan 1, 2024',
+      bodyRows: [
+        { text: 'Dose 1: 10', markerColor: '#f28e2b', markerShape: 'circle' },
+        { text: 'Dose 2: 20', markerColor: '#f28e2b', markerShape: 'circle' }
+      ]
+    })
+
+    expect(withMarker).toContain('tooltip-body--marker-layout')
+    expect(withMarker).toContain('tooltip-marker-slot')
+    expect(withMarker).toContain('tooltip-marker-slot" aria-hidden="true"')
+    expect(withMarker).toContain('tooltip-marker-swatch')
+    expect(withMarker).toContain('tooltip-marker-swatch--square')
+    expect(withoutMarker).not.toContain('tooltip-body--marker-layout')
+    expect(withoutMarker).not.toContain('tooltip-marker-slot')
+    expect(ambiguousMarkers).not.toContain('tooltip-body--marker-layout')
+    expect(ambiguousMarkers).not.toContain('tooltip-marker-slot')
+  })
+})

package/src/helpers/tooltipHelpers.ts

@@ -0,0 +1,176 @@
+import { type ChartConfig } from '../types/ChartConfig'
+import { type ColorScale } from '../types/ChartContext'
+
+export type TooltipRowKind = 'heading' | 'series' | 'extra'
+
+export type TooltipRow = {
+  key: string
+  value: string | number
+  axisPosition?: string
+  kind: TooltipRowKind
+  markerColor?: string | null
+  markerShape?: 'circle' | 'square'
+  seriesKey?: string
+}
+
+export type TooltipDisplayData = {
+  data: TooltipRow[]
+  dataXPosition: number
+  dataYPosition: number
+  useMarkerColumn: boolean
+}
+
+type RawTooltipBodyRow = {
+  text: string
+  markerColor?: string | null
+  markerShape?: 'circle' | 'square'
+}
+
+export type TooltipMarker = {
+  markerColor: string
+  markerShape: 'circle' | 'square'
+}
+
+const TOOLTIP_MARKER_SUPPORTED_TYPES = new Set(['Line', 'Area Chart', 'Combo', 'Bar', 'Scatter Plot'])
+
+export const getTooltipMarkerShape = (config: ChartConfig): 'circle' | 'square' =>
+  config.legend?.style === 'boxes' ? 'square' : 'circle'
+
+export const shouldUseTooltipLegendMarkers = (config: ChartConfig): boolean => {
+  const legendItemCount =
+    config.runtime?.seriesLabelsAll?.length || config.runtime?.seriesKeys?.length || config.series?.length || 0
+  const sourceLegendVisible = config.legend?.tooltipLegendVisible ?? !config.legend?.hide
+
+  return (
+    TOOLTIP_MARKER_SUPPORTED_TYPES.has(config.visualizationType) &&
+    legendItemCount > 1 &&
+    sourceLegendVisible &&
+    config.legend?.style !== 'gradient' &&
+    !config.legend?.groupBy
+  )
+}
+
+export const getTooltipMarkerColor = (
+  config: ChartConfig,
+  colorScale: ColorScale | undefined,
+  seriesKey?: string
+): string | null => {
+  if (!colorScale || !seriesKey) return null
+
+  const colorInput = config.runtime?.seriesLabels?.[seriesKey] || seriesKey
+  const color = colorScale(colorInput)
+  return typeof color === 'string' ? color : null
+}
+
+export const getTooltipSeriesMarker = (
+  config: ChartConfig,
+  colorScale: ColorScale | undefined,
+  seriesKey?: string
+): TooltipMarker | null => {
+  if (!shouldUseTooltipLegendMarkers(config)) {
+    return null
+  }
+
+  const markerColor = getTooltipMarkerColor(config, colorScale, seriesKey)
+  if (!markerColor) {
+    return null
+  }
+
+  return {
+    markerColor,
+    markerShape: getTooltipMarkerShape(config)
+  }
+}
+
+export const buildTooltipRow = (row: TooltipRow): TooltipRow => row
+
+const getMarkerSignature = ({
+  markerColor,
+  markerShape = 'circle'
+}: {
+  markerColor?: string | null
+  markerShape?: 'circle' | 'square'
+}): string | null => {
+  if (!markerColor) return null
+  return `${markerColor}::${markerShape}`
+}
+
+export const tooltipShouldUseMarkerColumn = (
+  rows: Array<{ markerColor?: string | null; markerShape?: 'circle' | 'square' }>
+): boolean => {
+  const signatures = rows.map(getMarkerSignature).filter(Boolean)
+
+  if (signatures.length === 0) {
+    return false
+  }
+
+  return new Set(signatures).size === signatures.length
+}
+
+export const tooltipHasMarkerColumn = (rows: TooltipRow[]): boolean =>
+  tooltipShouldUseMarkerColumn(rows.filter(row => row.kind === 'series'))
+
+export const buildTooltipBodyRowHtml = ({
+  text,
+  markerColor,
+  markerShape = 'circle',
+  useMarkerColumn
+}: RawTooltipBodyRow & {
+  useMarkerColumn: boolean
+}): string => {
+  if (!useMarkerColumn) {
+    return `<li class="tooltip-body">${text}</li>`
+  }
+
+  const marker = markerColor
+    ? `<span class="tooltip-marker-swatch tooltip-marker-swatch--${markerShape}" style="background-color: ${markerColor};" aria-hidden="true"></span>`
+    : ''
+
+  return `<li class="tooltip-body tooltip-body--marker-layout"><span class="tooltip-marker-slot" aria-hidden="true">${marker}</span><span class="tooltip-body-content">${text}</span></li>`
+}
+
+export const buildTooltipListHtml = ({
+  heading,
+  bodyRows
+}: {
+  heading: string
+  bodyRows: RawTooltipBodyRow[]
+}): string => {
+  const hasMarkerColumn = tooltipShouldUseMarkerColumn(bodyRows)
+  const renderedRows = bodyRows
+    .filter(row => row.text !== undefined && row.text !== null && row.text !== '')
+    .map(row => buildTooltipBodyRowHtml({ ...row, useMarkerColumn: hasMarkerColumn }))
+    .join('')
+
+  return `<ul><li class="tooltip-heading">${heading}</li>${renderedRows}</ul>`
+}
+
+export const buildSeriesTooltipListHtml = ({
+  config,
+  colorScale,
+  heading,
+  seriesKey,
+  seriesText,
+  extraRows = []
+}: {
+  config: ChartConfig
+  colorScale?: ColorScale
+  heading: string
+  seriesKey?: string
+  seriesText: string
+  extraRows?: string[]
+}): string => {
+  const marker = getTooltipSeriesMarker(config, colorScale, seriesKey)
+
+  return buildTooltipListHtml({
+    heading,
+    bodyRows: [
+      {
+        text: seriesText,
+        markerColor: marker?.markerColor,
+        markerShape: marker?.markerShape
+      },
+      ...extraRows.filter(Boolean).map(text => ({ text }))
+    ]
+  })
+}

package/src/hooks/useHighlightedBars.ts

@@ -5,21 +5,14 @@ import { ChartConfig } from '../types/ChartConfig'
 export const useHighlightedBars = (config: ChartConfig, updateConfig: (config) => void) => {
   const { formatDate, parseDate } = useContext(ConfigContext)
 
-  let highlightedSeries = [] // only allow single series for highlights
-  let highlightedSeriesKey = ''
-  let highlightedBarValues = []
-  let highlightedSeriesValues = []
-
-  if (config.series?.length > 0 && config.data) {
-    highlightedSeries = config.series[0] // only allow single series for highlights
-    highlightedSeriesKey = config.series[0].dataKey
-    highlightedBarValues = config.highlightedBarValues
-    highlightedSeriesValues = config.data.map(item => item[config.xAxis.dataKey])
-  } else {
-    highlightedSeries = [] // only allow single series for highlights
-    highlightedSeriesKey = ''
-    highlightedBarValues = []
-    highlightedSeriesValues = []
+  const highlightedSeries = config.series?.length > 0 && config.data ? config.series[0] : [] // only allow single series for highlights
+  const highlightedSeriesKey = config.series?.length > 0 && config.data ? config.series[0].dataKey : ''
+  const highlightedBarValues = config.series?.length > 0 && config.data ? config.highlightedBarValues : []
+
+  const getHighlightedSeriesValues = () => {
+    if (!(config.series?.length > 0 && config.data)) return []
+
+    return config.data.map(item => item[config.xAxis.dataKey])
   }
 
   const handleUpdateHighlightedBorderWidth = (e, index) => {
@@ -144,7 +137,7 @@ export const useHighlightedBars = (config: ChartConfig, updateConfig: (config) =
     highlightedSeries,
     highlightedSeriesKey,
     highlightedBarValues,
-    highlightedSeriesValues,
+    getHighlightedSeriesValues,
     handleUpdateHighlightedBar,
     handleAddNewHighlightedBar,
     handleRemoveHighlightedBar,

package/src/hooks/useProgrammaticTooltip.ts

@@ -3,7 +3,9 @@ import { useRef, useImperativeHandle, ForwardedRef } from 'react'
 interface UseProgrammaticTooltipProps {
   svgRef: ForwardedRef<SVGAElement>
   getCoordinateFromXValue: (xAxisValue: any) => number
+  getXValueFromCoordinate: (xCoordinate: number) => any
   config: any
+  yAxisWidth: number
   setPoint: (point: { x: number; y: number }) => void
   setShowHoverLine: (show: boolean) => void
   handleTooltipMouseOver: (event: MouseEvent, additionalChartData?: any) => void
@@ -18,7 +20,9 @@ interface UseProgrammaticTooltipProps {
 export const useProgrammaticTooltip = ({
   svgRef,
   getCoordinateFromXValue,
+  getXValueFromCoordinate,
   config,
+  yAxisWidth,
   setPoint,
   setShowHoverLine,
   handleTooltipMouseOver,
@@ -62,7 +66,16 @@ export const useProgrammaticTooltip = ({
           }
 
           const pixelX = getCoordinateFromXValue(xAxisValue)
-          const adjustedX = pixelX + Number(config.yAxis.size || 0)
+          const resolvedXValue = Number.isFinite(pixelX) ? getXValueFromCoordinate(pixelX) : null
+
+          if (!Number.isFinite(pixelX) || resolvedXValue !== xAxisValue) {
+            hideTooltip()
+            setShowHoverLine(false)
+            setSynchronizedXValue?.(null)
+            return
+          }
+
+          const adjustedX = pixelX + yAxisWidth
 
           const svgRect = internalSvgRef.current!.getBoundingClientRect()
 
@@ -103,7 +116,8 @@ export const useProgrammaticTooltip = ({
     },
     [
       getCoordinateFromXValue,
-      config.yAxis.size,
+      getXValueFromCoordinate,
+      yAxisWidth,
       config.visualizationType,
       setPoint,
       setShowHoverLine,

package/src/hooks/useRightAxis.ts

@@ -27,6 +27,20 @@ export default function useRightAxis({ config, yMax = 0, data = [] }) {
     minValue = config.yAxis.rightMin
   }
 
+  // Enforce smallest right axis max so small-data charts don't show misleading decimal ticks
+  const smallestRightAxisMaxRaw = config.yAxis.smallestRightAxisMax
+  let smallestRightAxisMax: number | null = null
+
+  if (smallestRightAxisMaxRaw !== null && smallestRightAxisMaxRaw !== undefined && smallestRightAxisMaxRaw !== '') {
+    const coercedSmallestRightAxisMax = Number(smallestRightAxisMaxRaw)
+    if (!Number.isNaN(coercedSmallestRightAxisMax)) {
+      smallestRightAxisMax = coercedSmallestRightAxisMax
+    }
+  }
+
+  if (smallestRightAxisMax !== null && max < smallestRightAxisMax) {
+    max = smallestRightAxisMax
+  }
   // if there is a bar series & the right axis doesn't include a negative number, default to zero
   const hasBarSeries = config.runtime?.barSeriesKeys?.length > 0
   const hasLineSeries = config.runtime?.lineSeriesKeys?.length > 0

package/src/hooks/useScales.ts

@@ -9,6 +9,7 @@ import {
   getTicks
 } from '@visx/scale'
 import { useContext } from 'react'
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 import ConfigContext from '../ConfigContext'
 import { ChartConfig } from '../types/ChartConfig'
 import { ChartContext } from '../types/ChartContext'
@@ -59,9 +60,8 @@ const useScales = (properties: useScaleProps) => {
   } = properties
 
   const context = useContext<ChartContext>(ConfigContext)
-  const { rawData, dimensions, convertLineToBarGraph = false } = context
+  const { convertLineToBarGraph = false } = context
 
-  const [screenWidth] = dimensions
   const isHorizontal = config.orientation === 'horizontal'
   const { visualizationType, xAxis, forestPlot, runtime } = config
   const isForestPlot = visualizationType === 'Forest Plot'
@@ -308,65 +308,38 @@ const useScales = (properties: useScaleProps) => {
     }
 
     yScale = scaleLinear({
-      domain: [0, rawData.length],
+      domain: [0, data.length],
       range: resolvedYRange()
     })
 
     const xAxisPadding = 5
+    const [plotStart, plotEnd] = getForestPlotRange(config, data as Record<string, any>[], xMax)
+
+    if (forestPlot.type === 'Linear') {
+      xScale = scaleLinear<LinearScaleConfig>({
+        domain: [
+          Math.min(...data.map(d => parseFloat(d[forestPlot.lower]))) - xAxisPadding,
+          Math.max(...data.map(d => parseFloat(d[forestPlot.upper]))) + xAxisPadding
+        ],
+        range: [plotStart, plotEnd],
+        type: scaleTypes.LINEAR
+      })
+      xScale.type = scaleTypes.LINEAR
+    }
 
-    const leftWidthOffset = (Number(forestPlot.leftWidthOffset) / 100) * xMax
-    const rightWidthOffset = (Number(forestPlot.rightWidthOffset) / 100) * xMax
-
-    const rightWidthOffsetMobile = (Number(forestPlot.rightWidthOffsetMobile) / 100) * xMax
-    const leftWidthOffsetMobile = (Number(forestPlot.leftWidthOffsetMobile) / 100) * xMax
-
-    if (screenWidth > 480) {
-      if (forestPlot.type === 'Linear') {
-        xScale = scaleLinear({
-          domain: [
-            Math.min(...data.map(d => parseFloat(d[forestPlot.lower]))) - xAxisPadding,
-            Math.max(...data.map(d => parseFloat(d[forestPlot.upper]))) + xAxisPadding
-          ],
-          range: [leftWidthOffset, Number(screenWidth) - rightWidthOffset]
-        })
-        xScale.type = scaleTypes.LINEAR
-      }
-      if (forestPlot.type === 'Logarithmic') {
-        let max = Math.max(...data.map(d => parseFloat(d[forestPlot.upper])))
-        let fp_min = Math.min(...data.map(d => parseFloat(d[forestPlot.lower])))
-
-        xScale = scaleLog<LogScaleConfig>({
-          domain: [fp_min, max],
-          range: [leftWidthOffset, xMax - rightWidthOffset],
-          nice: true
-        })
-        xScale.type = scaleTypes.LOG
-      }
-    } else {
-      if (forestPlot.type === 'Linear') {
-        xScale = scaleLinear<LinearScaleConfig>({
-          domain: [
-            Math.min(...data.map(d => parseFloat(d[forestPlot.lower]))) - xAxisPadding,
-            Math.max(...data.map(d => parseFloat(d[forestPlot.upper]))) + xAxisPadding
-          ],
-          range: [leftWidthOffsetMobile, xMax - rightWidthOffsetMobile],
-          type: scaleTypes.LINEAR
-        })
-      }
-
-      if (forestPlot.type === 'Logarithmic') {
-        let max = Math.max(...data.map(d => parseFloat(d[forestPlot.upper])))
-        let fp_min = Math.min(...data.map(d => parseFloat(d[forestPlot.lower])))
-
-        xScale = scaleLog<LogScaleConfig>({
-          domain: [fp_min, max],
-          range: [leftWidthOffset, xMax - rightWidthOffset],
-          nice: true,
-          base: max > 1 ? 10 : 2,
-          round: false,
-          type: scaleTypes.LOG
-        })
-      }
+    if (forestPlot.type === 'Logarithmic') {
+      const max = Math.max(...data.map(d => parseFloat(d[forestPlot.upper])))
+      const fp_min = Math.min(...data.map(d => parseFloat(d[forestPlot.lower])))
+
+      xScale = scaleLog<LogScaleConfig>({
+        domain: [fp_min, max],
+        range: [plotStart, plotEnd],
+        nice: true,
+        base: max > 1 ? 10 : 2,
+        round: false,
+        type: scaleTypes.LOG
+      })
+      xScale.type = scaleTypes.LOG
     }
   }
   return {
@@ -525,3 +498,66 @@ const sortXAxisData = (xAxisData, sortByRecentDate) => {
     return xAxisData.sort((a, b) => Number(a) - Number(b))
   }
 }
+
+const FOREST_PLOT_FONT = 'normal 12px Nunito, sans-serif'
+const FOREST_PLOT_GAP = 24
+const FOREST_PLOT_MIN_WIDTH = 120
+const FOREST_PLOT_MAX_LEFT_RATIO = 0.45
+const FOREST_PLOT_MAX_RIGHT_RATIO = 0.35
+
+const getForestPlotRange = (config: ChartConfig, data: Record<string, any>[], xMax: number): [number, number] => {
+  if (!xMax) return [0, 0]
+
+  const leftReserve = getForestPlotLeftReserve(config, data, xMax)
+  const rightReserve = getForestPlotRightReserve(config, data, xMax)
+  const availableReserve = Math.max(xMax - FOREST_PLOT_MIN_WIDTH, 0)
+  const totalReserve = leftReserve + rightReserve
+
+  if (totalReserve <= availableReserve) {
+    return [leftReserve, xMax - rightReserve]
+  }
+
+  if (!availableReserve || !totalReserve) {
+    return [0, xMax]
+  }
+
+  const reserveScale = availableReserve / totalReserve
+  return [leftReserve * reserveScale, xMax - rightReserve * reserveScale]
+}
+
+const getForestPlotLeftReserve = (config: ChartConfig, data: Record<string, any>[], xMax: number) => {
+  const { forestPlot, xAxis } = config
+  const columns = Object.values(config.columns || {}) as Record<string, any>[]
+  const studyTextWidth = forestPlot.hideDateCategoryCol
+    ? 0
+    : getForestPlotTextWidth([xAxis.dataKey, ...data.map(row => row?.[xAxis.dataKey])])
+
+  const leftColumnExtent = columns
+    .filter(column => column?.forestPlot && !column?.forestPlotAlignRight)
+    .reduce((maxExtent, column) => {
+      const columnStart = Number(column.forestPlotStartingPoint ?? column.startingPoint ?? 0)
+      const columnWidth = getForestPlotTextWidth([column.label, ...data.map(row => row?.[column.name])])
+      return Math.max(maxExtent, columnStart + columnWidth)
+    }, 0)
+
+  const reserve = Math.max(studyTextWidth, leftColumnExtent)
+  return reserve ? Math.min(reserve + FOREST_PLOT_GAP, xMax * FOREST_PLOT_MAX_LEFT_RATIO) : 0
+}
+
+const getForestPlotRightReserve = (config: ChartConfig, data: Record<string, any>[], xMax: number) => {
+  const columns = Object.values(config.columns || {}) as Record<string, any>[]
+  const rightColumnWidth = columns
+    .filter(column => column?.forestPlot && column?.forestPlotAlignRight)
+    .reduce((maxWidth, column) => {
+      const columnWidth = getForestPlotTextWidth([column.label, ...data.map(row => row?.[column.name])])
+      return Math.max(maxWidth, columnWidth)
+    }, 0)
+
+  return rightColumnWidth ? Math.min(rightColumnWidth + FOREST_PLOT_GAP, xMax * FOREST_PLOT_MAX_RIGHT_RATIO) : 0
+}
+
+const getForestPlotTextWidth = (values: unknown[]) =>
+  values.reduce((maxWidth, value) => {
+    const text = value === null || value === undefined ? '' : String(value)
+    return Math.max(maxWidth, getTextWidth(text, FOREST_PLOT_FONT) || 0)
+  }, 0)

package/src/hooks/useSmallMultipleSynchronization.ts

@@ -13,6 +13,7 @@ import ConfigContext from '../ConfigContext'
 export const useSmallMultipleSynchronization = (
   xMax: number,
   yMax: number,
+  yAxisWidth: number,
   getXValueFromCoordinate: (x: number) => any
 ) => {
   const { config, handleSmallMultipleHover } = useContext(ConfigContext)
@@ -25,8 +26,6 @@ export const useSmallMultipleSynchronization = (
     }
   }
 
-  const yAxisSize = Number(config.yAxis.size || 0)
-
   const onMouseMove = (event: any) => {
     const svgRect = event.currentTarget.getBoundingClientRect()
     const x = event.clientX - svgRect.left
@@ -34,10 +33,10 @@ export const useSmallMultipleSynchronization = (
 
     // Only trigger synchronized tooltips when mouse is over the valid chart area
     // (to the right of the Y-axis and within chart bounds)
-    const isOverChartArea = x >= yAxisSize && x <= yAxisSize + xMax && y >= 0 && y <= yMax
+    const isOverChartArea = x >= yAxisWidth && x <= yAxisWidth + xMax && y >= 0 && y <= yMax
 
     if (isOverChartArea) {
-      const xAxisValue = getXValueFromCoordinate(x - yAxisSize)
+      const xAxisValue = getXValueFromCoordinate(x - yAxisWidth)
       if (xAxisValue !== null && xAxisValue !== undefined) {
         handleSmallMultipleHover(xAxisValue, y)
         return