@cdc/chart 4.26.1 → 4.26.2

package/src/components/LinearChart.tsx

@@ -2,6 +2,7 @@ import React, {
   forwardRef,
   useContext,
   useEffect,
+  useLayoutEffect,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -10,7 +11,7 @@ import React, {
 } from 'react'
 
 // Libraries
-import { AxisLeft, AxisBottom, AxisRight, AxisTop } from '@visx/axis'
+import { AxisTop } from '@visx/axis'
 import { Group } from '@visx/group'
 import { Line, Bar } from '@visx/shape'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
@@ -21,35 +22,25 @@ import _ from 'lodash'
 
 // CDC Components
 import { isDateScale } from '@cdc/core/helpers/cove/date'
-import { AreaChartStacked } from './AreaChart'
-import BarChart from './BarChart'
 import ConfigContext from '../ConfigContext'
-import BoxPlotVertical from './BoxPlot/BoxPlot.Vertical'
-import BoxPlotHorizontal from './BoxPlot/BoxPlot.Horizontal'
-import ScatterPlot from './ScatterPlot'
-import DeviationBar from './DeviationBar'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import Forecasting from './Forecasting'
-import LineChart from './LineChart'
-import ForestPlot from './ForestPlot'
-import PairedBarChart from './PairedBarChart'
 import useIntersectionObserver from '../hooks/useIntersectionObserver'
 import Regions from './Regions'
-import CategoricalYAxis from './Axis/Categorical.Axis'
+import { CategoricalYAxis, LeftAxis, LeftAxisGridlines, BottomAxis, PairedBarAxis, RightAxis } from './Axis'
 import BrushSelector from './Brush/BrushSelector'
-import WarmingStripes from './WarmingStripes'
+import VisualizationRenderer from './LinearChart/VisualizationRenderer'
+import { TYPES_WITHOUT_GRID, TYPES_WITH_TOOLTIP_GUIDES } from './LinearChart/linearChart.constants'
+import { useTickFormatters } from './LinearChart/utils/tickFormatting'
 
 // Helpers
 import { isLegendWrapViewport, isMobileFontViewport } from '@cdc/core/helpers/viewports'
-import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 import { calcInitialHeight } from '../helpers/sizeHelpers'
-import { filterAndShiftLinearDateTicks } from '../helpers/filterAndShiftLinearDateTicks'
 import { calculateHorizontalBarCategoryLabelWidth } from '../helpers/calculateHorizontalBarCategoryLabelWidth'
 
 // Hooks
 import useReduceData from '../hooks/useReduceData'
 import useRightAxis from '../hooks/useRightAxis'
-import useScales, { getTickValues } from '../hooks/useScales'
+import useScales from '../hooks/useScales'
 import { useProgrammaticTooltip } from '../hooks/useProgrammaticTooltip'
 import { useSmallMultipleSynchronization } from '../hooks/useSmallMultipleSynchronization'
 
@@ -58,7 +49,6 @@ import { useTooltip as useCoveTooltip } from '../hooks/useTooltip'
 import { useChartHoverAnalytics } from '../hooks/useChartHoverAnalytics'
 import { useEditorPermissions } from './EditorPanel/useEditorPermissions'
 import Annotation from './Annotations'
-import { BlurStrokeText } from '@cdc/core/components/BlurStrokeText'
 import { countNumOfTicks } from '../helpers/countNumOfTicks'
 import HoverLine from './HoverLine/HoverLine'
 import { SmallMultiples } from './SmallMultiples'
@@ -68,15 +58,36 @@ type LinearChartProps = {
   parentHeight: number
 }
 
+// Axis and tick constants
 const BOTTOM_LABEL_PADDING = 9
 const X_TICK_LABEL_PADDING = 4.5
 const DEFAULT_TICK_LENGTH = 8
-const MONTH_AS_MS = 1000 * 60 * 60 * 24 * 30
+const DEFAULT_MAX_TICK_ROTATION = 90
+
+// 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
-const TICK_LABEL_MARGIN_RIGHT = 4.5
+
+// Label positioning constants
+const BELOW_BAR_TEXT_OFFSET = -6.5
+const LABEL_PADDING_OFFSET = 8
+
+// Brush constants
+const BRUSH_HEIGHT = 70
+const BRUSH_MARGIN = 10
+const BRUSH_MIN_WIDTH = 100
+
+// Tooltip constants
+const TOOLTIP_EDGE_BUFFER = 10
+const TOOLTIP_OFFSET = 6
+
+// Chart-specific constants
+const WARMING_STRIPES_HEIGHT = 78
+
+// Time constants
+const MONTH_AS_MS = 1000 * 60 * 60 * 24 * 30
 
 type TooltipData = {
   dataXPosition?: number
@@ -95,12 +106,9 @@ type UseTooltipReturn<T = TooltipData> = {
 const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, parentWidth }, svgRef) => {
   // prettier-ignore
   const {
-    colorScale,
     config,
-    convertLineToBarGraph,
     currentViewport,
     vizViewport,
-    dimensions,
     formatDate,
     formatNumber,
     handleChartAriaLabels,
@@ -108,33 +116,18 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     handleDragStateChange,
     interactionLabel,
     isDraggingAnnotation,
-    isEditor,
     legendRef,
     parseDate,
     parentRef,
     tableData,
     transformedData: data,
-    seriesHighlight
   } = useContext(ConfigContext)
 
   // CONFIG
   // todo: start destructuring this file for conciseness
-  const {
-    heights,
-    visualizationType,
-    visualizationSubType,
-    orientation,
-    xAxis,
-    yAxis,
-    runtime,
-    legend,
-    forestPlot,
-    brush,
-    dataFormat,
-    debugSvg
-  } = config
-
-  const { labelsAboveGridlines, hideAxis, inlineLabel } = config.yAxis
+  const { visualizationType, orientation, xAxis, yAxis, runtime, legend, forestPlot, debugSvg } = config
+
+  const { inlineLabel } = config.yAxis
 
   // HOOKS  % STATES
   // When brush is active, use tableData (full dataset) for min/max calculation
@@ -144,11 +137,22 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
 
   const { visSupportsSmallMultiples } = useEditorPermissions()
   const { hasTopAxis } = getTopAxis(config)
+
+  // Increment on tableData change to force BrushSelector remount when filters change
+  const brushKeyRef = useRef(0)
+  const prevTableDataRef = useRef(tableData)
+  if (prevTableDataRef.current !== tableData) {
+    prevTableDataRef.current = tableData
+    brushKeyRef.current += 1
+  }
+
   const [animatedChart, setAnimatedChart] = useState(false)
   const [showHoverLine, setShowHoverLine] = useState(false)
   const [point, setPoint] = useState({ x: 0, y: 0 })
   const [suffixWidth, setSuffixWidth] = useState(0)
   const [calculatedSvgHeight, setCalculatedSvgHeight] = useState<number | null>(null)
+  const [axisUpdateKey, setAxisUpdateKey] = useState(0)
+  const [synchronizedXValue, setSynchronizedXValue] = useState<any>(null)
 
   // REFS
   const axisBottomRef = useRef(null)
@@ -183,29 +187,43 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
 
   // height before bottom axis
   const initialHeight = useMemo(
-    () => (visualizationType === 'Warming Stripes' ? 78 : calcInitialHeight(config, currentViewport)),
-    [config, currentViewport, parentHeight, config.heights?.vertical, config.heights?.horizontal, visualizationType]
+    () =>
+      visualizationType === 'Warming Stripes' ? WARMING_STRIPES_HEIGHT : calcInitialHeight(config, currentViewport),
+    [
+      visualizationType,
+      currentViewport,
+      config.heights?.vertical,
+      config.heights?.horizontal,
+      config.heights?.mobileVertical,
+      config.orientation
+    ]
   )
   const forestHeight = useMemo(() => initialHeight + forestRowsHeight, [initialHeight, forestRowsHeight])
 
   // Used to calculate the y position of the x-axis title
+  // Dependencies trigger recalc when axis config changes (affects label rendering/size)
   const bottomLabelStart = useMemo(() => {
     xAxisLabelRefs.current = xAxisLabelRefs.current?.filter(label => label)
     if (!xAxisLabelRefs.current.length) return
     const tallestLabel = Math.max(...xAxisLabelRefs.current.map(label => label.getBBox().height))
     return tallestLabel + X_TICK_LABEL_PADDING + DEFAULT_TICK_LENGTH
-  }, [parentWidth, config.xAxis, xAxisLabelRefs.current, config.xAxis.tickRotation])
+  }, [parentWidth, config.xAxis.tickRotation, config.xAxis.hideLabel, xAxisLabelRefs.current, axisUpdateKey])
 
   const yMax = initialHeight + forestRowsHeight
 
   const isNoDataAvailable = config.filters?.length > 0 && data.length === 0
 
-  const getXAxisData = d =>
-    isDateScale(config.runtime.xAxis)
-      ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime()
-      : d[config.runtime.originalXAxis.dataKey]
-  const getYAxisData = (d, seriesKey) => d[seriesKey]
-  const xAxisDataMapped = data.map(d => getXAxisData(d))
+  // Memoized data accessors to prevent unnecessary re-renders
+  const getXAxisData = useCallback(
+    d =>
+      isDateScale(config.runtime.xAxis)
+        ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime()
+        : d[config.runtime.originalXAxis.dataKey],
+    [config.runtime.xAxis, config.runtime.originalXAxis.dataKey, parseDate]
+  )
+  const getYAxisData = useCallback((d, seriesKey) => d[seriesKey], [])
+
+  const xAxisDataMapped = useMemo(() => data.map(d => getXAxisData(d)), [data, getXAxisData])
 
   // Get unique x-axis values (for cases where multiple series share the same x-axis value)
   // This is important for brush filtering where we want to count unique dates, not total data points
@@ -221,9 +239,22 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     }
     return result
   }, [xAxisDataMapped])
+
+  // Force update x axis ticks when filtering
+  useLayoutEffect(() => {
+    setAxisUpdateKey(prev => prev + 1)
+  }, [data.length, xAxisDataMapped?.[0], xAxisDataMapped?.[xAxisDataMapped.length - 1]])
+
   const { yScaleRight, hasRightAxis } = useRightAxis({ config, yMax, data })
 
-  const xMax = parentWidth - Number(runtime.yAxis.size) - (hasRightAxis ? config.yAxis.rightAxisSize : 0)
+  // 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)
+
+  // Chart width calculation using the current y-axis width
+  const xMax = parentWidth - yAxisWidth - (hasRightAxis ? config.yAxis.rightAxisSize : 0)
 
   const {
     xScale,
@@ -233,10 +264,9 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     g2xScale,
     xScaleNoPadding,
     xScaleAnnotation,
+    yScaleAnnotation,
     min,
-    max,
-    leftMax,
-    rightMax
+    max
   } = useScales({
     data,
     tableData,
@@ -252,6 +282,16 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     currentViewport
   })
 
+  // Consolidated tick formatters
+  const { handleLeftTickFormatting, handleBottomTickFormatting } = useTickFormatters({
+    isLogarithmicAxis,
+    orientation,
+    visualizationType,
+    min,
+    max,
+    shouldAbbreviate
+  })
+
   // Calculate category label space for horizontal bar charts
   const categoryLabelSpace = useMemo(() => {
     return calculateHorizontalBarCategoryLabelWidth({
@@ -266,9 +306,19 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   }, [isHorizontal, config.visualizationType, config.yAxis.labelPlacement, yScale, parentWidth])
 
   const horizontalYAxisLabelSpace = runtime.yAxis.label && !config.hideYAxisLabel ? 30 : 0
-  if (isHorizontal && config.visualizationType === 'Bar') {
-    runtime.yAxis.size = categoryLabelSpace + horizontalYAxisLabelSpace
-  }
+
+  // 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 [yTickCount, xTickCount] = ['yAxis', 'xAxis'].map(axis =>
     countNumOfTicks({ axis, max, runtime, currentViewport, isHorizontal, data, config, min })
@@ -312,65 +362,19 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const useDateSpanMonths = isDateTime && dateSpanMonths > xTickCount && !config.runtime.xAxis.manual
 
   // GETTERS & FUNCTIONS
-  const handleLeftTickFormatting = (tick, index, ticks) => {
-    if (isLogarithmicAxis && tick === 0.1) {
-      //when logarithmic scale applied change value of first tick
-      tick = 0
-    }
-
-    if (config.data && !config.data[index] && visualizationType === 'Forest Plot') return
-    if (config.visualizationType === 'Forest Plot') return config.data[index][config.xAxis.dataKey]
-    if (isDateScale(runtime.yAxis)) return formatDate(parseDate(tick))
-    if (orientation === 'vertical' && max - min < 3 && !config.dataFormat?.roundTo)
-      return formatNumber(tick, 'left', shouldAbbreviate, false, false, '1', { index, length: ticks.length })
-    if (orientation === 'vertical') {
-      // TODO suggestion: pass all options as object key/values to allow for more flexibility
-      return formatNumber(tick, 'left', shouldAbbreviate, false, false, undefined, { index, length: ticks.length })
-    }
-    return tick
-  }
-
-  const handleBottomTickFormatting = (tick, i, ticks) => {
-    if (isLogarithmicAxis && tick === 0.1) {
-      // when logarithmic scale applied change value FIRST  of  tick
-      tick = 0
-    }
-
-    if (isDateScale(runtime.xAxis) && config.visualizationType !== 'Forest Plot') {
-      return formatDate(tick, i, ticks)
-    }
-    if (orientation === 'horizontal' && config.visualizationType !== 'Forest Plot')
-      return formatNumber(tick, 'left', shouldAbbreviate)
-    if (config.xAxis.type === 'continuous' && config.visualizationType !== 'Forest Plot')
-      return formatNumber(tick, 'bottom', shouldAbbreviate)
-    if (config.visualizationType === 'Forest Plot')
-      return formatNumber(
-        tick,
-        'left',
-        config.dataFormat.abbreviated,
-        config.runtime.xAxis.prefix,
-        config.runtime.xAxis.suffix,
-        Number(config.dataFormat.roundTo)
-      )
-    return tick
-  }
-
   const chartHasTooltipGuides = () => {
     const { visualizationType } = config
     if (visualizationType === 'Combo' && runtime.forecastingSeriesKeys > 0) return true
-    if (visualizationType === 'Area Chart') return true
-    if (visualizationType === 'Line') return true
-    if (visualizationType === 'Bar') return true
-    return false
+    return TYPES_WITH_TOOLTIP_GUIDES.includes(visualizationType as any)
   }
 
-  const getManualStep = () => {
+  const getManualStep = useCallback(() => {
     let manualStep = config.xAxis.manualStep
     if (config.xAxis.viewportStepCount && config.xAxis.viewportStepCount[currentViewport]) {
       manualStep = config.xAxis.viewportStepCount[currentViewport]
     }
     return manualStep
-  }
+  }, [config.xAxis.manualStep, config.xAxis.viewportStepCount, currentViewport])
 
   const smallMultiplesSync = useSmallMultipleSynchronization(xMax, yMax, getXValueFromCoordinate)
 
@@ -384,11 +388,17 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
       y
     })
 
-    smallMultiplesSync.onMouseMove?.(event)
+    // Warming Stripes handles its own sync at the rect level since
+    // getXValueFromCoordinate won't map correctly due to data sampling
+    if (visualizationType !== 'Warming Stripes') {
+      smallMultiplesSync.onMouseMove?.(event)
+    }
   }
 
   const onMouseLeave = () => {
-    smallMultiplesSync.onMouseLeave?.()
+    if (visualizationType !== 'Warming Stripes') {
+      smallMultiplesSync.onMouseLeave?.()
+    }
   }
 
   // Use custom hook to provide programmatic tooltip control for small multiples
@@ -399,24 +409,23 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     setPoint,
     setShowHoverLine,
     handleTooltipMouseOver,
-    hideTooltip
+    hideTooltip,
+    setSynchronizedXValue
   })
 
   // Make sure the chart is visible if in the editor
-  /* eslint-disable react-hooks/exhaustive-deps */
   useEffect(() => {
     const element = document.querySelector('.isEditor')
     if (element) {
-      // parent element is visible
-      setAnimatedChart(prevState => true)
+      setAnimatedChart(true)
     }
-  }) /* eslint-disable-line */
+  }, [])
 
   // If the chart is in view, set to animate if it has not already played
   useEffect(() => {
     if (dataRef?.isIntersecting === true && config.animate) {
       setTimeout(() => {
-        setAnimatedChart(prevState => true)
+        setAnimatedChart(true)
       }, 500)
     }
   }, [dataRef?.isIntersecting, config.animate])
@@ -461,9 +470,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     const svgHeight = initialHeight + svgAdditionalHeight
 
     // Parent container height (includes brush if active)
-    const brushHeight = 70
-    const brushMargin = 10
-    const brushHeightWithMargin = config.xAxis.brushActive ? brushHeight + brushMargin : 0
+    const brushHeightWithMargin = config.xAxis.brushActive ? BRUSH_HEIGHT + BRUSH_MARGIN : 0
     const parentHeight = svgHeight + brushHeightWithMargin
 
     if (!parentRef.current) return
@@ -491,15 +498,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     const legendIsLeftOrRight =
       legend?.position !== 'top' && legend?.position !== 'bottom' && !isLegendWrapViewport(currentViewport)
     legendRef.current.style.transform = legendIsLeftOrRight ? `translateY(${topLabelOnGridlineHeight}px)` : 'none'
-  }, [
-    axisBottomRef.current,
-    config,
-    bottomLabelStart,
-    config.xAxis.brushActive,
-    currentViewport,
-    topYLabelRef.current,
-    initialHeight
-  ])
+  }, [axisBottomRef.current, config, config.xAxis.brushActive, currentViewport, topYLabelRef.current, initialHeight])
 
   useEffect(() => {
     if (!tooltipOpen) return
@@ -513,8 +512,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
 
     const rightSideRemainingSpace = parentWidth - dataXPosition
 
-    const rightSide = rightSideRemainingSpace <= tooltipWidth && dataXPosition > parentWidth / 2 - 10
-    const maxWidth = rightSide ? dataXPosition - 10 : parentWidth - (dataXPosition + 6)
+    const rightSide = rightSideRemainingSpace <= tooltipWidth && dataXPosition > parentWidth / 2 - TOOLTIP_EDGE_BUFFER
+    const maxWidth = rightSide ? dataXPosition - TOOLTIP_EDGE_BUFFER : parentWidth - (dataXPosition + TOOLTIP_OFFSET)
     tooltipRef.current.node.style.maxWidth = `${maxWidth}px`
   }, [tooltipOpen, tooltipData])
 
@@ -531,150 +530,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     )
   }
 
-  // Render Functions
-  const generatePairedBarAxis = () => {
-    const axisMaxHeight = bottomLabelStart + BOTTOM_LABEL_PADDING
-
-    const getTickPositions = (ticks, xScale) => {
-      if (!ticks.length) return false
-      // filter out first index
-      const filteredTicks = ticks.filter(tick => tick.index !== 0)
-      const numberOfTicks = filteredTicks?.length
-      const xMaxHalf = xScale.range()[0] || xMax / 2
-      const tickWidthAll = filteredTicks.map(tick =>
-        getTextWidth(formatNumber(tick.value, 'left'), GET_TEXT_WIDTH_FONT)
-      )
-      const accumulator = 100
-      const sumOfTickWidth = tickWidthAll.reduce((a, b) => a + b, accumulator)
-      const spaceBetweenEachTick = (xMaxHalf - sumOfTickWidth) / numberOfTicks
-      // Determine the position of each tick
-      let positions = [0]
-      for (let i = 1; i < tickWidthAll.length; i++) {
-        positions[i] = positions[i - 1] + tickWidthAll[i - 1] + spaceBetweenEachTick
-      }
-
-      // Check if ticks are overlapping
-      let isTicksOverlapping = false
-      tickWidthAll.forEach((_, i) => {
-        if (positions[i] + tickWidthAll[i] > positions[i + 1]) {
-          isTicksOverlapping = true
-          return
-        }
-      })
-      return isTicksOverlapping
-    }
-    return (
-      <>
-        <AxisBottom
-          top={yMax}
-          left={Number(runtime.yAxis.size)}
-          label={runtime.xAxis.label}
-          tickFormat={isDateScale(runtime.xAxis) ? formatDate : formatNumber}
-          scale={g1xScale}
-          stroke='#333'
-          tickStroke='#333'
-          numTicks={runtime.xAxis.numTicks || undefined}
-        >
-          {props => {
-            return (
-              <Group className='bottom-axis'>
-                {props.ticks.map((tick, i) => {
-                  const isTicksOverlapping = getTickPositions(props.ticks, g1xScale)
-                  const maxTickRotation = Number(config.xAxis.maxTickRotation) || 90
-                  const isResponsiveTicks = config.isResponsiveTicks && isTicksOverlapping
-                  const angle =
-                    tick.index !== 0 && (isResponsiveTicks ? maxTickRotation : Number(config.yAxis.tickRotation))
-                  const textAnchor = angle && tick.index !== 0 ? 'end' : 'middle'
-
-                  return (
-                    <Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
-                      {!runtime.yAxis.hideTicks && <Line from={tick.from} to={tick.to} stroke='#333' />}
-                      {!runtime.yAxis.hideLabel && (
-                        <Text // prettier-ignore
-                          innerRef={el => (xAxisLabelRefs.current[i] = el)}
-                          x={tick.to.x}
-                          y={tick.to.y}
-                          angle={-angle}
-                          verticalAnchor={angle ? 'middle' : 'start'}
-                          textAnchor={textAnchor}
-                          fontSize={tickLabelFontSize}
-                        >
-                          {formatNumber(tick.value, 'left')}
-                        </Text>
-                      )}
-                    </Group>
-                  )
-                })}
-                {!runtime.yAxis.hideAxis && <Line from={props.axisFromPoint} to={props.axisToPoint} stroke='#333' />}
-              </Group>
-            )
-          }}
-        </AxisBottom>
-        <AxisBottom
-          innerRef={axisBottomRef}
-          top={yMax}
-          left={Number(runtime.yAxis.size)}
-          label={runtime.xAxis.label}
-          tickFormat={
-            isDateScale(runtime.xAxis) ? formatDate : runtime.xAxis.dataKey !== 'Year' ? formatNumber : tick => tick
-          }
-          scale={g2xScale}
-          stroke='#333'
-          tickStroke='#333'
-          numTicks={runtime.xAxis.numTicks || undefined}
-        >
-          {props => {
-            return (
-              <>
-                <Group className='bottom-axis'>
-                  {props.ticks.map((tick, i) => {
-                    const isTicksOverlapping = getTickPositions(props.ticks, g2xScale)
-                    const maxTickRotation = Number(config.xAxis.maxTickRotation) || 90
-                    const isResponsiveTicks = config.isResponsiveTicks && isTicksOverlapping
-                    const angle =
-                      tick.index !== 0 && (isResponsiveTicks ? maxTickRotation : Number(config.yAxis.tickRotation))
-                    const textAnchor = angle && tick.index !== 0 ? 'end' : 'middle'
-                    if (!i) return <></> // skip first tick to avoid overlapping 0's
-                    return (
-                      <Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
-                        {!runtime.yAxis.hideTicks && <Line from={tick.from} to={tick.to} stroke='#333' />}
-                        {!runtime.yAxis.hideLabel && (
-                          <Text // prettier-ignore
-                            x={tick.to.x}
-                            y={tick.to.y + X_TICK_LABEL_PADDING}
-                            angle={-angle}
-                            verticalAnchor={angle ? 'middle' : 'start'}
-                            textAnchor={textAnchor}
-                            fontSize={tickLabelFontSize}
-                          >
-                            {formatNumber(tick.value, 'left')}
-                          </Text>
-                        )}
-                      </Group>
-                    )
-                  })}
-                  {!runtime.yAxis.hideAxis && <Line from={props.axisFromPoint} to={props.axisToPoint} stroke='#333' />}
-                </Group>
-                <Group>
-                  <Text
-                    className='x-axis-title-label'
-                    x={xMax / 2}
-                    y={axisMaxHeight}
-                    stroke='#333'
-                    textAnchor={'middle'}
-                    verticalAnchor='start'
-                    fontSize={axisLabelFontSize}
-                  >
-                    {!config.hideXAxisLabel ? runtime.xAxis.label : null}
-                  </Text>
-                </Group>
-              </>
-            )
-          }}
-        </AxisBottom>
-      </>
-    )
-  }
   return isNaN(parentWidth) ? (
     <React.Fragment></React.Fragment>
   ) : (
@@ -707,60 +562,20 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
         >
           {!isDraggingAnnotation && <Bar width={parentWidth} height={initialHeight} fill={'transparent'}></Bar>}{' '}
           {/* GRID LINES */}
-          {/* Actual AxisLeft is drawn after visualization */}
-          {!['Spark Line', 'Forest Plot', 'Warming Stripes'].includes(visualizationType) &&
-            config.yAxis.type !== 'categorical' && (
-              <AxisLeft
-                scale={yScale}
-                left={Number(runtime.yAxis.size) - config.yAxis.axisPadding}
-                numTicks={handleNumTicks}
-              >
-                {props => {
-                  const axisCenter =
-                    config.orientation === 'horizontal'
-                      ? Math.abs(props.axisToPoint.y - props.axisFromPoint.y) / 2
-                      : (props.axisFromPoint.y - props.axisToPoint.y) / 2
-                  return (
-                    <Group className='left-axis'>
-                      {props.ticks.map((tick, i) => {
-                        const showTicks = String(tick.value).startsWith('1') || tick.value === 0.1 ? 'block' : 'none'
-                        const hideFirstGridLine = tick.index === 0 && tick.value === 0 && config.xAxis.hideAxis
-
-                        return (
-                          <Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
-                            {runtime.yAxis.gridLines && !hideFirstGridLine ? (
-                              <Line
-                                key={`${tick.value}--hide-hideGridLines`}
-                                display={(isLogarithmicAxis && showTicks).toString()}
-                                from={{ x: tick.from.x + xMax, y: tick.from.y }}
-                                to={tick.from}
-                                stroke='#d6d6d6'
-                              />
-                            ) : (
-                              ''
-                            )}
-                          </Group>
-                        )
-                      })}
-                      <Text
-                        className='y-label'
-                        textAnchor='middle'
-                        verticalAnchor='start'
-                        transform={`translate(${-1 * runtime.yAxis.size + yLabelOffset}, ${axisCenter}) rotate(-90)`}
-                        fontWeight='bold'
-                        fill={config.yAxis.labelColor}
-                        fontSize={axisLabelFontSize}
-                      >
-                        {!config.hideYAxisLabel ? props.label : null}
-                      </Text>
-                    </Group>
-                  )
-                }}
-              </AxisLeft>
-            )}
+          {/* Actual LeftAxis is drawn after visualization */}
+          {!TYPES_WITHOUT_GRID.includes(visualizationType as any) && config.yAxis.type !== 'categorical' && (
+            <LeftAxisGridlines
+              yScale={yScale}
+              xMax={xMax}
+              yAxisWidth={yAxisWidth}
+              numTicks={handleNumTicks}
+              yLabelOffset={yLabelOffset}
+              axisLabelFontSize={axisLabelFontSize}
+            />
+          )}
           {/* Horizontal chart grid lines */}
           {runtime.xAxis.gridLines && orientation === 'horizontal' && (
-            <Group left={Number(runtime.yAxis.size)}>
+            <Group left={yAxisWidth}>
               {xScale.ticks(xTickCount).map((tickValue, i) => {
                 const tickPosition = xScale(tickValue)
                 return (
@@ -774,167 +589,46 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               })}
             </Group>
           )}
-          {visualizationType === 'Paired Bar' && generatePairedBarAxis()}
-          {visualizationType === 'Deviation Bar' && config.runtime.series?.length === 1 && (
-            <DeviationBar animatedChart={animatedChart} xScale={xScale} yScale={yScale} width={xMax} height={yMax} />
-          )}
           {visualizationType === 'Paired Bar' && (
-            <PairedBarChart originalWidth={parentWidth} width={xMax} height={yMax} />
-          )}
-          {visualizationType === 'Scatter Plot' && (
-            <ScatterPlot
-              xScale={xScale}
-              yScale={yScale}
-              getXAxisData={getXAxisData}
-              getYAxisData={getYAxisData}
-              xMax={xMax}
+            <PairedBarAxis
+              g1xScale={g1xScale}
+              g2xScale={g2xScale}
               yMax={yMax}
-              handleTooltipMouseOver={handleTooltipMouseOver}
-              handleTooltipMouseOff={handleTooltipMouseOff}
-              handleTooltipClick={handleTooltipClick}
-              tooltipData={tooltipData}
-              showTooltip={showTooltip}
-            />
-          )}
-          {visualizationType === 'Warming Stripes' && (
-            <WarmingStripes xScale={xScale} yScale={yScale} xMax={xMax} yMax={yMax} />
-          )}
-          {visualizationType === 'Box Plot' && config.orientation === 'vertical' && (
-            <BoxPlotVertical
-              seriesScale={seriesScale}
               xMax={xMax}
-              yMax={yMax}
-              min={min}
-              max={max}
-              xScale={xScale}
-              yScale={yScale}
-            />
-          )}
-          {visualizationType === 'Box Plot' && config.orientation === 'horizontal' && (
-            <BoxPlotHorizontal
-              seriesScale={seriesScale}
-              xMax={xMax}
-              yMax={yMax}
-              min={min}
-              max={max}
-              xScale={xScale}
-              yScale={yScale}
-            />
-          )}
-          {((visualizationType === 'Area Chart' && config.visualizationSubType === 'stacked') ||
-            visualizationType === 'Combo') && (
-            <AreaChartStacked
-              xScale={xScale}
-              yScale={yScale}
-              yMax={yMax}
-              xMax={xMax}
-              chartRef={svgRef}
-              width={xMax}
-              height={yMax}
-              handleTooltipMouseOver={handleTooltipMouseOver}
-              handleTooltipMouseOff={handleTooltipMouseOff}
-              tooltipData={tooltipData}
-              showTooltip={showTooltip}
-            />
-          )}
-          {(visualizationType === 'Bar' || visualizationType === 'Combo' || convertLineToBarGraph) && (
-            <BarChart
-              xScale={xScale}
-              yScale={yScale}
-              seriesScale={seriesScale}
-              xMax={xMax}
-              yMax={yMax}
-              getXAxisData={getXAxisData}
-              getYAxisData={getYAxisData}
-              animatedChart={animatedChart}
-              visible={animatedChart}
-              handleTooltipMouseOver={handleTooltipMouseOver}
-              handleTooltipMouseOff={handleTooltipMouseOff}
-              handleTooltipClick={handleTooltipClick}
-              tooltipData={tooltipData}
-              showTooltip={showTooltip}
-              chartRef={svgRef}
-            />
-          )}
-          {(visualizationType === 'Combo' || visualizationType === 'Bump Chart') && (
-            <LineChart
-              xScale={xScale}
-              yScale={yScale}
-              getXAxisData={getXAxisData}
-              getYAxisData={getYAxisData}
-              xMax={xMax}
-              yMax={yMax}
-              seriesStyle={config.runtime.series}
-              handleTooltipMouseOver={handleTooltipMouseOver}
-              handleTooltipMouseOff={handleTooltipMouseOff}
-              handleTooltipClick={handleTooltipClick}
-              tooltipData={tooltipData}
-              showTooltip={showTooltip}
-            />
-          )}
-          {/* Line chart */}
-          {/* TODO: Make this just line or combo? */}
-          {![
-            'Paired Bar',
-            'Box Plot',
-            'Area Chart',
-            'Scatter Plot',
-            'Deviation Bar',
-            'Forecasting',
-            'Bar',
-            'Warming Stripes'
-          ].includes(visualizationType) &&
-            !convertLineToBarGraph && (
-              <>
-                <LineChart
-                  xScale={xScale}
-                  yScale={yScale}
-                  getXAxisData={getXAxisData}
-                  getYAxisData={getYAxisData}
-                  xMax={xMax}
-                  yMax={yMax}
-                  seriesStyle={config.runtime.series}
-                  tooltipData={tooltipData}
-                  handleTooltipMouseOver={handleTooltipMouseOver}
-                  handleTooltipMouseOff={handleTooltipMouseOff}
-                />
-              </>
-            )}
-          {(visualizationType === 'Forecasting' || visualizationType === 'Combo') && (
-            <Forecasting
-              showTooltip={showTooltip}
-              tooltipData={tooltipData}
-              xScale={xScale}
-              yScale={yScale}
-              width={xMax}
-              height={yMax}
-              xScaleNoPadding={xScaleNoPadding}
-              chartRef={svgRef}
-              handleTooltipMouseOver={handleTooltipMouseOver}
-              handleTooltipMouseOff={handleTooltipMouseOff}
-            />
-          )}
-          {visualizationType === 'Forest Plot' && (
-            <ForestPlot
-              xScale={xScale}
-              yScale={yScale}
-              seriesScale={seriesScale}
-              width={parentWidth}
-              height={forestHeight}
-              getXAxisData={getXAxisData}
-              getYAxisData={getYAxisData}
-              animatedChart={animatedChart}
-              visible={animatedChart}
-              handleTooltipMouseOver={handleTooltipMouseOver}
-              handleTooltipMouseOff={handleTooltipMouseOff}
-              handleTooltipClick={handleTooltipClick}
-              tooltipData={tooltipData}
-              showTooltip={showTooltip}
-              chartRef={svgRef}
-              config={config}
-              forestPlotRightLabelRef={forestPlotRightLabelRef}
+              yAxisWidth={yAxisWidth}
+              bottomLabelStart={bottomLabelStart}
+              tickLabelFontSize={tickLabelFontSize}
+              axisLabelFontSize={axisLabelFontSize}
+              axisBottomRef={axisBottomRef}
+              xAxisLabelRefs={xAxisLabelRefs}
+              tickLabelFont={GET_TEXT_WIDTH_FONT}
             />
           )}
+          {/* Visualization Renderer - handles all chart type rendering */}
+          <VisualizationRenderer
+            xScale={xScale}
+            yScale={yScale}
+            xMax={xMax}
+            yMax={yMax}
+            seriesScale={seriesScale}
+            xScaleNoPadding={xScaleNoPadding}
+            min={min}
+            max={max}
+            parentWidth={parentWidth}
+            yAxisWidth={yAxisWidth}
+            forestHeight={forestHeight}
+            animatedChart={animatedChart}
+            tooltipData={tooltipData}
+            showTooltip={showTooltip}
+            handleTooltipMouseOver={handleTooltipMouseOver}
+            handleTooltipMouseOff={handleTooltipMouseOff}
+            handleTooltipClick={handleTooltipClick}
+            getXAxisData={getXAxisData}
+            getYAxisData={getYAxisData}
+            svgRef={svgRef}
+            forestPlotRightLabelRef={forestPlotRightLabelRef}
+            synchronizedXValue={synchronizedXValue}
+          />
           {/* Brush moved to separate overlay - no longer in main SVG */}
           {/* y anchors */}
           {config.yAxis.anchors &&
@@ -944,11 +638,10 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
 
               if (!anchor.value) return
               if (config.yAxis.labelPlacement === 'Below Bar') {
-                const textOffset = -6.5
-                middleOffset = textOffset + Number(config.series.length * config.barHeight) / config.series.length
+                middleOffset =
+                  BELOW_BAR_TEXT_OFFSET + Number(config.series.length * config.barHeight) / config.series.length
               } else {
-                const paddingOffset = 8
-                middleOffset = paddingOffset
+                middleOffset = LABEL_PADDING_OFFSET
               }
 
               if (!position) return
@@ -956,13 +649,13 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               return (
                 // prettier-ignore
                 <Line
-                key={`yAxis-${anchor.value}--${index}`}
-                strokeDasharray={handleLineType(anchor.lineStyle)}
-                stroke={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
-                className='anchor-y'
-                from={{ x: runtime.yAxis.size, y: position - middleOffset }}
-                to={{ x: runtime.yAxis.size + xMax, y: position - middleOffset }}
-              />
+                  key={`yAxis-${anchor.value}--${index}`}
+                  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 }}
+                />
               )
             })}
           {/* x anchors */}
@@ -992,14 +685,14 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               return (
                 // prettier-ignore
                 <Line
-                key={`xAxis-${anchor.value}--${index}`}
-                strokeDasharray={handleLineType(anchor.lineStyle)}
-                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 }}
-              />
+                  key={`xAxis-${anchor.value}--${index}`}
+                  strokeDasharray={handleLineType(anchor.lineStyle)}
+                  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 }}
+                />
               )
             })}
           {/* we are handling regions in bar charts differently, so that we can calculate the bar group into the region space. */}
@@ -1019,7 +712,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           )}
           {isNoDataAvailable && (
             <Text
-              x={Number(runtime.yAxis.size) + Number(xMax / 2)}
+              x={yAxisWidth + Number(xMax / 2)}
               y={initialHeight / 2 - (config.xAxis.padding || 0) / 2}
               textAnchor='middle'
             >
@@ -1032,405 +725,65 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               <HoverLine xMax={xMax} yMax={yMax} point={point} tooltipData={tooltipData} orientation='vertical' />
             </>
           )}
-          <Group left={Number(config.runtime.yAxis.size)}>
+          <Group left={yAxisWidth}>
             <Annotation.Draggable
               xScale={xScale}
               yScale={yScale}
               xScaleAnnotation={xScaleAnnotation}
+              yScaleAnnotation={yScaleAnnotation}
               xMax={xMax}
+              yMax={yMax}
+              seriesScale={seriesScale}
               svgRef={svgRef}
               onDragStateChange={handleDragStateChange}
             />
           </Group>
           {/* Highlighted regions */}
           {/* Y axis */}
-          {!['Spark Line', 'Forest Plot', 'Warming Stripes'].includes(visualizationType) &&
+          {/* Horizon charts don't have a grid but should be rendered with a left axis */}
+          {(!TYPES_WITHOUT_GRID.includes(visualizationType as any) || visualizationType === 'Horizon Chart') &&
             config.yAxis.type !== 'categorical' && (
-              <AxisLeft
-                scale={yScale}
-                tickLength={isLogarithmicAxis ? 6 : 8}
-                left={Number(runtime.yAxis.size) - config.yAxis.axisPadding}
-                label={runtime.yAxis.label || runtime.yAxis.label}
-                stroke='#333'
-                tickFormat={handleLeftTickFormatting}
+              <LeftAxis
+                yScale={yScale}
+                xScale={xScale}
+                yMax={yMax}
+                xMax={xMax}
+                yAxisWidth={yAxisWidth}
                 numTicks={handleNumTicks}
-              >
-                {props => {
-                  const axisCenter =
-                    config.orientation === 'horizontal'
-                      ? Math.abs(props.axisToPoint.y - props.axisFromPoint.y) / 2
-                      : (props.axisFromPoint.y - props.axisToPoint.y) / 2
-                  const horizontalTickOffset =
-                    yMax / props.ticks.length / 2 - (yMax / props.ticks.length) * (1 - config.barThickness) + 5
-                  return (
-                    <Group className='left-axis'>
-                      {!config.yAxis.hideAxis && (
-                        <Line
-                          from={props.axisFromPoint}
-                          to={
-                            runtime.horizontal
-                              ? {
-                                  x: 0,
-                                  y:
-                                    config.visualizationType === 'Forest Plot'
-                                      ? parentHeight
-                                      : Number(heights.horizontal)
-                                }
-                              : props.axisToPoint
-                          }
-                          stroke='#000'
-                        />
-                      )}
-                      {orientation === 'vertical' && yScale.domain()[0] < 0 && (
-                        // draw from the Left of the chart …
-                        <Line
-                          from={{ x: props.axisFromPoint.x, y: yScale(0) }}
-                          to={{ x: xMax, y: yScale(0) }}
-                          stroke='#333'
-                        />
-                      )}
-                      {orientation === 'horizontal' && xScale.domain()[0] < 0 && (
-                        <Line
-                          // draw from the top of the char
-                          from={{ x: xScale(0), y: 0 }}
-                          to={{ x: xScale(0), y: yMax }}
-                          stroke='#333'
-                        />
-                      )}
-                      {visualizationType === 'Bar' && orientation === 'horizontal' && xScale.domain()[0] < 0 && (
-                        <Line
-                          from={{ x: xScale(0), y: 0 }}
-                          to={{ x: xScale(0), y: yMax }}
-                          stroke='#333'
-                          strokeWidth={2}
-                        />
-                      )}
-                      {props.ticks.map((tick, i) => {
-                        const minY = props.ticks[0].to.y
-                        const barMinHeight = 15 // 15 is the min height for bars by default
-                        const showTicks = String(tick.value).startsWith('1') || tick.value === 0.1 ? 'block' : 'none'
-                        const tickLength = showTicks === 'block' ? 7 : 0
-                        const to = { x: tick.to.x - tickLength, y: tick.to.y }
-
-                        // Vertical value/suffix vars
-                        const lastTick = props.ticks.length - 1 === i
-                        const useInlineLabel = lastTick && inlineLabel
-                        const hideTopTick = lastTick && inlineLabel && !inlineLabelHasNoSpace
-                        const valueOnLinePadding = hideAxis ? -8 : -12
-                        const labelXPadding = labelsAboveGridlines ? valueOnLinePadding : TICK_LABEL_MARGIN_RIGHT
-                        const labelYPadding = labelsAboveGridlines ? 4 : 0
-                        const labelX = tick.to.x - labelXPadding
-                        const labelY = tick.to.y - labelYPadding
-                        const labelVerticalAnchor = labelsAboveGridlines ? 'end' : 'middle'
-                        const combineDomInlineLabelWithValue = inlineLabel && labelsAboveGridlines && lastTick
-                        const formattedValue = useInlineLabel
-                          ? String(tick?.formattedValue || '').replace(config.dataFormat.suffix, '')
-                          : tick?.formattedValue
-
-                        return (
-                          <Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
-                            {!runtime.yAxis.hideTicks && !labelsAboveGridlines && !hideTopTick && (
-                              <Line
-                                key={`${tick.value}--hide-hideTicks`}
-                                from={tick.from}
-                                to={isLogarithmicAxis ? to : tick.to}
-                                stroke={config.yAxis.tickColor}
-                                display={orientation === 'horizontal' ? 'none' : 'block'}
-                                fontSize={tickLabelFontSize}
-                              />
-                            )}
-
-                            {orientation === 'horizontal' &&
-                              visualizationType === 'Box Plot' &&
-                              config.yAxis.labelPlacement === 'On Date/Category Axis' &&
-                              !config.yAxis.hideLabel && (
-                                <Text
-                                  x={tick.to.x}
-                                  y={yScale(tick.value) + yScale.bandwidth() / 2}
-                                  transform={`rotate(${
-                                    config.orientation === 'horizontal' ? config.runtime.yAxis.tickRotation || 0 : 0
-                                  }, ${tick.to.x}, ${tick.to.y})`}
-                                  verticalAnchor={'middle'}
-                                  textAnchor={'end'}
-                                  fontSize={tickLabelFontSize}
-                                >
-                                  {tick.formattedValue}
-                                </Text>
-                              )}
-
-                            {orientation === 'horizontal' &&
-                              visualizationType === 'Bar' &&
-                              config.yAxis.labelPlacement === 'On Date/Category Axis' &&
-                              !config.yAxis.hideLabel &&
-                              (() => {
-                                const barGroupCount =
-                                  config.visualizationSubType === 'stacked' ? 1 : config.runtime.seriesKeys.length
-
-                                // Calculate barHeight based on chart type (regular bar vs lollipop)
-                                let barHeight
-                                if (config.isLollipopChart) {
-                                  const lollipopSizes = { large: 7, medium: 6, small: 5 }
-                                  const lollipopBarWidth = lollipopSizes[config.lollipopSize] || 5
-                                  barHeight = lollipopBarWidth * barGroupCount
-                                } else {
-                                  barHeight = Number(config.barHeight) * barGroupCount
-                                }
-
-                                const totalBarHeight = barHeight + Number(config.barSpace)
-                                const barGroupY = i === 0 ? 0 : totalBarHeight * i
-                                const labelCenterY = barGroupY + barHeight / 2
-
-                                return (
-                                  <Text
-                                    x={tick.from.x - Number(runtime.yAxis.size) + horizontalYAxisLabelSpace}
-                                    y={labelCenterY}
-                                    verticalAnchor={'middle'}
-                                    textAnchor={'start'}
-                                    fontSize={tickLabelFontSize}
-                                    width={categoryLabelSpace}
-                                    lineHeight={'1.2em'}
-                                  >
-                                    {tick.formattedValue}
-                                  </Text>
-                                )
-                              })()}
-
-                            {orientation === 'horizontal' &&
-                              visualizationType !== 'Bar' &&
-                              visualizationSubType === 'stacked' &&
-                              config.yAxis.labelPlacement === 'On Date/Category Axis' &&
-                              !config.yAxis.hideLabel && (
-                                <Text
-                                  transform={`translate(${tick.to.x - 5}, ${
-                                    tick.to.y - minY + (Number(config.barHeight) - barMinHeight) / 2
-                                  }) rotate(-${runtime.horizontal ? runtime.yAxis.tickRotation : 0})`}
-                                  verticalAnchor={'start'}
-                                  textAnchor={'end'}
-                                  fontSize={tickLabelFontSize}
-                                >
-                                  {tick.formattedValue}
-                                </Text>
-                              )}
-
-                            {orientation === 'horizontal' &&
-                              visualizationType === 'Paired Bar' &&
-                              !config.yAxis.hideLabel && (
-                                <Text
-                                  transform={`translate(${tick.to.x - 5}, ${
-                                    tick.to.y - minY + Number(config.barHeight) / 2
-                                  }) rotate(-${runtime.horizontal ? runtime.yAxis.tickRotation : 0})`}
-                                  textAnchor={'end'}
-                                  verticalAnchor='middle'
-                                  fontSize={tickLabelFontSize}
-                                >
-                                  {tick.formattedValue}
-                                </Text>
-                              )}
-                            {orientation === 'horizontal' &&
-                              visualizationType === 'Deviation Bar' &&
-                              !config.yAxis.hideLabel && (
-                                <Text
-                                  transform={`translate(${tick.to.x - 5}, ${
-                                    config.isLollipopChart
-                                      ? tick.to.y - minY + 2
-                                      : tick.to.y - minY + Number(config.barHeight) / 2
-                                  }) rotate(-${runtime.horizontal ? runtime.yAxis.tickRotation : 0})`}
-                                  textAnchor={'end'}
-                                  verticalAnchor='middle'
-                                  fontSize={tickLabelFontSize}
-                                >
-                                  {tick.formattedValue}
-                                </Text>
-                              )}
-
-                            {orientation === 'vertical' &&
-                              visualizationType === 'Bump Chart' &&
-                              !config.yAxis.hideLabel && (
-                                <>
-                                  <Text
-                                    display={config.useLogScale ? showTicks : 'block'}
-                                    dx={config.useLogScale ? -6 : 0}
-                                    x={config.runtime.horizontal ? tick.from.x + 2 : tick.to.x - 8.5}
-                                    y={tick.to.y - 13 + (config.runtime.horizontal ? horizontalTickOffset : 0)}
-                                    angle={-Number(config.yAxis.tickRotation) || 0}
-                                    verticalAnchor={config.runtime.horizontal ? 'start' : 'middle'}
-                                    textAnchor={config.runtime.horizontal ? 'start' : 'end'}
-                                    fill={config.yAxis.tickLabelColor}
-                                    fontSize={tickLabelFontSize}
-                                  >
-                                    {config.runtime.seriesLabelsAll[tick.formattedValue - 1]}
-                                  </Text>
-
-                                  {(seriesHighlight.length === 0 ||
-                                    seriesHighlight.includes(
-                                      config.runtime.seriesLabelsAll[tick.formattedValue - 1]
-                                    )) && (
-                                    <rect
-                                      x={0 - Number(runtime.yAxis.size)}
-                                      y={tick.to.y - 8 + (config.runtime.horizontal ? horizontalTickOffset : 7)}
-                                      width={Number(runtime.yAxis.size) + xScale(xScale.domain()[0])}
-                                      height='2'
-                                      fill={colorScale(config.runtime.seriesLabelsAll[tick.formattedValue - 1])}
-                                    />
-                                  )}
-                                </>
-                              )}
-                            {orientation === 'vertical' &&
-                              visualizationType !== 'Paired Bar' &&
-                              visualizationType !== 'Bump Chart' &&
-                              !config.yAxis.hideLabel && (
-                                <>
-                                  {/* INLINE LABEL BEHAVIOR: Dom suffix for 'inlineLabel' behavior */}
-                                  {/* inline label is shown alone and is allowed to 'overflow' to the right */}
-                                  {/* SPECIAL ONE CHAR CASE: a one character inlineLabel does not overflow */}
-                                  {/* IF VALUES ON LINE: suffix is combined with value to avoid having to calculate varying (now left-aligned) value widths */}
-                                  {inlineLabel && lastTick && !labelsAboveGridlines && (
-                                    <BlurStrokeText
-                                      innerRef={suffixRef}
-                                      display={isLogarithmicAxis ? showTicks : 'block'}
-                                      dx={isLogarithmicAxis ? -6 : 0}
-                                      x={labelX}
-                                      y={labelY}
-                                      angle={-Number(config.yAxis.tickRotation) || 0}
-                                      verticalAnchor={labelVerticalAnchor}
-                                      textAnchor={inlineLabelHasNoSpace ? 'end' : 'start'}
-                                      fill={config.yAxis.tickLabelColor}
-                                      stroke={'#fff'}
-                                      paintOrder={'stroke'} // keeps stroke under fill
-                                      strokeLinejoin='round'
-                                      style={{ whiteSpace: 'pre-wrap' }} // prevents leading spaces from being trimmed
-                                      fontSize={tickLabelFontSize}
-                                    >
-                                      {inlineLabel}
-                                    </BlurStrokeText>
-                                  )}
-
-                                  {/* VALUE */}
-                                  <BlurStrokeText
-                                    innerRef={el => lastTick && (topYLabelRef.current = el)}
-                                    display={isLogarithmicAxis ? showTicks : 'block'}
-                                    dx={isLogarithmicAxis ? -6 : 0}
-                                    x={inlineLabelHasNoSpace ? labelX - suffixWidth : labelX}
-                                    y={labelY + (config.runtime.horizontal ? horizontalTickOffset : 0)}
-                                    angle={-Number(config.yAxis.tickRotation) || 0}
-                                    verticalAnchor={config.runtime.horizontal ? 'start' : labelVerticalAnchor}
-                                    textAnchor={config.runtime.horizontal || labelsAboveGridlines ? 'start' : 'end'}
-                                    fill={config.yAxis.tickLabelColor}
-                                    stroke={'#fff'}
-                                    disableStroke={!labelsAboveGridlines}
-                                    strokeLinejoin='round'
-                                    paintOrder={'stroke'} // keeps stroke under fill
-                                    style={{ whiteSpace: 'pre-wrap' }} // prevents leading spaces from being trimmed
-                                    fontSize={tickLabelFontSize}
-                                  >
-                                    {`${formattedValue}${combineDomInlineLabelWithValue ? inlineLabel : ''}`}
-                                  </BlurStrokeText>
-                                </>
-                              )}
-                          </Group>
-                        )
-                      })}
-                      <Text
-                        className='y-label'
-                        textAnchor='middle'
-                        verticalAnchor='start'
-                        transform={`translate(${-1 * runtime.yAxis.size + yLabelOffset}, ${axisCenter}) rotate(-90)`}
-                        fontWeight='bold'
-                        fill={config.yAxis.labelColor}
-                        fontSize={axisLabelFontSize}
-                      >
-                        {!config.hideYAxisLabel ? props.label : null}
-                      </Text>
-                    </Group>
-                  )
-                }}
-              </AxisLeft>
+                tickLabelFontSize={tickLabelFontSize}
+                axisLabelFontSize={axisLabelFontSize}
+                handleLeftTickFormatting={handleLeftTickFormatting}
+                topYLabelRef={topYLabelRef}
+                suffixRef={suffixRef}
+                suffixWidth={suffixWidth}
+                horizontalYAxisLabelSpace={horizontalYAxisLabelSpace}
+                categoryLabelSpace={categoryLabelSpace}
+                yLabelOffset={yLabelOffset}
+              />
             )}
           {config.yAxis.type === 'categorical' && config.orientation === 'vertical' && (
             <CategoricalYAxis
               yScale={yScale}
               xMax={xMax}
               yMax={yMax}
-              leftSize={Number(runtime.yAxis.size) - config.yAxis.axisPadding}
+              leftSize={yAxisWidth - config.yAxis.axisPadding}
             />
           )}
           {/* Right Axis */}
           {hasRightAxis && (
-            <AxisRight
-              scale={yScaleRight}
-              left={Number(runtime.yAxis.size + xMax)}
-              label={config.yAxis.rightLabel}
-              tickFormat={tick => formatNumber(tick, 'right')}
-              numTicks={runtime.yAxis.rightNumTicks || undefined}
-              labelOffset={45}
-            >
-              {props => {
-                const axisCenter =
-                  config.orientation === 'horizontal'
-                    ? (props.axisToPoint.y - props.axisFromPoint.y) / 2
-                    : (props.axisFromPoint.y - props.axisToPoint.y) / 2
-                const horizontalTickOffset =
-                  yMax / props.ticks.length / 2 - (yMax / props.ticks.length) * (1 - config.barThickness) + 5
-                return (
-                  <Group className='right-axis'>
-                    {props.ticks.map((tick, i) => {
-                      return (
-                        <Group key={`vx-tick-${tick.value}-${i}`} className='vx-axis-tick'>
-                          {!runtime.yAxis.rightHideTicks && (
-                            <Line
-                              from={tick.from}
-                              to={tick.to}
-                              display={runtime.horizontal ? 'none' : 'block'}
-                              stroke={config.yAxis.rightAxisTickColor}
-                            />
-                          )}
-
-                          {runtime.yAxis.rightGridLines ? (
-                            <Line from={{ x: tick.from.x + xMax, y: tick.from.y }} to={tick.from} stroke='#d6d6d6' />
-                          ) : (
-                            ''
-                          )}
-
-                          {!config.yAxis.rightHideLabel && (
-                            <Text
-                              x={tick.to.x}
-                              y={tick.to.y + (runtime.horizontal ? horizontalTickOffset : 0)}
-                              verticalAnchor={runtime.horizontal ? 'start' : 'middle'}
-                              textAnchor={'start'}
-                              fill={config.yAxis.rightAxisTickLabelColor}
-                              fontSize={tickLabelFontSize}
-                            >
-                              {tick.formattedValue}
-                            </Text>
-                          )}
-                        </Group>
-                      )
-                    })}
-                    {!config.yAxis.rightHideAxis && (
-                      <Line from={props.axisFromPoint} to={props.axisToPoint} stroke='#333' />
-                    )}
-                    <Text
-                      className='y-label'
-                      textAnchor='middle'
-                      verticalAnchor='start'
-                      transform={`translate(${
-                        config.yAxis.rightLabelOffsetSize ? config.yAxis.rightLabelOffsetSize : 0
-                      }, ${axisCenter}) rotate(-90)`}
-                      fontWeight='bold'
-                      fill={config.yAxis.rightAxisLabelColor}
-                      fontSize={axisLabelFontSize}
-                    >
-                      {props.label}
-                    </Text>
-                  </Group>
-                )
-              }}
-            </AxisRight>
+            <RightAxis
+              yScaleRight={yScaleRight}
+              yMax={yMax}
+              xMax={xMax}
+              yAxisWidth={yAxisWidth}
+              tickLabelFontSize={tickLabelFontSize}
+              axisLabelFontSize={axisLabelFontSize}
+            />
           )}
           {hasTopAxis && config.topAxis.hasLine && (
             <AxisTop
               stroke='#333'
-              left={Number(runtime.yAxis.size)}
+              left={yAxisWidth}
               scale={xScale}
               hideTicks
               hideZero
@@ -1441,189 +794,27 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           )}
           {/* X axis */}
           {visualizationType !== 'Paired Bar' && visualizationType !== 'Spark Line' && (
-            <AxisBottom
-              innerRef={axisBottomRef}
-              top={
-                runtime.horizontal && config.visualizationType !== 'Forest Plot'
-                  ? Number(heights.horizontal) + Number(config.xAxis.axisPadding)
-                  : config.visualizationType === 'Forest Plot'
-                  ? yMax + Number(config.xAxis.axisPadding)
-                  : yMax
-              }
-              left={config.visualizationType !== 'Forest Plot' ? Number(runtime.yAxis.size) : 0}
-              label={runtime.xAxis.label}
-              tickFormat={handleBottomTickFormatting}
-              scale={xScale}
-              stroke='#333'
-              numTicks={useDateSpanMonths ? dateSpanMonths : xTickCount}
-              tickStroke='#333'
-              tickValues={
-                config.runtime.xAxis.manual
-                  ? getTickValues(xAxisDataMapped, xScale, isDateTime ? xTickCount : getManualStep(), config)
-                  : config.runtime.xAxis.type === 'date'
-                  ? xAxisDataMapped
-                  : // For date-time with small datasets (e.g., brush-filtered), use explicit tick values
-                  // to ensure each data point can have a tick. Otherwise, visx may generate too few.
-                  // Use uniqueXAxisDataMapped to handle cases where multiple series share x-axis values
-                  isDateTime && uniqueXAxisDataMapped.length > 0 && uniqueXAxisDataMapped.length <= (xTickCount || 15)
-                  ? uniqueXAxisDataMapped
-                  : undefined
-              }
-            >
-              {props => {
-                const hasDynamicCategory = config.series.some(s => s.dynamicCategory)
-
-                // For these charts, we generated all ticks in tickValues above, and now need to filter/shift them
-                // so the last tick is always labeled
-                // Use uniqueXAxisDataMapped for date filtering to match the tickValues we set
-                if (config.runtime.xAxis.type === 'date' && !config.runtime.xAxis.manual && !hasDynamicCategory) {
-                  props.ticks = filterAndShiftLinearDateTicks(config, props, uniqueXAxisDataMapped, formatDate)
-                }
-
-                const distanceBetweenTicks =
-                  useDateSpanMonths &&
-                  xScale
-                    .ticks(xTickCount)
-                    .map(t =>
-                      props.ticks.findIndex(
-                        tick => (typeof tick.value === 'number' ? tick.value : tick.value.getTime()) === t.getTime()
-                      )
-                    )
-                    .slice(0, 2)
-                    .reduce((acc, curr) => curr - acc)
-
-                // filter out every [distanceBetweenTicks] tick starting from the end, so the last tick is always labeled
-                const filteredTicks = useDateSpanMonths
-                  ? [...props.ticks]
-                      .reverse()
-                      .filter((_, i) => i % distanceBetweenTicks === 0)
-                      .reverse()
-                      .map((tick, i, arr) => ({
-                        ...tick,
-                        // reformat in case showYearsOnce, since first month of year may have changed
-                        formattedValue: handleBottomTickFormatting(tick.value, i, arr)
-                      }))
-                  : props.ticks
-
-                const axisMaxHeight = bottomLabelStart + BOTTOM_LABEL_PADDING
-
-                const containsMultipleWords = inputString => /\s/.test(inputString)
-                const isMultiLabel = filteredTicks.some(tick => containsMultipleWords(tick.value))
-
-                // Calculate sumOfTickWidth here, before map function
-                const longestTickLength = Math.max(
-                  ...filteredTicks.map(tick => getTextWidth(tick.formattedValue, GET_TEXT_WIDTH_FONT))
-                )
-                // const marginTop = 20 // moved to top bc need for yMax calcs
-                const accumulator = isMultiLabel ? 180 : 100
-
-                const textWidths = filteredTicks.map(tick => getTextWidth(tick.formattedValue, GET_TEXT_WIDTH_FONT))
-                const sumOfTickWidth = textWidths.reduce((a, b) => a + b, accumulator)
-                const spaceBetweenEachTick = (xMax - sumOfTickWidth) / (filteredTicks.length - 1)
-                const bufferBetweenTicks = 40
-                const maxLengthOfTick =
-                  parentWidth / filteredTicks.length - X_TICK_LABEL_PADDING * 2 - bufferBetweenTicks
-
-                // Determine the position of each tick
-                let positions = [0] // The first tick is at position 0
-                for (let i = 1; i < textWidths.length; i++) {
-                  // The position of each subsequent tick is the position of the previous tick
-                  // plus the width of the previous tick and the space
-                  positions[i] = positions[i - 1] + textWidths[i - 1] + spaceBetweenEachTick
-                }
-                // calculate the end of x axis box
-                const axisBBox = axisBottomRef?.current?.getBBox().height
-                config.xAxis.axisBBox = axisBBox
-
-                // force wrap it last tick is close to the end of the axis
-                const lastTickWidth = textWidths[textWidths.length - 1]
-                const lastTickPosition = positions[positions.length - 1] + lastTickWidth
-                const lastTickEnd = lastTickPosition + lastTickWidth / 2
-                const lastTickEndThreshold = xMax - lastTickWidth
-
-                const areTicksTouching =
-                  textWidths.some(textWidth => textWidth > maxLengthOfTick) || // Force wrap if any tick is too long
-                  config.xAxis.showYearsOnce || // Force wrap when showing years once so it's easier to read
-                  lastTickEnd > lastTickEndThreshold // Force wrap it last tick is close to the end of the axis
-
-                const dynamicMarginTop =
-                  areTicksTouching && config.isResponsiveTicks ? longestTickLength + DEFAULT_TICK_LENGTH + 20 : 0
-
-                config.dynamicMarginTop = dynamicMarginTop
-                config.xAxis.tickWidthMax = longestTickLength
-
-                return (
-                  <Group className='bottom-axis' width={parentWidth}>
-                    {filteredTicks.map((tick, i, propsTicks) => {
-                      // when using LogScale show major ticks values only
-                      const showTick = String(tick.value).startsWith('1') || tick.value === 0.1 ? 'block' : 'none'
-                      const tickLength = showTick === 'block' ? 16 : DEFAULT_TICK_LENGTH
-                      const to = { x: tick.to.x, y: tickLength }
-                      const limitedWidth = 100 / propsTicks.length
-                      //reset rotations by updating config
-                      config.yAxis.tickRotation =
-                        config.isResponsiveTicks && config.orientation === 'horizontal' ? 0 : config.yAxis.tickRotation
-                      config.xAxis.tickRotation =
-                        config.isResponsiveTicks && config.orientation === 'vertical' ? 0 : config.xAxis.tickRotation
-                      //configure rotation
-
-                      const tickRotation =
-                        config.isResponsiveTicks && areTicksTouching
-                          ? -Number(config.xAxis.maxTickRotation) || -90
-                          : -Number(config.runtime.xAxis.tickRotation)
-
-                      return (
-                        <Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
-                          {!config.xAxis.hideTicks && (
-                            <Line
-                              from={tick.from}
-                              to={orientation === 'horizontal' && isLogarithmicAxis ? to : tick.to}
-                              stroke={config.xAxis.tickColor}
-                              strokeWidth={showTick === 'block' && isLogarithmicAxis ? 1.3 : 1}
-                            />
-                          )}
-                          {!config.xAxis.hideLabel && (
-                            <Text
-                              innerRef={el => (xAxisLabelRefs.current[i] = el)}
-                              dy={config.orientation === 'horizontal' && isLogarithmicAxis ? 8 : 0}
-                              display={config.orientation === 'horizontal' && isLogarithmicAxis ? showTick : 'block'}
-                              x={tick.to.x}
-                              y={tick.to.y + X_TICK_LABEL_PADDING}
-                              angle={tickRotation}
-                              verticalAnchor={tickRotation < -50 ? 'middle' : 'start'}
-                              textAnchor={tickRotation ? 'end' : 'middle'}
-                              width={
-                                areTicksTouching && !config.isResponsiveTicks && !Number(config.xAxis.tickRotation)
-                                  ? limitedWidth
-                                  : undefined
-                              }
-                              fill={config.xAxis.tickLabelColor}
-                              fontSize={tickLabelFontSize}
-                            >
-                              {tick.formattedValue}
-                            </Text>
-                          )}
-                        </Group>
-                      )
-                    })}
-                    {!config.xAxis.hideAxis && <Line from={props.axisFromPoint} to={props.axisToPoint} stroke='#333' />}
-                    <Text
-                      innerRef={xAxisTitleRef}
-                      className='x-axis-title-label'
-                      x={xMax / 2}
-                      y={isForestPlot ? 0 /* set via ref */ : axisMaxHeight}
-                      textAnchor='middle'
-                      verticalAnchor='start'
-                      fontWeight='bold'
-                      fill={config.xAxis.labelColor}
-                      fontSize={axisLabelFontSize}
-                    >
-                      {!config.hideXAxisLabel ? props.label : null}
-                    </Text>
-                  </Group>
-                )
-              }}
-            </AxisBottom>
+            <BottomAxis
+              axisBottomRef={axisBottomRef}
+              xScale={xScale}
+              yMax={yMax}
+              xMax={xMax}
+              yAxisWidth={yAxisWidth}
+              xTickCount={xTickCount}
+              tickLabelFontSize={tickLabelFontSize}
+              axisLabelFontSize={axisLabelFontSize}
+              handleBottomTickFormatting={handleBottomTickFormatting}
+              useDateSpanMonths={useDateSpanMonths}
+              dateSpanMonths={dateSpanMonths}
+              xAxisDataMapped={xAxisDataMapped}
+              uniqueXAxisDataMapped={uniqueXAxisDataMapped}
+              isDateTime={isDateTime}
+              bottomLabelStart={bottomLabelStart}
+              parentWidth={parentWidth}
+              xAxisLabelRefs={xAxisLabelRefs}
+              xAxisTitleRef={xAxisTitleRef}
+              getManualStep={getManualStep}
+            />
           )}
         </svg>
         {!isDraggingAnnotation &&
@@ -1680,10 +871,10 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           <div
             style={{
               position: 'relative',
-              marginTop: '10px',
-              left: `${runtime.yAxis.size || 0}px`,
-              width: `${Math.max(xMax, 100)}px`,
-              height: '70px',
+              marginTop: `${BRUSH_MARGIN}px`,
+              left: `${yAxisWidth}px`,
+              width: `${Math.max(xMax, BRUSH_MIN_WIDTH)}px`,
+              height: `${BRUSH_HEIGHT}px`,
               pointerEvents: 'auto',
               zIndex: 15,
               touchAction: 'none', // Enable touch interactions for brush
@@ -1693,7 +884,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
             }}
             className='brush-overlay'
           >
-            <BrushSelector xMax={Math.max(xMax, 100)} yMax={70} />
+            <BrushSelector key={brushKeyRef.current} xMax={Math.max(xMax, BRUSH_MIN_WIDTH)} yMax={BRUSH_HEIGHT} />
           </div>
         )}
       </div>