@cdc/chart 4.26.5 → 4.26.7

package/src/components/LineChart/helpers.ts

@@ -1,7 +1,8 @@
 import { DataItem, StyleProps, Style } from './LineChartProps'
 import { PreliminaryDataItem } from '../../types/ChartConfig'
 
-import _ from 'lodash'
+const isCalculable = value => !isNaN(parseFloat(value)) && isFinite(value)
+
 export const createStyles = (props: StyleProps): Style[] => {
   const {
     preliminaryData,
@@ -42,24 +43,29 @@ export const createStyles = (props: StyleProps): Style[] => {
     validPreliminaryData.find(pd => isEffectLine(pd, point))
 
   const styles: Style[] = []
-  const createStyle = (lineStyle): Style => ({
-    stroke: stroke,
-    strokeWidth: strokeWidth,
-    strokeDasharray: lineStyle
-  })
+  const createStyle = (lineStyle, customWeight?: number | string): Style => {
+    const parsedWeight = Number(customWeight)
+    const hasValidWeight =
+      customWeight !== '' && customWeight != null && Number.isFinite(parsedWeight) && parsedWeight >= 1
+    return {
+      stroke: stroke,
+      strokeWidth: hasValidWeight ? parsedWeight : strokeWidth,
+      strokeDasharray: lineStyle
+    }
+  }
 
   data.forEach((d, index) => {
     const matchingPd: PreliminaryDataItem = getMatchingPd(d)
 
     let style: Style = matchingPd
-      ? createStyle(handleLineType(matchingPd.style))
+      ? createStyle(handleLineType(matchingPd.style), matchingPd.weight)
       : createStyle(handleLineType(lineType))
 
     styles.push(style)
 
     // If matchingPd exists, update the previous style if there is a previous element
     if (matchingPd && index > 0) {
-      styles[index - 1] = createStyle(handleLineType(matchingPd.style))
+      styles[index - 1] = createStyle(handleLineType(matchingPd.style), matchingPd.weight)
     }
   })
   return styles as Style[]
@@ -96,7 +102,7 @@ export const filterCircles = (
       if (
         item[fc.column] === fc.value &&
         fc.seriesKeys.includes(seriesKey) &&
-        item[valueKey] &&
+        isCalculable(item[valueKey]) &&
         fc.style === 'Open Circles'
       ) {
         const result = {
@@ -109,7 +115,7 @@ export const filterCircles = (
       if (
         (!fc.value || item[fc.column] === fc.value) &&
         fc.seriesKeys.includes(seriesKey) &&
-        item[valueKey] &&
+        isCalculable(item[valueKey]) &&
         fc.style === 'Filled Circles'
       ) {
         const result = {
@@ -125,7 +131,6 @@ export const filterCircles = (
   return filteredData
 }
 
-const isCalculable = value => !isNaN(parseFloat(value)) && isFinite(value)
 const handleFirstIndex = ({
   data,
   seriesKey,
@@ -139,7 +144,8 @@ const handleFirstIndex = ({
   const result = {
     data: { '0': [] },
     style: '',
-    color: ''
+    color: '',
+    weight: undefined
   }
 
   // If data is empty, return the empty result
@@ -160,6 +166,7 @@ const handleFirstIndex = ({
 
     result.data[pairCount].push(modifiedItem)
     result.style = suppressionData.style
+    result.weight = suppressionData.weight
     result.color = dynamicCategory && modifiedItem ? colorScale(modifiedItem[dynamicCategory]) : ''
 
     // Find the next calculable item index
@@ -190,7 +197,8 @@ const handleLastIndex = ({
   const result = {
     data: { '0': [] },
     style: '',
-    color: ''
+    color: '',
+    weight: undefined
   }
   const lastIndexDataItem = data[data.length - 1]
 
@@ -213,6 +221,7 @@ const handleLastIndex = ({
         lastAddedIndex = prevIndex
       }
       result.style = pd.style
+      result.weight = pd.weight
       result.color = colorScale(modifiedItem[dynamicCategory])
     }
   })
@@ -232,7 +241,8 @@ const handleMiddleIndices = ({
   let result = {
     data: {},
     style: '',
-    color: 'red'
+    color: 'red',
+    weight: undefined
   }
 
   //skip processing if data or preliminaryData is not an array
@@ -270,6 +280,7 @@ const handleMiddleIndices = ({
         // Only add siblings to results if both siblings are found
         if (siblingBefore && siblingAfter) {
           result.style = pd.style
+          result.weight = pd.weight
           result.color = colorScale(item[dynamicCategory])
           result.data[pairCount++] = [siblingBefore, siblingAfter]
         }

package/src/components/LineChart/index.tsx

@@ -18,6 +18,7 @@ import { filterCircles, createStyles, createDataSegments } from './helpers'
 import { getLabelPositionForDataPoint } from './helpers/labelPositioning'
 import LineChartCircle from './components/LineChart.Circle'
 import LineChartBumpCircle from './components/LineChart.BumpCircle'
+import { getYAxisDomainData } from '../../helpers/getYAxisDomainData'
 import isNumber from '@cdc/core/helpers/isNumber'
 
 // Types
@@ -39,9 +40,25 @@ const LineChart = (props: LineChartProps) => {
     yAxisWidth,
     } = props
 
-  // prettier-ignore
-  const { colorScale, config, formatNumber, handleLineType, parseDate, seriesHighlight, tableData, transformedData:data, updateConfig,   } = useContext<ChartContext>(ConfigContext)
-  const { yScaleRight } = useRightAxis({ config, yMax, data, updateConfig })
+  const {
+    colorScale,
+    config,
+    formatNumber,
+    handleLineType,
+    parseDate,
+    seriesHighlight,
+    tableData,
+    transformedData: data,
+    updateConfig,
+    yAxisDomainData
+  } = useContext<ChartContext>(ConfigContext)
+  const dataForRightAxis = getYAxisDomainData({
+    config,
+    data,
+    tableData,
+    fullEligibleDomainData: yAxisDomainData
+  })
+  const { yScaleRight } = useRightAxis({ config, yMax, data: dataForRightAxis, updateConfig })
   const showSingleSeries = config.tooltips.singleSeries
   if (!handleTooltipMouseOver) return
 
@@ -302,7 +319,7 @@ const LineChart = (props: LineChartProps) => {
                               ? segment.color
                               : colorScale(config.runtime.seriesLabels[seriesKey])
                           }
-                          strokeWidth={seriesData[0]?.weight || 2}
+                          strokeWidth={Number(segment.weight) || seriesData.weight || 2}
                           strokeOpacity={1}
                           shapeRendering='geometricPrecision'
                           strokeDasharray={handleLineType(segment.style)}
@@ -464,9 +481,7 @@ const LineChart = (props: LineChartProps) => {
                       break
                     }
                   }
-                  if (!lastDatum || legend.position === 'right') {
-                    return <></>
-                  }
+                  if (!lastDatum || legend.position === 'right') return null
 
                   let labelText = config.runtime.seriesLabels[seriesKey] || seriesKey
                   // truncate labels longer that 10 chars
@@ -477,6 +492,7 @@ const LineChart = (props: LineChartProps) => {
 
                   return (
                     <Text
+                      key={seriesKey}
                       display={
                         legend.behavior === 'highlight' ||
                         (seriesHighlight.length === 0 && !legend.dynamicLegend) ||

package/src/components/LinearChart/tests/LinearChart.test.tsx

@@ -5,6 +5,7 @@ import LinearChart from '../../LinearChart'
 import ConfigContext from '../../../ConfigContext'
 import { createMockChartContext } from './mockConfigContext'
 import forestPlotConfig from '../../../../examples/feature/forest-plot/forest-plot.json'
+import * as suppressionHelpers from '../../../helpers/getHasBoundarySuppression'
 
 // Mock ResizeObserver
 vi.stubGlobal(
@@ -88,6 +89,35 @@ const sidePlacementYAxis = {
 }
 
 describe('LinearChart', () => {
+  describe('suppression domain data source', () => {
+    it('uses excludedData fallback for suppression detection when Y-axis domain is stable and yAxisDomainData is not provided', () => {
+      const suppressionSpy = vi.spyOn(suppressionHelpers, 'getHasBoundarySuppression').mockReturnValue(false)
+      const excludedRows = [{ Date: '2020-01-01', Cases: 'SUPP' }]
+      const tableRows = [{ Date: '2020-01-01', Cases: 12 }]
+
+      renderLinearChart(
+        {
+          visualizationType: 'Line',
+          yAxis: {
+            ...createMockChartContext().config.yAxis,
+            filterDomainBehavior: 'stable'
+          }
+        },
+        {
+          transformedData: tableRows as any,
+          tableData: tableRows as any,
+          excludedData: excludedRows as any,
+          yAxisDomainData: undefined
+        }
+      )
+
+      expect(suppressionSpy).toHaveBeenCalled()
+      expect(suppressionSpy.mock.calls[0][0].rows).toBe(excludedRows)
+
+      suppressionSpy.mockRestore()
+    })
+  })
+
   describe('rendering', () => {
     it('renders without crashing', () => {
       const { container } = renderLinearChart()

package/src/components/LinearChart.tsx

@@ -37,7 +37,10 @@ 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'
+import { hasSpacedInlineLabel } from '../helpers/hasSpacedInlineLabel'
+import { getYAxisDomainData, getYAxisFilterDomainBehavior } from '../helpers/getYAxisDomainData'
+import { getHasBoundarySuppression } from '../helpers/getHasBoundarySuppression'
+import { getExcludedData } from '../helpers/getExcludedData'
 
 // Hooks
 import useReduceData from '../hooks/useReduceData'
@@ -117,8 +120,11 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     legendRef,
     parseDate,
     parentRef,
+    excludedData,
     tableData,
     transformedData: data,
+    yAxisTickValues: sharedYAxisTickValues,
+    yAxisDomainData
   } = useContext(ConfigContext)
 
   // SVG accessibility: title/desc pattern
@@ -131,8 +137,29 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const { inlineLabel } = config.yAxis
 
   // HOOKS  % STATES
-  const useBrushFullRange = config.xAxis.brushActive && !config.xAxis.brushDynamicYAxis
-  const dataForMinMax = useBrushFullRange && tableData && tableData.length > 0 ? tableData : data
+  const dataForMinMax = getYAxisDomainData({
+    config,
+    data,
+    tableData,
+    fullEligibleDomainData: yAxisDomainData
+  })
+  const isStableYAxisDomain = getYAxisFilterDomainBehavior(config) === 'stable'
+  const rawEligibleYAxisDomainData =
+    Array.isArray(config.yAxisDomainData) && config.yAxisDomainData.length > 0
+      ? getExcludedData(config, config.yAxisDomainData)
+      : isStableYAxisDomain && Array.isArray(excludedData)
+      ? excludedData
+      : tableData
+  const suppressionDomainData = getYAxisDomainData({
+    config,
+    data: tableData,
+    tableData,
+    fullEligibleDomainData: rawEligibleYAxisDomainData
+  })
+  const hasBoundarySuppression = getHasBoundarySuppression({
+    rows: suppressionDomainData,
+    config
+  })
   const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, dataForMinMax)
 
   const { visSupportsSmallMultiples } = useEditorPermissions()
@@ -177,7 +204,7 @@ 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 yAxisAutoPaddingMode = getYAxisAutoPaddingMode(config)
+  const usesSpacedInlineLabel = hasSpacedInlineLabel(config)
   const tickLabelFontSize = isMobileFontViewport(vizViewport) ? TICK_LABEL_FONT_SIZE_SMALL : TICK_LABEL_FONT_SIZE
   const axisLabelFontSize = getAxisLabelFontSize(vizViewport)
   const GET_TEXT_WIDTH_FONT = `normal ${tickLabelFontSize}px Nunito, sans-serif`
@@ -255,14 +282,14 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     return () => observer.disconnect()
   }, [axisBottomRef.current])
 
-  const { yScaleRight, hasRightAxis } = useRightAxis({ config, yMax, data })
+  const { yScaleRight, hasRightAxis, rightTickValues } = useRightAxis({ config, yMax, data: dataForMinMax })
 
   // 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)
+  const xMax = Math.max(0, 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:
@@ -289,10 +316,13 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     xScaleAnnotation,
     yScaleAnnotation,
     min,
-    max
+    max,
+    yTickValues
   } = useScales({
     data,
-    tableData,
+    tableData: dataForMinMax,
+    yAxisDomainData: dataForMinMax,
+    hasBoundarySuppression,
     config,
     minValue,
     maxValue,
@@ -301,9 +331,10 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     xAxisDataMapped,
     yMax,
     xMax,
-    yAxisAutoPaddingMode,
+    hasSpacedInlineLabel: usesSpacedInlineLabel,
     currentViewport: vizViewport
   })
+  const effectiveYTickValues = sharedYAxisTickValues ?? yTickValues
 
   // Consolidated tick formatters
   const { handleLeftTickFormatting, handleBottomTickFormatting } = useTickFormatters({
@@ -358,6 +389,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
       data,
       yScale,
       numTicks: handleNumTicks,
+      tickValues: effectiveYTickValues,
       parentWidth,
       tickLabelFont: GET_TEXT_WIDTH_FONT,
       axisLabelFontSize,
@@ -369,6 +401,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     config,
     data,
     yScale,
+    effectiveYTickValues,
     handleNumTicks,
     parentWidth,
     isHorizontal,
@@ -596,6 +629,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
       <SmallMultiples
         config={config}
         data={data}
+        yAxisDomainData={dataForMinMax}
+        hasBoundarySuppression={hasBoundarySuppression}
         svgRef={svgRef}
         parentWidth={parentWidth}
         parentHeight={parentHeight}
@@ -617,9 +652,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           onMouseMove={onMouseMove}
           width={parentWidth}
           height={isNoDataAvailable ? 1 : calculatedSvgHeight ?? parentHeight}
-          className={`linear ${config.animate ? 'animated' : ''} ${animatedChart && config.animate ? 'animate' : ''} ${
-            debugSvg && 'debug'
-          } ${isDraggingAnnotation && 'dragging-annotation'}`}
+          className={`linear ${config.animate ? 'animated' : ''} ${animatedChart && config.animate ? 'animate' : ''} ${debugSvg && 'debug'
+            } ${isDraggingAnnotation && 'dragging-annotation'}`}
           role='img'
           aria-label={a11y}
           style={{ overflow: 'visible' }}
@@ -642,6 +676,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               xMax={xMax}
               yAxisWidth={yAxisWidth}
               numTicks={handleNumTicks}
+              tickValues={effectiveYTickValues}
               axisLabelFontSize={axisLabelFontSize}
             />
           )}
@@ -838,6 +873,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                 xMax={xMax}
                 yAxisWidth={yAxisWidth}
                 numTicks={handleNumTicks}
+                tickValues={effectiveYTickValues}
                 tickLabelFontSize={tickLabelFontSize}
                 axisLabelFontSize={axisLabelFontSize}
                 handleLeftTickFormatting={handleLeftTickFormatting}
@@ -863,6 +899,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               yMax={yMax}
               xMax={xMax}
               yAxisWidth={yAxisWidth}
+              tickValues={rightTickValues}
               tickLabelFontSize={tickLabelFontSize}
               axisLabelFontSize={axisLabelFontSize}
             />
@@ -914,9 +951,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           tooltipData.dataXPosition &&
           !config.tooltips.singleSeries && (
             <>
-              <style>{`.tooltip {background-color: rgba(255,255,255, ${
-                config.tooltips.opacity / 100
-              }) !important;`}</style>
+              <style>{`.tooltip {background-color: rgba(255,255,255, ${config.tooltips.opacity / 100
+                }) !important;`}</style>
               <style>{`.tooltip {max-width:300px} !important; word-wrap: break-word; `}</style>
               <TooltipWithBounds
                 ref={tooltipRef}

package/src/components/PieChart/PieChart.tsx

@@ -4,7 +4,6 @@ import { animated, useTransition, to } from '@react-spring/web'
 // visx
 import { Pie } from '@visx/shape'
 import { Group } from '@visx/group'
-import { Text } from '@visx/text'
 import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
 import { colorPalettesChart as colorPalettes } from '@cdc/core/data/colorPalettes'
 import { getPaletteColors } from '@cdc/core/helpers/palettes/utils'
@@ -25,6 +24,8 @@ 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'
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+import { getPieLabelPosition } from './helpers/labelPlacement'
 
 type TooltipData = TooltipDisplayData
 
@@ -34,6 +35,38 @@ type PieChartProps = {
   interactionLabel?: string
 }
 
+const ENHANCED_PIE_LABEL_FONT_SIZE = 13
+const ENHANCED_PIE_LABEL_LINE_HEIGHT = 15
+const ENHANCED_PIE_LABEL_HEIGHT = ENHANCED_PIE_LABEL_LINE_HEIGHT * 2
+const ENHANCED_PIE_LABEL_FONT = `${ENHANCED_PIE_LABEL_FONT_SIZE}px sans-serif`
+const ENHANCED_PIE_LABEL_MIN_ANGLE = 0.01
+const LEGACY_PERCENT_LABEL_MIN_ANGLE = 0.1
+const MIN_RADIUS_WITH_LABELS = 55
+const MIN_LABEL_GUTTER = 96
+const OUTSIDE_LABEL_OFFSET = 22
+const LABEL_GUTTER_PADDING = OUTSIDE_LABEL_OFFSET + 16
+const VERTICAL_LABEL_GUTTER = 44
+
+const pieLabelTextWidthCache = new Map<string, number>()
+const MAX_PIE_LABEL_TEXT_CACHE = 2000
+
+const measurePieLabelText = (text: string) => {
+  const cached = pieLabelTextWidthCache.get(text)
+  if (cached !== undefined) return cached
+
+  const measured =
+    typeof document === 'undefined'
+      ? Math.ceil(text.length * ENHANCED_PIE_LABEL_FONT_SIZE * 0.6)
+      : (getTextWidth(text, ENHANCED_PIE_LABEL_FONT) ??
+        Math.ceil(text.length * ENHANCED_PIE_LABEL_FONT_SIZE * 0.6))
+
+  // Avoid unbounded growth in long-lived sessions with many unique labels.
+  if (pieLabelTextWidthCache.size >= MAX_PIE_LABEL_TEXT_CACHE) pieLabelTextWidthCache.clear()
+
+  pieLabelTextWidthCache.set(text, measured)
+  return measured
+}
+
 const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) => {
   const { interactionLabel = '' } = props
   const {
@@ -70,6 +103,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
   const pivotKey = dataNeedsPivot ? 'pivotColumn' : undefined
   const showPercentage = config.dataFormat.showPiePercent
   const labelForCalcArea = 'Calculated Area'
+  const showCategoryPercentageLabels = Boolean(config.labels)
 
   const _data = useMemo(() => {
     let baseData = []
@@ -269,9 +303,25 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
 
       let roundedPercentage = percentageToDisplay.toFixed(roundTo) + '%'
       // add missing pie part
-      if (arc.data[config.xAxis.dataKey] === labelForCalcArea && config.dataFormat.showPiePercent) {
+      if (arc.data[config.runtime.xAxis.dataKey] === labelForCalcArea && config.dataFormat.showPiePercent) {
         roundedPercentage = '**'
       }
+      let categoryLabel = ''
+      let labelPosition = { placement: 'inside' as const, x: 0, y: 0, textAnchor: 'middle' as const }
+
+      if (showCategoryPercentageLabels) {
+        categoryLabel = String(arc.data[config.runtime.xAxis.dataKey] ?? '')
+        const labelWidth = Math.max(measurePieLabelText(categoryLabel), measurePieLabelText(roundedPercentage))
+        labelPosition = getPieLabelPosition({
+          startAngle: arc.startAngle,
+          endAngle: arc.endAngle,
+          innerRadius: radius - donutThickness,
+          outerRadius: radius,
+          labelWidth,
+          labelHeight: ENHANCED_PIE_LABEL_HEIGHT,
+          isDonut: config.pieType === 'Donut'
+        })
+      }
 
       // Determine if this slice should be muted based on legend behavior
       const isHighlighted =
@@ -279,6 +329,8 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
       const shouldMute = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && !isHighlighted
       const sliceOpacity = shouldMute ? 0.3 : 1
       const textOpacity = shouldMute ? 0.3 : 1
+      const labelFill = labelPosition.placement === 'inside' ? textColor : '#000000'
+      const labelMinAngle = showCategoryPercentageLabels ? ENHANCED_PIE_LABEL_MIN_ANGLE : LEGACY_PERCENT_LABEL_MIN_ANGLE
 
       return (
         <Group key={key} className={`slice-${CSS.escape(String(key))}`}>
@@ -302,7 +354,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
           />
 
           {/* ── the percentage label */}
-          {arc.endAngle - arc.startAngle > 0.1 && (
+          {arc.endAngle - arc.startAngle > labelMinAngle && !showCategoryPercentageLabels && (
             <animated.text
               transform={to([styles.startAngle, styles.endAngle], (start: number, end: number) => {
                 const [x, y] = path.centroid({
@@ -321,6 +373,37 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
               {roundedPercentage}
             </animated.text>
           )}
+
+          {arc.endAngle - arc.startAngle > labelMinAngle && showCategoryPercentageLabels && (
+            <animated.text
+              className={`pie-label pie-label--${labelPosition.placement}`}
+              transform={to([styles.startAngle, styles.endAngle], (start: number, end: number) => {
+                const midAngle = start + (end - start) / 2
+                const innerRadius = radius - donutThickness
+                const outsideOffset = OUTSIDE_LABEL_OFFSET
+                const labelRadius =
+                  labelPosition.placement === 'inside'
+                    ? innerRadius + (radius - innerRadius) * 0.62
+                    : radius + outsideOffset
+                const x = Math.sin(midAngle) * labelRadius
+                const y = -Math.cos(midAngle) * labelRadius
+                return `translate(${x},${y})`
+              })}
+              textAnchor={labelPosition.textAnchor}
+              pointerEvents='none'
+              fill={labelFill}
+              opacity={textOpacity}
+              style={{ fontSize: ENHANCED_PIE_LABEL_FONT_SIZE, fontFamily: 'sans-serif' }}
+            >
+              <title>{`${categoryLabel}: ${roundedPercentage}`}</title>
+              <tspan x={0} dy={-ENHANCED_PIE_LABEL_LINE_HEIGHT / 2}>
+                {categoryLabel}
+              </tspan>
+              <tspan x={0} dy={ENHANCED_PIE_LABEL_LINE_HEIGHT}>
+                {roundedPercentage}
+              </tspan>
+            </animated.text>
+          )}
         </Group>
       )
     })
@@ -334,11 +417,35 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
   }
 
   const height = config.heights.vertical
-
-  const radius = Math.min(width, height) / 2
+  const maxPieLabelWidth = useMemo(() => {
+    if (!showCategoryPercentageLabels) return 0
+
+    const roundTo = Number(config.dataFormat.roundTo) || 0
+    const percentExample = `${(100).toFixed(roundTo)}%`
+
+    return _data.reduce((widestLabel, datum) => {
+      const categoryLabel = String(datum[config.runtime.xAxis.dataKey] ?? '')
+      return Math.max(widestLabel, measurePieLabelText(categoryLabel), measurePieLabelText(percentExample))
+    }, 0)
+  }, [_data, config.dataFormat.roundTo, config.runtime.xAxis.dataKey, showCategoryPercentageLabels])
+  const maxHorizontalLabelGutter = showCategoryPercentageLabels
+    ? Math.max(0, (width - MIN_RADIUS_WITH_LABELS * 2) / 2)
+    : 0
+  const labelGutter = showCategoryPercentageLabels
+    ? Math.min(Math.max(maxPieLabelWidth + LABEL_GUTTER_PADDING, MIN_LABEL_GUTTER), maxHorizontalLabelGutter)
+    : 0
+  const availableDiameter = showCategoryPercentageLabels
+    ? Math.min(width - labelGutter * 2, height - VERTICAL_LABEL_GUTTER * 2)
+    : Math.min(width, height)
+
+  const radius = showCategoryPercentageLabels
+    ? Math.max(0, availableDiameter / 2)
+    : Math.min(width, height) / 2
+  const svgWidth = showCategoryPercentageLabels ? width : radius * 2
+  const svgLeftOffset = Math.max((props.parentWidth - svgWidth) / 2, 0)
   const centerY = height / 2
-  const centerX = props.parentWidth / 2
-  const donutThickness = config.pieType === 'Donut' ? 75 : radius
+  const centerX = showCategoryPercentageLabels ? svgWidth / 2 : radius
+  const donutThickness = config.pieType === 'Donut' ? Math.min(75, radius * 0.65) : radius
 
   useEffect(() => {
     if (seriesHighlight.length > 0 && config.legend.behavior !== 'highlight') {
@@ -389,7 +496,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
     <>
       <ErrorBoundary component='PieChart'>
         <svg
-          width={radius * 2}
+          width={svgWidth}
           height={height}
           className={getSvgClasses()}
           role='img'
@@ -400,7 +507,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
             handleChartMouseLeave()
           }}
         >
-          <Group top={centerY} left={radius}>
+          <Group top={centerY} left={centerX}>
             {/* prettier-ignore */}
             <Pie
               data={filteredData || _data}
@@ -435,7 +542,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
               }) !important`}</style>
               <TooltipWithBounds
                 className={'tooltip cove-visualization'}
-                left={tooltipLeft + centerX - radius}
+                left={tooltipLeft + svgLeftOffset}
                 top={tooltipTop}
               >
                 <ul>