@cdc/chart 4.25.3 → 4.25.5-1

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)
@@ -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'
@@ -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}`,

package/src/components/BarChart/components/BarChart.StackedVertical.tsx

@@ -1,6 +1,5 @@
 import React, { useContext, useState } from 'react'
 import ConfigContext from '../../../ConfigContext'
-import { useBarChart } from '../../../hooks/useBarChart'
 import { BarStack } from '@visx/shape'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
@@ -12,22 +11,34 @@ import createBarElement from '@cdc/core/components/createBarElement'
 
 const BarChartStackedVertical = () => {
   const [barWidth, setBarWidth] = useState(0)
-  const { xScale, yScale, seriesScale, xMax, yMax } = useContext(BarChartContext)
-  const { transformedData, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter } =
-    useContext(ConfigContext)
+  const { xScale, yScale, seriesScale, xMax, yMax, barChart } = useContext(BarChartContext)
   const {
     isHorizontal,
     barBorderWidth,
-    applyRadius,
     hoveredBar,
     getAdditionalColumn,
     onMouseLeaveBar,
     onMouseOverBar,
     barStackedSeriesKeys
-  } = useBarChart()
+  } = barChart
+  const {
+    transformedData,
+    colorScale,
+    seriesHighlight,
+    config,
+    formatNumber,
+    formatDate,
+    parseDate,
+    setSharedFilter,
+    brushConfig
+  } = useContext(ConfigContext)
+
   const { orientation } = config
 
-  const data = config.brush?.active && config.brush.data?.length ? config.brush.data : transformedData
+  let data = transformedData
+  if (brushConfig.data.length) {
+    data = brushConfig.data
+  }
   const isDateAxisType = config.runtime.xAxis.type === 'date-time' || config.runtime.xAxis.type === 'date'
   const isDateTimeScaleAxisType = config.runtime.xAxis.type === 'date-time'
 
@@ -98,7 +109,7 @@ const BarChartStackedVertical = () => {
                         height: bar.height,
                         x: barX,
                         y: bar.y,
-                        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}`,

package/src/components/BarChart/components/BarChart.Vertical.tsx

@@ -3,7 +3,6 @@ import React, { useContext, useState } from 'react'
 import ConfigContext from '../../../ConfigContext'
 import BarChartContext, { type BarChartContextValues } from './context'
 // Local hooks
-import { useBarChart } from '../../../hooks/useBarChart'
 import { useHighlightedBars } from '../../../hooks/useHighlightedBars'
 import { getBarConfig, testZeroValue } from '../helpers'
 // VisX library imports
@@ -16,6 +15,7 @@ import Regions from '../../Regions'
 import { isDateScale } from '@cdc/core/helpers/cove/date'
 import isNumber from '@cdc/core/helpers/isNumber'
 import createBarElement from '@cdc/core/components/createBarElement'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 // Third party libraries
 import chroma from 'chroma-js'
 // Types
@@ -24,14 +24,9 @@ import _ from 'lodash'
 import { getBarData } from '../helpers/getBarData'
 
 export const BarChartVertical = () => {
-  const { xScale, yScale, xMax, yMax, seriesScale, convertLineToBarGraph } =
+  const { xScale, yScale, xMax, yMax, seriesScale, convertLineToBarGraph, barChart } =
     useContext<BarChartContextValues>(BarChartContext)
-
-  const [barWidth, setBarWidth] = useState(0)
-  const [totalBarsInGroup, setTotalBarsInGroup] = useState(0)
-  // prettier-ignore
   const {
-    // prettier-ignore
     assignColorsToValues,
     barBorderWidth,
     getAdditionalColumn,
@@ -42,17 +37,29 @@ export const BarChartVertical = () => {
     onMouseLeaveBar,
     onMouseOverBar,
     section
-  } = useBarChart()
+  } = barChart
+
+  const [barWidth, setBarWidth] = useState(0)
+  const [totalBarsInGroup, setTotalBarsInGroup] = useState(0)
 
-  // prettier-ignore
-  const { colorScale, config, dashboardConfig, tableData, formatDate, formatNumber, parseDate, seriesHighlight, setSharedFilter, transformedData, brushConfig } = useContext<ChartContext>(ConfigContext)
+  const {
+    colorScale,
+    config,
+    dashboardConfig,
+    tableData,
+    formatDate,
+    formatNumber,
+    parseDate,
+    seriesHighlight,
+    setSharedFilter,
+    transformedData,
+    brushConfig
+  } = useContext<ChartContext>(ConfigContext)
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
   const root = document.documentElement
 
-  const coolGray90 = getComputedStyle(root).getPropertyValue('--cool-gray-90')
-
   let data = transformedData
   // check if user add suppression
   const isSuppressionActive = config.preliminaryData.some(pd => pd.value && pd.type === 'suppression')
@@ -65,7 +72,11 @@ export const BarChartVertical = () => {
     data = brushConfig.data
   }
 
-  const hasConfidenceInterval = _.every(config.confidenceKeys, key => key !== '')
+  const hasConfidenceInterval =
+    config.confidenceKeys.upper &&
+    config.confidenceKeys.lower &&
+    config.confidenceKeys.upper !== '' &&
+    config.confidenceKeys.lower !== ''
 
   const _data = getBarData(config, data, hasConfidenceInterval)
   return (
@@ -144,7 +155,14 @@ export const BarChartVertical = () => {
                   <li class="tooltip-body ">${tooltipBody}</li>
                   ${additionalColTooltip ? '<li class="tooltip-body ">' + additionalColTooltip + '</li>' : ''}
                     </li></ul>`
-
+                  const { barHeight, isSuppressed, getBarY, absentDataLabel } = getBarConfig({
+                    bar,
+                    defaultBarHeight,
+                    config,
+                    barWidth,
+                    isVertical: true,
+                    yAxisValue
+                  })
                   // configure colors
                   let labelColor = '#000000'
                   labelColor = HighLightedBarUtils.checkFontColor(yAxisValue, highlightedBarValues, labelColor) // Set if background is transparent'
@@ -153,6 +171,12 @@ export const BarChartVertical = () => {
                   const isHighlightedBar = highlightedBarValues?.includes(xAxisValue)
                   const highlightedBarColor = getHighlightedBarColorByValue(xAxisValue)
                   const highlightedBar = getHighlightedBarByValue(xAxisValue)
+                  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
+
                   const borderColor = isHighlightedBar
                     ? highlightedBarColor
                     : config.barHasBorder === 'true'
@@ -162,20 +186,11 @@ export const BarChartVertical = () => {
                     ? highlightedBar.borderWidth
                     : config.isLollipopChart
                     ? 0
-                    : config.barHasBorder === 'true'
+                    : config.barHasBorder === 'true' && !absentDataLabel && !isSuppressed
                     ? barBorderWidth
                     : 0
 
-                  const { barHeight, isSuppressed, getBarY, getAbsentDataLabel } = getBarConfig({
-                    bar,
-                    defaultBarHeight,
-                    config,
-                    barWidth,
-                    isVertical: true
-                  })
-
-                  const absentDataLabel = getAbsentDataLabel(yAxisValue)
-                  const barDefaultLabel = isSuppressed || !config.labels ? '' : yAxisValue
+                  const barDefaultLabel = isSuppressed || absentDataLabel || !config.labels ? '' : yAxisValue
                   const barY = getBarY(defaultBarY, yScale(scaleVal))
                   const displaylollipopShape = testZeroValue(bar.value) ? 'none' : 'block'
                   const getBarBackgroundColor = (barColor: string, filteredOutColor?: string): string => {
@@ -242,8 +257,10 @@ export const BarChartVertical = () => {
                   )
                   // End Confidence Interval Variables
 
+                  const BAR_LABEL_PADDING = 10
+
                   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,
@@ -257,7 +274,7 @@ export const BarChartVertical = () => {
                           height: barHeight,
                           x: barX,
                           y: barY,
-                          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}`,
@@ -323,7 +340,7 @@ export const BarChartVertical = () => {
                           display={displayBar ? 'block' : 'none'}
                           opacity={transparentBar ? 0.5 : 1}
                           x={hasConfidenceInterval ? barX + barWidth : barX + barWidth / 2}
-                          y={barY - 5}
+                          y={barY - BAR_LABEL_PADDING}
                           fill={labelColor}
                           textAnchor='middle'
                         >
@@ -333,7 +350,7 @@ export const BarChartVertical = () => {
                           display={displayBar ? 'block' : 'none'}
                           opacity={transparentBar ? 0.5 : 1}
                           x={barX + barWidth / 2}
-                          y={barY - 5}
+                          y={barY - BAR_LABEL_PADDING}
                           fill={labelColor}
                           textAnchor='middle'
                           fontSize={config.isLollipopChart ? null : barWidth / 2}
@@ -373,7 +390,7 @@ export const BarChartVertical = () => {
                         {hasConfidenceInterval && bar.value !== undefined && datum && (
                           <path
                             key={`confidence-interval-v-${datum[config.runtime.originalXAxis.dataKey]}`}
-                            stroke={coolGray90}
+                            stroke={APP_FONT_COLOR}
                             strokeWidth='px'
                             d={`M${xPos - tickWidth} ${upperPos}
                                 L${xPos + tickWidth} ${upperPos}

package/src/components/BarChart/components/{BarChart.jsx → BarChart.tsx}

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { MouseEventHandler, useContext, useState } from 'react'
 
 // visx
 import { Group } from '@visx/group'
@@ -9,8 +9,21 @@ import BarChartType from './BarChartType'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import ConfigContext from '../../../ConfigContext'
 import BarChartContext from './context'
+import { useBarChart } from '../helpers/useBarChart'
+import { PositionScale } from '@visx/shape/lib/types'
 
-const BarChart = ({
+type BarChartProps = {
+  xScale: PositionScale
+  yScale: PositionScale
+  seriesScale: PositionScale
+  xMax: number
+  yMax: number
+  handleTooltipMouseOver: MouseEventHandler<SVGRectElement>
+  handleTooltipMouseOff: MouseEventHandler<SVGRectElement>
+  handleTooltipClick: MouseEventHandler<SVGRectElement>
+}
+
+const BarChart: React.FC<BarChartProps> = ({
   xScale,
   yScale,
   seriesScale,
@@ -20,7 +33,9 @@ const BarChart = ({
   handleTooltipMouseOff,
   handleTooltipClick
 }) => {
-  const { transformedData: data, config, convertLineToBarGraph } = useContext(ConfigContext)
+  const configContext = useContext(ConfigContext)
+  const { transformedData: data, config, convertLineToBarGraph } = configContext
+  const barChart = useBarChart(handleTooltipMouseOver, handleTooltipMouseOff, configContext)
 
   const contextValues = {
     xScale,
@@ -28,7 +43,8 @@ const BarChart = ({
     xMax,
     yMax,
     seriesScale,
-    convertLineToBarGraph
+    convertLineToBarGraph,
+    barChart
   }
 
   return (
@@ -46,7 +62,9 @@ const BarChart = ({
             height={Number(yMax)}
             fill={'transparent'}
             fillOpacity={0.05}
-            onMouseMove={e => handleTooltipMouseOver(e, data)}
+            onMouseMove={e => {
+              handleTooltipMouseOver(e, data)
+            }}
             onMouseOut={handleTooltipMouseOff}
             onClick={e => handleTooltipClick(e, data)}
           />

package/src/components/BarChart/components/context.tsx

@@ -1,3 +1,4 @@
+import { PositionScale } from '@visx/shape/lib/types'
 import { createContext } from 'react'
 
 const BarChartContext = createContext(null)
@@ -5,10 +6,27 @@ const BarChartContext = createContext(null)
 export type BarChartContextValues = {
   xMax: number
   yMax: number
-  xScale: Function
-  yScale: Function
+  xScale: PositionScale
+  yScale: PositionScale
   seriesScale: Function
   convertLineToBarGraph: boolean
+  barChart: {
+    assignColorsToValues: Function
+    barBorderWidth: number
+    getAdditionalColumn: Function
+    getHighlightedBarByValue: Function
+    getHighlightedBarColorByValue: Function
+    lollipopBarWidth: number
+    lollipopShapeSize: number
+    onMouseLeaveBar: Function
+    onMouseOverBar: Function
+    section: string
+    hoveredBar: string
+    isHorizontal: boolean
+    isLabelBelowBar: boolean
+    displayNumbersOnBar: boolean
+    barStackedSeriesKeys: string[]
+  }
 }
 
 export default BarChartContext

package/src/components/BarChart/helpers/getBarHeights.ts

@@ -0,0 +1,47 @@
+import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
+import _ from 'lodash'
+import { ChartConfig } from '../../../types/ChartConfig'
+
+export const getHorizontalBarHeights = <T>(config: Partial<ChartConfig>, bars: (T & { index })[]) => {
+  const isHorizontal = config.orientation === 'horizontal'
+
+  const isStacked = config.visualizationSubType === 'stacked'
+
+  let barHeight
+  if (!isStacked) {
+    const stackCount = config.runtime.seriesKeys.length
+    if (config.isLollipopChart) {
+      const lollipopSizes = {
+        large: 7,
+        medium: 6,
+        small: 5
+      }
+
+      const lollipopBarWidth = lollipopSizes[config.lollipopSize] || 5
+      barHeight = lollipopBarWidth * stackCount
+    } else {
+      barHeight = config.barHeight * stackCount
+    }
+  } else {
+    barHeight = config.barHeight
+  }
+
+  const labelHeight = APP_FONT_SIZE * 1.2
+  const labelSpace = config.yAxis.labelPlacement === 'Below Bar' ? labelHeight : 0
+
+  const totalBarHeight = barHeight + labelSpace + Number(config.barSpace)
+
+  if (isHorizontal) {
+    // calculate height of container based height, space and fontSize of labels
+    const totalHeight = bars.length * totalBarHeight
+    if (!config.heights) config.heights = {}
+    config.heights.horizontal = totalHeight
+  }
+
+  // return new updated bars/groupes
+  return bars.map((bar, i) => {
+    // set bars Y dynamically to handle space between bars
+    const y = bar.index === 0 ? 0 : _.round(totalBarHeight * i)
+    return { ...bar, y, height: barHeight }
+  })
+}