@cdc/chart 4.25.10 → 4.26.1

package/src/components/Annotations/components/findNearestDatum.ts

@@ -1,41 +1,3 @@
-import { timeParse } from 'd3-time-format'
-
-const getXValueFromCoordinate = (x, isClick = false) => {
-  if (visualizationType === 'Pie') return
-  if (orientation === 'horizontal') return
-
-  // Check the type of x equal to point or if the type of xAxis is equal to continuous or date
-  if (config.xAxis.type === 'categorical' || (visualizationType === 'Combo' && orientation !== 'horizontal' && visualizationType !== 'Forest Plot')) {
-    let range = xScale.range()[1] - xScale.range()[0]
-    let eachBand = range / (xScale.domain().length + 1)
-
-    let numerator = x
-    const index = Math.floor((Number(numerator) - eachBand / 2) / eachBand)
-    return xScale.domain()[index] // fixes off by 1 error
-  }
-
-  if (config.xAxis.type === 'date') {
-    const xValue = x // Assuming x is the coordinate on the chart
-    const xTimestamp = convertXValueToTimestamp(x, 0, xMax, xScale.domain())
-
-    // Calculate the closest date to the x coordinate
-    let closestDate = null
-    let minDistance = Number.MAX_VALUE
-
-    xScale.domain().forEach(timestamp => {
-      const distance = Math.abs(xTimestamp - timestamp)
-      if (distance < minDistance) {
-        minDistance = distance
-        closestDate = timestamp
-      }
-    })
-
-    return closestDate
-  }
-
-  return x
-}
-
 const findNearestDatum = ({ data, xScale, yScale, config, xMax, annotationSeriesKey }, xPosition) => {
   const { xAxis, visualizationType, orientation } = config
 
@@ -62,7 +24,7 @@ const findNearestDatum = ({ data, xScale, yScale, config, xMax, annotationSeries
     return domain[index]
   }
 
-  const getXValueFromCoordinate = (x, isClick = false) => {
+  const getXValueFromCoordinate = x => {
     if (visualizationType === 'Pie') return
     if (orientation === 'horizontal') return
 
@@ -85,7 +47,10 @@ const findNearestDatum = ({ data, xScale, yScale, config, xMax, annotationSeries
     }
 
     // Check the type of x equal to point or if the type of xAxis is equal to continuous or date
-    if (config.xAxis.type === 'categorical' || (visualizationType === 'Combo' && orientation !== 'horizontal' && visualizationType !== 'Forest Plot')) {
+    if (
+      config.xAxis.type === 'categorical' ||
+      (visualizationType === 'Combo' && orientation !== 'horizontal' && visualizationType !== 'Forest Plot')
+    ) {
       const range = xScale.range()[1] - xScale.range()[0]
       const eachBand = range / (xScale.domain().length + 1)
 
@@ -135,4 +100,4 @@ const findNearestDatum = ({ data, xScale, yScale, config, xMax, annotationSeries
   return { x, y }
 }
 
-export { findNearestDatum, getXValueFromCoordinate }
+export { findNearestDatum }

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

@@ -13,17 +13,20 @@ import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 
 const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff }) => {
   // import data from context
-  let { transformedData, config, seriesHighlight, colorScale, rawData } = useContext(ConfigContext)
-  const data = config.brush?.active && config.brush.data?.length ? config.brush.data : transformedData
+  let { transformedData: data, config, seriesHighlight, colorScale, rawData, parseDate } = useContext(ConfigContext)
   // Draw transparent bars over the chart to get tooltip data
   // Turn DEBUG on for additional context.
   if (!data) return
 
   const handleDateCategory = value => {
-    if (config.xAxis.type === 'categorical') return xScale(value)
+    if (config.xAxis.type === 'categorical') {
+      return xScale(value) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
+    }
     if (isDateScale(config.xAxis)) {
-      let date = new Date(value)
-      return xScale(date)
+      const scaledValue = xScale(parseDate(value, false))
+      // Add bandwidth offset to center on band scales (date type)
+      // For date-time (time scale), bandwidth doesn't exist so no offset added
+      return scaledValue + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
     }
   }
 
@@ -65,7 +68,7 @@ const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver,
                       key={stack.key}
                       d={path(stack) || ''}
                       strokeWidth={2}
-                      stroke={displayArea ?  colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[stack.key] : stack.key) : '#000' : 'transparent'}
+                      stroke={displayArea ? colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[stack.key] : stack.key) : '#000' : 'transparent'}
                       fillOpacity={transparentArea ? 0.2 : 1}
                       fill={displayArea ? colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[stack.key] : stack.key) : '#000' : 'transparent'}
                     />
@@ -74,7 +77,7 @@ const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver,
               }}
             </AreaStack>
             {/* prettier-ignore */}
-            <Bar width={Number(xMax)} height={Number(yMax)} fill={'transparent'}   onMouseMove={e => handleTooltipMouseOver(e, rawData)} onMouseLeave={handleTooltipMouseOff} />
+            <Bar width={Number(xMax)} height={Number(yMax)} fill={'transparent'} onMouseMove={e => handleTooltipMouseOver(e, rawData)} onMouseLeave={handleTooltipMouseOff} />
           </Group>
         </ErrorBoundary>
       </svg>

package/src/components/AreaChart/index.tsx

@@ -1,4 +1,3 @@
-import AreaChart from './components/AreaChart'
 import AreaChartStacked from './components/AreaChart.Stacked'
 
-export { AreaChart, AreaChartStacked }
+export { AreaChartStacked }

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

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
 import { BarStack, Line } from '@visx/shape'
-import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale'
+import { scaleBand, scaleOrdinal } from '@visx/scale'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
 import ConfigContext from '../../ConfigContext'
@@ -9,7 +9,7 @@ import createBarElement from '@cdc/core/components/createBarElement'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
 
-const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
+const CategoricalYAxis = ({ yScale, yMax, leftSize, xMax }) => {
   const { config } = useContext(ConfigContext)
 
   const { orientation } = config
@@ -24,6 +24,9 @@ const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
 
   const categories = config.yAxis?.categories
 
+  // Get max from the yScale domain
+  const max = yScale.domain()[1]
+
   const createDataShape = categories => {
     const categoryObj = [...categories].reduce((acc, item) => {
       acc[item.label] = item.height
@@ -68,11 +71,7 @@ const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
     range: [0, leftSize]
   })
 
-  const yScale = scaleLinear({
-    domain: [0, max],
-    range: [yMax, 0],
-    clamp: true
-  })
+  // Use the yScale passed from useScales instead of creating a new one
 
   const colorScale = scaleOrdinal({
     domain: categories.map(d => d?.label),

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

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 
 // Local context and hooks
 import ConfigContext from '../../../ConfigContext'
@@ -13,7 +13,6 @@ import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 // CDC core components and helpers
 import { getColorContrast, getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
-import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
 import createBarElement from '@cdc/core/components/createBarElement'
 import { getBarConfig, testZeroValue, getLollipopStemColor, getLollipopHeadColor } from '../helpers'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
@@ -26,7 +25,7 @@ import _ from 'lodash'
 import { getBarData } from '../helpers/getBarData'
 import { getHorizontalBarHeights } from '../helpers/getBarHeights'
 
-export const BarChartHorizontal = () => {
+const BarChartHorizontal = () => {
   const { xScale, yScale, yMax, seriesScale, barChart } = useContext<BarChartContextValues>(BarChartContext)
   const {
     isHorizontal,
@@ -36,6 +35,7 @@ export const BarChartHorizontal = () => {
     isLabelBelowBar,
     lollipopBarWidth,
     lollipopShapeSize,
+    labelFontSize,
     getHighlightedBarColorByValue,
     getHighlightedBarByValue,
     getAdditionalColumn,
@@ -54,13 +54,11 @@ export const BarChartHorizontal = () => {
     formatDate,
     parseDate,
     setSharedFilter,
-    currentViewport
+    vizViewport
   } = useContext<ChartContext>(ConfigContext)
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
-  const LABEL_FONT_SIZE = isMobileFontViewport(currentViewport) ? 13 : 16
-
   const hasConfidenceInterval = [config.confidenceKeys?.upper, config.confidenceKeys?.lower].every(
     v => v != null && String(v).trim() !== ''
   )
@@ -209,7 +207,7 @@ export const BarChartHorizontal = () => {
                     isVertical: false,
                     yAxisValue,
                     barWidth: 0,
-                    labelFontSize: LABEL_FONT_SIZE
+                    labelFontSize: labelFontSize
                   })
 
                   const barPosition = !isPositiveBar ? 'below' : 'above'
@@ -217,7 +215,7 @@ export const BarChartHorizontal = () => {
                   const barDefaultLabel = !config.yAxis.displayNumbersOnBar || absentDataLabel ? '' : yAxisValue
 
                   // check if bar text/value string fits into  each bars.
-                  const textWidth = getTextWidth(barDefaultLabel)
+                  const textWidth = getTextWidth(barDefaultLabel, `normal ${labelFontSize}px sans-serif`)
                   const textFits = Number(textWidth) < defaultBarWidth - 5
 
                   // control text position
@@ -447,7 +445,7 @@ export const BarChartHorizontal = () => {
                           return (
                             <Text // prettier-ignore
                               key={index}
-                              fontSize={LABEL_FONT_SIZE}
+                              fontSize={labelFontSize}
                               display={displayBar ? 'block' : 'none'}
                               opacity={transparentBar ? 0.5 : 1}
                               x={barX}
@@ -473,6 +471,7 @@ export const BarChartHorizontal = () => {
                             dx={textPadding}
                             verticalAnchor='middle'
                             textAnchor={textAnchor}
+                            fontSize={labelFontSize}
                           >
                             {testZeroValue(bar.value) ? '' : barDefaultLabel}
                           </Text>
@@ -488,6 +487,7 @@ export const BarChartHorizontal = () => {
                             dx={-textPadding}
                             verticalAnchor='middle'
                             textAnchor={bar.value < 0 ? 'end' : 'start'}
+                            fontSize={labelFontSize}
                           >
                             {testZeroValue(bar.value) ? '' : barDefaultLabel}
                           </Text>
@@ -496,12 +496,17 @@ export const BarChartHorizontal = () => {
                           display={displayBar ? 'block' : 'none'}
                           x={bar.y}
                           opacity={transparentBar ? 0.5 : 1}
-                          y={config.barHeight / 2 + config.barHeight * bar.index}
+                          y={
+                            config.isLollipopChart
+                              ? barHeight * bar.index + lollipopBarWidth / 2
+                              : config.barHeight / 2 + config.barHeight * bar.index
+                          }
                           fill={labelColor}
                           dx={absentDataLabel === 'N/A' ? 20 : textPadding}
-                          dy={config.isLollipopChart ? -10 : 0}
+                          dy={0}
                           verticalAnchor='middle'
                           textAnchor={absentDataLabel === 'N/A' ? 'middle' : textAnchor}
+                          fontSize={labelFontSize}
                         >
                           {absentDataLabel}
                         </Text>
@@ -510,31 +515,180 @@ export const BarChartHorizontal = () => {
                           <Text // prettier-ignore
                             display={displayBar ? 'block' : 'none'}
                             x={bar.y}
-                            y={0}
+                            y={barHeight * bar.index + lollipopBarWidth / 2}
                             fill={APP_FONT_COLOR}
                             dx={textPaddingLollipop}
                             textAnchor={textAnchorLollipop}
                             verticalAnchor='middle'
                             fontWeight={'normal'}
+                            fontSize={labelFontSize}
                           >
                             {testZeroValue(bar.value) ? '' : barDefaultLabel}
                           </Text>
                         )}
-                        {isLabelBelowBar && !config.yAxis.hideLabel && (
-                          <Text
-                            x={config.yAxis.hideAxis ? 0 : 5}
-                            y={barGroup.height}
-                            dy={4}
-                            verticalAnchor={'start'}
-                            textAnchor={'start'}
-                          >
-                            {config.runtime.yAxis.type === 'date'
-                              ? formatDate(parseDate(dataValue))
-                              : isHorizontal
-                              ? dataValue
-                              : formatNumber(dataValue)}
-                          </Text>
-                        )}
+                        {isLabelBelowBar &&
+                          !config.yAxis.hideLabel &&
+                          (() => {
+                            const label =
+                              config.runtime.yAxis.type === 'date'
+                                ? formatDate(parseDate(dataValue))
+                                : isHorizontal
+                                ? dataValue
+                                : formatNumber(dataValue)
+                            if (typeof label === 'string') {
+                              // 1. Check for HTML <a> tag and extract its text and href
+                              const aTagMatch = label.match(/<a [^>]*href=["']?([^"'>\s]+)["']?[^>]*>(.*?)<\/a>/i)
+                              if (aTagMatch) {
+                                const href = aTagMatch[1].startsWith('http') ? aTagMatch[1] : `https://${aTagMatch[1]}`
+                                const linkText = aTagMatch[2]
+                                return (
+                                  <foreignObject
+                                    x={config.yAxis.hideAxis ? 0 : 5}
+                                    y={barGroup.height}
+                                    width={120}
+                                    height={24}
+                                    style={{ overflow: 'visible' }}
+                                  >
+                                    <a
+                                      href={href}
+                                      target='_blank'
+                                      rel='noopener noreferrer'
+                                      style={
+                                        config.tooltips.singleSeries
+                                          ? {
+                                              color: '#0071bc',
+                                              textDecoration: 'underline',
+                                              fontSize: 12,
+                                              fontFamily: 'inherit',
+                                              display: 'inline-block',
+                                              width: '100%'
+                                            }
+                                          : {
+                                              color: 'inherit',
+                                              textDecoration: 'none',
+                                              fontSize: 12,
+                                              fontFamily: 'inherit',
+                                              display: 'inline-block',
+                                              width: '100%'
+                                            }
+                                      }
+                                    >
+                                      {linkText}
+                                    </a>
+                                  </foreignObject>
+                                )
+                              }
+                              // 2. Check for markdown link
+                              const mdMatch = label.match(/\[([^\]]+)\]\((https?:\/\/[^\s]+|www\.[^\s]+)\)/i)
+                              if (mdMatch) {
+                                const href = mdMatch[2].startsWith('http') ? mdMatch[2] : `https://${mdMatch[2]}`
+                                const linkText = mdMatch[1]
+                                return (
+                                  <foreignObject
+                                    x={config.yAxis.hideAxis ? 0 : 5}
+                                    y={barGroup.height}
+                                    width={120}
+                                    height={24}
+                                    style={{ overflow: 'visible' }}
+                                  >
+                                    <a
+                                      href={href}
+                                      target='_blank'
+                                      rel='noopener noreferrer'
+                                      style={
+                                        config.tooltips.singleSeries
+                                          ? {
+                                              color: '#0071bc',
+                                              textDecoration: 'underline',
+                                              fontSize: 12,
+                                              fontFamily: 'inherit',
+                                              display: 'inline-block',
+                                              width: '100%'
+                                            }
+                                          : {
+                                              color: 'inherit',
+                                              textDecoration: 'none',
+                                              fontSize: 12,
+                                              fontFamily: 'inherit',
+                                              display: 'inline-block',
+                                              width: '100%'
+                                            }
+                                      }
+                                    >
+                                      {linkText}
+                                    </a>
+                                  </foreignObject>
+                                )
+                              }
+                              // 3. Check for plain URL
+                              if (/(https?:\/\/|www\.)/i.test(label)) {
+                                try {
+                                  const urlObj = new URL(label.startsWith('http') ? label : `https://${label}`)
+                                  const linkText = urlObj.hostname.replace(/^www\./, '')
+                                  return (
+                                    <foreignObject
+                                      x={config.yAxis.hideAxis ? 0 : 5}
+                                      y={barGroup.height}
+                                      width={120}
+                                      height={24}
+                                      style={{ overflow: 'visible' }}
+                                    >
+                                      <a
+                                        href={urlObj.href}
+                                        target='_blank'
+                                        rel='noopener noreferrer'
+                                        style={
+                                          config.tooltips.singleSeries
+                                            ? {
+                                                color: '#0071bc',
+                                                textDecoration: 'underline',
+                                                fontSize: 12,
+                                                fontFamily: 'inherit',
+                                                display: 'inline-block',
+                                                width: '100%'
+                                              }
+                                            : {
+                                                color: 'inherit',
+                                                textDecoration: 'none',
+                                                fontSize: 12,
+                                                fontFamily: 'inherit',
+                                                display: 'inline-block',
+                                                width: '100%'
+                                              }
+                                        }
+                                      >
+                                        {linkText}
+                                      </a>
+                                    </foreignObject>
+                                  )
+                                } catch {
+                                  return (
+                                    <Text
+                                      x={config.yAxis.hideAxis ? 0 : 5}
+                                      y={barGroup.height}
+                                      dy={4}
+                                      verticalAnchor={'start'}
+                                      textAnchor={'start'}
+                                    >
+                                      {label}
+                                    </Text>
+                                  )
+                                }
+                              }
+                            }
+                            // Not a link, render as normal
+                            return (
+                              <Text
+                                x={config.yAxis.hideAxis ? 0 : 5}
+                                y={barGroup.height}
+                                dy={4}
+                                verticalAnchor={'start'}
+                                textAnchor={'start'}
+                              >
+                                {label}
+                              </Text>
+                            )
+                          })()}
 
                         {config.isLollipopChart && config.lollipopShape === 'circle' && (
                           <circle

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

@@ -38,6 +38,7 @@ const BarChartStackedHorizontal = () => {
     hoveredBar,
     isHorizontal,
     isLabelBelowBar,
+    labelFontSize,
     onMouseLeaveBar,
     onMouseOverBar,
     barStackedSeriesKeys
@@ -155,7 +156,7 @@ const BarChartStackedHorizontal = () => {
                 const yAxisTooltip = config.runtime.yAxis.label
                   ? `${config.runtime.yAxis.label}: ${yAxisValue}`
                   : yAxisValue
-                const textWidth = getTextWidth(xAxisValue)
+                const textWidth = getTextWidth(xAxisValue, `normal ${labelFontSize}px sans-serif`)
                 const additionalColTooltip = getAdditionalColumn(bar.key, hoveredBar)
                 const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${xAxisValue}`
                 const tooltip = `<ul>
@@ -286,6 +287,7 @@ const BarChartStackedHorizontal = () => {
                           fill={labelColor}
                           textAnchor='middle'
                           verticalAnchor='middle'
+                          fontSize={labelFontSize}
                         >
                           {xAxisValue}
                         </Text>

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

@@ -259,6 +259,7 @@ const BarChartStackedVertical = () => {
           yMax={yMax}
           barWidth={barWidth}
           totalBarsInGroup={1}
+          xMax={xMax}
           handleTooltipMouseOff={() => {}}
           handleTooltipMouseOver={() => {}}
           handleTooltipClick={() => {}}

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

@@ -17,13 +17,12 @@ 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'
-import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
 // Types
 import { type ChartContext } from '../../../types/ChartContext'
 import _ from 'lodash'
 import { getBarData } from '../helpers/getBarData'
 
-export const BarChartVertical = () => {
+const BarChartVertical = () => {
   const { xScale, yScale, xMax, yMax, seriesScale, convertLineToBarGraph, barChart } =
     useContext<BarChartContextValues>(BarChartContext)
   const {
@@ -32,6 +31,7 @@ export const BarChartVertical = () => {
     getAdditionalColumn,
     getHighlightedBarByValue,
     getHighlightedBarColorByValue,
+    labelFontSize,
     lollipopBarWidth,
     lollipopShapeSize,
     onMouseLeaveBar,
@@ -46,6 +46,7 @@ export const BarChartVertical = () => {
     colorScale,
     config,
     currentViewport,
+    vizViewport,
     dashboardConfig,
     tableData,
     formatDate,
@@ -58,8 +59,6 @@ export const BarChartVertical = () => {
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
-  const LABEL_FONT_SIZE = isMobileFontViewport(currentViewport) ? 13 : 16
-
   const root = document.documentElement
 
   let data = transformedData
@@ -241,7 +240,7 @@ export const BarChartVertical = () => {
                     barWidth,
                     isVertical: true,
                     yAxisValue,
-                    labelFontSize: LABEL_FONT_SIZE
+                    labelFontSize: labelFontSize
                   })
                   // configure colors
                   let labelColor = APP_FONT_COLOR
@@ -480,7 +479,7 @@ export const BarChartVertical = () => {
                               verticalAnchor={verticalAnchor}
                               fill={fillColor}
                               textAnchor='middle'
-                              fontSize={LABEL_FONT_SIZE}
+                              fontSize={labelFontSize}
                             >
                               {pd.iconCode}
                             </Text>
@@ -493,7 +492,7 @@ export const BarChartVertical = () => {
                           y={barY - BAR_LABEL_PADDING}
                           fill={labelColor}
                           textAnchor='middle'
-                          fontSize={LABEL_FONT_SIZE}
+                          fontSize={labelFontSize}
                         >
                           {testZeroValue(bar.value) ? '' : barDefaultLabel}
                         </Text>
@@ -504,7 +503,7 @@ export const BarChartVertical = () => {
                           y={barY - BAR_LABEL_PADDING}
                           fill={labelColor}
                           textAnchor='middle'
-                          fontSize={config.isLollipopChart ? null : LABEL_FONT_SIZE}
+                          fontSize={config.isLollipopChart ? null : labelFontSize}
                         >
                           {absentDataLabel}
                         </Text>
@@ -567,7 +566,7 @@ export const BarChartVertical = () => {
           }}
         </BarGroup>
 
-        <Regions xScale={xScale} yMax={yMax} barWidth={barWidth} totalBarsInGroup={totalBarsInGroup} />
+        <Regions xScale={xScale} yMax={yMax} barWidth={barWidth} totalBarsInGroup={totalBarsInGroup} xMax={xMax} />
       </Group>
     )
   )

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

@@ -18,6 +18,7 @@ export type BarChartContextValues = {
     getHighlightedBarColorByValue: Function
     lollipopBarWidth: number
     lollipopShapeSize: number
+    labelFontSize: number
     onMouseLeaveBar: Function
     onMouseOverBar: Function
     section: string

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

@@ -5,10 +5,20 @@ import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
 import { getPaletteColors } from '@cdc/core/helpers/palettes/utils'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizSubType, getVizTitle } from '@cdc/core/helpers/metrics/utils'
+import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
 
 export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, configContext) => {
-  const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate, seriesHighlight, interactionLabel } =
-    configContext
+  const {
+    config,
+    colorPalettes,
+    tableData,
+    updateConfig,
+    parseDate,
+    formatDate,
+    seriesHighlight,
+    interactionLabel,
+    vizViewport
+  } = configContext
   const { orientation } = config
   const dispatch = useContext(ChartDispatchContext)
   const [hoveredBar, setHoveredBar] = useState(null)
@@ -20,6 +30,7 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
   const isLabelBelowBar = config.yAxis.labelPlacement === 'Below Bar'
   const displayNumbersOnBar = config.yAxis.displayNumbersOnBar
   const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
+  const labelFontSize = isMobileFontViewport(vizViewport) ? 13 : 16
 
   const isRounded = config.barStyle === 'rounded'
   const isStacked = config.visualizationSubType === 'stacked'
@@ -241,6 +252,7 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
     stackCount,
     barStackedSeriesKeys,
     hasMultipleSeries,
+    labelFontSize,
     applyRadius,
     assignColorsToValues,
     getHighlightedBarColorByValue,

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

@@ -29,7 +29,7 @@ export const handleTooltip = (boxplot, columnCategory, key, q1, q3, median, iqr,
   `
 }
 
-export const calculateBoxPlotStats = (values: number[]) => {
+const calculateBoxPlotStats = (values: number[]) => {
   if (!values || values.length === 0) return {}
 
   // Sort the values
@@ -82,7 +82,7 @@ const getValuesBySeriesKey = (group: string, config, data) => {
 }
 
 // Helper to calculate outliers based on IQR
-export const calculateOutliers = (values: number[], firstQuartile: number, thirdQuartile: number) => {
+const calculateOutliers = (values: number[], firstQuartile: number, thirdQuartile: number) => {
   const iqr = thirdQuartile - firstQuartile
   const lowerBound = firstQuartile - 1.5 * iqr
   const upperBound = thirdQuartile + 1.5 * iqr
@@ -90,7 +90,7 @@ export const calculateOutliers = (values: number[], firstQuartile: number, third
 }
 
 // Helper to calculate non-outliers based on IQR
-export const calculateNonOutliers = (values: number[], firstQuartile: number, thirdQuartile: number): number[] => {
+const calculateNonOutliers = (values: number[], firstQuartile: number, thirdQuartile: number): number[] => {
   const iqr = thirdQuartile - firstQuartile
   const lowerBound = firstQuartile - 1.5 * iqr
   const upperBound = thirdQuartile + 1.5 * iqr