@cdc/chart 4.25.3-6 → 4.25.5-1

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'
 
@@ -69,7 +80,7 @@ const BarChartStackedVertical = () => {
                 const xAxisTooltip = config.runtime.xAxis.label
                   ? `${config.runtime.xAxis.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"">${xAxisTooltip}</li>
@@ -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 = 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)
   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}`,
@@ -322,8 +339,8 @@ export const BarChartVertical = () => {
                         <Text // prettier-ignore
                           display={displayBar ? 'block' : 'none'}
                           opacity={transparentBar ? 0.5 : 1}
-                          x={barX + barWidth / 2}
-                          y={barY - 5}
+                          x={hasConfidenceInterval ? barX + barWidth : barX + barWidth / 2}
+                          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 }
+  })
+}

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

@@ -9,6 +9,7 @@ interface BarConfigProps {
   config: { [key: string]: any }
   barWidth: number
   isVertical: boolean
+  yAxisValue: number
 }
 
 // Function to create bar width based on suppression status and missing data label
@@ -18,7 +19,8 @@ export const getBarConfig = ({
   defaultBarWidth,
   config,
   barWidth,
-  isVertical
+  isVertical,
+  yAxisValue
 }: BarConfigProps) => {
   const heightMini = 3 /// height of small bars aka suppressed/NA/Zero valued
   let barHeight = defaultBarHeight
@@ -97,7 +99,8 @@ export const getBarConfig = ({
       return labelFits && isVertical ? label : !isVertical ? label : ''
     }
   }
-  return { barWidthHorizontal, barHeight, isSuppressed, showMissingDataLabel, getBarY, getAbsentDataLabel }
+  const absentDataLabel = getAbsentDataLabel(yAxisValue)
+  return { barWidthHorizontal, barHeight, isSuppressed, showMissingDataLabel, getBarY, absentDataLabel }
 }
 
 export const testZeroValue = value => {

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

@@ -0,0 +1,83 @@
+import { getHorizontalBarHeights } from '../getBarHeights'
+
+describe('getHorizontalBarHeights', () => {
+  it('should calculate bar heights for non-stacked horizontal bars', () => {
+    const config = {
+      orientation: 'horizontal',
+      visualizationSubType: 'grouped',
+      runtime: { seriesKeys: ['A', 'B'] },
+      barHeight: 10,
+      barSpace: 5,
+      yAxis: { labelPlacement: 'Above Bar' }
+    }
+
+    const bars = [{ index: 0 }, { index: 1 }]
+
+    const result = getHorizontalBarHeights(config, bars)
+
+    expect(result).toEqual([
+      { index: 0, y: 0, height: 20 },
+      { index: 1, y: 25, height: 20 }
+    ])
+  })
+
+  it('should calculate bar heights for stacked horizontal bars', () => {
+    const config = {
+      orientation: 'horizontal',
+      visualizationSubType: 'stacked',
+      barHeight: 15,
+      barSpace: 5,
+      yAxis: { labelPlacement: 'Above Bar' }
+    }
+
+    const bars = [{ index: 0 }, { index: 1 }]
+
+    const result = getHorizontalBarHeights(config, bars)
+
+    expect(result).toEqual([
+      { index: 0, y: 0, height: 15 },
+      { index: 1, y: 20, height: 15 }
+    ])
+  })
+
+  it('should include label space when labelPlacement is Below Bar', () => {
+    const config = {
+      orientation: 'horizontal',
+      visualizationSubType: 'grouped',
+      runtime: { seriesKeys: ['A'] },
+      barHeight: 10,
+      barSpace: 5,
+      yAxis: { labelPlacement: 'Below Bar' }
+    }
+
+    const bars = [{ index: 0 }, { index: 1 }]
+
+    const result = getHorizontalBarHeights(config, bars)
+
+    expect(result).toEqual([
+      { index: 0, y: 0, height: 10 },
+      { index: 1, y: 37, height: 10 }
+    ])
+  })
+
+  it('should handle lollipop chart bar heights', () => {
+    const config = {
+      orientation: 'horizontal',
+      visualizationSubType: 'grouped',
+      runtime: { seriesKeys: ['A', 'B', 'C'] },
+      isLollipopChart: true,
+      lollipopSize: 'medium',
+      barSpace: 5,
+      yAxis: { labelPlacement: 'Above Bar' }
+    }
+
+    const bars = [{ index: 0 }, { index: 1 }]
+
+    const result = getHorizontalBarHeights(config, bars)
+
+    expect(result).toEqual([
+      { index: 0, y: 0, height: 18 },
+      { index: 1, y: 23, height: 18 }
+    ])
+  })
+})

package/src/{hooks → components/BarChart/helpers}/useBarChart.ts

@@ -1,12 +1,12 @@
 import React, { useContext, useEffect, useState } from 'react'
-import ConfigContext, { ChartDispatchContext } from '../ConfigContext'
+import { ChartDispatchContext } from '../../../ConfigContext'
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
-import { appFontSize } from '@cdc/core/helpers/cove/fontSettings'
-export const useBarChart = () => {
-  const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate, setSeriesHighlight, seriesHighlight } =
-    useContext(ConfigContext)
-  const dispatch = useContext(ChartDispatchContext)
+import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
+
+export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, configContext) => {
+  const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate, seriesHighlight } = configContext
   const { orientation } = config
+  const dispatch = useContext(ChartDispatchContext)
   const [hoveredBar, setHoveredBar] = useState(null)
 
   const isHorizontal = orientation === 'horizontal'
@@ -123,43 +123,6 @@ export const useBarChart = () => {
     const barColor = palette[barIndex]
     return barColor
   }
-  const updateBars = defaultBars => {
-    // function updates  stacked && regular && lollipop horizontal bars
-    if (config.visualizationType !== 'Bar' && !isHorizontal) return defaultBars
-
-    const barsArr = [...defaultBars]
-    let barHeight
-
-    const heights = {
-      stacked: config.barHeight,
-      lollipop: lollipopBarWidth
-    }
-
-    if (!isStacked) {
-      barHeight = heights[config.isLollipopChart ? 'lollipop' : 'stacked'] * stackCount
-    } else {
-      barHeight = heights.stacked
-    }
-
-    const labelHeight = isLabelBelowBar ? appFontSize * 1.2 : 0
-    let barSpace = Number(config.barSpace)
-
-    // calculate height of container based height, space and fontSize of labels
-    let totalHeight = barsArr.length * (barHeight + labelHeight + barSpace)
-
-    if (isHorizontal) {
-      config.heights.horizontal = totalHeight
-    }
-
-    // return new updated bars/groupes
-    return barsArr.map((bar, i) => {
-      // set bars Y dynamically to handle space between bars
-      let y = 0
-      bar.index !== 0 && (y = (barHeight + barSpace + labelHeight) * i)
-
-      return { ...bar, y: y, height: barHeight }
-    })
-  }
 
   const getHighlightedBarColorByValue = value => {
     const match = config?.highlightedBarValues.find(item => {
@@ -200,7 +163,8 @@ export const useBarChart = () => {
         return d[config.xAxis.dataKey] === xAxisDataValue && dynamicCategoryMatch
       }) || {}
     Object.keys(columns).forEach(colKeys => {
-      if (series && config.columns[colKeys].series && config.columns[colKeys].series !== series) return
+      const colConfig = config.columns[colKeys]
+      if (series && colConfig.series && colConfig.series !== series && !colConfig.tooltips) return
       const formattingParams = {
         addColPrefix: config.columns[colKeys].prefix,
         addColSuffix: config.columns[colKeys].suffix,
@@ -225,17 +189,18 @@ export const useBarChart = () => {
     return additionalTooltipItems
   }
 
-  const onMouseOverBar = (categoryValue, barKey) => {
+  const onMouseOverBar = (categoryValue, barKey, event, data) => {
     if (config.legend.highlightOnHover && config.legend.behavior === 'highlight' && barKey) {
       dispatch({ type: 'SET_SERIES_HIGHLIGHT', payload: [barKey] })
     }
-
+    handleTooltipMouseOver(event, data)
     setHoveredBar(categoryValue)
   }
   const onMouseLeaveBar = () => {
     if (config.legend.highlightOnHover && config.legend.behavior === 'highlight') {
       dispatch({ type: 'SET_SERIES_HIGHLIGHT', payload: [] })
     }
+    handleTooltipMouseOff()
   }
 
   return {
@@ -255,7 +220,6 @@ export const useBarChart = () => {
     barStackedSeriesKeys,
     hasMultipleSeries,
     applyRadius,
-    updateBars,
     assignColorsToValues,
     getHighlightedBarColorByValue,
     getHighlightedBarByValue,

package/src/components/BoxPlot/BoxPlot.tsx

@@ -5,6 +5,7 @@ import ConfigContext from '../../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
 import { handleTooltip, createPlots } from './helpers/index'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import _ from 'lodash'
 
 const CoveBoxPlot = ({ xScale, yScale, seriesScale }) => {
@@ -15,7 +16,7 @@ const CoveBoxPlot = ({ xScale, yScale, seriesScale }) => {
   const boxWidth = xScale.bandwidth()
 
   const bodyStyles = getComputedStyle(document.body)
-  const defaultColor = bodyStyles.getPropertyValue('--cool-gray-90').trim()
+  const defaultColor = APP_FONT_COLOR
   const constrainedWidth = Math.min(40, boxWidth)
   const color_0 = _.get(colorPalettesChart, [config.palette, 0], '#000')
   const plots = createPlots(data, config)

package/src/components/DeviationBar.jsx

@@ -6,6 +6,7 @@ import { Text } from '@visx/text'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import useIntersectionObserver from '../hooks/useIntersectionObserver'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
 export default function DeviationBar({ height, xScale }) {
@@ -178,7 +179,7 @@ export default function DeviationBar({ height, xScale }) {
           // colors
           const [leftColor, rightColor] = twoColorPalette[twoColor.palette]
           const barColor = { left: leftColor, right: rightColor }
-          const fill = getContrastColor('#000', barColor[barPosition])
+          const fill = getContrastColor(APP_FONT_COLOR, barColor[barPosition])
 
           let textProps = getTextProps(config.isLollipopChart, textFits, lollipopShapeSize, fill)
           // tooltips