@cdc/chart 4.26.3 → 4.26.4

package/src/helpers/calculateLeftYAxisWidth.ts

@@ -0,0 +1,193 @@
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+import {
+  DEFAULT_TICK_LENGTH,
+  TICK_LABEL_MARGIN_RIGHT,
+  VALUE_ON_LINE_PADDING_NO_AXIS,
+  VALUE_ON_LINE_PADDING_WITH_AXIS
+} from '../components/Axis/axis.constants'
+
+type CalculateLeftYAxisWidthProps = {
+  config: any
+  data: any[]
+  yScale: any
+  numTicks: number
+  parentWidth: number
+  tickLabelFont: string
+  axisLabelFontSize: number
+  handleLeftTickFormatting: (tick: any, index: number, ticks: any[]) => string
+  categoryLabelSpace?: number
+  horizontalYAxisLabelSpace?: number
+}
+
+const AXIS_LABEL_PADDING = 5
+const MIN_LEFT_AXIS_WIDTH = 0
+const MAX_LEFT_AXIS_WIDTH_RATIO = 0.45
+
+type TickValueProps = Omit<
+  CalculateLeftYAxisWidthProps,
+  'parentWidth' | 'tickLabelFont' | 'axisLabelFontSize' | 'handleLeftTickFormatting'
+>
+
+const getTickValues = ({ config, data, yScale, numTicks }: TickValueProps) => {
+  if (config.visualizationType === 'Forest Plot') {
+    return data.map((_, index) => index)
+  }
+
+  if (typeof yScale?.ticks === 'function') {
+    return yScale.ticks(numTicks)
+  }
+
+  if (typeof yScale?.domain === 'function') {
+    return yScale.domain()
+  }
+
+  return []
+}
+
+const getAxisLabelSpace = (config: any, axisLabelFontSize: number) => {
+  return !config.hideYAxisLabel && config.runtime.yAxis.label ? axisLabelFontSize + AXIS_LABEL_PADDING : 0
+}
+
+const measureWidestLabel = (labels: string[], tickLabelFont: string) => {
+  return labels.length ? Math.max(...labels.map(label => getTextWidth(label, tickLabelFont))) : 0
+}
+
+const clampYAxisWidth = (calculatedWidth: number, parentWidth: number) => {
+  const maxAllowedWidth = parentWidth * MAX_LEFT_AXIS_WIDTH_RATIO
+  return Math.max(MIN_LEFT_AXIS_WIDTH, Math.min(Math.ceil(calculatedWidth), maxAllowedWidth))
+}
+
+const formatMeasuredTickLabels = ({
+  tickValues,
+  handleLeftTickFormatting,
+  inlineLabel,
+  labelsAboveGridlines
+}: {
+  tickValues: any[]
+  handleLeftTickFormatting: (tick: any, index: number, ticks: any[]) => string
+  inlineLabel?: string
+  labelsAboveGridlines?: boolean
+}) => {
+  const inlineLabelHasNoSpace = !inlineLabel?.includes(' ')
+
+  return tickValues.map((tick, index, ticks) => {
+    const formatted = handleLeftTickFormatting(tick, index, ticks)
+    const isLastTick = index === ticks.length - 1
+
+    if (isLastTick && inlineLabel && (labelsAboveGridlines || inlineLabelHasNoSpace)) {
+      return `${formatted}${inlineLabel}`
+    }
+
+    return String(formatted ?? '')
+  })
+}
+
+const getHorizonChartWidth = ({
+  config,
+  parentWidth,
+  tickLabelFont,
+  axisLabelFontSize
+}: Pick<CalculateLeftYAxisWidthProps, 'config' | 'parentWidth' | 'tickLabelFont' | 'axisLabelFontSize'>) => {
+  const seriesKeys =
+    config.runtime?.seriesKeys && config.runtime.seriesKeys.length > 0
+      ? config.runtime.seriesKeys
+      : config.series?.map(series => series.dataKey) || []
+  const labels = seriesKeys.map(seriesKey => String(config.runtime?.seriesLabels?.[seriesKey] || seriesKey))
+  const labelWidth = config.yAxis.hideLabel ? 0 : measureWidestLabel(labels, tickLabelFont)
+  const calculatedWidth =
+    labelWidth +
+    DEFAULT_TICK_LENGTH +
+    TICK_LABEL_MARGIN_RIGHT +
+    getAxisLabelSpace(config, axisLabelFontSize) +
+    Number(config.yAxis.axisPadding || 0)
+
+  return clampYAxisWidth(calculatedWidth, parentWidth)
+}
+
+const getHorizontalAxisWidth = ({
+  config,
+  tickLabelWidth,
+  categoryLabelSpace,
+  horizontalYAxisLabelSpace
+}: Pick<CalculateLeftYAxisWidthProps, 'config' | 'categoryLabelSpace' | 'horizontalYAxisLabelSpace'> & {
+  tickLabelWidth: number
+}) => {
+  const horizontalTickWidth = tickLabelWidth + DEFAULT_TICK_LENGTH + TICK_LABEL_MARGIN_RIGHT
+  return Math.max(horizontalTickWidth + horizontalYAxisLabelSpace, categoryLabelSpace + horizontalYAxisLabelSpace)
+}
+
+const getCategoricalAxisWidth = ({
+  config,
+  baseWidth,
+  tickLabelFont
+}: Pick<CalculateLeftYAxisWidthProps, 'config' | 'tickLabelFont'> & {
+  baseWidth: number
+}) => {
+  if (config.yAxis.type !== 'categorical' || config.orientation !== 'vertical' || config.yAxis.hideLabel) {
+    return baseWidth
+  }
+
+  const categoryLabels = (config.yAxis.categories || []).map(category => String(category?.label || ''))
+  const categoryLabelWidth = measureWidestLabel(categoryLabels, tickLabelFont)
+
+  return Math.max(baseWidth, categoryLabelWidth + DEFAULT_TICK_LENGTH + TICK_LABEL_MARGIN_RIGHT)
+}
+
+export const calculateLeftYAxisWidth = ({
+  config,
+  data,
+  yScale,
+  numTicks,
+  parentWidth,
+  tickLabelFont,
+  axisLabelFontSize,
+  handleLeftTickFormatting,
+  categoryLabelSpace = 0,
+  horizontalYAxisLabelSpace = 0
+}: CalculateLeftYAxisWidthProps): number => {
+  if (config.visualizationType === 'Horizon Chart') {
+    return getHorizonChartWidth({ config, parentWidth, tickLabelFont, axisLabelFontSize })
+  }
+
+  const tickValues = getTickValues({ config, data, yScale, numTicks })
+  const { hideAxis, inlineLabel, labelsAboveGridlines } = config.yAxis
+  const formattedTicks = formatMeasuredTickLabels({
+    tickValues,
+    handleLeftTickFormatting,
+    inlineLabel,
+    labelsAboveGridlines
+  })
+  const tickLabelWidth = config.yAxis.hideLabel ? 0 : measureWidestLabel(formattedTicks, tickLabelFont)
+
+  const valueOnLinePadding = hideAxis
+    ? Math.abs(VALUE_ON_LINE_PADDING_NO_AXIS)
+    : Math.abs(VALUE_ON_LINE_PADDING_WITH_AXIS)
+  const tickPadding = labelsAboveGridlines ? valueOnLinePadding : TICK_LABEL_MARGIN_RIGHT + DEFAULT_TICK_LENGTH
+  const verticalAxisLabelSpace = getAxisLabelSpace(config, axisLabelFontSize)
+  const reservedTickLabelWidth = labelsAboveGridlines ? 0 : tickLabelWidth
+  const reservedTickPadding = labelsAboveGridlines || config.yAxis.hideLabel ? 0 : tickPadding
+
+  const defaultCalculatedWidth =
+    reservedTickLabelWidth + reservedTickPadding + verticalAxisLabelSpace + Number(config.yAxis.axisPadding || 0)
+
+  if (config.orientation === 'horizontal') {
+    const calculatedWidth = getHorizontalAxisWidth({
+      config,
+      tickLabelWidth,
+      categoryLabelSpace,
+      horizontalYAxisLabelSpace
+    })
+
+    return clampYAxisWidth(calculatedWidth, parentWidth)
+  }
+
+  const calculatedWidth = getCategoricalAxisWidth({
+    config,
+    baseWidth: defaultCalculatedWidth,
+    tickLabelFont
+  })
+
+  return clampYAxisWidth(calculatedWidth, parentWidth)
+}
+
+export default calculateLeftYAxisWidth

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/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