@cdc/chart 4.25.3-6 → 4.25.5-1

package/{examples/private/line-issue.json → src/_stories/_mock/legend_groupBy_mock.json}

@@ -5,8 +5,8 @@
   "chartMessage": {
     "noData": "No Data Available"
   },
-  "title": "",
-  "showTitle": false,
+  "title": "Legend Group in Bar Chart",
+  "showTitle": true,
   "showDownloadMediaButton": false,
   "theme": "theme-blue",
   "animate": false,
@@ -127,8 +127,8 @@
     "dataKey": "Year",
     "label": "Year",
     "manual": true,
-    "axisBBox": 52.939998626708984,
-    "tickWidthMax": 41
+    "axisBBox": 62.779998779296875,
+    "tickWidthMax": 39
   },
   "table": {
     "label": "Data Table",
@@ -172,12 +172,16 @@
     "seriesHighlight": [],
     "style": "boxes",
     "subStyle": "linear blocks",
+    "groupBy": "group",
+    "shape": "circle",
     "tickRotation": "",
     "hideBorder": {
       "side": false,
-      "topBottom": true
+      "topBottom": false
     },
-    "position": "top"
+    "position": "bottom",
+    "subGroup": "group",
+    "labelAlignment": "left"
   },
   "brush": {
     "height": 25,
@@ -210,7 +214,9 @@
     "accent": true,
     "background": true,
     "verticalHoverLine": false,
-    "horizontalHoverLine": false
+    "horizontalHoverLine": false,
+    "lineDatapointSymbol": "none",
+    "maximumShapeAmount": 7
   },
   "useLogScale": false,
   "filterBehavior": "Filter Change",
@@ -354,7 +360,7 @@
     "_owner": null
   },
   "content": "Present one or more data trends over time.",
-  "visualizationType": "Line",
+  "visualizationType": "Bar",
   "datasets": {},
   "activeVizButtonID": 4,
   "data": [
@@ -362,136 +368,107 @@
       "Year": "2007",
       "American Indian/Alaska Native": "1.4",
       "Asian/Pacific Islander": "0.9",
-      "Black, non-Hispanic": "2.3",
-      "White, non-Hispanic": "1",
-      "Hispanic": "1"
+      "group": "Main Group"
     },
     {
       "Year": "2008",
       "American Indian/Alaska Native": "1.8",
       "Asian/Pacific Islander": "0.8",
-      "Black, non-Hispanic": "2.2",
-      "White, non-Hispanic": "0.9",
-      "Hispanic": "0.8"
+      "group": "Main Group"
     },
     {
       "Year": "2009",
       "American Indian/Alaska Native": "1",
       "Asian/Pacific Islander": "0.7",
-      "Black, non-Hispanic": "1.7",
-      "White, non-Hispanic": "0.8",
-      "Hispanic": "0.7"
+      "group": "Main Group"
     },
     {
       "Year": "2010",
       "American Indian/Alaska Native": "1.1",
       "Asian/Pacific Islander": "0.6",
-      "Black, non-Hispanic": "1.7",
-      "White, non-Hispanic": "0.8",
-      "Hispanic": "0.6"
+      "group": "Main Group"
     },
     {
       "Year": "2011",
-      "American Indian/Alaska Native": "0.5",
-      "Asian/Pacific Islander": "0.4",
       "Black, non-Hispanic": "1.4",
       "White, non-Hispanic": "0.8",
-      "Hispanic": "0.4"
+      "group": "Second Group"
     },
     {
       "Year": "2012",
-      "American Indian/Alaska Native": "0.7",
-      "Asian/Pacific Islander": "0.4",
       "Black, non-Hispanic": "1.1",
       "White, non-Hispanic": "0.8",
-      "Hispanic": "0.4"
+      "group": "Second Group"
     },
     {
       "Year": "2013",
-      "American Indian/Alaska Native": "0.7",
-      "Asian/Pacific Islander": "0.3",
-      "Black, non-Hispanic": "0.9",
       "White, non-Hispanic": "0.9",
-      "Hispanic": "0.4"
+      "group": "Second Group"
     },
     {
       "Year": "2014",
-      "American Indian/Alaska Native": "0.8",
-      "Asian/Pacific Islander": "0.3",
-      "Black, non-Hispanic": "0.8",
       "White, non-Hispanic": "0.9",
-      "Hispanic": "0.3"
+      "group": "Second Group"
     },
     {
       "Year": "2015",
       "American Indian/Alaska Native": "0.7",
-      "Asian/Pacific Islander": "0.4",
-      "Black, non-Hispanic": "1",
-      "White, non-Hispanic": "1.1",
-      "Hispanic": "0.3"
+      "Hispanic": "0.3",
+      "group": "Third Group"
     },
     {
       "Year": "2016",
       "American Indian/Alaska Native": "0.5",
-      "Asian/Pacific Islander": "0.3",
-      "Black, non-Hispanic": "0.9",
-      "White, non-Hispanic": "1",
-      "Hispanic": "0.3"
+      "Hispanic": "0.3",
+      "group": "Third Group"
     },
     {
       "Year": "2017",
       "American Indian/Alaska Native": "0.7",
-      "Asian/Pacific Islander": "0.3",
-      "Black, non-Hispanic": "1",
-      "White, non-Hispanic": "1.1",
-      "Hispanic": "0.3"
+      "Hispanic": "0.3",
+      "group": "Third Group"
     },
     {
       "Year": "2018",
       "American Indian/Alaska Native": "0.9",
-      "Asian/Pacific Islander": "0.3",
-      "Black, non-Hispanic": "1",
-      "White, non-Hispanic": "1",
-      "Hispanic": "0.4"
+      "Hispanic": "0.4",
+      "group": "Third Group"
     },
     {
       "Year": "2019",
       "American Indian/Alaska Native": "0.6",
-      "Asian/Pacific Islander": "0.3",
-      "Black, non-Hispanic": "0.9",
-      "White, non-Hispanic": "1",
-      "Hispanic": "0.4"
+      "Hispanic": "0.4",
+      "group": "Third Group"
     },
     {
       "Year": "2020",
       "American Indian/Alaska Native": "0.4",
-      "Asian/Pacific Islander": "0.2",
-      "Black, non-Hispanic": "0.7",
-      "White, non-Hispanic": "0.7",
-      "Hispanic": "0.3"
+      "Hispanic": "0.3",
+      "group": "Third Group"
     },
     {
       "Year": "2021",
       "American Indian/Alaska Native": "0.4",
-      "Asian/Pacific Islander": "0.2",
-      "Black, non-Hispanic": "0.9",
-      "White, non-Hispanic": "0.6",
-      "Hispanic": "0.4"
+      "Hispanic": "0.4",
+      "group": "Third Group"
     },
     {
       "Year": "2022",
       "American Indian/Alaska Native": "0.4",
-      "Asian/Pacific Islander": "0.3",
       "Black, non-Hispanic": "1",
-      "White, non-Hispanic": "0.6",
-      "Hispanic": "0.4"
+      "group": "Fourth Group"
     }
   ],
   "dataFileName": "chart_data 2-6.csv",
   "dataFileSourceType": "file",
   "dataDescription": {
-    "horizontal": true
+    "horizontal": false,
+    "series": false
   },
-  "version": "4.24.10",
-  "dynamicMarginTop": 0
-}
+  "version": "4.25.1",
+  "dynamicMarginTop": 0,
+  "filters": [],
+  "migrations": {
+    "addColorMigration": true
+  }
+}

package/src/components/Annotations/components/AnnotationDropdown.tsx

@@ -3,13 +3,13 @@ import ConfigContext from '../../../ConfigContext'
 import './AnnotationDropdown.styles.css'
 import Icon from '@cdc/core/components/ui/Icon'
 import Annotation from '..'
-import { appFontSize } from '@cdc/core/helpers/cove/fontSettings'
+import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
 
 const AnnotationDropdown = () => {
   const { currentViewport: viewport, config } = useContext(ConfigContext)
   const [expanded, setExpanded] = useState(false)
 
-  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${appFontSize}px`
+  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${APP_FONT_SIZE}px`
 
   const {
     config: { annotations }

package/src/components/AreaChart/components/AreaChart.jsx

@@ -14,13 +14,28 @@ import { bisector } from 'd3-array'
 const AreaChart = props => {
   const { xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff, isDebug, children } = props
   // import data from context
-  let { transformedData, config, handleLineType, parseDate, formatDate, formatNumber, seriesHighlight, colorScale, rawData, brushConfig } = useContext(ConfigContext)
+  let {
+    transformedData,
+    config,
+    handleLineType,
+    parseDate,
+    formatDate,
+    formatNumber,
+    seriesHighlight,
+    colorScale,
+    rawData,
+    brushConfig
+  } = useContext(ConfigContext)
   const data = config.brush?.active && brushConfig.data?.length ? brushConfig.data : transformedData
 
   if (!data) return
 
   const handleX = d => {
-    return (isDateScale(config.xAxis) ? xScale(parseDate(d[config.xAxis.dataKey], false)) : xScale(d[config.xAxis.dataKey])) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
+    return (
+      (isDateScale(config.xAxis)
+        ? xScale(parseDate(d[config.xAxis.dataKey], false))
+        : xScale(d[config.xAxis.dataKey])) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
+    )
   }
 
   const handleY = (d, index, s = undefined) => {
@@ -41,8 +56,14 @@ const AreaChart = props => {
               })
 
               let curveType = allCurves[s.lineType]
-              let transparentArea = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(s.dataKey) === -1
-              let displayArea = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(s.dataKey) !== -1
+              let transparentArea =
+                config.legend.behavior === 'highlight' &&
+                seriesHighlight.length > 0 &&
+                seriesHighlight.indexOf(s.dataKey) === -1
+              let displayArea =
+                config.legend.behavior === 'highlight' ||
+                seriesHighlight.length === 0 ||
+                seriesHighlight.indexOf(s.dataKey) !== -1
 
               return (
                 <React.Fragment key={index}>
@@ -74,7 +95,14 @@ const AreaChart = props => {
                 </React.Fragment>
               )
             })}
-            <Bar width={Number(xMax)} height={Number(yMax)} fill={'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, rawData)} onMouseLeave={handleTooltipMouseOff} />
+            <Bar
+              width={Number(xMax)}
+              height={Number(yMax)}
+              fill={'transparent'}
+              fillOpacity={0.05}
+              onMouseMove={e => handleTooltipMouseOver(e, rawData)}
+              onMouseLeave={handleTooltipMouseOff}
+            />
           </Group>
         </ErrorBoundary>
       </svg>

package/src/components/Axis/Categorical.Axis.tsx

@@ -7,7 +7,7 @@ import ConfigContext from '../../ConfigContext'
 import chroma from 'chroma-js'
 import createBarElement from '@cdc/core/components/createBarElement'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
-import { appFontSize } from '@cdc/core/helpers/cove/fontSettings'
+import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
 
 const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
   const { config } = useContext(ConfigContext)
@@ -94,7 +94,7 @@ const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
           barStacks.map(barStack =>
             barStack.bars.map(bar => {
               const isLastIndex = config.yAxis.categories.length - 1 === barStack.index
-              const textSize = appFontSize / 1.3
+              const textSize = APP_FONT_SIZE / 1.3
               const textColor = chroma(bar.color).luminance() < 0.4 ? '#fff' : '#000'
               const textWidth = getTextWidth(bar.key, `${textSize}px`)
               const displayText = Number(textWidth) < bar.width && bar.height > textSize

package/src/components/BarChart/components/BarChart.Horizontal.tsx

@@ -2,7 +2,6 @@ import React, { useContext } from 'react'
 
 // Local context and hooks
 import ConfigContext from '../../../ConfigContext'
-import { useBarChart } from '../../../hooks/useBarChart'
 import { useHighlightedBars } from '../../../hooks/useHighlightedBars'
 
 // VisX library imports
@@ -12,9 +11,11 @@ import { BarGroup } from '@visx/shape'
 
 // CDC core components and helpers
 import { getColorContrast, getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import createBarElement from '@cdc/core/components/createBarElement'
 import { getBarConfig, testZeroValue } from '../helpers'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+import isNumber from '@cdc/core/helpers/isNumber'
 
 // Third party libraries
 import chroma from 'chroma-js'
@@ -24,29 +25,16 @@ import BarChartContext, { BarChartContextValues } from './context'
 import { ChartContext } from '../../../types/ChartContext'
 import _ from 'lodash'
 import { getBarData } from '../helpers/getBarData'
+import { getHorizontalBarHeights } from '../helpers/getBarHeights'
 
 export const BarChartHorizontal = () => {
-  const { xScale, yScale, yMax, seriesScale } = useContext<BarChartContextValues>(BarChartContext)
-  const {
-    transformedData: data,
-    tableData,
-    colorScale,
-    seriesHighlight,
-    config,
-    formatNumber,
-    formatDate,
-    parseDate,
-    setSharedFilter,
-    isNumber
-  } = useContext<ChartContext>(ConfigContext)
+  const { xScale, yScale, yMax, seriesScale, barChart } = useContext<BarChartContextValues>(BarChartContext)
   const {
     isHorizontal,
     barBorderWidth,
-    updateBars,
     assignColorsToValues,
     section,
     isLabelBelowBar,
-    displayNumbersOnBar,
     lollipopBarWidth,
     lollipopShapeSize,
     getHighlightedBarColorByValue,
@@ -55,18 +43,30 @@ export const BarChartHorizontal = () => {
     hoveredBar,
     onMouseLeaveBar,
     onMouseOverBar
-  } = useBarChart()
+  } = barChart
+
+  const {
+    transformedData: data,
+    tableData,
+    colorScale,
+    seriesHighlight,
+    config,
+    formatNumber,
+    formatDate,
+    parseDate,
+    setSharedFilter
+  } = useContext<ChartContext>(ConfigContext)
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
-  const hasConfidenceInterval = Object.keys(config.confidenceKeys).length > 0
+  const hasConfidenceInterval =
+    config.confidenceKeys.upper &&
+    config.confidenceKeys.lower &&
+    config.confidenceKeys.upper !== '' &&
+    config.confidenceKeys.lower !== ''
 
   const _data = getBarData(config, data, hasConfidenceInterval)
 
-  const root = document.documentElement
-
-  const coolGray90 = getComputedStyle(root).getPropertyValue('--cool-gray-90')
-
   return (
     config.visualizationSubType !== 'stacked' &&
     config.visualizationType === 'Bar' &&
@@ -85,7 +85,7 @@ export const BarChartHorizontal = () => {
           }}
         >
           {barGroups => {
-            return updateBars(barGroups).map((barGroup, index) => (
+            return getHorizontalBarHeights(config, barGroups).map((barGroup, index) => (
               <Group
                 className={`bar-group-${barGroup.index}-${barGroup.x0}--${index} ${config.orientation}`}
                 key={`bar-group-${barGroup.index}-${barGroup.x0}--${index}`}
@@ -120,19 +120,19 @@ export const BarChartHorizontal = () => {
                   const defaultBarWidth = Math.abs(xScale(bar.value) - xScale(scaleVal))
                   const isPositiveBar = bar.value >= 0 && isNumber(bar.value)
 
-                  const {
-                    barWidthHorizontal: barWidth,
-                    isSuppressed,
-                    getAbsentDataLabel
-                  } = getBarConfig({ bar, defaultBarWidth, config, isNumber, isVertical: false })
                   const barX = bar.value < 0 ? Math.abs(xScale(bar.value)) : xScale(scaleVal)
                   const yAxisValue = formatNumber(bar.value, 'left')
                   const xAxisValue =
                     config.runtime[section].type === 'date' ? formatDate(parseDate(dataValue)) : dataValue
+                  const {
+                    barWidthHorizontal: barWidth,
+                    isSuppressed,
+                    absentDataLabel
+                  } = getBarConfig({ bar, defaultBarWidth, config, isVertical: false, yAxisValue, barWidth: 0 })
 
                   const barPosition = !isPositiveBar ? 'below' : 'above'
-                  const absentDataLabel = getAbsentDataLabel(yAxisValue)
-                  const barDefaultLabel = !config.yAxis.displayNumbersOnBar ? '' : yAxisValue
+
+                  const barDefaultLabel = !config.yAxis.displayNumbersOnBar || absentDataLabel ? '' : yAxisValue
 
                   // check if bar text/value string fits into  each bars.
                   const textWidth = getTextWidth(barDefaultLabel)
@@ -159,7 +159,7 @@ export const BarChartHorizontal = () => {
                   let yAxisTooltip = config.runtime.yAxis.label
                     ? `${config.runtime.yAxis.label}: ${xAxisValue}`
                     : xAxisValue
-                  const additionalColTooltip = getAdditionalColumn(hoveredBar)
+                  const additionalColTooltip = getAdditionalColumn(bar.key, hoveredBar)
                   const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
                   const tooltip = `<ul>
                   <li class="tooltip-heading"">${yAxisTooltip}</li>
@@ -192,15 +192,20 @@ export const BarChartHorizontal = () => {
                     ? highlightedBar.borderWidth
                     : config.isLollipopChart
                     ? 0
-                    : config.barHasBorder === 'true'
+                    : config.barHasBorder === 'true' && !absentDataLabel && !isSuppressed
                     ? barBorderWidth
                     : 0
                   const displaylollipopShape = testZeroValue(bar.value) ? 'none' : 'block'
+                  const hideGroup =
+                    (!isNumber(bar.value) && !config.general.showMissingDataLabel) ||
+                    (String(bar.value) === '0' && !config.general.showZeroValueData)
+                      ? 'none'
+                      : 'block' // hide bar group if no value or zero value
 
                   // update label color
                   if (barColor && labelColor && textFits) {
-                    labelColor = getContrastColor('#000', barColor)
-                    let constrast = getColorContrast('#000', barColor)
+                    labelColor = getContrastColor(APP_FONT_COLOR, barColor)
+                    let constrast = getColorContrast(APP_FONT_COLOR, barColor)
                     const contrastLevel = 7
                     if (constrast < contrastLevel) {
                       labelColor = '#fff'
@@ -227,10 +232,11 @@ export const BarChartHorizontal = () => {
                     const d = datum[config.confidenceKeys[position]]
                     return xScale(d)
                   })
-                  // End Confidence Interval Variables
+                  const labelX = bar.y
+                  const overlapWithCI = hasConfidenceInterval && labelX >= lowerPos && labelX <= upperPos
 
                   return (
-                    <Group key={`${barGroup.index}--${index}`}>
+                    <Group display={hideGroup} key={`${barGroup.index}--${index}`}>
                       <Group key={`bar-sub-group-${barGroup.index}-${barGroup.x0}-${barY}--${index}`}>
                         {createBarElement({
                           config: config,
@@ -244,7 +250,7 @@ export const BarChartHorizontal = () => {
                           height: numbericBarHeight,
                           x: barX,
                           y: barHeight * bar.index,
-                          onMouseOver: () => onMouseOverBar(xAxisValue, bar.key),
+                          onMouseOver: e => onMouseOverBar(xAxisValue, bar.key, e, data),
                           onMouseLeave: onMouseLeaveBar,
                           tooltipHtml: tooltip,
                           tooltipId: `cdc-open-viz-tooltip-${config.runtime.uniqueId}`,
@@ -305,8 +311,12 @@ export const BarChartHorizontal = () => {
                             display={displayBar ? 'block' : 'none'}
                             x={bar.y}
                             opacity={transparentBar ? 0.5 : 1}
-                            y={config.barHeight / 2 + config.barHeight * bar.index}
-                            fill={labelColor}
+                            y={
+                              hasConfidenceInterval && overlapWithCI
+                                ? config.barHeight * bar.index
+                                : config.barHeight / 2 + config.barHeight * bar.index
+                            }
+                            fill={hasConfidenceInterval && overlapWithCI ? '#000' : labelColor}
                             dx={textPadding}
                             verticalAnchor='middle'
                             textAnchor={textAnchor}
@@ -387,10 +397,10 @@ export const BarChartHorizontal = () => {
                             <animate attributeName='height' values={`0, ${lollipopShapeSize}`} dur='2.5s' />
                           </rect>
                         )}
-                        {hasConfidenceInterval && (
+                        {hasConfidenceInterval && displayBar && (
                           <path
                             key={`confidence-interval-h-${yPos}-${datum[config.runtime.originalXAxis.dataKey]}`}
-                            stroke={coolGray90}
+                            stroke={APP_FONT_COLOR}
                             strokeWidth='px'
                             d={`
                                 M${lowerPos} ${yPos - tickWidth}

package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react'
 import ConfigContext from '../../../ConfigContext'
-import { useBarChart } from '../../../hooks/useBarChart'
 import { BarStackHorizontal } from '@visx/shape'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
 import { getColorContrast, getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
 // types
@@ -12,9 +12,10 @@ import BarChartContext, { type BarChartContextValues } from './context'
 import { type ChartContext } from '../../../types/ChartContext'
 
 import createBarElement from '@cdc/core/components/createBarElement'
+import { getHorizontalBarHeights } from '../helpers/getBarHeights'
 
 const BarChartStackedHorizontal = () => {
-  const { yMax, yScale, xScale } = useContext<BarChartContextValues>(BarChartContext)
+  const { yMax, yScale, xScale, barChart } = useContext<BarChartContextValues>(BarChartContext)
 
   // prettier-ignore
   const {
@@ -29,8 +30,17 @@ const BarChartStackedHorizontal = () => {
     transformedData: data
   } = useContext<ChartContext>(ConfigContext)
 
-  // prettier-ignore
-  const { barBorderWidth, displayNumbersOnBar, getAdditionalColumn, hoveredBar, isHorizontal, isLabelBelowBar, onMouseLeaveBar, onMouseOverBar, updateBars, barStackedSeriesKeys } = useBarChart()
+  const {
+    barBorderWidth,
+    displayNumbersOnBar,
+    getAdditionalColumn,
+    hoveredBar,
+    isHorizontal,
+    isLabelBelowBar,
+    onMouseLeaveBar,
+    onMouseOverBar,
+    barStackedSeriesKeys
+  } = barChart
 
   const { orientation, visualizationSubType } = config
   return (
@@ -49,7 +59,7 @@ const BarChartStackedHorizontal = () => {
         >
           {barStacks =>
             barStacks.map(barStack =>
-              updateBars(barStack.bars).map((bar, index) => {
+              getHorizontalBarHeights(config, barStack.bars).map((bar, index) => {
                 const transparentBar =
                   config.legend.behavior === 'highlight' &&
                   seriesHighlight.length > 0 &&
@@ -60,8 +70,8 @@ const BarChartStackedHorizontal = () => {
                   seriesHighlight.indexOf(bar.key) !== -1
                 config.barHeight = Number(config.barHeight)
                 let barColor = colorScale(config.runtime.seriesLabels[bar.key])
-                let labelColor = getContrastColor('#000', barColor)
-                let constrast = getColorContrast('#000', barColor)
+                let labelColor = getContrastColor(APP_FONT_COLOR, barColor)
+                let constrast = getColorContrast(APP_FONT_COLOR, barColor)
                 const contrastLevel = 7
                 if (constrast < contrastLevel) {
                   labelColor = '#fff'
@@ -76,7 +86,7 @@ const BarChartStackedHorizontal = () => {
                   ? `${config.runtime.yAxis.label}: ${yAxisValue}`
                   : yAxisValue
                 const textWidth = getTextWidth(xAxisValue)
-                const additionalColTooltip = getAdditionalColumn(hoveredBar)
+                const additionalColTooltip = getAdditionalColumn(bar.key, hoveredBar)
                 const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${xAxisValue}`
                 const tooltip = `<ul>
                   <li class="tooltip-heading"">${yAxisTooltip}</li>
@@ -100,7 +110,7 @@ const BarChartStackedHorizontal = () => {
                         height: bar.height,
                         x: bar.x,
                         y: bar.y,
-                        onMouseOver: () => onMouseOverBar(yAxisValue, bar.key),
+                        onMouseOver: e => onMouseOverBar(yAxisValue, bar.key, e, data),
                         onMouseLeave: onMouseLeaveBar,
                         tooltipHtml: tooltip,
                         tooltipId: `cdc-open-viz-tooltip-${config.runtime.uniqueId}`,