@cdc/chart 4.25.8 → 4.25.10

package/src/components/LinearChart.tsx

@@ -5,6 +5,7 @@ import { AxisLeft, AxisBottom, AxisRight, AxisTop } from '@visx/axis'
 import { Group } from '@visx/group'
 import { Line, Bar } from '@visx/shape'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
+import 'react-tooltip/dist/react-tooltip.css'
 import { Text } from '@visx/text'
 import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
 import _ from 'lodash'
@@ -42,6 +43,7 @@ import useScales, { getTickValues } from '../hooks/useScales'
 
 import getTopAxis from '../helpers/getTopAxis'
 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'
@@ -90,6 +92,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     handleChartAriaLabels,
     handleLineType,
     handleDragStateChange,
+    interactionLabel,
     isDraggingAnnotation,
     legendRef,
     parseDate,
@@ -204,7 +207,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const xMax = width - runtime.yAxis.size - (visualizationType === 'Combo' ? config.yAxis.rightAxisSize : 0)
   const yMax = initialHeight + forestRowsHeight
 
-  const isNoDataAvailable = config.filters && config.filters.values.length === 0 && data.length === 0
+  const isNoDataAvailable = config.filters?.length > 0 && data.length === 0
 
   const getXAxisData = d =>
     isDateScale(config.runtime.xAxis)
@@ -268,8 +271,16 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     yScale,
     seriesScale,
     showTooltip,
-    hideTooltip
+    hideTooltip,
+    interactionLabel
   })
+
+  // Analytics tracking for chart hover
+  const { handleChartMouseEnter, handleChartMouseLeave } = useChartHoverAnalytics({
+    config,
+    interactionLabel
+  })
+
   // get the number of months between the first and last date
   const { dataKey } = runtime.xAxis
   const dateSpanMonths =
@@ -678,8 +689,14 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           role='img'
           aria-label={handleChartAriaLabels(config)}
           style={{ overflow: 'visible' }}
-          onMouseLeave={() => setShowHoverLine(false)}
-          onMouseEnter={() => setShowHoverLine(true)}
+          onMouseLeave={() => {
+            setShowHoverLine(false)
+            handleChartMouseLeave()
+          }}
+          onMouseEnter={() => {
+            setShowHoverLine(true)
+            handleChartMouseEnter()
+          }}
         >
           {!isDraggingAnnotation && <Bar width={parentWidth} height={initialHeight} fill={'transparent'}></Bar>}{' '}
           {/* GRID LINES */}
@@ -1403,7 +1420,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                   : yMax
               }
               left={config.visualizationType !== 'Forest Plot' ? Number(runtime.yAxis.size) : 0}
-              label={config[section].label}
+              label={runtime[section].label}
               tickFormat={handleBottomTickFormatting}
               scale={xScale}
               stroke='#333'

package/src/components/PairedBarChart.jsx

@@ -113,7 +113,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                 const textFits = textWidth < barWidth - 5 // minus padding dx(5)
 
                 return (
-                  <>
+                  <React.Fragment key={`fragment-group1-${groupOne.dataKey}-${index}`}>
                     <Group key={`group-${groupOne.dataKey}-${d[config.xAxis.dataKey]}`} className='horizontal'>
                       <Bar
                         id={`bar-${groupOne.dataKey}-${d[config.dataDescription?.xKey]}`}
@@ -124,6 +124,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                         width={xScale(d[config.series[0].dataKey])}
                         height={barHeight}
                         fill={groupOne.color}
+                        onMouseEnter={() => {}}
                         data-tooltip-html={dataTipOne(d)}
                         data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
                         stroke='#333'
@@ -145,7 +146,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                         </Text>
                       )}
                     </Group>
-                  </>
+                  </React.Fragment>
                 )
               })}
             {data
@@ -171,7 +172,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                 const isTextFits = textWidth < barWidth - 5 // minus padding dx(5)
 
                 return (
-                  <>
+                  <React.Fragment key={`fragment-group2-${groupTwo.dataKey}-${index}`}>
                     <style>
                       {`
                       .bar-${groupTwo.dataKey}-${d[config.xAxis.dataKey]} {
@@ -189,6 +190,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                         width={xScale(d[config.series[1].dataKey])}
                         height={barHeight}
                         fill={groupTwo.color}
+                        onMouseEnter={() => {}}
                         data-tooltip-html={dataTipTwo(d)}
                         data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
                         strokeWidth={borderWidth}
@@ -210,7 +212,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                         </Text>
                       )}
                     </Group>
-                  </>
+                  </React.Fragment>
                 )
               })}
           </Group>

package/src/components/PieChart/PieChart.tsx

@@ -7,10 +7,18 @@ import { Group } from '@visx/group'
 import { Text } from '@visx/text'
 import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
 import { colorPalettesChart as colorPalettes } from '@cdc/core/data/colorPalettes'
+import { getPaletteColors } from '@cdc/core/helpers/palettes/utils'
+import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
+import {
+  v2ColorDistribution,
+  divergentColorDistribution,
+  colorblindColorDistribution
+} from '@cdc/core/helpers/palettes/colorDistributions'
 
 // cove
-import ConfigContext from '../../ConfigContext'
+import ConfigContext, { ChartDispatchContext } from '../../ConfigContext'
 import { useTooltip as useCoveTooltip } from '../../hooks/useTooltip'
+import { useChartHoverAnalytics } from '../../hooks/useChartHoverAnalytics'
 import useIntersectionObserver from '../../hooks/useIntersectionObserver'
 import { handleChartAriaLabels } from '../../helpers/handleChartAriaLabels'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
@@ -25,7 +33,14 @@ type TooltipData = {
   dataYPosition: number
 }
 
-const PieChart = props => {
+type PieChartProps = {
+  parentWidth?: number
+  parentHeight?: number
+  interactionLabel?: string
+}
+
+const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) => {
+  const { interactionLabel = '' } = props
   const {
     transformedData: data,
     config,
@@ -34,13 +49,22 @@ const PieChart = props => {
     seriesHighlight,
     isDraggingAnnotation
   } = useContext(ConfigContext)
+  const dispatch = useContext(ChartDispatchContext)
   const { tooltipData, showTooltip, hideTooltip, tooltipOpen, tooltipLeft, tooltipTop } = useTooltip<TooltipData>()
   const { handleTooltipMouseOver, handleTooltipMouseOff, TooltipListItem } = useCoveTooltip({
     xScale: false,
     yScale: false,
     showTooltip,
-    hideTooltip
+    hideTooltip,
+    interactionLabel
+  })
+
+  // Analytics tracking for chart hover
+  const { handleChartMouseEnter, handleChartMouseLeave } = useChartHoverAnalytics({
+    config,
+    interactionLabel
   })
+
   const [filteredData, setFilteredData] = useState(undefined)
   const [animatedPie, setAnimatePie] = useState(false)
   const pivotColumns = Object.values(config.columns).filter(column => column.showInViz)
@@ -90,42 +114,100 @@ const PieChart = props => {
     }
 
     return baseData
-  }, [data, dataNeedsPivot, showPercentage, config])
+  }, [
+    data,
+    dataNeedsPivot,
+    showPercentage,
+    config.yAxis.dataKey,
+    config.xAxis.dataKey,
+    config.runtime.yAxis.dataKey,
+    config.runtime.xAxis.dataKey
+  ])
+
+  // Helper function to determine enhanced distribution type and apply it
+  const applyEnhancedColorDistribution = (config, palette, numberOfKeys) => {
+    const version = getColorPaletteVersion(config)
+    const configPalette = config.general?.palette?.name || config.palette
+
+    // Skip enhanced distribution if not v2, too many keys, or wrong palette length
+    if (version !== 2 || numberOfKeys > 9 || palette.length !== 9) {
+      return palette.slice(0, numberOfKeys)
+    }
+
+    const isSequential = configPalette && configPalette.includes('sequential')
+    const isDivergent = configPalette && configPalette.includes('divergent')
+    const isColorblindSafe =
+      configPalette && (configPalette.includes('colorblindsafe') || configPalette.includes('qualitative_standard'))
+
+    // Determine which distribution to use based on palette type
+    let distributionMap = null
+    if (isDivergent) {
+      distributionMap = divergentColorDistribution
+    } else if (isColorblindSafe) {
+      distributionMap = colorblindColorDistribution
+    } else if (isSequential) {
+      distributionMap = v2ColorDistribution
+    }
+
+    if (distributionMap && distributionMap[numberOfKeys]) {
+      const distributionIndices = distributionMap[numberOfKeys]
+      return distributionIndices.map((index: number) => palette[index])
+    }
+
+    return palette.slice(0, numberOfKeys)
+  }
+
+  // Helper function to extract keys from data
+  const extractDataKeys = (data, dataKey) => {
+    const keys = {}
+    data.forEach(d => {
+      if (!keys[d[dataKey]]) keys[d[dataKey]] = true
+    })
+    return Object.keys(keys)
+  }
+
+  // Helper function to create color scale for pie charts
+  const createPieColorScale = (data, config, isPercentageMode = false, labelForCalcArea = null) => {
+    const dataKeys = extractDataKeys(data, config.xAxis.dataKey)
+    const domainKeys = isPercentageMode ? dataKeys.filter(k => k !== labelForCalcArea) : dataKeys
+    const numberOfKeys = domainKeys.length
+
+    let palette = getPaletteColors(config, colorPalettes)
+    palette = applyEnhancedColorDistribution(config, palette, numberOfKeys)
+
+    const unknownColor = isPercentageMode
+      ? getComputedStyle(document.documentElement).getPropertyValue('--cool-gray-10').trim()
+      : null
+
+    return scaleOrdinal({
+      domain: domainKeys,
+      range: palette,
+      unknown: unknownColor
+    })
+  }
 
   const _colorScale = useMemo(() => {
+    // Always use the full _data for color scale to ensure legend shows all items
     if (dataNeedsPivot) {
-      const keys = {}
-      _data.forEach(d => {
-        if (!keys[d[config.xAxis.dataKey]]) keys[d[config.xAxis.dataKey]] = true
-      })
-      const numberOfKeys = Object.entries(keys).length
-      let palette = config.customColors || colorPalettes[config.palette]
-      palette = palette.slice(0, numberOfKeys)
-      return scaleOrdinal({
-        domain: Object.keys(keys),
-        range: palette,
-        unknown: null
-      })
+      return createPieColorScale(_data, config)
     }
 
     if (showPercentage) {
-      const keys = {}
-      _data.forEach(d => {
-        keys[d[config.xAxis.dataKey]] = true
-      })
-      // take out Calculated Area so it falls back to `unknown`
-      const domainKeys = Object.keys(keys).filter(k => k !== labelForCalcArea)
-
-      const basePalette = (config.customColors || colorPalettes[config.palette]).slice(0, domainKeys.length)
-      const COOL_GRAY_90 = getComputedStyle(document.documentElement).getPropertyValue('--cool-gray-10').trim()
-      return scaleOrdinal({
-        domain: domainKeys,
-        range: basePalette,
-        unknown: COOL_GRAY_90
-      })
+      return createPieColorScale(_data, config, true, labelForCalcArea)
     }
-    return colorScale
-  }, [_data, dataNeedsPivot, colorScale])
+
+    // Handle normal pie chart case
+    return createPieColorScale(_data, config)
+  }, [
+    _data,
+    dataNeedsPivot,
+    showPercentage,
+    config.xAxis.dataKey,
+    config.general?.palette?.name,
+    config.general?.palette?.isReversed,
+    config.general?.palette?.customColors,
+    config.palette
+  ])
 
   const triggerRef = useRef()
   const dataRef = useIntersectionObserver(triggerRef, {
@@ -137,9 +219,9 @@ const PieChart = props => {
     const element = document.querySelector('.isEditor')
     if (element) {
       // parent element is visible
-      setAnimatePie(prevState => true)
+      setAnimatePie(true)
     }
-  })
+  }, [])
 
   useEffect(() => {
     if (dataRef?.isIntersecting && config.animate && !animatedPie) {
@@ -178,14 +260,22 @@ const PieChart = props => {
         roundedPercentage = '**'
       }
 
+      // Determine if this slice should be muted based on legend behavior
+      const isHighlighted =
+        seriesHighlight.length === 0 || seriesHighlight.indexOf(arc.data[config.runtime.xAxis.dataKey]) !== -1
+      const shouldMute = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && !isHighlighted
+      const sliceOpacity = shouldMute ? 0.3 : 1
+      const textOpacity = shouldMute ? 0.3 : 1
+
       return (
         <Group key={key} className={`slice-${key}`}>
           {/* ── the slice */}
           <animated.path
-            d={to([styles.startAngle, styles.endAngle], (start, end) =>
+            d={to([styles.startAngle, styles.endAngle], (start: number, end: number) =>
               path({ ...arc, startAngle: start, endAngle: end })
             )}
             fill={colorScale(key)}
+            opacity={sliceOpacity}
             onMouseEnter={e =>
               onHover(e, {
                 data: arc.data,
@@ -201,7 +291,7 @@ const PieChart = props => {
           {/* ── the percentage label */}
           {arc.endAngle - arc.startAngle > 0.1 && (
             <animated.text
-              transform={to([styles.startAngle, styles.endAngle], (start, end) => {
+              transform={to([styles.startAngle, styles.endAngle], (start: number, end: number) => {
                 const [x, y] = path.centroid({
                   ...arc,
                   startAngle: start,
@@ -212,6 +302,7 @@ const PieChart = props => {
               textAnchor='middle'
               pointerEvents='none'
               fill={textColor}
+              opacity={textOpacity}
             >
               {/** compute text inside the spring callback */}
               {roundedPercentage}
@@ -252,6 +343,27 @@ const PieChart = props => {
     }
   }, [seriesHighlight]) // eslint-disable-line
 
+  // Update the context colorScale when the pie chart's colorScale changes
+  // This ensures the Legend component uses the same colors as the pie chart
+  const prevColorScaleRef = useRef<{ domain: string; range: string } | null>(null)
+
+  useEffect(() => {
+    if (_colorScale && config.visualizationType === 'Pie') {
+      // Only dispatch if the domain or range has actually changed
+      const currentDomain = JSON.stringify(_colorScale.domain())
+      const currentRange = JSON.stringify(_colorScale.range())
+      const colorScaleKey = `${currentDomain}|${currentRange}`
+      const prevKey = prevColorScaleRef.current
+        ? `${prevColorScaleRef.current.domain}|${prevColorScaleRef.current.range}`
+        : null
+
+      if (colorScaleKey !== prevKey) {
+        prevColorScaleRef.current = { domain: currentDomain, range: currentRange }
+        dispatch({ type: 'SET_COLOR_SCALE', payload: _colorScale })
+      }
+    }
+  }, [_colorScale, config.visualizationType, dispatch])
+
   const getSvgClasses = () => {
     let classes = ['animated-pie', 'group']
     if (config.animate === false || animatedPie) {
@@ -269,26 +381,31 @@ const PieChart = props => {
           className={getSvgClasses()}
           role='img'
           aria-label={handleChartAriaLabels(config)}
+          onMouseEnter={handleChartMouseEnter}
+          onMouseLeave={() => {
+            handleTooltipMouseOff()
+            handleChartMouseLeave()
+          }}
         >
           <Group top={centerY} left={radius}>
             {/* prettier-ignore */}
             <Pie
-            data={filteredData || _data}
-            pieValue={d => parseFloat(d[pivotKey || config.runtime.yAxis.dataKey])}
-            pieSortValues={() => -1}
-            innerRadius={radius - donutThickness}
-            outerRadius={radius}
-          >
-           {pie => (
-             <AnimatedPie
-             {...pie}
-              getKey={d => d.data[config.runtime.xAxis.dataKey]}
-              colorScale={_colorScale}
-              onHover={handleTooltipMouseOver}
-               onLeave={handleTooltipMouseOff}
-           />
-            )}
-          </Pie>
+              data={filteredData || _data}
+              pieValue={d => parseFloat(d[pivotKey || config.runtime.yAxis.dataKey])}
+              pieSortValues={() => -1}
+              innerRadius={radius - donutThickness}
+              outerRadius={radius}
+            >
+              {pie => (
+                <AnimatedPie
+                  {...pie}
+                  getKey={d => d.data[config.runtime.xAxis.dataKey]}
+                  colorScale={_colorScale}
+                  onHover={handleTooltipMouseOver}
+                  onLeave={handleTooltipMouseOff}
+                />
+              )}
+            </Pie>
           </Group>
         </svg>
         <div ref={triggerRef} />
@@ -304,7 +421,6 @@ const PieChart = props => {
                 config.tooltips.opacity / 100
               }) !important`}</style>
               <TooltipWithBounds
-                key={Math.random()}
                 className={'tooltip cdc-open-viz-module'}
                 left={tooltipLeft + centerX - radius}
                 top={tooltipTop}
@@ -319,6 +435,6 @@ const PieChart = props => {
       </ErrorBoundary>
     </>
   )
-}
+})
 
 export default PieChart

package/src/components/Sankey/components/Sankey.tsx

@@ -9,7 +9,7 @@ import { Text } from '@visx/text'
 // Cdc
 import './../sankey.scss'
 import 'react-tooltip/dist/react-tooltip.css'
-import ConfigContext from '@cdc/chart/src/ConfigContext'
+import ConfigContext from '../../../ConfigContext'
 import type { ChartContext } from '../../../types/ChartContext'
 import type { SankeyNode, SankeyProps } from '../types'
 import useSankeyAlert from '../useSankeyAlert'
@@ -171,6 +171,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
           fill={nodeColor}
           fillOpacity={opacityValue}
           rx={sankeyConfig.rxValue}
+          onMouseEnter={() => {}}
           // todo: move enable tooltips to sankey
           data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
           data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
@@ -204,6 +205,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               className='node-text'
               style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
               onClick={() => handleNodeClick(node.id)}
+              onMouseEnter={() => {}}
               data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
               data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
             >
@@ -220,6 +222,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               textAnchor='start'
               style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
               onClick={() => handleNodeClick(node.id)}
+              onMouseEnter={() => {}}
               data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
               data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
             >
@@ -237,6 +240,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               verticalAnchor='start'
               style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
               onClick={() => handleNodeClick(node.id)}
+              onMouseEnter={() => {}}
               data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
               data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
             >
@@ -248,6 +252,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
             <Text
               style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
               onClick={() => handleNodeClick(node.id)}
+              onMouseEnter={() => {}}
               data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
               data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
               x={node.x0! + textPositionHorizontal}
@@ -270,6 +275,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               textAnchor='start'
               style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
               onClick={() => handleNodeClick(node.id)}
+              onMouseEnter={() => {}}
               data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
               data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
             >

package/src/components/ScatterPlot/ScatterPlot.jsx

@@ -1,7 +1,9 @@
-import React, { useContext } from 'react'
+import React, { useContext, useState } from 'react'
 import ConfigContext from '../../ConfigContext'
 import { Group } from '@visx/group'
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 const ScatterPlot = ({ xScale, yScale }) => {
   const {
@@ -10,12 +12,17 @@ const ScatterPlot = ({ xScale, yScale }) => {
     tableData,
     formatNumber,
     seriesHighlight,
-    colorPalettes
+    colorPalettes,
+    colorScale,
+    interactionLabel
   } = useContext(ConfigContext)
 
   // TODO: copied from line chart should probably be a constant somewhere.
   const circleRadii = 4.5
   const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
+
+  // Track current hover for analytics
+  const [currentHover, setCurrentHover] = useState({ dataIndex: null, seriesKey: null })
   // tooltips for additional columns
   const additionalColumns = Object.entries(config.columns)
     .filter(([_, value]) => value.tooltips)
@@ -52,14 +59,14 @@ const ScatterPlot = ({ xScale, yScale }) => {
         return config.runtime.seriesKeys.map((s, index) => {
           const transparentArea = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(s) === -1
           const displayArea = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(s) !== -1
-          const seriesColor = config?.customColors ? config.customColors[index] : config.palette ? colorPalettes[config.palette][index] : '#000'
+          const seriesColor = config?.general?.palette?.customColors ? config.general.palette.customColors[index] : colorScale(config.runtime.seriesLabels?.[s] || s)
 
           let pointStyles = {
             filter: 'unset',
             opacity: 1,
             stroke: displayArea ? 'black' : ''
           }
-          if (item[s]==='') {
+          if (item[s] === '') {
             return <> </>
           }
 
@@ -77,6 +84,27 @@ const ScatterPlot = ({ xScale, yScale }) => {
               data-tooltip-html={handleTooltip(item, s, dataIndex)}
               data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
               tabIndex={-1}
+              onMouseEnter={() => {
+                // Track hover analytics event if this is a new hover
+                if ((currentHover.dataIndex !== dataIndex || currentHover.seriesKey !== s)) {
+                  const seriesName = config.runtime.seriesLabels?.[s] || s
+                  const safeSeriesName = String(seriesName).replace(/[^a-zA-Z0-9]/g, '_')
+                  const xAxisValue = item[config.xAxis.dataKey]
+                  const yAxisValue = item[s]
+
+                  publishAnalyticsEvent({
+                    vizType: config?.type,
+                    vizSubType: getVizSubType(config),
+                    eventType: `chart_hover`,
+                    eventAction: 'hover',
+                    eventLabel: interactionLabel || 'unknown',
+                    vizTitle: getVizTitle(config),
+                    series: seriesName,
+                    specifics: `series: ${String(safeSeriesName).toLowerCase()}, ${config.xAxis.dataKey}: ${xAxisValue}, ${s}: ${yAxisValue}`
+                  })
+                  setCurrentHover({ dataIndex, seriesKey: s })
+                }
+              }}
             />
           )
         })