@cdc/chart 4.26.3 → 4.26.5

package/src/components/LinearChart.tsx

@@ -35,6 +35,9 @@ import { useTickFormatters } from './LinearChart/utils/tickFormatting'
 import { isLegendWrapViewport, isMobileFontViewport } from '@cdc/core/helpers/viewports'
 import { calcInitialHeight } from '../helpers/sizeHelpers'
 import { calculateHorizontalBarCategoryLabelWidth } from '../helpers/calculateHorizontalBarCategoryLabelWidth'
+import { calculateLeftYAxisWidth } from '../helpers/calculateLeftYAxisWidth'
+import { getAxisLabelFontSize } from '../helpers/axisLabelFontSize'
+import { getYAxisAutoPaddingMode } from '../helpers/getYAxisAutoPaddingMode'
 
 // Hooks
 import useReduceData from '../hooks/useReduceData'
@@ -51,6 +54,7 @@ import Annotation from './Annotations'
 import { countNumOfTicks } from '../helpers/countNumOfTicks'
 import HoverLine from './HoverLine/HoverLine'
 import { SmallMultiples } from './SmallMultiples'
+import { type TooltipDisplayData } from '../helpers/tooltipHelpers'
 
 type LinearChartProps = {
   parentWidth: number
@@ -62,13 +66,11 @@ const BOTTOM_LABEL_PADDING = 9
 const X_TICK_LABEL_PADDING = 4.5
 const DEFAULT_TICK_LENGTH = 8
 const DEFAULT_MAX_TICK_ROTATION = 90
+const DEFAULT_LEFT_Y_AXIS_WIDTH = 50
 
 // Font sizes
 const TICK_LABEL_FONT_SIZE = 16
 const TICK_LABEL_FONT_SIZE_SMALL = 13
-const AXIS_LABEL_FONT_SIZE = 18
-const AXIS_LABEL_FONT_SIZE_SMALL = 14
-
 // Label positioning constants
 const BELOW_BAR_TEXT_OFFSET = -6.5
 const LABEL_PADDING_OFFSET = 8
@@ -88,10 +90,7 @@ const WARMING_STRIPES_HEIGHT = 78
 // Time constants
 const MONTH_AS_MS = 1000 * 60 * 60 * 24 * 30
 
-type TooltipData = {
-  dataXPosition?: number
-  dataYPosition?: number
-}
+type TooltipData = Partial<TooltipDisplayData>
 
 type UseTooltipReturn<T = TooltipData> = {
   tooltipData: T | null
@@ -122,6 +121,9 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     transformedData: data,
   } = useContext(ConfigContext)
 
+  // SVG accessibility: title/desc pattern
+  const a11y = handleChartAriaLabels(config)
+
   // CONFIG
   // todo: start destructuring this file for conciseness
   const { visualizationType, orientation, xAxis, yAxis, runtime, legend, forestPlot, debugSvg } = config
@@ -129,9 +131,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const { inlineLabel } = config.yAxis
 
   // HOOKS  % STATES
-  // When brush is active, use tableData (full dataset) for min/max calculation
-  // so the y-axis shows the full range, but still use filtered data for rendering
-  const dataForMinMax = config.xAxis.brushActive && tableData && tableData.length > 0 ? tableData : data
+  const useBrushFullRange = config.xAxis.brushActive && !config.xAxis.brushDynamicYAxis
+  const dataForMinMax = useBrushFullRange && tableData && tableData.length > 0 ? tableData : data
   const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, dataForMinMax)
 
   const { visSupportsSmallMultiples } = useEditorPermissions()
@@ -163,6 +164,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const xAxisLabelRefs = useRef([])
   const xAxisTitleRef = useRef(null)
   const tooltipRef = useRef(null)
+  const brushLayoutRef = useRef<{ yAxisWidth: number; xMax: number } | null>(null)
+  const brushLayoutDepsRef = useRef<{ parentWidth: number; tableData: any } | null>(null)
 
   const dataRef = useIntersectionObserver(triggerRef, {
     freezeOnceVisible: false
@@ -174,12 +177,9 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const isLogarithmicAxis = config.yAxis.type === 'logarithmic'
   const isForestPlot = visualizationType === 'Forest Plot'
   const isDateTime = config.xAxis.type === 'date-time'
-  const inlineLabelHasNoSpace = !inlineLabel?.includes(' ')
-  const needsYAxisAutoPadding = inlineLabel && !inlineLabelHasNoSpace
-  const padding = orientation === 'horizontal' ? Number(config.xAxis.size) : Number(config.yAxis.size)
-  const yLabelOffset = isNaN(parseInt(`${runtime.yAxis.labelOffset}`)) ? 0 : parseInt(`${runtime.yAxis.labelOffset}`)
+  const yAxisAutoPaddingMode = getYAxisAutoPaddingMode(config)
   const tickLabelFontSize = isMobileFontViewport(vizViewport) ? TICK_LABEL_FONT_SIZE_SMALL : TICK_LABEL_FONT_SIZE
-  const axisLabelFontSize = isMobileFontViewport(vizViewport) ? AXIS_LABEL_FONT_SIZE_SMALL : AXIS_LABEL_FONT_SIZE
+  const axisLabelFontSize = getAxisLabelFontSize(vizViewport)
   const GET_TEXT_WIDTH_FONT = `normal ${tickLabelFontSize}px Nunito, sans-serif`
 
   // zero if not forest plot
@@ -187,11 +187,10 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
 
   // height before bottom axis
   const initialHeight = useMemo(
-    () =>
-      visualizationType === 'Warming Stripes' ? WARMING_STRIPES_HEIGHT : calcInitialHeight(config, currentViewport),
+    () => (visualizationType === 'Warming Stripes' ? WARMING_STRIPES_HEIGHT : calcInitialHeight(config, vizViewport)),
     [
       visualizationType,
-      currentViewport,
+      vizViewport,
       config.heights?.vertical,
       config.heights?.horizontal,
       config.heights?.mobileVertical,
@@ -258,15 +257,28 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
 
   const { yScaleRight, hasRightAxis } = useRightAxis({ config, yMax, data })
 
-  // State for computed y-axis width - allows re-render when horizontal bar label space is calculated
-  const [computedYAxisWidth, setComputedYAxisWidth] = useState<number | null>(null)
-
-  // Use computed width if available, otherwise fall back to config value
-  const yAxisWidth = computedYAxisWidth ?? Number(runtime.yAxis.size)
+  // State for computed left-axis width - shared across all linear-chart types.
+  const [currentYAxisWidth, setCurrentYAxisWidth] = useState<number>(DEFAULT_LEFT_Y_AXIS_WIDTH)
+  const yAxisWidth = currentYAxisWidth
 
   // Chart width calculation using the current y-axis width
   const xMax = parentWidth - yAxisWidth - (hasRightAxis ? config.yAxis.rightAxisSize : 0)
 
+  // Stabilize brush container dimensions when brushDynamicYAxis is enabled.
+  // Without this, y-axis rescaling on each brush change creates a feedback loop:
+  // brush drag → y-domain change → tick label width change → xMax shift → brush jumps.
+  // We freeze the brush coordinate system and only update on real layout changes.
+  const isDynamicBrushYAxis = config.xAxis.brushDynamicYAxis
+  const isFirstBrushLayout = !brushLayoutDepsRef.current
+  const viewportResized = brushLayoutDepsRef.current?.parentWidth !== parentWidth
+  const dataReloaded = brushLayoutDepsRef.current?.tableData !== tableData
+  if (!isDynamicBrushYAxis || isFirstBrushLayout || viewportResized || dataReloaded) {
+    brushLayoutRef.current = { yAxisWidth, xMax }
+    brushLayoutDepsRef.current = { parentWidth, tableData }
+  }
+  const stableBrushYAxisWidth = isDynamicBrushYAxis ? brushLayoutRef.current!.yAxisWidth : yAxisWidth
+  const stableBrushXMax = isDynamicBrushYAxis ? brushLayoutRef.current!.xMax : xMax
+
   const {
     xScale,
     yScale,
@@ -289,8 +301,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     xAxisDataMapped,
     yMax,
     xMax,
-    needsYAxisAutoPadding,
-    currentViewport
+    yAxisAutoPaddingMode,
+    currentViewport: vizViewport
   })
 
   // Consolidated tick formatters
@@ -303,39 +315,78 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     shouldAbbreviate
   })
 
-  // Calculate category label space for horizontal bar charts
+  // Horizontal charts swap axes at runtime, but the left-side category label visibility
+  // still follows config.yAxis.hideLabel to match the actual axis renderers.
   const categoryLabelSpace = useMemo(() => {
+    if (config.yAxis.hideLabel) return 0
+
     return calculateHorizontalBarCategoryLabelWidth({
       yScale,
       chartWidth: parentWidth,
       formatDate,
       parseDate,
       tickLabelFont: GET_TEXT_WIDTH_FONT,
-      xAxisType: config.runtime.xAxis?.type,
+      xAxisType: runtime.xAxis?.type,
       labelPlacement: config.yAxis.labelPlacement
     })
-  }, [isHorizontal, config.visualizationType, config.yAxis.labelPlacement, yScale, parentWidth])
-
-  const horizontalYAxisLabelSpace = runtime.yAxis.label && !config.hideYAxisLabel ? 30 : 0
+  }, [
+    config.yAxis.hideLabel,
+    config.yAxis.labelPlacement,
+    yScale,
+    parentWidth,
+    formatDate,
+    parseDate,
+    GET_TEXT_WIDTH_FONT,
+    runtime.xAxis?.type
+  ])
 
-  // Update y-axis width state when computed value changes (for horizontal bar charts)
-  useEffect(() => {
-    if (isHorizontal && config.visualizationType === 'Bar') {
-      const newWidth = categoryLabelSpace + horizontalYAxisLabelSpace
-      if (newWidth !== computedYAxisWidth) {
-        setComputedYAxisWidth(newWidth)
-      }
-    } else if (computedYAxisWidth !== null) {
-      // Reset to null for non-horizontal bar charts so we use config value
-      setComputedYAxisWidth(null)
-    }
-  }, [isHorizontal, config.visualizationType, categoryLabelSpace, horizontalYAxisLabelSpace, computedYAxisWidth])
+  const horizontalYAxisLabelSpace =
+    runtime.yAxis.label && !config.hideYAxisLabel && config.yAxis.titlePlacement !== 'top' ? 30 : 0
 
   const [yTickCount, xTickCount] = ['yAxis', 'xAxis'].map(axis =>
-    countNumOfTicks({ axis, max, runtime, currentViewport, isHorizontal, data, config, min })
+    countNumOfTicks({ axis, max, runtime, currentViewport: vizViewport, isHorizontal, data, config, min })
   )
   const handleNumTicks = isForestPlot ? config.data.length : yTickCount
 
+  const calculatedYAxisWidth = useMemo(() => {
+    if (isHorizontal && config.visualizationType === 'Bar') {
+      return categoryLabelSpace + horizontalYAxisLabelSpace
+    }
+
+    return calculateLeftYAxisWidth({
+      config,
+      data,
+      yScale,
+      numTicks: handleNumTicks,
+      parentWidth,
+      tickLabelFont: GET_TEXT_WIDTH_FONT,
+      axisLabelFontSize,
+      handleLeftTickFormatting,
+      categoryLabelSpace,
+      horizontalYAxisLabelSpace
+    })
+  }, [
+    config,
+    data,
+    yScale,
+    handleNumTicks,
+    parentWidth,
+    isHorizontal,
+    GET_TEXT_WIDTH_FONT,
+    axisLabelFontSize,
+    handleLeftTickFormatting,
+    categoryLabelSpace,
+    horizontalYAxisLabelSpace
+  ])
+
+  useLayoutEffect(() => {
+    if (parentWidth <= 0) return
+
+    if (calculatedYAxisWidth !== currentYAxisWidth) {
+      setCurrentYAxisWidth(calculatedYAxisWidth)
+    }
+  }, [calculatedYAxisWidth, currentYAxisWidth, parentWidth])
+
   // Tooltip Helpers
 
   const { tooltipData, showTooltip, hideTooltip, tooltipOpen, tooltipLeft, tooltipTop } =
@@ -353,6 +404,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     xScale,
     yScale,
     seriesScale,
+    yAxisWidth,
     showTooltip,
     hideTooltip,
     interactionLabel
@@ -381,13 +433,13 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
 
   const getManualStep = useCallback(() => {
     let manualStep = config.xAxis.manualStep
-    if (config.xAxis.viewportStepCount && config.xAxis.viewportStepCount[currentViewport]) {
-      manualStep = config.xAxis.viewportStepCount[currentViewport]
+    if (config.xAxis.viewportStepCount && config.xAxis.viewportStepCount[vizViewport]) {
+      manualStep = config.xAxis.viewportStepCount[vizViewport]
     }
     return manualStep
-  }, [config.xAxis.manualStep, config.xAxis.viewportStepCount, currentViewport])
+  }, [config.xAxis.manualStep, config.xAxis.viewportStepCount, vizViewport])
 
-  const smallMultiplesSync = useSmallMultipleSynchronization(xMax, yMax, getXValueFromCoordinate)
+  const smallMultiplesSync = useSmallMultipleSynchronization(xMax, yMax, yAxisWidth, getXValueFromCoordinate)
 
   const onMouseMove = event => {
     const svgRect = event.currentTarget.getBoundingClientRect()
@@ -416,7 +468,9 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const internalSvgRef = useProgrammaticTooltip({
     svgRef,
     getCoordinateFromXValue,
+    getXValueFromCoordinate,
     config,
+    yAxisWidth,
     setPoint,
     setShowHoverLine,
     handleTooltipMouseOver,
@@ -471,7 +525,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
 
     const isForestPlot = visualizationType === 'Forest Plot'
     const topLabelOnGridline = topYLabelRef.current && yAxis.labelsAboveGridlines
-
     // Heights to add
     const forestRowsHeight = isForestPlot ? config.data.length * forestPlot.rowHeight : 0
     const topLabelOnGridlineHeight = topLabelOnGridline ? topYLabelRef.current.getBBox().height : 0
@@ -568,7 +621,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
             debugSvg && 'debug'
           } ${isDraggingAnnotation && 'dragging-annotation'}`}
           role='img'
-          aria-label={handleChartAriaLabels(config)}
+          aria-label={a11y}
           style={{ overflow: 'visible' }}
           onMouseLeave={() => {
             setShowHoverLine(false)
@@ -589,7 +642,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               xMax={xMax}
               yAxisWidth={yAxisWidth}
               numTicks={handleNumTicks}
-              yLabelOffset={yLabelOffset}
               axisLabelFontSize={axisLabelFontSize}
             />
           )}
@@ -673,8 +725,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                   strokeDasharray={handleLineType(anchor.lineStyle)}
                   stroke={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
                   className='anchor-y'
-                  from={{ x: Number(runtime.yAxis.size), y: position - middleOffset }}
-                  to={{ x: Number(runtime.yAxis.size) + Number(xMax), y: position - middleOffset }}
+                  from={{ x: Number(yAxisWidth), y: position - middleOffset }}
+                  to={{ x: Number(yAxisWidth) + Number(xMax), y: position - middleOffset }}
                 />
               )
             })}
@@ -710,25 +762,27 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                   stroke={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
                   fill={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
                   className='anchor-x'
-                  from={{ x: Number(anchorPosition) + Number(padding), y: 0 }}
-                  to={{ x: Number(anchorPosition) + Number(padding), y: yMax }}
+                  from={{ x: Number(anchorPosition) + Number(yAxisWidth), y: 0 }}
+                  to={{ x: Number(anchorPosition) + Number(yAxisWidth), y: yMax }}
                 />
               )
             })}
           {/* we are handling regions in bar charts differently, so that we can calculate the bar group into the region space. */}
           {/* prettier-ignore */}
           {config.visualizationType !== 'Bar' && config.visualizationType !== 'Combo' && (
-            <Regions
-              xScale={xScale}
-              handleTooltipClick={handleTooltipClick}
-              handleTooltipMouseOff={handleTooltipMouseOff}
-              handleTooltipMouseOver={handleTooltipMouseOver}
-              showTooltip={showTooltip}
-              hideTooltip={hideTooltip}
-              tooltipData={tooltipData}
-              yMax={yMax}
-              xMax={xMax}
-            />
+            <Group left={yAxisWidth}>
+              <Regions
+                xScale={xScale}
+                handleTooltipClick={handleTooltipClick}
+                handleTooltipMouseOff={handleTooltipMouseOff}
+                handleTooltipMouseOver={handleTooltipMouseOver}
+                showTooltip={showTooltip}
+                hideTooltip={hideTooltip}
+                tooltipData={tooltipData}
+                yMax={yMax}
+                xMax={xMax}
+              />
+            </Group>
           )}
           {isNoDataAvailable && (
             <Text
@@ -741,8 +795,22 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           )}
           {showHoverLine && (
             <>
-              <HoverLine xMax={xMax} yMax={yMax} point={point} tooltipData={tooltipData} orientation='horizontal' />
-              <HoverLine xMax={xMax} yMax={yMax} point={point} tooltipData={tooltipData} orientation='vertical' />
+              <HoverLine
+                xMax={xMax}
+                yMax={yMax}
+                point={point}
+                tooltipData={tooltipData}
+                orientation='horizontal'
+                yAxisWidth={yAxisWidth}
+              />
+              <HoverLine
+                xMax={xMax}
+                yMax={yMax}
+                point={point}
+                tooltipData={tooltipData}
+                orientation='vertical'
+                yAxisWidth={yAxisWidth}
+              />
             </>
           )}
           <Group left={yAxisWidth}>
@@ -778,7 +846,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                 suffixWidth={suffixWidth}
                 horizontalYAxisLabelSpace={horizontalYAxisLabelSpace}
                 categoryLabelSpace={categoryLabelSpace}
-                yLabelOffset={yLabelOffset}
               />
             )}
           {config.yAxis.type === 'categorical' && config.orientation === 'vertical' && (
@@ -839,10 +906,10 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
         </svg>
         {!isDraggingAnnotation &&
           tooltipData &&
-          Object.entries(tooltipData.data).length > 0 &&
+          tooltipData.data?.length > 0 &&
           tooltipOpen &&
           showTooltip &&
-          !tooltipData?.data?.some(subArray => subArray.some(item => item === undefined)) &&
+          !tooltipData?.data?.some(row => row?.value === undefined) &&
           tooltipData.dataYPosition &&
           tooltipData.dataXPosition &&
           !config.tooltips.singleSeries && (
@@ -860,16 +927,23 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               >
                 <ul>
                   {typeof tooltipData === 'object' &&
-                    Object.entries(tooltipData.data)
-                      .filter(([_, values]) => Array.isArray(values) && !values.includes(undefined))
-                      .map((item, index) => <TooltipListItem item={item} key={index} />)}
+                    tooltipData.data
+                      .filter(row => row && row.value !== undefined)
+                      .map((row, index) => (
+                        <TooltipListItem
+                          row={row}
+                          index={index}
+                          key={index}
+                          useMarkerColumn={tooltipData.useMarkerColumn}
+                        />
+                      ))}
                 </ul>
               </TooltipWithBounds>
             </>
           )}
         {config.visualizationType === 'Bump Chart' && (
           <ReactTooltip
-            id={`bump-chart`}
+            id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}-bump`}
             variant='light'
             arrowColor='rgba(0,0,0,0)'
             className='tooltip'
@@ -892,8 +966,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
             style={{
               position: 'relative',
               marginTop: `${BRUSH_MARGIN}px`,
-              left: `${yAxisWidth}px`,
-              width: `${Math.max(xMax, BRUSH_MIN_WIDTH)}px`,
+              left: `${stableBrushYAxisWidth}px`,
+              width: `${Math.max(stableBrushXMax, BRUSH_MIN_WIDTH)}px`,
               height: `${BRUSH_HEIGHT}px`,
               pointerEvents: 'auto',
               zIndex: 15,
@@ -904,7 +978,11 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
             }}
             className='brush-overlay'
           >
-            <BrushSelector key={brushKeyRef.current} xMax={Math.max(xMax, BRUSH_MIN_WIDTH)} yMax={BRUSH_HEIGHT} />
+            <BrushSelector
+              key={brushKeyRef.current}
+              xMax={Math.max(stableBrushXMax, BRUSH_MIN_WIDTH)}
+              yMax={BRUSH_HEIGHT}
+            />
           </div>
         )}
       </div>

package/src/components/PairedBarChart.jsx

@@ -10,7 +10,7 @@ import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
 
-const PairedBarChart = ({ width, height, originalWidth }) => {
+const PairedBarChart = ({ width, height, originalWidth, yAxisWidth }) => {
   const {
     config,
     colorScale,
@@ -93,7 +93,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
           id='cdc-visualization__paired-bar-chart'
           width={originalWidth}
           height={height}
-          viewBox={`0 0 ${width + Number(config.runtime.yAxis.size)} ${height}`}
+          viewBox={`0 0 ${width + yAxisWidth} ${height}`}
           role='img'
           tabIndex={0}
         >

package/src/components/PieChart/PieChart.tsx

@@ -24,14 +24,9 @@ import { handleChartAriaLabels } from '../../helpers/handleChartAriaLabels'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { scaleOrdinal } from '@visx/scale'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { type TooltipDisplayData } from '../../helpers/tooltipHelpers'
 
-type TooltipData = {
-  data: {
-    [key: string]: string | number
-  }
-  dataXPosition: number
-  dataYPosition: number
-}
+type TooltipData = TooltipDisplayData
 
 type PieChartProps = {
   parentWidth?: number
@@ -49,6 +44,9 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
     seriesHighlight,
     isDraggingAnnotation
   } = useContext(ConfigContext)
+
+  const a11y = handleChartAriaLabels(config)
+
   const dispatch = useContext(ChartDispatchContext)
   const { tooltipData, showTooltip, hideTooltip, tooltipOpen, tooltipLeft, tooltipTop } = useTooltip<TooltipData>()
   const { handleTooltipMouseOver, handleTooltipMouseOff, TooltipListItem } = useCoveTooltip({
@@ -395,7 +393,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
           height={height}
           className={getSvgClasses()}
           role='img'
-          aria-label={handleChartAriaLabels(config)}
+          aria-label={a11y}
           onMouseEnter={handleChartMouseEnter}
           onMouseLeave={() => {
             handleTooltipMouseOff()
@@ -426,7 +424,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
         <div ref={triggerRef} />
         {!isDraggingAnnotation &&
           tooltipData &&
-          Object.entries(tooltipData.data).length > 0 &&
+          tooltipData.data?.length > 0 &&
           tooltipOpen &&
           showTooltip &&
           tooltipData.dataYPosition &&
@@ -442,7 +440,14 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
               >
                 <ul>
                   {typeof tooltipData === 'object' &&
-                    Object.entries(tooltipData.data).map((item, index) => <TooltipListItem item={item} key={index} />)}
+                    tooltipData.data.map((row, index) => (
+                      <TooltipListItem
+                        row={row}
+                        index={index}
+                        key={index}
+                        useMarkerColumn={tooltipData.useMarkerColumn}
+                      />
+                    ))}
                 </ul>
               </TooltipWithBounds>
             </>

package/src/components/RadarChart/RadarChart.tsx

@@ -41,6 +41,8 @@ const RadarChart = React.forwardRef<SVGSVGElement, RadarChartProps>((props, ref)
     formatNumber
   } = useContext(ConfigContext)
 
+  const a11y = handleChartAriaLabels(config)
+
   const dispatch = useContext(ChartDispatchContext)
 
   const { tooltipData, showTooltip, hideTooltip, tooltipOpen, tooltipLeft, tooltipTop } = useTooltip<TooltipData>()
@@ -232,7 +234,7 @@ const RadarChart = React.forwardRef<SVGSVGElement, RadarChartProps>((props, ref)
         height={height}
         className='radar-chart'
         role='img'
-        aria-label={handleChartAriaLabels(config)}
+        aria-label={a11y}
         onMouseEnter={handleChartMouseEnter}
         onMouseLeave={() => {
           handleTooltipMouseOff()