@cdc/chart 4.26.6 → 4.26.10

package/src/hooks/tests/useTooltip.test.tsx

@@ -0,0 +1,484 @@
+import React from 'react'
+import { act, render, renderHook, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import ConfigContext from '../../ConfigContext'
+import { createMockChartContext, createMockConfig } from '../../components/LinearChart/tests/mockConfigContext'
+import { type TooltipRow } from '../../helpers/tooltipHelpers'
+import { type ChartConfig } from '../../types/ChartConfig'
+import { type ChartContext } from '../../types/ChartContext'
+import { useTooltip } from '../useTooltip'
+
+vi.mock('@visx/event', () => ({
+  localPoint: () => ({ x: 5, y: 5 })
+}))
+
+describe('useTooltip', () => {
+  const showTooltip = vi.fn()
+  const hideTooltip = vi.fn()
+  const row = {
+    'Cause of death': 'Hypertensive disorders of pregnancy',
+    Percentage: 22,
+    Count: 146
+  }
+
+  const baseConfig = createMockConfig()
+  const config = createMockConfig({
+    visualizationType: 'Bar',
+    orientation: 'vertical',
+    xAxis: {
+      ...baseConfig.xAxis,
+      type: 'categorical',
+      dataKey: 'Cause of death'
+    },
+    yAxis: {
+      ...baseConfig.yAxis,
+      inlineLabel: ''
+    },
+    general: {
+      showMissingDataLabel: true,
+      hideNullValue: true
+    } as any,
+    series: [{ dataKey: 'Percentage', type: 'Bar', axis: 'Left', tooltip: true }] as any,
+    columns: {
+      Count: {
+        name: 'Count',
+        label: 'Count',
+        prefix: '',
+        suffix: '',
+        roundToPlace: 0,
+        commas: true,
+        dataTable: true,
+        tooltips: true
+      }
+    } as any,
+    dataFormat: {
+      abbreviated: false,
+      bottomAbbreviated: false,
+      bottomPrefix: '',
+      bottomRoundTo: 0,
+      bottomSuffix: '',
+      bottomCommas: false,
+      commas: false,
+      prefix: '',
+      preserveOriginalDecimals: false,
+      rightPrefix: '',
+      rightRoundTo: 0,
+      rightSuffix: '',
+      roundTo: 1,
+      suffix: '%'
+    } as any,
+    runtime: {
+      ...baseConfig.runtime,
+      xAxis: {
+        ...baseConfig.runtime.xAxis,
+        type: 'categorical',
+        dataKey: 'Cause of death'
+      },
+      yAxis: {
+        ...baseConfig.runtime.yAxis,
+        dataKey: 'Percentage'
+      },
+      series: [{ dataKey: 'Percentage', type: 'Bar', axis: 'Left', tooltip: true }],
+      seriesKeys: ['Percentage'],
+      seriesLabelsAll: ['Percentage']
+    } as any
+  })
+
+  const xScale = Object.assign(
+    vi.fn(() => 0),
+    {
+      domain: () => ['Hypertensive disorders of pregnancy'],
+      bandwidth: () => 10
+    }
+  )
+  const yScale = Object.assign(
+    vi.fn(() => 0),
+    {
+      domain: () => ['Hypertensive disorders of pregnancy']
+    }
+  )
+
+  const wrapper = ({ children }: React.PropsWithChildren) => (
+    <ConfigContext.Provider value={createMockChartContext(config, { tableData: [row] })}>
+      {children}
+    </ConfigContext.Provider>
+  )
+
+  beforeEach(() => {
+    showTooltip.mockClear()
+    hideTooltip.mockClear()
+  })
+
+  const renderTooltipListItem = (
+    tooltipConfig: ChartConfig,
+    tooltipRow: TooltipRow,
+    {
+      index = 1,
+      useMarkerColumn = false,
+      contextOverrides = {}
+    }: { index?: number; useMarkerColumn?: boolean; contextOverrides?: Partial<ChartContext> } = {}
+  ) => {
+    const tooltipWrapper = ({ children }: React.PropsWithChildren) => (
+      <ConfigContext.Provider value={createMockChartContext(tooltipConfig, { tableData: [row], ...contextOverrides })}>
+        {children}
+      </ConfigContext.Provider>
+    )
+    const { result } = renderHook(
+      () =>
+        useTooltip({
+          xScale,
+          yScale,
+          showTooltip,
+          hideTooltip,
+          yAxisWidth: 0
+        }),
+      { wrapper: tooltipWrapper }
+    )
+    const TooltipListItem = result.current.TooltipListItem
+
+    return render(<TooltipListItem row={tooltipRow} index={index} useMarkerColumn={useMarkerColumn} />)
+  }
+
+  it('does not apply the left-axis suffix to an additional tooltip column', () => {
+    const { result } = renderHook(
+      () =>
+        useTooltip({
+          xScale,
+          yScale,
+          showTooltip,
+          hideTooltip,
+          yAxisWidth: 0
+        }),
+      { wrapper }
+    )
+
+    act(() => result.current.handleTooltipMouseOver({}))
+
+    expect(showTooltip).toHaveBeenCalledOnce()
+    expect(showTooltip.mock.calls[0][0].tooltipData.data).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ key: 'Percentage', value: '22.0%', kind: 'series' }),
+        expect.objectContaining({ key: 'Count', value: '146', kind: 'extra' })
+      ])
+    )
+  })
+
+  it.each([
+    {
+      caseName: 'customized Column Label over an authored Series Name',
+      visualizationType: 'Bar',
+      seriesName: 'Rate Series',
+      columnLabel: 'Rate Column',
+      expected: 'Rate Column: 22.0%'
+    },
+    {
+      caseName: 'inferred Series Name when the Column Label matches the data key',
+      visualizationType: 'Bar',
+      seriesName: undefined,
+      columnLabel: 'Percentage',
+      expected: 'Percentage: 22.0%'
+    },
+    {
+      caseName: 'authored Series Name when the Column Label matches the data key',
+      visualizationType: 'Bar',
+      seriesName: 'Rate Series',
+      columnLabel: 'Percentage',
+      expected: 'Rate Series: 22.0%'
+    },
+    {
+      caseName: 'authored Series Name when the Column Label is cleared',
+      visualizationType: 'Bar',
+      seriesName: 'Rate Series',
+      columnLabel: '',
+      expected: 'Rate Series: 22.0%'
+    },
+    {
+      caseName: 'customized Column Label for a Forest Plot',
+      visualizationType: 'Forest Plot',
+      seriesName: 'Rate Series',
+      columnLabel: 'Rate Column',
+      expected: 'Rate Column: 22.0%'
+    }
+  ])('uses the $caseName', ({ visualizationType, seriesName, columnLabel, expected }) => {
+    const series = {
+      dataKey: 'Percentage',
+      ...(seriesName ? { name: seriesName } : {}),
+      type: 'Bar',
+      axis: 'Left',
+      tooltip: true
+    }
+    const tooltipConfig = createMockConfig({
+      ...config,
+      visualizationType: visualizationType as any,
+      series: [series] as any,
+      columns: {
+        ...config.columns,
+        Percentage: { name: 'Percentage', label: columnLabel }
+      } as any,
+      runtime: {
+        ...config.runtime,
+        series: [series],
+        seriesLabels: { Percentage: seriesName || 'Percentage' }
+      } as any
+    })
+    const tooltipWrapper = ({ children }: React.PropsWithChildren) => (
+      <ConfigContext.Provider value={createMockChartContext(tooltipConfig, { tableData: [row] })}>
+        {children}
+      </ConfigContext.Provider>
+    )
+    const { result } = renderHook(
+      () =>
+        useTooltip({
+          xScale,
+          yScale,
+          showTooltip,
+          hideTooltip,
+          yAxisWidth: 0
+        }),
+      { wrapper: tooltipWrapper }
+    )
+    const TooltipListItem = result.current.TooltipListItem
+
+    render(<TooltipListItem row={{ key: 'Percentage', value: '22.0%', kind: 'series' }} index={1} />)
+
+    expect(screen.getByText(expected)).toBeTruthy()
+  })
+
+  it.each([
+    { caseName: 'standard chart', visualizationType: 'Bar' },
+    { caseName: 'Forest Plot', visualizationType: 'Forest Plot' }
+  ])('preserves an additional column label that matches a series key for a $caseName', ({ visualizationType }) => {
+    const series = {
+      dataKey: 'Percentage',
+      name: 'Rate Series',
+      type: 'Bar',
+      axis: 'Left',
+      tooltip: true
+    }
+    const tooltipConfig = createMockConfig({
+      ...config,
+      visualizationType: visualizationType as any,
+      series: [series] as any,
+      runtime: {
+        ...config.runtime,
+        series: [series],
+        seriesLabels: { Percentage: 'Rate Series' }
+      } as any
+    })
+    const tooltipWrapper = ({ children }: React.PropsWithChildren) => (
+      <ConfigContext.Provider value={createMockChartContext(tooltipConfig, { tableData: [row] })}>
+        {children}
+      </ConfigContext.Provider>
+    )
+    const { result } = renderHook(
+      () =>
+        useTooltip({
+          xScale,
+          yScale,
+          showTooltip,
+          hideTooltip,
+          yAxisWidth: 0
+        }),
+      { wrapper: tooltipWrapper }
+    )
+    const TooltipListItem = result.current.TooltipListItem
+
+    render(<TooltipListItem row={{ key: 'Percentage', value: '146', kind: 'extra' }} index={2} />)
+
+    expect(screen.getByText('Percentage: 146')).toBeTruthy()
+    expect(screen.queryByText('Rate Series: 146')).toBeNull()
+  })
+
+  it('preserves standard x-axis heading rendering', () => {
+    renderTooltipListItem(config, {
+      key: 'Cause of death',
+      value: 'Hypertensive disorders of pregnancy',
+      kind: 'heading'
+    })
+
+    expect(screen.getByText(/Hypertensive disorders of pregnancy/)).toHaveClass('tooltip-heading')
+  })
+
+  it('preserves horizontal Bar heading rendering', () => {
+    const horizontalBarConfig = createMockConfig({
+      ...config,
+      orientation: 'horizontal',
+      runtime: {
+        ...config.runtime,
+        yAxis: { ...config.runtime.yAxis, label: 'Cause' }
+      } as any
+    })
+
+    renderTooltipListItem(horizontalBarConfig, {
+      key: 'Cause of death',
+      value: 'Hypertensive disorders of pregnancy',
+      kind: 'heading'
+    })
+
+    expect(screen.getByText(/Cause:.*Hypertensive disorders of pregnancy/)).toHaveClass('tooltip-heading')
+  })
+
+  it('preserves Pie calculated-area heading rendering', () => {
+    const pieConfig = createMockConfig({
+      ...config,
+      visualizationType: 'Pie',
+      dataFormat: { ...config.dataFormat, showPiePercent: true } as any
+    })
+
+    renderTooltipListItem(pieConfig, {
+      key: 'Percentage',
+      value: 'Calculated Area',
+      kind: 'heading'
+    })
+
+    expect(screen.getByText(/Calculated Area/)).toHaveClass('tooltip-heading')
+  })
+
+  it('preserves Forest Plot heading rendering', () => {
+    const forestPlotConfig = createMockConfig({
+      ...config,
+      visualizationType: 'Forest Plot'
+    })
+
+    renderTooltipListItem(forestPlotConfig, {
+      key: 'Cause of death',
+      value: 'Hypertensive disorders of pregnancy',
+      kind: 'heading'
+    })
+
+    expect(screen.getByText(/Cause of death:.*Hypertensive disorders of pregnancy/)).toHaveClass('tooltip-heading')
+  })
+
+  it.each([
+    { caseName: 'standard', orientation: 'vertical' as const },
+    { caseName: 'horizontal Bar', orientation: 'horizontal' as const }
+  ])('preserves custom date formatting for a $caseName heading', ({ orientation }) => {
+    const dateConfig = createMockConfig({
+      ...config,
+      orientation,
+      xAxis: { ...config.xAxis, type: 'date', dataKey: 'Date' },
+      tooltips: { ...config.tooltips, dateDisplayFormat: '%Y' },
+      runtime: {
+        ...config.runtime,
+        xAxis: { ...config.runtime.xAxis, type: 'date', dataKey: 'Date', label: 'Date' },
+        yAxis: { ...config.runtime.yAxis, label: 'Date' }
+      } as any
+    })
+
+    renderTooltipListItem(
+      dateConfig,
+      { key: 'Date', value: '2025-01-02', kind: 'heading' },
+      {
+        contextOverrides: {
+          parseDate: value => `parsed-${value}`,
+          formatDate: value => `date-${value}`,
+          formatTooltipsDate: value => `tooltip-${value}`
+        }
+      }
+    )
+
+    expect(screen.getByText('Date: tooltip-parsed-2025-01-02')).toHaveClass('tooltip-heading')
+  })
+
+  it('hides a matching suppression row when suppressed symbols are disabled', () => {
+    const suppressionConfig = createMockConfig({
+      ...config,
+      general: { ...config.general, showSuppressedSymbol: false } as any,
+      preliminaryData: [
+        {
+          label: 'Suppressed',
+          type: 'suppression',
+          displayTooltip: true,
+          value: '22.0%',
+          column: 'Percentage'
+        }
+      ] as any
+    })
+
+    const { container } = renderTooltipListItem(suppressionConfig, {
+      key: 'Percentage',
+      value: '22.0%',
+      kind: 'series'
+    })
+
+    expect(container.querySelector('li')).toBeNull()
+  })
+
+  it('preserves suppression replacement text and gray styling when symbols are shown', () => {
+    const suppressionConfig = createMockConfig({
+      ...config,
+      general: { ...config.general, showSuppressedSymbol: true } as any,
+      preliminaryData: [
+        {
+          label: 'Suppressed',
+          type: 'suppression',
+          displayTooltip: true,
+          value: '22.0%',
+          column: 'Percentage',
+          displayGray: true
+        }
+      ] as any
+    })
+
+    renderTooltipListItem(suppressionConfig, {
+      key: 'Percentage',
+      value: '22.0%',
+      kind: 'series'
+    })
+
+    expect(screen.getByText('Percentage: Suppressed')).toHaveStyle({ color: '#8b8b8a' })
+  })
+
+  it('leaves an unmatched suppression row unchanged', () => {
+    const suppressionConfig = createMockConfig({
+      ...config,
+      general: { ...config.general, showSuppressedSymbol: false } as any,
+      preliminaryData: [
+        {
+          label: 'Suppressed',
+          type: 'suppression',
+          displayTooltip: true,
+          value: 'Different value',
+          column: 'Percentage',
+          displayGray: true
+        }
+      ] as any
+    })
+
+    renderTooltipListItem(suppressionConfig, {
+      key: 'Percentage',
+      value: '22.0%',
+      kind: 'series'
+    })
+
+    expect(screen.getByText('Percentage: 22.0%')).not.toHaveStyle({ color: '#8b8b8a' })
+  })
+
+  it.each([
+    { markerColor: '#123456', markerShape: 'square' as const, expectedShape: 'square', expectedSwatches: 1 },
+    { markerColor: undefined, markerShape: 'square' as const, expectedShape: 'square', expectedSwatches: 0 },
+    { markerColor: '#654321', markerShape: undefined, expectedShape: 'circle', expectedSwatches: 1 }
+  ])(
+    'preserves the marker column when markerColor is $markerColor and markerShape is $markerShape',
+    ({ markerColor, markerShape, expectedShape, expectedSwatches }) => {
+      const { container } = renderTooltipListItem(
+        config,
+        {
+          key: 'Percentage',
+          value: '22.0%',
+          kind: 'series',
+          markerColor,
+          markerShape
+        },
+        { useMarkerColumn: true }
+      )
+
+      expect(container.querySelector('.tooltip-body')).toHaveClass('tooltip-body--marker-layout')
+      expect(container.querySelector('.tooltip-marker-slot')).toBeTruthy()
+      const swatches = container.querySelectorAll(`.tooltip-marker-swatch--${expectedShape}`)
+      expect(swatches).toHaveLength(expectedSwatches)
+      if (markerColor) expect(swatches[0]).toHaveStyle({ backgroundColor: markerColor })
+      expect(container.querySelector('.tooltip-body-content')).toHaveTextContent('Percentage: 22.0%')
+    }
+  )
+})

package/src/hooks/usePrefersReducedMotion.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react'
+
+const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)'
+
+const usePrefersReducedMotion = () => {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(
+    () => typeof window !== 'undefined' && Boolean(window.matchMedia?.(REDUCED_MOTION_QUERY).matches)
+  )
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return
+    const mediaQuery = window.matchMedia(REDUCED_MOTION_QUERY)
+    const updatePreference = () => setPrefersReducedMotion(mediaQuery.matches)
+    updatePreference()
+    mediaQuery.addEventListener?.('change', updatePreference)
+    return () => mediaQuery.removeEventListener?.('change', updatePreference)
+  }, [])
+
+  return prefersReducedMotion
+}
+
+export default usePrefersReducedMotion

package/src/hooks/useReduceData.ts

@@ -1,5 +1,6 @@
 import isNumber from '@cdc/core/helpers/isNumber'
 import { useMemo } from 'react'
+import getStackedSeriesMax from '../helpers/getStackedSeriesMax'
 
 function useReduceData(config, data) {
   return useMemo(() => {
@@ -30,13 +31,11 @@ function useReduceData(config, data) {
     let minValue = Infinity
     let maxValue = -Infinity
     let existPositiveValue = false
-    const stackedTotals = []
 
     for (let i = 0; i < data.length; i++) {
       const row = data[i]
       let rowMax = -Infinity
       let rowMin = Infinity
-      let stackedSum = 0
 
       for (const key of config.runtime.seriesKeys) {
         const seriesKey = seriesKeysMap.get(key)
@@ -49,26 +48,22 @@ function useReduceData(config, data) {
           if (numValue < rowMin) rowMin = numValue
 
           if (numValue >= 0) existPositiveValue = true
-
-          if (!isNaN(numValue)) stackedSum += numValue
         }
       }
 
       if (rowMax > maxValue) maxValue = rowMax
       if (rowMin < minValue) minValue = rowMin
-
-      if (!isNaN(stackedSum)) stackedTotals.push(stackedSum)
     }
 
     if (
       (config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && isBar)) &&
       config.visualizationSubType === 'stacked'
     ) {
-      maxValue = Math.max(...stackedTotals)
+      maxValue = getStackedSeriesMax(data, config.runtime.series)
     }
 
     if (config.visualizationSubType === 'stacked' && config.visualizationType === 'Area Chart') {
-      maxValue = Math.max(...stackedTotals)
+      maxValue = getStackedSeriesMax(data, config.runtime.series)
     }
 
     if (
@@ -89,34 +84,7 @@ function useReduceData(config, data) {
 
     if (config.visualizationType === 'Combo' && config.visualizationSubType === 'stacked' && !isBar) {
       if (config.runtime.barSeriesKeys && config.runtime.lineSeriesKeys) {
-        let barMax = -Infinity
-        let lineMax = -Infinity
-
-        for (const row of data) {
-          let barSum = 0
-          let rowLineMax = -Infinity
-
-          for (const key of config.runtime.barSeriesKeys) {
-            const cleanValue = cleanChars(row[key])
-            if (isNumber(cleanValue)) {
-              const numValue = Number(cleanValue)
-              if (!isNaN(numValue)) barSum += numValue
-            }
-          }
-
-          for (const key of config.runtime.lineSeriesKeys) {
-            const cleanValue = cleanChars(row[key])
-            if (isNumber(cleanValue)) {
-              const numValue = Number(cleanValue)
-              if (numValue > rowLineMax) rowLineMax = numValue
-            }
-          }
-
-          if (barSum > barMax) barMax = barSum
-          if (rowLineMax > lineMax) lineMax = rowLineMax
-        }
-
-        maxValue = Math.max(barMax, lineMax)
+        maxValue = Math.max(maxValue, getStackedSeriesMax(data, config.runtime.barSeriesKeys))
       }
     }
 

package/src/hooks/useRightAxis.ts

@@ -1,25 +1,24 @@
 import { scaleLinear } from '@visx/scale'
-import useReduceData from './useReduceData'
 import { TOP_PADDING } from './useScales'
 import { getCleanTopTickMax } from '../helpers/getCleanTopTickMax'
 import { getAxisMaxOverride } from '../helpers/getAxisMaxOverride'
 
+const cleanRightAxisValue = value => (typeof value === 'string' ? value.replace(/[,$]/g, '').trim() : value)
+
 export default function useRightAxis({ config, yMax = 0, data = [] }) {
-  const hasRightAxis = config.visualizationType === 'Combo' && config.orientation === 'vertical'
   const rightSeriesKeys =
     config.series && config.series.filter(series => series.axis === 'Right').map(key => key.dataKey)
-  let { minValue } = useReduceData(config, data)
-
-  const allRightAxisData = rightSeriesKeys => {
-    if (!rightSeriesKeys) return [0]
-    let rightAxisData = []
-    rightSeriesKeys.map((key, index) => {
-      return (rightAxisData = [...rightAxisData, ...data.map(item => Number(item[key]))])
-    })
-    return rightAxisData
-  }
+  const hasRightAxis =
+    config.visualizationType === 'Combo' && config.orientation === 'vertical' && Boolean(rightSeriesKeys?.length)
 
-  const rightAxisValues = allRightAxisData(rightSeriesKeys).map(Number).filter(Number.isFinite)
+  const rightAxisValues = (rightSeriesKeys ?? [])
+    .flatMap(key => data.map(item => item[key]))
+    .filter(value => value !== null && value !== undefined && String(value).trim() !== '')
+    .map(cleanRightAxisValue)
+    .filter(value => String(value).trim() !== '')
+    .map(Number)
+    .filter(Number.isFinite)
+  const rawRightMin = rightAxisValues.length ? Math.min(...rightAxisValues) : 0
   const rawRightMax = rightAxisValues.length ? Math.max(...rightAxisValues) : 0
   let max = rawRightMax
   const { hasValidMax: hasValidExplicitRightMax, maxNumber: rightMaxNumber } = getAxisMaxOverride({
@@ -28,24 +27,18 @@ export default function useRightAxis({ config, yMax = 0, data = [] }) {
   })
   const rightMinRaw = config.yAxis.rightMin
   const rightMinNumber = Number(rightMinRaw)
-  const hasExplicitRightMin =
-    rightMinRaw !== undefined && rightMinRaw !== null && rightMinRaw !== '' && Number.isFinite(rightMinNumber)
+  const hasValidExplicitRightMin =
+    rightMinRaw !== undefined &&
+    rightMinRaw !== null &&
+    rightMinRaw !== '' &&
+    Number.isFinite(rightMinNumber) &&
+    rightMinNumber <= rawRightMin
 
   if (hasValidExplicitRightMax && rightMaxNumber > max) {
     max = rightMaxNumber
   }
 
-  if (hasExplicitRightMin && rightMinNumber < minValue) {
-    minValue = rightMinNumber
-  }
-
-  // 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
-
-  if ((hasBarSeries || hasLineSeries) && minValue > 0) {
-    minValue = 0
-  }
+  const minValue = hasValidExplicitRightMin ? rightMinNumber : rawRightMin > 0 ? 0 : rawRightMin
 
   if (config.yAxis.autoMaxStrategy === 'clean-top-tick' && !hasValidExplicitRightMax) {
     max = getCleanTopTickMax(max)

package/src/hooks/useScales.ts

@@ -18,6 +18,7 @@ import { countNumOfTicks } from '../helpers/countNumOfTicks'
 import { getFinalTopTickMax } from '../helpers/getCleanTopTickMax'
 import { getYAxisFinalizationEligibility } from '../helpers/getYAxisFinalizationEligibility'
 import { getAxisMaxOverride } from '../helpers/getAxisMaxOverride'
+import { getDataDrivenYAxisCategories } from '../helpers/dataDrivenYAxisCategories'
 
 const scaleTypes = {
   TIME: 'time',
@@ -67,6 +68,20 @@ const useScales = (properties: useScaleProps) => {
   const context = useContext<ChartContext>(ConfigContext)
   const { convertLineToBarGraph = false } = context
 
+  const dataDrivenYAxisCategories = getDataDrivenYAxisCategories(config, data)
+  if (dataDrivenYAxisCategories?.axisMax !== null && dataDrivenYAxisCategories?.axisMax !== undefined) {
+    config = {
+      ...config,
+      runtime: {
+        ...config.runtime,
+        yAxis: {
+          ...config.runtime.yAxis,
+          max: String(dataDrivenYAxisCategories.axisMax)
+        }
+      }
+    }
+  }
+
   const isHorizontal = config.orientation === 'horizontal'
   const { visualizationType, xAxis, forestPlot, runtime } = config
   const isForestPlot = visualizationType === 'Forest Plot'