@cdc/chart 4.23.6 → 4.23.8

package/src/components/LinearChart.jsx

@@ -1,61 +1,72 @@
-import React, { useContext, useEffect, useRef, useState } from 'react'
-import { Tooltip as ReactTooltip } from 'react-tooltip'
+import React, { useContext, useEffect, useRef, useState, useMemo } from 'react'
 
+// Libraries
+import { AxisLeft, AxisBottom, AxisRight, AxisTop } from '@visx/axis'
 import { Group } from '@visx/group'
-import { Line } from '@visx/shape'
+import { Line, Bar } from '@visx/shape'
 import { Text } from '@visx/text'
-import { AxisLeft, AxisBottom, AxisRight, AxisTop } from '@visx/axis'
-import { localPoint } from '@visx/event'
-import { useTooltip } from '@visx/tooltip'
+import { Tooltip as ReactTooltip } from 'react-tooltip'
+import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
 
+// CDC Components
+import AreaChart from './AreaChart'
 import BarChart from './BarChart'
 import ConfigContext from '../ConfigContext'
-import CoveAreaChart from './AreaChart'
 import CoveBoxPlot from './BoxPlot'
-import CoveScatterPlot from './ScatterPlot'
+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 './useIntersectionObserver'
 
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import '../scss/LinearChart.scss'
-import useReduceData from '../hooks/useReduceData'
-import useScales from '../hooks/useScales'
+// Hooks
 import useMinMax from '../hooks/useMinMax'
+import useReduceData from '../hooks/useReduceData'
 import useRightAxis from '../hooks/useRightAxis'
+import useScales from '../hooks/useScales'
 import useTopAxis from '../hooks/useTopAxis'
-import Forecasting from './Forecasting'
+import { useTooltip as useCoveTooltip } from '../hooks/useTooltip'
+
+// styles
+import '../scss/LinearChart.scss'
 
 export default function LinearChart() {
-  const { transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, formatNumber, handleChartAriaLabels, updateConfig, handleLineType, rawData } = useContext(ConfigContext)
+  const { isEditor, isDashboard, transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, formatNumber, handleChartAriaLabels, updateConfig, handleLineType, rawData, capitalize, setSharedFilter, setSharedFilterValue, getTextWidth, isDebug } = useContext(ConfigContext)
 
-  // getters & functions
-  const getXAxisData = d => (config.runtime.xAxis.type === 'date' ? 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))
+  // todo: start destructuring this file for conciseness
+  const { visualizationType, visualizationSubType, orientation, xAxis, yAxis, runtime, debugSvg } = config
+
+  const getDate = d => new Date(d[config.xAxis.dataKey])
 
   // configure width
   let [width] = dimensions
   if (config && config.legend && !config.legend.hide && config.legend.position !== 'bottom' && ['lg', 'md'].includes(currentViewport)) {
     width = width * 0.73
   }
-  //  configure height , yMax, xMAx
+  //  configure height , yMax, xMax
   const { horizontal: heightHorizontal } = config.heights
-  const isHorizontal = config.orientation === 'horizontal'
+  const isHorizontal = orientation === 'horizontal'
   const shouldAbbreviate = true
-  const height = config.aspectRatio ? width * config.aspectRatio : config.heights[config.orientation]
-  const xMax = width - config.runtime.yAxis.size - (config.visualizationType === 'Combo' ? config.yAxis.rightAxisSize : 0)
-  const yMax = height - (config.orientation === 'horizontal' ? 0 : config.runtime.xAxis.size)
+  let height = config.aspectRatio ? width * config.aspectRatio : config.visualizationType === 'Forest Plot' ? config.heights['vertical'] : config.heights[orientation]
+  const xMax = width - runtime.yAxis.size - (visualizationType === 'Combo' ? config.yAxis.rightAxisSize : 0)
+  let yMax = height - (orientation === 'horizontal' ? 0 : runtime.xAxis.size)
+
+  if (config.visualizationType === 'Forest Plot') {
+    height = height + config.data.length * config.forestPlot.rowHeight
+    yMax = yMax + config.data.length * config.forestPlot.rowHeight
+  }
+
+  let dynamicMarginTop = 0 || config.dynamicMarginTop
+  const marginTop = 20
 
   // hooks  % states
   const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, data)
   const { yScaleRight, hasRightAxis } = useRightAxis({ config, yMax, data, updateConfig })
   const { hasTopAxis } = useTopAxis(config)
   const [animatedChart, setAnimatedChart] = useState(false)
-  const properties = { data, config, minValue, maxValue, isAllLine, existPositiveValue, xAxisDataMapped, xMax, yMax }
-  const { min, max } = useMinMax(properties)
-  const { xScale, yScale, seriesScale, g1xScale, g2xScale, xScaleNoPadding } = useScales({ ...properties, min, max })
 
   // refs
   const triggerRef = useRef()
@@ -64,29 +75,47 @@ export default function LinearChart() {
     freezeOnceVisible: false
   })
 
-  const handleLeftTickFormatting = tick => {
+  // getters & functions
+  const getXAxisData = d => (config.runtime.xAxis.type === 'date' ? 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))
+  const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
+  const properties = { data, config, minValue, maxValue, isAllLine, existPositiveValue, xAxisDataMapped, xMax, yMax }
+  const { min, max } = useMinMax(properties)
+  const { xScale, yScale, seriesScale, g1xScale, g2xScale, xScaleNoPadding } = useScales({ ...properties, min, max })
+
+  // sets the portal x/y for where tooltips should appear on the page.
+  const [chartPosition, setChartPosition] = useState(null)
+  useEffect(() => {
+    setChartPosition(svgRef?.current?.getBoundingClientRect())
+  }, [svgRef, config.legend])
+
+  const handleLeftTickFormatting = (tick, index) => {
     if (config.useLogScale && tick === 0.1) {
       //when logarithmic scale applied change value of first tick
       tick = 0
     }
-    if (config.runtime.yAxis.type === 'date') return formatDate(parseDate(tick))
-    if (config.orientation === 'vertical') return formatNumber(tick, 'left', shouldAbbreviate)
+
+    if (config.data && !config.data[index] && visualizationType === 'Forest Plot') return
+    if (config.visualizationType === 'Forest Plot') return config.data[index][config.xAxis.dataKey]
+    if (runtime.yAxis.type === 'date') return formatDate(parseDate(tick))
+    if (orientation === 'vertical') return formatNumber(tick, 'left', shouldAbbreviate)
     return tick
   }
 
   const handleBottomTickFormatting = tick => {
     if (config.useLogScale && tick === 0.1) {
-      // when logaritmic scale applyed change value FIRST  of  tick
+      // when logarithmic scale applied change value FIRST  of  tick
       tick = 0
     }
-    if (config.runtime.xAxis.type === 'date') return formatDate(tick)
-    if (config.orientation === 'horizontal') return formatNumber(tick, 'left', shouldAbbreviate)
+    if (runtime.xAxis.type === 'date') return formatDate(tick)
+    if (orientation === 'horizontal') return formatNumber(tick, 'left', shouldAbbreviate)
     if (config.xAxis.type === 'continuous') return formatNumber(tick, 'bottom', shouldAbbreviate)
     return tick
   }
 
   const countNumOfTicks = axis => {
-    const { numTicks } = config.runtime[axis]
+    const { numTicks } = runtime[axis]
     let tickCount = undefined
 
     if (axis === 'yAxis') {
@@ -121,108 +150,24 @@ export default function LinearChart() {
     return tickCount
   }
 
-  // Tooltip helper for getting data to the closest date/category hovered.
-  const getXValueFromCoordinate = x => {
-    if (xScale.type === 'point') {
-      // Find the closest x value by calculating the minimum distance
-      let closestX = null
-      let minDistance = Number.MAX_VALUE
-      let offset = x - yAxis.size
-
-      data.forEach(d => {
-        const xPosition = xAxis.type === 'date' ? xScale(parseDate(d[xAxis.dataKey])) : xScale(d[xAxis.dataKey])
-        const distance = Math.abs(Number(xPosition - offset))
-
-        if (distance < minDistance) {
-          minDistance = distance
-          closestX = xAxis.type === 'date' ? parseDate(d[xAxis.dataKey]) : d[xAxis.dataKey]
-        }
-      })
-      return closestX
-    }
-  }
-
-  // import tooltip helpers
-  const { tooltipData, showTooltip, hideTooltip } = useTooltip()
-
-  const handleTooltipMouseOver = (e, data) => {
-    // get the svg coordinates of the mouse
-    // and get the closest values
-    const eventSvgCoords = localPoint(e)
-    const { x, y } = eventSvgCoords
-
-    const { runtime } = config
-
-    let closestXScaleValue = getXValueFromCoordinate(x)
-    let formattedDate = formatDate(closestXScaleValue)
-
-    let yScaleValues
-    if (xAxis.type === 'categorical') {
-      yScaleValues = data.filter(d => d[xAxis.dataKey] === closestXScaleValue)
-    } else {
-      yScaleValues = rawData.filter(d => formatDate(parseDate(d[xAxis.dataKey])) === formattedDate)
-    }
-
-    let seriesToInclude = []
-    let stageColumns = []
-    let ciItems = []
-
-    // loop through series for items to add to tooltip.
-    // there is probably a better way of doing this.
-    config.series?.map(s => {
-      if (s.type === 'Forecasting') {
-        stageColumns.push(s.stageColumn)
-
-        // greedy fn 😭
-        s?.confidenceIntervals.map(ci => {
-          if (ci.showInTooltip === true) {
-            ciItems.push(ci.low)
-            ciItems.push(ci.high)
-          }
-        })
-      }
-    })
-
-    let standardLoopItems = []
-
-    if (config.visualizationType === 'Combo') {
-      standardLoopItems = [runtime.xAxis.dataKey, ...runtime?.barSeriesKeys, ...stageColumns, ...ciItems]
-    } else {
-      standardLoopItems = [runtime.xAxis.dataKey, ...stageColumns, ...ciItems]
-    }
-
-    standardLoopItems.map(seriesKey => {
-      if (!seriesKey) return false
-      if (!yScaleValues[0]) return false
-      for (const item of Object.entries(yScaleValues[0])) {
-        if (item[0] === seriesKey) {
-          seriesToInclude.push(item)
-        }
-      }
-    })
-
-    // filter out the series that aren't added to the map.
-    if (!seriesToInclude) return
-    let initialTooltipData = Object.fromEntries(seriesToInclude) ? Object.fromEntries(seriesToInclude) : {}
-
-    let tooltipData = {}
-    tooltipData.data = initialTooltipData
-    tooltipData.dataXPosition = x + 10
-    tooltipData.dataYPosition = y
-
-    let tooltipInformation = {
-      tooltipData: tooltipData,
-      tooltipTop: 0,
-      tooltipValues: yScaleValues,
-      tooltipLeft: x
-    }
-
-    showTooltip(tooltipInformation)
-  }
-
-  const handleTooltipMouseOff = () => {
-    hideTooltip()
-  }
+  // Tooltip Helpers
+  const { tooltipData, showTooltip, hideTooltip, tooltipOpen } = useTooltip()
+
+  // prettier-ignore
+  const {
+    handleTooltipMouseOver,
+    handleTooltipClick,
+    handleTooltipMouseOff,
+    tooltipStyles,
+    TooltipListItem,
+    getXValueFromCoordinateDate,
+    getXValueFromCoordinate
+  } = useCoveTooltip({
+      xScale,
+      yScale,
+      showTooltip,
+      hideTooltip
+  })
 
   // Make sure the chart is visible if in the editor
   /* eslint-disable react-hooks/exhaustive-deps */
@@ -243,14 +188,29 @@ export default function LinearChart() {
     }
   }, [dataRef?.isIntersecting, config.animate])
 
-  const { orientation, xAxis, yAxis } = config
+  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
+  }
+
+  const padding = orientation === 'horizontal' ? Number(config.xAxis.size) : Number(config.yAxis.size)
+
+  const handleNumTicks = () => {
+    // On forest plots we need to return every "study" or y axis value.
+    if (config.visualizationType === 'Forest Plot') return config.data.length
+    return countNumOfTicks('yAxis')
+  }
 
   return isNaN(width) ? (
-    <></>
+    <React.Fragment></React.Fragment>
   ) : (
     <ErrorBoundary component='LinearChart'>
-      <svg width={width} height={height} className={`linear ${config.animate ? 'animated' : ''} ${animatedChart && config.animate ? 'animate' : ''}`} role='img' aria-label={handleChartAriaLabels(config)} tabIndex={0} ref={svgRef}>
-        {/* Highlighted regions */}
+      <svg width={width} height={height} className={`linear ${config.animate ? 'animated' : ''} ${animatedChart && config.animate ? 'animate' : ''} ${debugSvg && 'debug'}`} role='img' aria-label={handleChartAriaLabels(config)} tabIndex={0} ref={svgRef}>
+        <Bar width={width} height={height} fill={'transparent'}></Bar> {/* Highlighted regions */}
         {config.regions
           ? config.regions.map(region => {
               if (!Object.keys(region).includes('from') || !Object.keys(region).includes('to')) return null
@@ -275,7 +235,7 @@ export default function LinearChart() {
               if (!to) return null
 
               return (
-                <Group className='regions' left={Number(config.runtime.yAxis.size)} key={region.label}>
+                <Group className='regions' left={Number(runtime.yAxis.size)} key={region.label}>
                   <path
                     stroke='#333'
                     d={`M${from} -5
@@ -293,12 +253,11 @@ export default function LinearChart() {
               )
             })
           : ''}
-
         {/* Y axis */}
-        {config.visualizationType !== 'Spark Line' && (
-          <AxisLeft scale={yScale} tickLength={config.useLogScale ? 6 : 8} left={Number(config.runtime.yAxis.size) - config.yAxis.axisPadding} label={config.runtime.yAxis.label} stroke='#333' tickFormat={tick => handleLeftTickFormatting(tick)} numTicks={countNumOfTicks('yAxis')}>
+        {!['Spark Line', 'Forest Plot'].includes(visualizationType) && (
+          <AxisLeft scale={yScale} tickLength={config.useLogScale ? 6 : 8} left={Number(runtime.yAxis.size) - config.yAxis.axisPadding} label={runtime.yAxis.label} stroke='#333' tickFormat={(tick, i) => handleLeftTickFormatting(tick, i)} numTicks={handleNumTicks()}>
             {props => {
-              const axisCenter = config.runtime.horizontal ? (props.axisToPoint.y - props.axisFromPoint.y) / 2 : (props.axisFromPoint.y - props.axisToPoint.y) / 2
+              const axisCenter = runtime.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='left-axis'>
@@ -311,13 +270,13 @@ export default function LinearChart() {
 
                     return (
                       <Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
-                        {!config.runtime.yAxis.hideTicks && <Line from={tick.from} to={config.useLogScale ? to : tick.to} stroke={config.yAxis.tickColor} display={config.runtime.horizontal ? 'none' : 'block'} />}
+                        {!runtime.yAxis.hideTicks && <Line key={`${tick.value}--hide-hideTicks`} from={tick.from} to={config.useLogScale ? to : tick.to} stroke={config.yAxis.tickColor} display={runtime.horizontal ? 'none' : 'block'} />}
 
-                        {config.runtime.yAxis.gridLines ? <Line display={config.useLogScale && showTicks} from={{ x: tick.from.x + xMax, y: tick.from.y }} to={tick.from} stroke='rgba(0,0,0,0.3)' /> : ''}
+                        {runtime.yAxis.gridLines ? <Line key={`${tick.value}--hide-hideGridLines`} display={(config.useLogScale && showTicks).toString()} from={{ x: tick.from.x + xMax, y: tick.from.y }} to={tick.from} stroke='rgba(0,0,0,0.3)' /> : ''}
 
-                        {config.orientation === 'horizontal' && config.visualizationSubType !== 'stacked' && config.yAxis.labelPlacement === 'On Date/Category Axis' && !config.yAxis.hideLabel && (
+                        {orientation === 'horizontal' && 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.series.length) - barMinHeight) / 2}) rotate(-${config.runtime.horizontal ? config.runtime.yAxis.tickRotation : 0})`}
+                            transform={`translate(${tick.to.x - 5}, ${config.isLollipopChart ? tick.to.y - minY : tick.to.y - minY + (Number(config.barHeight * config.series.length) - barMinHeight) / 2}) rotate(-${config.runtime.horizontal ? config.runtime.yAxis.tickRotation || 0 : 0})`}
                             verticalAnchor={'start'}
                             textAnchor={'end'}
                           >
@@ -325,29 +284,30 @@ export default function LinearChart() {
                           </Text>
                         )}
 
-                        {config.orientation === 'horizontal' && config.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(-${config.runtime.horizontal ? config.runtime.yAxis.tickRotation : 0})`} verticalAnchor={'start'} textAnchor={'end'}>
+                        {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'}>
                             {tick.formattedValue}
                           </Text>
                         )}
 
-                        {config.orientation === 'horizontal' && config.visualizationType === 'Paired Bar' && !config.yAxis.hideLabel && (
-                          <Text transform={`translate(${tick.to.x - 5}, ${tick.to.y - minY + Number(config.barHeight) / 2}) rotate(-${config.runtime.horizontal ? config.runtime.yAxis.tickRotation : 0})`} textAnchor={'end'} verticalAnchor='middle'>
+                        {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'>
                             {tick.formattedValue}
                           </Text>
                         )}
-                        {config.orientation === 'horizontal' && config.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(-${config.runtime.horizontal ? config.runtime.yAxis.tickRotation : 0})`} textAnchor={'end'} verticalAnchor='middle'>
+                        {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'>
                             {tick.formattedValue}
                           </Text>
                         )}
 
-                        {config.orientation === 'vertical' && config.visualizationType !== 'Paired Bar' && !config.yAxis.hideLabel && (
+                        {orientation === 'vertical' && visualizationType !== 'Paired Bar' && !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}
                             y={tick.to.y + (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}
@@ -358,10 +318,10 @@ export default function LinearChart() {
                       </Group>
                     )
                   })}
-                  {!config.yAxis.hideAxis && <Line from={props.axisFromPoint} to={config.runtime.horizontal ? { x: 0, y: Number(heightHorizontal) } : props.axisToPoint} stroke='#000' />}
+                  {!config.yAxis.hideAxis && <Line from={props.axisFromPoint} to={runtime.horizontal ? { x: 0, y: config.visualizationType === 'Forest Plot' ? height : Number(heightHorizontal) } : props.axisToPoint} stroke='#000' />}
                   {yScale.domain()[0] < 0 && <Line from={{ x: props.axisFromPoint.x, y: yScale(0) }} to={{ x: xMax, y: yScale(0) }} stroke='#333' />}
-                  {config.visualizationType === 'Bar' && config.orientation === 'horizontal' && xScale.domain()[0] < 0 && <Line from={{ x: xScale(0), y: 0 }} to={{ x: xScale(0), y: yMax }} stroke='#333' strokeWidth={2} />}
-                  <Text className='y-label' textAnchor='middle' verticalAnchor='start' transform={`translate(${-1 * config.runtime.yAxis.size}, ${axisCenter}) rotate(-90)`} fontWeight='bold' fill={config.yAxis.labelColor}>
+                  {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} />}
+                  <Text className='y-label' textAnchor='middle' verticalAnchor='start' transform={`translate(${-1 * runtime.yAxis.size}, ${axisCenter}) rotate(-90)`} fontWeight='bold' fill={config.yAxis.labelColor}>
                     {props.label}
                   </Text>
                 </Group>
@@ -369,24 +329,23 @@ export default function LinearChart() {
             }}
           </AxisLeft>
         )}
-
         {/* Right Axis */}
         {hasRightAxis && (
-          <AxisRight scale={yScaleRight} left={Number(width - config.yAxis.rightAxisSize)} label={config.yAxis.rightLabel} tickFormat={tick => formatNumber(tick, 'right')} numTicks={config.runtime.yAxis.rightNumTicks || undefined} labelOffset={45}>
+          <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.runtime.horizontal ? (props.axisToPoint.y - props.axisFromPoint.y) / 2 : (props.axisFromPoint.y - props.axisToPoint.y) / 2
+              const axisCenter = runtime.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'>
-                        {!config.runtime.yAxis.rightHideTicks && <Line from={tick.from} to={tick.to} display={config.runtime.horizontal ? 'none' : 'block'} stroke={config.yAxis.rightAxisTickColor} />}
+                        {!runtime.yAxis.rightHideTicks && <Line from={tick.from} to={tick.to} display={runtime.horizontal ? 'none' : 'block'} stroke={config.yAxis.rightAxisTickColor} />}
 
-                        {config.runtime.yAxis.rightGridLines ? <Line from={{ x: tick.from.x + xMax, y: tick.from.y }} to={tick.from} stroke='rgba(0,0,0,0.3)' /> : ''}
+                        {runtime.yAxis.rightGridLines ? <Line from={{ x: tick.from.x + xMax, y: tick.from.y }} to={tick.from} stroke='rgba(0,0,0,0.3)' /> : ''}
 
                         {!config.yAxis.rightHideLabel && (
-                          <Text x={tick.to.x} y={tick.to.y + (config.runtime.horizontal ? horizontalTickOffset : 0)} verticalAnchor={config.runtime.horizontal ? 'start' : 'middle'} textAnchor={'start'} fill={config.yAxis.rightAxisTickLabelColor}>
+                          <Text x={tick.to.x} y={tick.to.y + (runtime.horizontal ? horizontalTickOffset : 0)} verticalAnchor={runtime.horizontal ? 'start' : 'middle'} textAnchor={'start'} fill={config.yAxis.rightAxisTickLabelColor}>
                             {tick.formattedValue}
                           </Text>
                         )}
@@ -402,11 +361,10 @@ export default function LinearChart() {
             }}
           </AxisRight>
         )}
-
         {hasTopAxis && config.topAxis.hasLine && (
           <AxisTop
             stroke='#333'
-            left={Number(config.runtime.yAxis.size)}
+            left={Number(runtime.yAxis.size)}
             scale={xScale}
             hideTicks
             hideZero
@@ -415,41 +373,84 @@ export default function LinearChart() {
             })}
           />
         )}
-
         {/* X axis */}
-        {config.visualizationType !== 'Paired Bar' && config.visualizationType !== 'Spark Line' && (
+        {visualizationType !== 'Paired Bar' && visualizationType !== 'Spark Line' && (
           <AxisBottom
-            top={config.runtime.horizontal ? Number(heightHorizontal) + Number(config.xAxis.axisPadding) : yMax + Number(config.xAxis.axisPadding)}
-            left={Number(config.runtime.yAxis.size)}
-            label={config.runtime.xAxis.label}
+            top={runtime.horizontal && config.visualizationType !== 'Forest Plot' ? Number(heightHorizontal) + Number(config.xAxis.axisPadding) : config.visualizationType === 'Forest Plot' ? yMax + Number(config.xAxis.axisPadding) : yMax + Number(config.xAxis.axisPadding)}
+            left={Number(runtime.yAxis.size)}
+            label={runtime.xAxis.label}
             tickFormat={handleBottomTickFormatting}
             scale={xScale}
             stroke='#333'
-            tickStroke='#333'
             numTicks={countNumOfTicks('xAxis')}
+            tickStroke='#333'
           >
             {props => {
-              const axisCenter = (props.axisToPoint.x - props.axisFromPoint.x) / 2
+              const axisCenter = config.visualizationType !== 'Forest Plot' ? (props.axisToPoint.x - props.axisFromPoint.x) / 2 : width / 2
+              const containsMultipleWords = inputString => /\s/.test(inputString)
+              const ismultiLabel = props.ticks.some(tick => containsMultipleWords(tick.value))
+
+              // Calculate sumOfTickWidth here, before map function
+              const fontSize = { small: 16, medium: 18, large: 20 }
+              const defaultTickLength = 8
+              const tickWidthMax = Math.max(...props.ticks.map(tick => getTextWidth(tick.formattedValue, `normal ${fontSize[config.fontSize]}px sans-serif`)))
+              // const marginTop = 20 // moved to top bc need for yMax calcs
+              const accumulator = ismultiLabel ? 180 : 100
+
+              const textWidths = props.ticks.map(tick => getTextWidth(tick.formattedValue, `normal ${fontSize[config.fontSize]}px sans-serif`))
+              const sumOfTickWidth = textWidths.reduce((a, b) => a + b, accumulator)
+              const spaceBetweenEachTick = (xMax - sumOfTickWidth) / (props.ticks.length - 1)
+
+              // Check if ticks are overlapping
+              // 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
+              }
+
+              // Check if ticks are overlapping
+              let areTicksTouching = false
+              textWidths.forEach((_, i) => {
+                if (positions[i] + textWidths[i] > positions[i + 1]) {
+                  areTicksTouching = true
+                  return
+                }
+              })
+
+              dynamicMarginTop = areTicksTouching && config.isResponsiveTicks ? tickWidthMax + defaultTickLength + marginTop : 0
+              config.dynamicMarginTop = dynamicMarginTop
+
               return (
                 <Group className='bottom-axis'>
-                  {props.ticks.map((tick, i) => {
+                  {props.ticks.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 tickWidth = xMax / props.ticks.length
-                    const tickLength = showTick === 'block' ? 16 : 8
+                    const tickLength = showTick === 'block' ? 16 : defaultTickLength
                     const to = { x: tick.to.x, y: tickLength }
+                    let textWidth = getTextWidth(tick.formattedValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
+                    let 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={config.orientation === 'horizontal' && config.useLogScale ? to : tick.to} stroke={config.xAxis.tickColor} strokeWidth={showTick === 'block' ? 1.3 : 1} />}
+                        {!config.xAxis.hideTicks && <Line from={tick.from} to={orientation === 'horizontal' && config.useLogScale ? to : tick.to} stroke={config.xAxis.tickColor} strokeWidth={showTick === 'block' ? 1.3 : 1} />}
                         {!config.xAxis.hideLabel && (
                           <Text
                             dy={config.orientation === 'horizontal' && config.useLogScale ? 8 : 0}
                             display={config.orientation === 'horizontal' && config.useLogScale ? showTick : 'block'}
-                            transform={`translate(${tick.to.x}, ${tick.to.y}) rotate(-${!config.runtime.horizontal ? config.runtime.xAxis.tickRotation : 0})`}
-                            verticalAnchor='start'
-                            textAnchor={config.runtime.xAxis.tickRotation && config.runtime.xAxis.tickRotation !== '0' ? 'end' : 'middle'}
-                            width={config.runtime.xAxis.tickRotation && config.runtime.xAxis.tickRotation !== '0' ? undefined : tickWidth}
+                            x={tick.to.x}
+                            y={tick.to.y}
+                            angle={tickRotation}
+                            verticalAnchor={tickRotation < -50 ? 'middle' : 'start'}
+                            textAnchor={tickRotation ? 'end' : 'middle'}
+                            width={areTicksTouching && !config.isResponsiveTicks && !Number(config[section].tickRotation) ? limitedWidth : textWidth}
                             fill={config.xAxis.tickLabelColor}
                           >
                             {tick.formattedValue}
@@ -459,7 +460,7 @@ export default function LinearChart() {
                     )
                   })}
                   {!config.xAxis.hideAxis && <Line from={props.axisFromPoint} to={props.axisToPoint} stroke='#333' />}
-                  <Text x={axisCenter} y={config.orientation === 'horizontal' ? config.xAxis.labelOffset : config.xAxis.size} textAnchor='middle' fontWeight='bold' fill={config.xAxis.labelColor}>
+                  <Text x={axisCenter} y={config.orientation === 'horizontal' ? dynamicMarginTop || config.xAxis.labelOffset : dynamicMarginTop || config.xAxis.size} textAnchor='middle' fontWeight='bold' fill={config.xAxis.labelColor}>
                     {props.label}
                   </Text>
                 </Group>
@@ -467,10 +468,9 @@ export default function LinearChart() {
             }}
           </AxisBottom>
         )}
-
-        {config.visualizationType === 'Paired Bar' && (
+        {visualizationType === 'Paired Bar' && (
           <>
-            <AxisBottom top={yMax} left={Number(config.runtime.yAxis.size)} label={config.runtime.xAxis.label} tickFormat={config.runtime.xAxis.type === 'date' ? formatDate : formatNumber} scale={g1xScale} stroke='#333' tickStroke='#333' numTicks={config.runtime.xAxis.numTicks || undefined}>
+            <AxisBottom top={yMax} left={Number(runtime.yAxis.size)} label={runtime.xAxis.label} tickFormat={runtime.xAxis.type === 'date' ? formatDate : formatNumber} scale={g1xScale} stroke='#333' tickStroke='#333' numTicks={runtime.xAxis.numTicks || undefined}>
               {props => {
                 return (
                   <Group className='bottom-axis'>
@@ -479,8 +479,8 @@ export default function LinearChart() {
                       const textAnchor = tick.index !== 0 && config.yAxis.tickRotation && config.yAxis.tickRotation > 0 ? 'end' : 'middle'
                       return (
                         <Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
-                          {!config.runtime.yAxis.hideTicks && <Line from={tick.from} to={tick.to} stroke='#333' />}
-                          {!config.runtime.yAxis.hideLabel && (
+                          {!runtime.yAxis.hideTicks && <Line from={tick.from} to={tick.to} stroke='#333' />}
+                          {!runtime.yAxis.hideLabel && (
                             <Text x={tick.to.x} y={tick.to.y} angle={-angle} verticalAnchor='start' textAnchor={textAnchor}>
                               {formatNumber(tick.value, 'left')}
                             </Text>
@@ -488,20 +488,20 @@ export default function LinearChart() {
                         </Group>
                       )
                     })}
-                    {!config.runtime.yAxis.hideAxis && <Line from={props.axisFromPoint} to={props.axisToPoint} stroke='#333' />}
+                    {!runtime.yAxis.hideAxis && <Line from={props.axisFromPoint} to={props.axisToPoint} stroke='#333' />}
                   </Group>
                 )
               }}
             </AxisBottom>
             <AxisBottom
               top={yMax}
-              left={Number(config.runtime.yAxis.size)}
-              label={config.runtime.xAxis.label}
-              tickFormat={config.runtime.xAxis.type === 'date' ? formatDate : config.runtime.xAxis.dataKey !== 'Year' ? formatNumber : tick => tick}
+              left={Number(runtime.yAxis.size)}
+              label={runtime.xAxis.label}
+              tickFormat={runtime.xAxis.type === 'date' ? formatDate : runtime.xAxis.dataKey !== 'Year' ? formatNumber : tick => tick}
               scale={g2xScale}
               stroke='#333'
               tickStroke='#333'
-              numTicks={config.runtime.xAxis.numTicks || undefined}
+              numTicks={runtime.xAxis.numTicks || undefined}
             >
               {props => {
                 return (
@@ -512,8 +512,8 @@ export default function LinearChart() {
                         const textAnchor = tick.index !== 0 && config.yAxis.tickRotation && config.yAxis.tickRotation > 0 ? 'end' : 'middle'
                         return (
                           <Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
-                            {!config.runtime.yAxis.hideTicks && <Line from={tick.from} to={tick.to} stroke='#333' />}
-                            {!config.runtime.yAxis.hideLabel && (
+                            {!runtime.yAxis.hideTicks && <Line from={tick.from} to={tick.to} stroke='#333' />}
+                            {!runtime.yAxis.hideLabel && (
                               <Text x={tick.to.x} y={tick.to.y} angle={-angle} verticalAnchor='start' textAnchor={textAnchor}>
                                 {formatNumber(tick.value, 'left')}
                               </Text>
@@ -521,11 +521,11 @@ export default function LinearChart() {
                           </Group>
                         )
                       })}
-                      {!config.runtime.yAxis.hideAxis && <Line from={props.axisFromPoint} to={props.axisToPoint} stroke='#333' />}
+                      {!runtime.yAxis.hideAxis && <Line from={props.axisFromPoint} to={props.axisToPoint} stroke='#333' />}
                     </Group>
                     <Group>
                       <Text x={xMax / 2} y={config.xAxis.labelOffset} stroke='#333' textAnchor={'middle'} verticalAnchor='start'>
-                        {config.runtime.xAxis.label}
+                        {runtime.xAxis.label}
                       </Text>
                     </Group>
                   </>
@@ -534,73 +534,140 @@ export default function LinearChart() {
             </AxisBottom>
           </>
         )}
-        {config.visualizationType === 'Deviation Bar' && <DeviationBar xScale={xScale} yScale={yScale} width={xMax} height={yMax} />}
-        {config.visualizationType === 'Paired Bar' && <PairedBarChart originalWidth={width} width={xMax} height={yMax} />}
-        {config.visualizationType === 'Scatter Plot' && <CoveScatterPlot xScale={xScale} yScale={yScale} getXAxisData={getXAxisData} getYAxisData={getYAxisData} />}
-        {config.visualizationType === 'Box Plot' && <CoveBoxPlot xScale={xScale} yScale={yScale} />}
-        {(config.visualizationType === 'Area Chart' || config.visualizationType === 'Combo') && <CoveAreaChart xScale={xScale} yScale={yScale} yMax={yMax} xMax={xMax} chartRef={svgRef} />}
-        {(config.visualizationType === 'Bar' || config.visualizationType === 'Combo') && <BarChart xScale={xScale} yScale={yScale} seriesScale={seriesScale} xMax={xMax} yMax={yMax} getXAxisData={getXAxisData} getYAxisData={getYAxisData} animatedChart={animatedChart} visible={animatedChart} />}
-        {(config.visualizationType === 'Line' || config.visualizationType === 'Combo') && <LineChart xScale={xScale} yScale={yScale} getXAxisData={getXAxisData} getYAxisData={getYAxisData} xMax={xMax} yMax={yMax} seriesStyle={config.series} />}
-        {(config.visualizationType === 'Forecasting' || config.visualizationType === 'Combo') && (
+        {visualizationType === 'Deviation Bar' && <DeviationBar xScale={xScale} yScale={yScale} width={xMax} height={yMax} />}
+        {visualizationType === 'Paired Bar' && <PairedBarChart originalWidth={width} width={xMax} height={yMax} />}
+        {visualizationType === 'Scatter Plot' && (
+          <ScatterPlot
+            xScale={xScale}
+            yScale={yScale}
+            getXAxisData={getXAxisData}
+            getYAxisData={getYAxisData}
+            xMax={xMax}
+            yMax={yMax}
+            handleTooltipMouseOver={handleTooltipMouseOver}
+            handleTooltipMouseOff={handleTooltipMouseOff}
+            handleTooltipClick={handleTooltipClick}
+            tooltipData={tooltipData}
+            showTooltip={showTooltip}
+          />
+        )}
+        {visualizationType === 'Box Plot' && <CoveBoxPlot xScale={xScale} yScale={yScale} />}
+        {(visualizationType === 'Area Chart' || visualizationType === 'Combo') && (
+          <AreaChart 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') && (
+          <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 === 'Line' || visualizationType === 'Combo') && (
+          <LineChart
+            xScale={xScale}
+            yScale={yScale}
+            getXAxisData={getXAxisData}
+            getYAxisData={getYAxisData}
+            xMax={xMax}
+            yMax={yMax}
+            seriesStyle={config.series}
+            handleTooltipMouseOver={handleTooltipMouseOver}
+            handleTooltipMouseOff={handleTooltipMouseOff}
+            handleTooltipClick={handleTooltipClick}
+            tooltipData={tooltipData}
+            showTooltip={showTooltip}
+            chartRef={svgRef}
+          />
+        )}
+        {(visualizationType === 'Forecasting' || visualizationType === 'Combo') && (
           <Forecasting
-            hideTooltip={hideTooltip}
             showTooltip={showTooltip}
             tooltipData={tooltipData}
             xScale={xScale}
             yScale={yScale}
             width={xMax}
+            le
             height={yMax}
             xScaleNoPadding={xScaleNoPadding}
             chartRef={svgRef}
             getXValueFromCoordinate={getXValueFromCoordinate}
             handleTooltipMouseOver={handleTooltipMouseOver}
             handleTooltipMouseOff={handleTooltipMouseOff}
+            isBrush={false}
           />
         )}
-
         {/* y anchors */}
         {config.yAxis.anchors &&
           config.yAxis.anchors.map(anchor => {
-            return <Line strokeDasharray={handleLineType(anchor.lineStyle)} stroke='rgba(0,0,0,1)' className='customAnchor' from={{ x: 0 + config.yAxis.size, y: yScale(anchor.value) }} to={{ x: xMax, y: yScale(anchor.value) }} display={config.runtime.horizontal ? 'none' : 'block'} />
+            return <Line strokeDasharray={handleLineType(anchor.lineStyle)} stroke='rgba(0,0,0,1)' className='customAnchor' from={{ x: 0 + config.yAxis.size, y: yScale(anchor.value) }} to={{ x: xMax, y: yScale(anchor.value) }} display={runtime.horizontal ? 'none' : 'block'} />
           })}
-
+        {visualizationType === 'Forest Plot' && (
+          <ForestPlot
+            xScale={xScale}
+            yScale={yScale}
+            seriesScale={seriesScale}
+            width={xMax}
+            height={yMax}
+            maxWidth={width}
+            maxHeight={height}
+            getXAxisData={getXAxisData}
+            getYAxisData={getYAxisData}
+            animatedChart={animatedChart}
+            visible={animatedChart}
+            handleTooltipMouseOver={handleTooltipMouseOver}
+            handleTooltipMouseOff={handleTooltipMouseOff}
+            handleTooltipClick={handleTooltipClick}
+            tooltipData={tooltipData}
+            showTooltip={showTooltip}
+            chartRef={svgRef}
+            config={config}
+          />
+        )}
         {/* Line chart */}
         {/* TODO: Make this just line or combo? */}
-        {config.visualizationType !== 'Bar' &&
-          config.visualizationType !== 'Paired Bar' &&
-          config.visualizationType !== 'Box Plot' &&
-          config.visualizationType !== 'Area Chart' &&
-          config.visualizationType !== 'Scatter Plot' &&
-          config.visualizationType !== 'Deviation Bar' &&
-          config.visualizationType !== 'Forecasting' && (
-            <>
-              <LineChart xScale={xScale} yScale={yScale} getXAxisData={getXAxisData} getYAxisData={getYAxisData} xMax={xMax} yMax={yMax} seriesStyle={config.series} />
-            </>
-          )}
-
+        {visualizationType !== 'Bar' && visualizationType !== 'Paired Bar' && visualizationType !== 'Box Plot' && visualizationType !== 'Area Chart' && visualizationType !== 'Scatter Plot' && visualizationType !== 'Deviation Bar' && visualizationType !== 'Forecasting' && (
+          <>
+            <LineChart xScale={xScale} yScale={yScale} getXAxisData={getXAxisData} getYAxisData={getYAxisData} xMax={xMax} yMax={yMax} seriesStyle={config.series} />
+          </>
+        )}
         {/* y anchors */}
         {config.yAxis.anchors &&
-          config.yAxis.anchors.map(anchor => {
+          config.yAxis.anchors.map((anchor, index) => {
             let anchorPosition = yScale(anchor.value)
-            const padding = config.orientation === 'horizontal' ? Number(config.xAxis.size) : Number(config.yAxis.size)
-            const middleOffset = config.orientation === 'horizontal' && config.visualizationType === 'Bar' ? config.barHeight / 4 : 0
+            // have to move up
+            // const padding = orientation === 'horizontal' ? Number(config.xAxis.size) : Number(config.yAxis.size)
+            if (!anchor.value) return
+            const middleOffset = orientation === 'horizontal' && visualizationType === 'Bar' ? config.barHeight / 4 : 0
+
+            if (!anchorPosition) return
 
             return (
               // prettier-ignore
               <Line
-                key={anchor.value}
+                key={`yAxis-${anchor.value}--${index}`}
                 strokeDasharray={handleLineType(anchor.lineStyle)}
                 stroke={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
                 className='anchor-y'
                 from={{ x: 0 + padding, y: anchorPosition - middleOffset}}
-                to={{ x: width, y: anchorPosition - middleOffset }}
+                to={{ x: width - config.yAxis.rightAxisSize, y: anchorPosition - middleOffset }}
               />
             )
           })}
-
         {/* x anchors */}
         {config.xAxis.anchors &&
-          config.xAxis.anchors.map(anchor => {
+          config.xAxis.anchors.map((anchor, index) => {
             let newX = xAxis
             if (orientation === 'horizontal') {
               newX = yAxis
@@ -608,12 +675,15 @@ export default function LinearChart() {
 
             let anchorPosition = newX.type === 'date' ? xScale(parseDate(anchor.value, false)) : xScale(anchor.value)
 
-            const padding = orientation === 'horizontal' ? Number(config.xAxis.size) : Number(config.yAxis.size)
+            // have to move up
+            // const padding = orientation === 'horizontal' ? Number(config.xAxis.size) : Number(config.yAxis.size)
+
+            if (!anchorPosition) return
 
             return (
               // prettier-ignore
               <Line
-                key={anchor.value}
+                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)'}
@@ -623,8 +693,25 @@ export default function LinearChart() {
               />
             )
           })}
+        {chartHasTooltipGuides && showTooltip && tooltipData && config.visual.verticalHoverLine && (
+          <Group key='tooltipLine-vertical' className='vertical-tooltip-line'>
+            <Line from={{ x: tooltipData.dataXPosition - 10, y: 0 }} to={{ x: tooltipData.dataXPosition - 10, y: yMax }} stroke={'black'} strokeWidth={1} pointerEvents='none' strokeDasharray='5,5' className='vertical-tooltip-line' />
+          </Group>
+        )}
+        {chartHasTooltipGuides && showTooltip && tooltipData && config.visual.horizontalHoverLine && (
+          <Group key='tooltipLine-horizontal' className='horizontal-tooltip-line' left={config.yAxis.size ? config.yAxis.size : 0}>
+            <Line from={{ x: 0, y: tooltipData.dataYPosition }} to={{ x: xMax, y: tooltipData.dataYPosition }} stroke={'black'} strokeWidth={1} pointerEvents='none' strokeDasharray='5,5' className='horizontal-tooltip-line' />
+          </Group>
+        )}
       </svg>
-      <ReactTooltip id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} variant='light' arrowColor='rgba(0,0,0,0)' className='tooltip' />
+      {tooltipData && Object.entries(tooltipData.data).length > 0 && tooltipOpen && showTooltip && tooltipData.dataYPosition && tooltipData.dataXPosition && (
+        <TooltipWithBounds key={Math.random()} className={'tooltip cdc-open-viz-module'} style={tooltipStyles(tooltipData)} width={width}>
+          <ul>{typeof tooltipData === 'object' && Object.entries(tooltipData.data).map((item, index) => <TooltipListItem item={item} key={index} />)}</ul>
+        </TooltipWithBounds>
+      )}
+      {(config.orientation === 'horizontal' || config.visualizationType === 'Scatter Plot' || config.visualizationType === 'Box Plot') && (
+        <ReactTooltip id={`cdc-open-viz-tooltip-${runtime.uniqueId}`} variant='light' arrowColor='rgba(0,0,0,0)' className='tooltip' style={{ background: `rgba(255,255,255, ${config.tooltips.opacity / 100})`, color: 'black' }} />
+      )}
       <div className='animation-trigger' ref={triggerRef} />
     </ErrorBoundary>
   )