@cdc/chart 4.24.9 → 4.24.10

package/src/components/Annotations/components/AnnotationDraggable.tsx

@@ -32,11 +32,8 @@ const Annotations = ({ xScale, yScale, xScaleAnnotation, xMax, svgRef, onDragSta
   // prettier-ignore
   const {
     config,
-    currentViewport,
     dimensions,
-    isDraggingAnnotation,
     isEditor,
-    isLegendBottom,
     updateConfig
   } = useContext(ConfigContext)
 

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

@@ -30,7 +30,7 @@ const AnnotationDropdown = () => {
   }
 
   const handleSectionClasses = () => {
-    const classes = [`data-table-container`, viewport, `d-block`, `d-lg-none`]
+    const classes = [`data-table-container`, viewport, `d-block`, `d-lg-none`, `w-100`]
 
     if (config.general.showAnnotationDropdown) {
       classes.push('d-lg-block')

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

@@ -7,9 +7,10 @@ import ConfigContext from '../../ConfigContext'
 import chroma from 'chroma-js'
 import createBarElement from '@cdc/core/components/createBarElement'
 import { useBarChart } from '../../hooks/useBarChart'
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
 const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
-  const { config, getTextWidth } = useContext(ConfigContext)
+  const { config } = useContext(ConfigContext)
   const { fontSize } = useBarChart()
 
   const { orientation } = config
@@ -82,7 +83,14 @@ const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
   const keys = Object.keys(transformedData[0])
   return (
     <Group left={leftSize - xScale.bandwidth()} top={0}>
-      <BarStack data={transformedData} keys={keys} x={() => xScale(xScaleValue)} xScale={xScale} yScale={yScale} color={colorScale}>
+      <BarStack
+        data={transformedData}
+        keys={keys}
+        x={() => xScale(xScaleValue)}
+        xScale={xScale}
+        yScale={yScale}
+        color={colorScale}
+      >
         {barStacks =>
           barStacks.map(barStack =>
             barStack.bars.map(bar => {
@@ -96,7 +104,11 @@ const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
                     </li></ul>`
               return (
                 <Group key={`${barStack.index}--${bar.index}--${orientation}`}>
-                  <Group key={`bar-stack-${barStack.index}-${bar.index}`} id={`barStack${barStack.index}-${bar.index}`} className='stack vertical'>
+                  <Group
+                    key={`bar-stack-${barStack.index}-${bar.index}`}
+                    id={`barStack${barStack.index}-${bar.index}`}
+                    className='stack vertical'
+                  >
                     {createBarElement({
                       type: 'axisBar',
                       config: config,
@@ -126,7 +138,13 @@ const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
                       {bar.key}
                     </Text>
                     {/* gridLines */}
-                    {config.runtime.yAxis.gridLines && <Line from={{ x: bar.x + xScale.bandwidth(), y: bar.y }} to={{ x: xMax + xScale.bandwidth(), y: bar.y }} stroke='rgba(0,0,0,0.3)' />}
+                    {config.runtime.yAxis.gridLines && (
+                      <Line
+                        from={{ x: bar.x + xScale.bandwidth(), y: bar.y }}
+                        to={{ x: xMax + xScale.bandwidth(), y: bar.y }}
+                        stroke='#d6d6d6'
+                      />
+                    )}
                     {/* White background spacing between stackes */}
                     {!isLastIndex && <rect x={bar.x} y={bar.y} width={bar.width} height={1} fill={'#fff'}></rect>}
                     {/* Right side Axis line */}

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

@@ -14,6 +14,7 @@ import { BarGroup } from '@visx/shape'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 import createBarElement from '@cdc/core/components/createBarElement'
 import { getBarConfig, testZeroValue } from '../helpers'
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
 // Third party libraries
 import chroma from 'chroma-js'
@@ -24,9 +25,38 @@ import { ChartContext } from '../../../types/ChartContext'
 
 export const BarChartHorizontal = () => {
   const { xScale, yScale, yMax, seriesScale } = useContext<BarChartContextValues>(BarChartContext)
-  const { transformedData: data, tableData, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter, isNumber, getTextWidth, getYAxisData, getXAxisData } = useContext<ChartContext>(ConfigContext)
-  const { isHorizontal, barBorderWidth, updateBars, assignColorsToValues, section, fontSize, isLabelBelowBar, displayNumbersOnBar, lollipopBarWidth, lollipopShapeSize, getHighlightedBarColorByValue, getHighlightedBarByValue, getAdditionalColumn, hoveredBar, onMouseLeaveBar, onMouseOverBar } =
-    useBarChart()
+  const {
+    transformedData: data,
+    tableData,
+    colorScale,
+    seriesHighlight,
+    config,
+    formatNumber,
+    formatDate,
+    parseDate,
+    setSharedFilter,
+    isNumber,
+    getYAxisData,
+    getXAxisData
+  } = useContext<ChartContext>(ConfigContext)
+  const {
+    isHorizontal,
+    barBorderWidth,
+    updateBars,
+    assignColorsToValues,
+    section,
+    fontSize,
+    isLabelBelowBar,
+    displayNumbersOnBar,
+    lollipopBarWidth,
+    lollipopShapeSize,
+    getHighlightedBarColorByValue,
+    getHighlightedBarByValue,
+    getAdditionalColumn,
+    hoveredBar,
+    onMouseLeaveBar,
+    onMouseOverBar
+  } = useBarChart()
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
@@ -49,13 +79,29 @@ export const BarChartHorizontal = () => {
         >
           {barGroups => {
             return updateBars(barGroups).map((barGroup, index) => (
-              <Group className={`bar-group-${barGroup.index}-${barGroup.x0}--${index} ${config.orientation}`} key={`bar-group-${barGroup.index}-${barGroup.x0}--${index}`} id={`bar-group-${barGroup.index}-${barGroup.x0}--${index}`} top={barGroup.y}>
+              <Group
+                className={`bar-group-${barGroup.index}-${barGroup.x0}--${index} ${config.orientation}`}
+                key={`bar-group-${barGroup.index}-${barGroup.x0}--${index}`}
+                id={`bar-group-${barGroup.index}-${barGroup.x0}--${index}`}
+                top={barGroup.y}
+              >
                 {barGroup.bars.map((bar, index) => {
                   const scaleVal = config.yAxis.type === 'logarithmic' ? 0.1 : 0
-                  let highlightedBarValues = config.highlightedBarValues.map(item => item.value).filter(item => item !== ('' || undefined))
-                  highlightedBarValues = config.xAxis.type === 'date' ? HighLightedBarUtils.formatDates(highlightedBarValues) : highlightedBarValues
-                  let transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(bar.key) === -1
-                  let displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(bar.key) !== -1
+                  let highlightedBarValues = config.highlightedBarValues
+                    .map(item => item.value)
+                    .filter(item => item !== ('' || undefined))
+                  highlightedBarValues =
+                    config.xAxis.type === 'date'
+                      ? HighLightedBarUtils.formatDates(highlightedBarValues)
+                      : highlightedBarValues
+                  let transparentBar =
+                    config.legend.behavior === 'highlight' &&
+                    seriesHighlight.length > 0 &&
+                    seriesHighlight.indexOf(bar.key) === -1
+                  let displayBar =
+                    config.legend.behavior === 'highlight' ||
+                    seriesHighlight.length === 0 ||
+                    seriesHighlight.indexOf(bar.key) !== -1
                   let barHeight = config.barHeight
                   let numbericBarHeight = parseInt(!config.isLollipopChart ? barHeight : lollipopBarWidth)
                   if (isNaN(numbericBarHeight)) {
@@ -65,10 +111,17 @@ 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, getTextWidth, isVertical: false })
+                  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(data[barGroup.index][config.runtime.originalXAxis.dataKey])) : data[barGroup.index][config.runtime.originalXAxis.dataKey]
+                  const xAxisValue =
+                    config.runtime[section].type === 'date'
+                      ? formatDate(parseDate(data[barGroup.index][config.runtime.originalXAxis.dataKey]))
+                      : data[barGroup.index][config.runtime.originalXAxis.dataKey]
 
                   const barPosition = !isPositiveBar ? 'below' : 'above'
                   const absentDataLabel = getAbsentDataLabel(yAxisValue)
@@ -96,7 +149,9 @@ export const BarChartHorizontal = () => {
                   // create new Index for bars with negative values
                   const newIndex = bar.value < 0 ? -1 : index
 
-                  let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${xAxisValue}` : xAxisValue
+                  let yAxisTooltip = config.runtime.yAxis.label
+                    ? `${config.runtime.yAxis.label}: ${xAxisValue}`
+                    : xAxisValue
                   const additionalColTooltip = getAdditionalColumn(hoveredBar)
                   const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
                   const tooltip = `<ul>
@@ -108,15 +163,28 @@ export const BarChartHorizontal = () => {
                   // configure colors
                   let labelColor = '#000000'
                   labelColor = HighLightedBarUtils.checkFontColor(yAxisValue, highlightedBarValues, labelColor) // Set if background is transparent'
-                  let barColor = config.runtime.seriesLabels && config.runtime.seriesLabels[bar.key] ? colorScale(config.runtime.seriesLabels[bar.key]) : colorScale(bar.key)
+                  let barColor =
+                    config.runtime.seriesLabels && config.runtime.seriesLabels[bar.key]
+                      ? colorScale(config.runtime.seriesLabels[bar.key])
+                      : colorScale(bar.key)
                   barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor) // Color code by category
                   const isRegularLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'regular'
                   const isTwoToneLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'two-tone'
                   const isHighlightedBar = highlightedBarValues?.includes(xAxisValue)
                   const highlightedBarColor = getHighlightedBarColorByValue(xAxisValue)
                   const highlightedBar = getHighlightedBarByValue(xAxisValue)
-                  const borderColor = isHighlightedBar ? highlightedBarColor : config.barHasBorder === 'true' ? '#000' : 'transparent'
-                  const borderWidth = isHighlightedBar ? highlightedBar.borderWidth : config.isLollipopChart ? 0 : config.barHasBorder === 'true' ? barBorderWidth : 0
+                  const borderColor = isHighlightedBar
+                    ? highlightedBarColor
+                    : config.barHasBorder === 'true'
+                    ? '#000'
+                    : 'transparent'
+                  const borderWidth = isHighlightedBar
+                    ? highlightedBar.borderWidth
+                    : config.isLollipopChart
+                    ? 0
+                    : config.barHasBorder === 'true'
+                    ? barBorderWidth
+                    : 0
                   const displaylollipopShape = testZeroValue(bar.value) ? 'none' : 'block'
 
                   // update label color
@@ -176,7 +244,12 @@ export const BarChartHorizontal = () => {
 
                           const hasAsterisk = String(pd.symbol).includes('Asterisk')
                           const verticalAnchor = hasAsterisk ? 'middle' : 'end'
-                          const iconSize = pd.symbol === 'Asterisk' ? barHeight * 1.2 : pd.symbol === 'Double Asterisk' ? barHeight : barHeight / 1.5
+                          const iconSize =
+                            pd.symbol === 'Asterisk'
+                              ? barHeight * 1.2
+                              : pd.symbol === 'Double Asterisk'
+                              ? barHeight
+                              : barHeight / 1.5
                           const fillColor = pd.displayGray ? '#8b8b8a' : '#000'
                           return (
                             <Text // prettier-ignore
@@ -240,7 +313,13 @@ export const BarChartHorizontal = () => {
                           </Text>
                         )}
                         {isLabelBelowBar && !config.yAxis.hideLabel && (
-                          <Text x={config.yAxis.hideAxis ? 0 : 5} y={barGroup.height} dy={4} verticalAnchor={'start'} textAnchor={'start'}>
+                          <Text
+                            x={config.yAxis.hideAxis ? 0 : 5}
+                            y={barGroup.height}
+                            dy={4}
+                            verticalAnchor={'start'}
+                            textAnchor={'start'}
+                          >
                             {config.runtime.yAxis.type === 'date'
                               ? formatDate(parseDate(data[barGroup.index][config.runtime.originalXAxis.dataKey]))
                               : isHorizontal

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

@@ -5,6 +5,7 @@ import { BarStackHorizontal } from '@visx/shape'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
 // types
 import BarChartContext, { type BarChartContextValues } from './context'
@@ -22,7 +23,6 @@ const BarChartStackedHorizontal = () => {
     config,
     formatDate,
     formatNumber,
-    getTextWidth,
     parseDate,
     seriesHighlight,
     setSharedFilter,
@@ -37,18 +37,38 @@ const BarChartStackedHorizontal = () => {
     config.visualizationSubType === 'stacked' &&
     isHorizontal && (
       <>
-        <BarStackHorizontal data={data} keys={barStackedSeriesKeys} height={yMax} y={d => d[config.runtime.yAxis.dataKey]} xScale={xScale} yScale={yScale} color={colorScale} offset='none'>
+        <BarStackHorizontal
+          data={data}
+          keys={barStackedSeriesKeys}
+          height={yMax}
+          y={d => d[config.runtime.yAxis.dataKey]}
+          xScale={xScale}
+          yScale={yScale}
+          color={colorScale}
+          offset='none'
+        >
           {barStacks =>
             barStacks.map(barStack =>
               updateBars(barStack.bars).map((bar, index) => {
-                const transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(bar.key) === -1
-                const displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(bar.key) !== -1
+                const transparentBar =
+                  config.legend.behavior === 'highlight' &&
+                  seriesHighlight.length > 0 &&
+                  seriesHighlight.indexOf(bar.key) === -1
+                const displayBar =
+                  config.legend.behavior === 'highlight' ||
+                  seriesHighlight.length === 0 ||
+                  seriesHighlight.indexOf(bar.key) !== -1
                 config.barHeight = Number(config.barHeight)
                 const labelColor = getContrastColor('#000', colorScale(config.runtime.seriesLabels[bar.key]))
                 // tooltips
                 const xAxisValue = formatNumber(data[bar.index][bar.key], 'left')
-                const yAxisValue = config.runtime.yAxis.type === 'date' ? formatDate(parseDate(data[bar.index][config.runtime.originalXAxis.dataKey])) : data[bar.index][config.runtime.originalXAxis.dataKey]
-                const yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
+                const yAxisValue =
+                  config.runtime.yAxis.type === 'date'
+                    ? formatDate(parseDate(data[bar.index][config.runtime.originalXAxis.dataKey]))
+                    : data[bar.index][config.runtime.originalXAxis.dataKey]
+                const yAxisTooltip = config.runtime.yAxis.label
+                  ? `${config.runtime.yAxis.label}: ${yAxisValue}`
+                  : yAxisValue
                 const textWidth = getTextWidth(xAxisValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
                 const additionalColTooltip = getAdditionalColumn(hoveredBar)
                 const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${xAxisValue}`
@@ -93,17 +113,21 @@ const BarChartStackedHorizontal = () => {
                         }
                       })}
 
-                      {orientation === 'horizontal' && visualizationSubType === 'stacked' && isLabelBelowBar && barStack.index === 0 && !config.yAxis.hideLabel && (
-                        <Text
-                          x={`${bar.x + (config.isLollipopChart ? 15 : 5)}`} // padding
-                          y={bar.y + bar.height * 1.2}
-                          fill={'#000000'}
-                          textAnchor='start'
-                          verticalAnchor='start'
-                        >
-                          {yAxisValue}
-                        </Text>
-                      )}
+                      {orientation === 'horizontal' &&
+                        visualizationSubType === 'stacked' &&
+                        isLabelBelowBar &&
+                        barStack.index === 0 &&
+                        !config.yAxis.hideLabel && (
+                          <Text
+                            x={`${bar.x + (config.isLollipopChart ? 15 : 5)}`} // padding
+                            y={bar.y + bar.height * 1.2}
+                            fill={'#000000'}
+                            textAnchor='start'
+                            verticalAnchor='start'
+                          >
+                            {yAxisValue}
+                          </Text>
+                        )}
 
                       {displayNumbersOnBar && textWidth < bar.width && (
                         <Text

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

@@ -42,7 +42,7 @@ export const BarChartVertical = () => {
   } = useBarChart()
 
   // prettier-ignore
-  const { colorScale, config, dashboardConfig, tableData, formatDate, formatNumber, getXAxisData, getYAxisData, isNumber, parseDate, seriesHighlight, setSharedFilter, transformedData, brushConfig, getTextWidth } = useContext<ChartContext>(ConfigContext)
+  const { colorScale, config, dashboardConfig, tableData, formatDate, formatNumber, getXAxisData, getYAxisData, isNumber, parseDate, seriesHighlight, setSharedFilter, transformedData, brushConfig } = useContext<ChartContext>(ConfigContext)
   const { HighLightedBarUtils } = useHighlightedBars(config)
   let data = transformedData
   // check if user add suppression
@@ -58,7 +58,9 @@ export const BarChartVertical = () => {
 
   return (
     config.visualizationSubType !== 'stacked' &&
-    (config.visualizationType === 'Bar' || config.visualizationType === 'Combo' || isConvertLineToBarGraph(config.visualizationType, data, config.allowLineToBarGraph)) &&
+    (config.visualizationType === 'Bar' ||
+      config.visualizationType === 'Combo' ||
+      isConvertLineToBarGraph(config.visualizationType, data, config.allowLineToBarGraph)) &&
     config.orientation === 'vertical' && (
       <Group>
         <BarGroup
@@ -86,27 +88,48 @@ export const BarChartVertical = () => {
               >
                 {barGroup.bars.map((bar, index) => {
                   const scaleVal = config.yAxis.type === 'logarithmic' ? 0.1 : 0
-                  let highlightedBarValues = config.highlightedBarValues.map(item => item.value).filter(item => item !== ('' || undefined))
-                  highlightedBarValues = config.xAxis.type === 'date' ? HighLightedBarUtils.formatDates(highlightedBarValues) : highlightedBarValues
-                  const transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(bar.key) === -1
-                  const displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(bar.key) !== -1
+                  let highlightedBarValues = config.highlightedBarValues
+                    .map(item => item.value)
+                    .filter(item => item !== ('' || undefined))
+                  highlightedBarValues =
+                    config.xAxis.type === 'date'
+                      ? HighLightedBarUtils.formatDates(highlightedBarValues)
+                      : highlightedBarValues
+                  const transparentBar =
+                    config.legend.behavior === 'highlight' &&
+                    seriesHighlight.length > 0 &&
+                    seriesHighlight.indexOf(bar.key) === -1
+                  const displayBar =
+                    config.legend.behavior === 'highlight' ||
+                    seriesHighlight.length === 0 ||
+                    seriesHighlight.indexOf(bar.key) !== -1
 
                   let barGroupWidth = seriesScale.range()[1] - seriesScale.range()[0]
                   const defaultBarHeight = Math.abs(yScale(bar.value) - yScale(scaleVal))
                   const defaultBarY = bar.value >= 0 && isNumber(bar.value) ? bar.y : yScale(0)
                   let barWidth = config.isLollipopChart ? lollipopBarWidth : seriesScale.bandwidth()
-                  let barX = bar.x + (config.isLollipopChart ? (barGroupWidth / barGroup.bars.length - lollipopBarWidth) / 2 : 0) - (config.xAxis.type === 'date-time' ? barGroupWidth / 2 : 0)
+                  let barX =
+                    bar.x +
+                    (config.isLollipopChart ? (barGroupWidth / barGroup.bars.length - lollipopBarWidth) / 2 : 0) -
+                    (config.xAxis.type === 'date-time' ? barGroupWidth / 2 : 0)
                   setBarWidth(barWidth)
                   setTotalBarsInGroup(barGroup.bars.length)
                   const yAxisValue = formatNumber(/[a-zA-Z]/.test(String(bar.value)) ? '' : bar.value, 'left')
                   const xAxisValue =
-                    config.runtime[section].type === 'date' ? formatDate(parseDate(data[barGroup.index][config.runtime.originalXAxis.dataKey])) : data[barGroup.index][config.runtime.originalXAxis.dataKey]
+                    config.runtime[section].type === 'date'
+                      ? formatDate(parseDate(data[barGroup.index][config.runtime.originalXAxis.dataKey]))
+                      : data[barGroup.index][config.runtime.originalXAxis.dataKey]
 
                   // create new Index for bars with negative values
                   const newIndex = bar.value < 0 ? -1 : index
                   // tooltips
-                  const additionalColTooltip = getAdditionalColumn(bar.key, data[barGroup.index][config.runtime.originalXAxis.dataKey])
-                  let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
+                  const additionalColTooltip = getAdditionalColumn(
+                    bar.key,
+                    data[barGroup.index][config.runtime.originalXAxis.dataKey]
+                  )
+                  let xAxisTooltip = config.runtime.xAxis.label
+                    ? `${config.runtime.xAxis.label}: ${xAxisValue}`
+                    : xAxisValue
                   const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
 
                   const tooltip = `<ul>
@@ -118,16 +141,37 @@ export const BarChartVertical = () => {
                   // configure colors
                   let labelColor = '#000000'
                   labelColor = HighLightedBarUtils.checkFontColor(yAxisValue, highlightedBarValues, labelColor) // Set if background is transparent'
-                  let barColor = config.runtime.seriesLabels && config.runtime.seriesLabels[bar.key] ? colorScale(config.runtime.seriesLabels[bar.key]) : colorScale(bar.key)
+                  let barColor =
+                    config.runtime.seriesLabels && config.runtime.seriesLabels[bar.key]
+                      ? colorScale(config.runtime.seriesLabels[bar.key])
+                      : colorScale(bar.key)
                   const isRegularLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'regular'
                   const isTwoToneLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'two-tone'
                   const isHighlightedBar = highlightedBarValues?.includes(xAxisValue)
                   const highlightedBarColor = getHighlightedBarColorByValue(xAxisValue)
                   const highlightedBar = getHighlightedBarByValue(xAxisValue)
-                  const borderColor = isHighlightedBar ? highlightedBarColor : config.barHasBorder === 'true' ? '#000' : 'transparent'
-                  const borderWidth = isHighlightedBar ? highlightedBar.borderWidth : config.isLollipopChart ? 0 : config.barHasBorder === 'true' ? barBorderWidth : 0
+                  const borderColor = isHighlightedBar
+                    ? highlightedBarColor
+                    : config.barHasBorder === 'true'
+                    ? '#000'
+                    : 'transparent'
+                  const borderWidth = isHighlightedBar
+                    ? highlightedBar.borderWidth
+                    : config.isLollipopChart
+                    ? 0
+                    : config.barHasBorder === 'true'
+                    ? barBorderWidth
+                    : 0
 
-                  const { barHeight, isSuppressed, getBarY, getAbsentDataLabel } = getBarConfig({ bar, defaultBarHeight, config, isNumber, getTextWidth, barWidth, isVertical: true, yAxisValue })
+                  const { barHeight, isSuppressed, getBarY, getAbsentDataLabel } = getBarConfig({
+                    bar,
+                    defaultBarHeight,
+                    config,
+                    isNumber,
+                    barWidth,
+                    isVertical: true,
+                    yAxisValue
+                  })
 
                   const absentDataLabel = getAbsentDataLabel(yAxisValue)
                   const barDefaultLabel = isSuppressed || !config.labels ? '' : yAxisValue
@@ -149,9 +193,11 @@ export const BarChartVertical = () => {
                         ? sharedFilters.map(_sharedFilter => {
                             if (_sharedFilter.setBy === config.uid) {
                               // If the current filter is the reset filter item.
-                              if (_sharedFilter.resetLabel === _sharedFilter.active) return colorScale(config.runtime.seriesLabels[bar.key])
+                              if (_sharedFilter.resetLabel === _sharedFilter.active)
+                                return colorScale(config.runtime.seriesLabels[bar.key])
                               // If the current filter is the bars
-                              if (_sharedFilter.active === transformedData[barGroup.index][config.xAxis.dataKey]) return colorScale(config.runtime.seriesLabels[bar.key])
+                              if (_sharedFilter.active === transformedData[barGroup.index][config.xAxis.dataKey])
+                                return colorScale(config.runtime.seriesLabels[bar.key])
                               return _filteredOutColor
                             } else {
                               // If the setBy isn't the config.uid return the original barColor
@@ -163,14 +209,16 @@ export const BarChartVertical = () => {
                       if (isRegularLollipopColor) _barColor = barColor
 
                       if (isHighlightedBar) _barColor = 'transparent'
-                      if (config.legend.colorCode) _barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor)
+                      if (config.legend.colorCode)
+                        _barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor)
                       if (isTwoToneLollipopColor) _barColor = chroma(barColor).brighten(1)
                       return _barColor
                     }
 
                     // if this is a two tone lollipop slightly lighten the bar.
                     if (isTwoToneLollipopColor) _barColor = chroma(barColor).brighten(1)
-                    if (config.legend.colorCode) _barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor)
+                    if (config.legend.colorCode)
+                      _barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor)
 
                     // if we're highlighting a bar make it invisible since it gets a border
                     if (isHighlightedBar) _barColor = 'transparent'
@@ -217,13 +265,23 @@ export const BarChartVertical = () => {
                           const isValueMatch = String(pd.value) === String(bar.value) && pd.value !== ''
                           const isSuppressed = isValueMatch && selectedSuppressionColumn
 
-                          if (!isSuppressed || barWidth < 10 || !config.general.showSuppressedSymbol || pd.hideBarSymbol) {
+                          if (
+                            !isSuppressed ||
+                            barWidth < 10 ||
+                            !config.general.showSuppressedSymbol ||
+                            pd.hideBarSymbol
+                          ) {
                             return
                           }
                           const hasAsterisk = String(pd.symbol).includes('Asterisk')
                           const yPadding = hasAsterisk ? -5 : -8
                           const verticalAnchor = hasAsterisk ? 'middle' : 'end'
-                          const iconSize = pd.symbol === 'Asterisk' ? barWidth * 1.2 : pd.symbol === 'Double Asterisk' ? barWidth : barWidth / 1.5
+                          const iconSize =
+                            pd.symbol === 'Asterisk'
+                              ? barWidth * 1.2
+                              : pd.symbol === 'Double Asterisk'
+                              ? barWidth
+                              : barWidth / 1.5
                           const fillColor = pd.displayGray ? '#8b8b8a' : '#000'
 
                           return (

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

@@ -1,3 +1,5 @@
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+
 // Define an interface for the function's parameter
 interface BarConfigProps {
   defaultBarWidth?: number
@@ -5,13 +7,20 @@ interface BarConfigProps {
   bar?: { [key: string]: any }
   isNumber?: Function
   config: { [key: string]: any }
-  getTextWidth: (a: string, b: string) => string
   barWidth: number
   isVertical: boolean
 }
 
 // Function to create bar width based on suppression status and missing data label
-export const getBarConfig = ({ bar, defaultBarHeight, defaultBarWidth, config, isNumber, getTextWidth, barWidth, isVertical }: BarConfigProps) => {
+export const getBarConfig = ({
+  bar,
+  defaultBarHeight,
+  defaultBarWidth,
+  config,
+  isNumber,
+  barWidth,
+  isVertical
+}: BarConfigProps) => {
   const heightMini = 3 /// height of small bars aka suppressed/NA/Zero valued
   let barHeight = defaultBarHeight
 
@@ -20,6 +29,7 @@ export const getBarConfig = ({ bar, defaultBarHeight, defaultBarWidth, config, i
   let barLabel = ''
   let isSuppressed = false
   let showMissingDataLabel = false
+  let showZeroValueData = false
   const showSuppressedSymbol = config.general.showSuppressedSymbol
 
   config.preliminaryData.forEach(pd => {
@@ -45,10 +55,19 @@ export const getBarConfig = ({ bar, defaultBarHeight, defaultBarWidth, config, i
     barHeight = labelFits ? heightMini : 0
     barWidthHorizontal = heightMini
   }
+  // Handle undefined, null, or non-calculable bar.value
+
+  if (!isSuppressed && bar.value === '0' && config.general.showZeroValueData) {
+    const labelWidth = getTextWidth('0', `normal ${barWidth / 2}px sans-serif`)
+    const labelFits = Number(labelWidth) < barWidth && barWidth > 10
+    showZeroValueData = true
+    barHeight = labelFits ? heightMini : 0
+    barWidthHorizontal = heightMini
+  }
 
   const getBarY = (defaultBarY, yScale) => {
     // calculate Y position of small bars (suppressed,N/A,Zero valued) bars
-    if (isSuppressed || showMissingDataLabel) {
+    if (isSuppressed || showMissingDataLabel || showZeroValueData) {
       if (config.isLollipopChart) {
         return yScale - heightMini * 2
       } else {
@@ -68,6 +87,7 @@ export const getBarConfig = ({ bar, defaultBarHeight, defaultBarWidth, config, i
     if (isSuppressed) label = ''
     // If the config is set to show a label for missing data, display 'N/A'
     if (showMissingDataLabel) label = 'N/A'
+    if (showZeroValueData) label = '0'
 
     // determine label width in pixels & check if it fits to the bar width
     const labelWidth = getTextWidth(barLabel, `normal ${barWidth / 2}px sans-serif`)
@@ -78,7 +98,6 @@ export const getBarConfig = ({ bar, defaultBarHeight, defaultBarWidth, config, i
       return labelFits && isVertical ? label : !isVertical ? label : ''
     }
   }
-
   return { barWidthHorizontal, barHeight, isSuppressed, showMissingDataLabel, getBarY, getAbsentDataLabel }
 }
 

package/src/components/BrushChart.tsx

@@ -2,15 +2,16 @@ import { Group } from '@visx/group'
 import { useContext, useEffect, useRef, useState } from 'react'
 import ConfigContext from '../ConfigContext'
 import * as d3 from 'd3'
-import { invertValue } from '@cdc/core/helpers/scaling'
 import { Text } from '@visx/text'
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+
 interface BrushChartProps {
   xMax: number
   yMax: number
 }
 
 const BrushChart = ({ xMax, yMax }: BrushChartProps) => {
-  const { tableData, config, setBrushConfig, getTextWidth, dashboardConfig, formatDate } = useContext(ConfigContext)
+  const { tableData, config, setBrushConfig, dashboardConfig, formatDate } = useContext(ConfigContext)
   const [brushState, setBrushState] = useState({ isBrushing: false, selection: [] })
   const [brushKey, setBrushKey] = useState(0)
   const sharedFilters = dashboardConfig?.dashboard?.sharedFilters ?? []