@cdc/chart 4.25.11 → 4.26.2

package/src/components/LinearChart.tsx

@@ -1,7 +1,17 @@
-import React, { forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import React, {
+  forwardRef,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  useCallback
+} 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'
@@ -12,33 +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 BrushChart from './Brush/BrushController'
+import { CategoricalYAxis, LeftAxis, LeftAxisGridlines, BottomAxis, PairedBarAxis, RightAxis } from './Axis'
+import BrushSelector from './Brush/BrushSelector'
+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, handleAutoPaddingRight } from '../helpers/sizeHelpers'
-import { filterAndShiftLinearDateTicks } from '../helpers/filterAndShiftLinearDateTicks'
+import { calcInitialHeight } from '../helpers/sizeHelpers'
+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'
 
@@ -47,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'
@@ -57,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
@@ -84,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,
@@ -102,36 +121,38 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     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
-  const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, data)
-  const { visSupportsReactTooltip } = useEditorPermissions()
+  // When brush is active, use tableData (full dataset) for min/max calculation
+  // so the y-axis shows the full range, but still use filtered data for rendering
+  const dataForMinMax = config.xAxis.brushActive && tableData && tableData.length > 0 ? tableData : data
+  const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, dataForMinMax)
+
+  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)
@@ -141,7 +162,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const triggerRef = useRef()
   const xAxisLabelRefs = useRef([])
   const xAxisTitleRef = useRef(null)
-  const gridLineRefs = useRef([])
   const tooltipRef = useRef(null)
 
   const dataRef = useIntersectionObserver(triggerRef, {
@@ -167,57 +187,75 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
 
   // height before bottom axis
   const initialHeight = useMemo(
-    () => calcInitialHeight(config, currentViewport),
-    [config, currentViewport, parentHeight, config.heights?.vertical, config.heights?.horizontal]
+    () =>
+      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])
 
-  // width
-  const width = useMemo(() => {
-    const initialWidth = dimensions[0]
-    const legendHidden = legend?.hide
-    const legendOnTopOrBottom = ['bottom', 'top'].includes(config.legend?.position)
-    const legendWrapped = isLegendWrapViewport(currentViewport)
-
-    const legendShowingLeftOrRight = !isForestPlot && !legendHidden && !legendOnTopOrBottom && !legendWrapped
-
-    if (!legendShowingLeftOrRight) return initialWidth
-
-    if (legendRef.current) {
-      const legendStyle = getComputedStyle(legendRef.current)
-      return (
-        initialWidth -
-        legendRef.current.getBoundingClientRect().width -
-        parseInt(legendStyle.marginLeft) -
-        parseInt(legendStyle.marginRight)
-      )
-    }
-
-    return initialWidth * 0.73
-  }, [dimensions[0], config.legend, currentViewport, legendRef.current])
-
   // 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
-  }, [dimensions[0], config.xAxis, xAxisLabelRefs.current, config.xAxis.tickRotation])
+  }, [parentWidth, config.xAxis.tickRotation, config.xAxis.hideLabel, xAxisLabelRefs.current, axisUpdateKey])
 
-  // xMax and yMax
-  const xMax = width - runtime.yAxis.size - (visualizationType === 'Combo' ? config.yAxis.rightAxisSize : 0)
   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
+  const uniqueXAxisDataMapped = useMemo(() => {
+    const unique = new Set()
+    const result: any[] = []
+    for (const value of xAxisDataMapped) {
+      const key = value instanceof Date ? value.getTime() : typeof value === 'number' ? value : String(value)
+      if (!unique.has(key)) {
+        unique.add(key)
+        result.push(value)
+      }
+    }
+    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 })
 
+  // 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,
     yScale,
@@ -226,10 +264,9 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     g2xScale,
     xScaleNoPadding,
     xScaleAnnotation,
+    yScaleAnnotation,
     min,
-    max,
-    leftMax,
-    rightMax
+    max
   } = useScales({
     data,
     tableData,
@@ -240,15 +277,49 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     existPositiveValue,
     xAxisDataMapped,
     yMax,
-    dimensions,
-    xMax:
-      parentWidth -
-      Number(config.orientation === 'horizontal' ? config.xAxis.size : config.yAxis.size) -
-      (hasRightAxis ? config.yAxis.rightAxisSize : 0),
+    xMax,
     needsYAxisAutoPadding,
     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({
+      yScale,
+      chartWidth: parentWidth,
+      formatDate,
+      parseDate,
+      tickLabelFont: GET_TEXT_WIDTH_FONT,
+      xAxisType: config.runtime.xAxis?.type,
+      labelPlacement: config.yAxis.labelPlacement
+    })
+  }, [isHorizontal, config.visualizationType, config.yAxis.labelPlacement, yScale, parentWidth])
+
+  const horizontalYAxisLabelSpace = runtime.yAxis.label && !config.hideYAxisLabel ? 30 : 0
+
+  // 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 })
   )
@@ -291,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)
 
@@ -363,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
@@ -378,41 +409,23 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     setPoint,
     setShowHoverLine,
     handleTooltipMouseOver,
-    hideTooltip
+    hideTooltip,
+    setSynchronizedXValue
   })
 
-  // EFFECTS
-  // Adjust padding on the right side of the chart to accommodate for overflow
-  useEffect(() => {
-    if (!parentRef.current || !parentWidth || !gridLineRefs.current.length) return
-
-    const [updatePadding, paddingToAdd] = handleAutoPaddingRight(parentRef, xAxisLabelRefs, parentWidth)
-
-    if (!updatePadding) return
-
-    parentRef.current.style.paddingRight = `${paddingToAdd}px`
-    // subtract padding from grid line's x1 value
-    gridLineRefs.current.forEach(gridLine => {
-      if (!gridLine) return
-      gridLine.setAttribute('x1', xMax - paddingToAdd)
-    })
-  }, [parentWidth, parentHeight, data])
-
   // 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])
@@ -449,16 +462,22 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     const topLabelOnGridline = topYLabelRef.current && yAxis.labelsAboveGridlines
 
     // Heights to add
-
-    const brushHeight = 25
-    const brushHeightWithMargin = config.xAxis.brushActive ? brushHeight + brushHeight : 0
     const forestRowsHeight = isForestPlot ? config.data.length * forestPlot.rowHeight : 0
     const topLabelOnGridlineHeight = topLabelOnGridline ? topYLabelRef.current.getBBox().height : 0
-    const additionalHeight = axisBottomHeight + brushHeightWithMargin + forestRowsHeight + topLabelOnGridlineHeight
-    const newHeight = initialHeight + additionalHeight
+
+    // SVG height (without brush)
+    const svgAdditionalHeight = axisBottomHeight + forestRowsHeight + topLabelOnGridlineHeight
+    const svgHeight = initialHeight + svgAdditionalHeight
+
+    // Parent container height (includes brush if active)
+    const brushHeightWithMargin = config.xAxis.brushActive ? BRUSH_HEIGHT + BRUSH_MARGIN : 0
+    const parentHeight = svgHeight + brushHeightWithMargin
+
     if (!parentRef.current) return
+    parentRef.current.style.height = `${parentHeight}px`
 
-    parentRef.current.style.height = `${newHeight}px`
+    // Set the calculated SVG height via state to ensure it's used on render
+    setCalculatedSvgHeight(svgHeight)
 
     /* Adding text above the top gridline overflows the bounds of the svg.
     To accommodate for this we need to...
@@ -472,22 +491,14 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     const svg = internalSvgRef.current
     if (!svg) return
     const parentWidthFromRef = parentRef.current.getBoundingClientRect().width
-    svg.setAttribute('viewBox', `0 ${-topLabelOnGridlineHeight} ${parentWidthFromRef} ${newHeight}`)
+    svg.setAttribute('viewBox', `0 ${-topLabelOnGridlineHeight} ${parentWidthFromRef} ${svgHeight}`)
 
     // translate legend match viewBox-adjusted height
     if (!legendRef.current) return
     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
@@ -501,13 +512,13 @@ 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])
 
-  // Check if small multiples are enabled - if so, render SmallMultiples instead
-  if (config.smallMultiples?.mode) {
+  // Check if small multiples are enabled and supported - if so, render SmallMultiples instead
+  if (config.smallMultiples?.mode && visSupportsSmallMultiples()) {
     return (
       <SmallMultiples
         config={config}
@@ -519,151 +530,7 @@ 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(width) ? (
+  return isNaN(parentWidth) ? (
     <React.Fragment></React.Fragment>
   ) : (
     <ErrorBoundary component='LinearChart'>
@@ -676,7 +543,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           ref={internalSvgRef}
           onMouseMove={onMouseMove}
           width={parentWidth + config.yAxis.rightAxisSize}
-          height={isNoDataAvailable ? 1 : parentHeight}
+          height={isNoDataAvailable ? 1 : calculatedSvgHeight ?? parentHeight}
           className={`linear ${config.animate ? 'animated' : ''} ${animatedChart && config.animate ? 'animate' : ''} ${
             debugSvg && 'debug'
           } ${isDraggingAnnotation && 'dragging-annotation'}`}
@@ -695,229 +562,74 @@ 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'].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
-                              innerRef={el => (gridLineRefs.current[i] = el)}
-                              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>
-          )}
-          {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={width} width={xMax} height={yMax} />}
-          {visualizationType === 'Scatter Plot' && (
-            <ScatterPlot
-              xScale={xScale}
+          {/* Actual LeftAxis is drawn after visualization */}
+          {!TYPES_WITHOUT_GRID.includes(visualizationType as any) && config.yAxis.type !== 'categorical' && (
+            <LeftAxisGridlines
               yScale={yScale}
-              getXAxisData={getXAxisData}
-              getYAxisData={getYAxisData}
-              xMax={xMax}
-              yMax={yMax}
-              handleTooltipMouseOver={handleTooltipMouseOver}
-              handleTooltipMouseOff={handleTooltipMouseOff}
-              handleTooltipClick={handleTooltipClick}
-              tooltipData={tooltipData}
-              showTooltip={showTooltip}
-            />
-          )}
-          {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}
+              yAxisWidth={yAxisWidth}
+              numTicks={handleNumTicks}
+              yLabelOffset={yLabelOffset}
+              axisLabelFontSize={axisLabelFontSize}
             />
           )}
-          {((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}
-            />
+          {/* Horizontal chart grid lines */}
+          {runtime.xAxis.gridLines && orientation === 'horizontal' && (
+            <Group left={yAxisWidth}>
+              {xScale.ticks(xTickCount).map((tickValue, i) => {
+                const tickPosition = xScale(tickValue)
+                return (
+                  <Line
+                    key={`horizontal-gridline-${tickValue}-${i}`}
+                    from={{ x: tickPosition, y: 0 }}
+                    to={{ x: tickPosition, y: yMax }}
+                    stroke='#d6d6d6'
+                  />
+                )
+              })}
+            </Group>
           )}
-          {(visualizationType === 'Bar' || visualizationType === 'Combo' || convertLineToBarGraph) && (
-            <BarChart
-              xScale={xScale}
-              yScale={yScale}
-              seriesScale={seriesScale}
-              xMax={xMax}
+          {visualizationType === 'Paired Bar' && (
+            <PairedBarAxis
+              g1xScale={g1xScale}
+              g2xScale={g2xScale}
               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'].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={width}
-              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}
             />
           )}
-          {/*Brush chart */}
-          {config.xAxis.brushActive && config.xAxis.type !== 'categorical' && <BrushChart xMax={xMax} yMax={yMax} />}
-          {/* Line chart */}
-          {/* TODO: Make this just line or combo? */}
-          {!['Paired Bar', 'Box Plot', 'Area Chart', 'Scatter Plot', 'Deviation Bar', 'Forecasting', 'Bar'].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}
-                />
-              </>
-            )}
+          {/* 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 &&
             config.yAxis.anchors.map((anchor, index) => {
@@ -926,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
@@ -942,8 +653,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                   strokeDasharray={handleLineType(anchor.lineStyle)}
                   stroke={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
                   className='anchor-y'
-                  from={{ x: 0 + padding, y: position - middleOffset }}
-                  to={{ x: width - config.yAxis.rightAxisSize, y: position - middleOffset }}
+                  from={{ x: Number(runtime.yAxis.size), y: position - middleOffset }}
+                  to={{ x: Number(runtime.yAxis.size) + Number(xMax), y: position - middleOffset }}
                 />
               )
             })}
@@ -996,12 +707,12 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               hideTooltip={hideTooltip}
               tooltipData={tooltipData}
               yMax={yMax}
-              width={width}
+              xMax={xMax}
             />
           )}
           {isNoDataAvailable && (
             <Text
-              x={Number(config.yAxis.size) + Number(xMax / 2)}
+              x={yAxisWidth + Number(xMax / 2)}
               y={initialHeight / 2 - (config.xAxis.padding || 0) / 2}
               textAnchor='middle'
             >
@@ -1014,387 +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'].includes(visualizationType) && 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}
-              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 !== 'Box Plot' &&
-                            visualizationSubType !== 'stacked' &&
-                            config.yAxis.labelPlacement === 'On Date/Category Axis' &&
-                            !config.yAxis.hideLabel && (
-                              <Text
-                                transform={`translate(${tick.to.x - 5}, ${
-                                  config.isLollipopChart
-                                    ? tick.to.y - minY
-                                    : tick.to.y -
-                                      minY +
-                                      (Number(config.barHeight * config.runtime.series.length) - barMinHeight) / 2
-                                }) rotate(-${config.runtime.horizontal ? config.runtime.yAxis.tickRotation || 0 : 0})`}
-                                verticalAnchor={'start'}
-                                textAnchor={'end'}
-                                fontSize={tickLabelFontSize}
-                              >
-                                {tick.formattedValue}
-                              </Text>
-                            )}
-
-                          {orientation === 'horizontal' &&
-                            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(config.yAxis.size)}
-                                    y={tick.to.y - 8 + (config.runtime.horizontal ? horizontalTickOffset : 7)}
-                                    width={Number(config.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>
-          )}
+          {/* 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' && (
+              <LeftAxis
+                yScale={yScale}
+                xScale={xScale}
+                yMax={yMax}
+                xMax={xMax}
+                yAxisWidth={yAxisWidth}
+                numTicks={handleNumTicks}
+                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
-              max={max}
-              maxValue={maxValue}
-              height={initialHeight}
+              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(width - config.yAxis.rightAxisSize)}
-              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
@@ -1405,181 +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
-                  : 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
-                if (config.runtime.xAxis.type === 'date' && !config.runtime.xAxis.manual && !hasDynamicCategory) {
-                  props.ticks = filterAndShiftLinearDateTicks(config, props, xAxisDataMapped, 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 = width / 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={dimensions[0]}>
-                    {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 &&
@@ -1631,6 +866,27 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           />
         )}
         <div className='animation-trigger' ref={triggerRef} />
+        {/* SEPARATED BRUSH - Independent SVG overlay */}
+        {config.xAxis.brushActive && config.xAxis.type !== 'categorical' && xMax > 0 && (
+          <div
+            style={{
+              position: 'relative',
+              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
+              WebkitTouchCallout: 'none',
+              WebkitUserSelect: 'none',
+              userSelect: 'none'
+            }}
+            className='brush-overlay'
+          >
+            <BrushSelector key={brushKeyRef.current} xMax={Math.max(xMax, BRUSH_MIN_WIDTH)} yMax={BRUSH_HEIGHT} />
+          </div>
+        )}
       </div>
     </ErrorBoundary>
   )