@cdc/chart 4.26.6 → 4.26.7

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@cdc/chart",
-  "version": "4.26.6",
+  "version": "4.26.7",
   "description": "React component for visualizing tabular data in various types of charts",
   "license": "Apache-2.0",
   "author": "Matthew Pallansch <mpallansch@adittech.com>",
   "bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
   "dependencies": {
-    "@cdc/core": "^4.26.6",
+    "@cdc/core": "^4.26.7",
     "@hello-pangea/dnd": "^16.2.0",
     "@react-spring/web": "^9.7.5",
     "@rollup/plugin-dsv": "^3.0.2",
@@ -14,14 +14,11 @@
     "@visx/axis": "^3.12.0",
     "@visx/brush": "^3.12.0",
     "@visx/curve": "^3.12.0",
-    "@visx/drag": "^3.12.0",
     "@visx/event": "^3.12.0",
     "@visx/glyph": "^3.12.0",
-    "@visx/gradient": "^3.12.0",
     "@visx/heatmap": "^3.12.0",
     "@visx/legend": "^3.12.0",
     "@visx/marker": "^3.12.0",
-    "@visx/mock-data": "^3.12.0",
     "@visx/pattern": "^3.12.0",
     "@visx/responsive": "^3.12.0",
     "@visx/scale": "^3.12.0",
@@ -32,20 +29,16 @@
     "@vitejs/plugin-react": "^5.1.2",
     "chroma-js": "^3.1.2",
     "d3-array": "^3.2.4",
-    "d3-format": "^3.1.2",
     "d3-sankey": "^0.12.3",
     "d3-time-format": "^4.1.0",
     "dompurify": "^3.4.0",
     "html-react-parser": "^5.2.3",
-    "js-base64": "^2.5.2",
     "lodash": "^4.17.23",
-    "papaparse": "^5.5.2",
     "react-accessible-accordion": "^5.0.1",
     "react-icons": "^5.5.0",
     "react-tooltip": "5.8.2-beta.3",
     "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.89.2",
-    "use-debounce": "^10.1.0",
     "vite": "^7.3.1",
     "vite-plugin-css-injected-by-js": "^2.4.0",
     "vite-plugin-svgr": "^4.2.0",
@@ -53,11 +46,10 @@
   },
   "devDependencies": {
     "@types/d3-array": "^3.2.1",
-    "@types/d3-format": "^3.0.4",
     "@types/d3-sankey": "^0.12.4",
     "@types/d3-time-format": "^4.0.3"
   },
-  "gitHead": "f4a2a0d4a631a1b60fcf9534589697780e480b58",
+  "gitHead": "ca89fe0eb083a52a425fa5971bbe74716b5bb0f9",
   "main": "dist/cdcchart",
   "moduleName": "CdcChart",
   "peerDependencies": {

package/src/CdcChart.tsx

@@ -7,7 +7,7 @@ import { parseCsvWithQuotes } from '@cdc/core/helpers/parseCsvWithQuotes'
 import { addCsvCacheBuster } from '@cdc/core/helpers/csvCacheBuster'
 import { extractDataAndMetadata } from '@cdc/core/helpers/extractDataAndMetadata'
 import Loading from '@cdc/core/components/Loading'
-import _ from 'lodash'
+import isEqual from 'lodash/isEqual'
 import EditorContext from '@cdc/core/contexts/EditorContext'
 interface CdcChartProps {
   configUrl?: string
@@ -90,7 +90,7 @@ const CdcChartWrapper: React.FC<CdcChartProps> = ({
   }, [configUrl, loadConfig])
 
   useEffect(() => {
-    if (!_.isEqual(prevFiltersRef.current, config.filters)) {
+    if (!isEqual(prevFiltersRef.current, config.filters)) {
       prevFiltersRef.current = config.filters
       reloadFilteredData()
     }

package/src/CdcChartComponent.tsx

@@ -101,6 +101,7 @@ import { prepareSmallMultiplesDataTable } from './helpers/smallMultiplesHelpers'
 import { calcInitialHeight } from './helpers/sizeHelpers'
 import { ensureSpecialChartAxisTypes } from './helpers/ensureSpecialChartAxisTypes'
 import { findColumnConfigByName } from './helpers/seriesColumnSettings'
+import { sortByCategoryOrder } from './helpers/categoryOrder'
 
 // styles
 import './scss/main.scss'
@@ -231,6 +232,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     config.enableMarkupVariables,
     config.markupVariables,
     config.data,
+    config.dataMetadata,
     config.filters,
     title,
     config.superTitle,
@@ -263,14 +265,30 @@ const CdcChart: React.FC<CdcChartProps> = ({
   const legendId = useId()
 
   const convertLineToBarGraph = isConvertLineToBarGraph(config, filteredData)
+  const xAxisDataKey = config.xAxis?.dataKey
+  const xAxisType = config.xAxis?.type
+  const xAxisCategoryOrderType = config.xAxis?.categoryOrderType
+  const xAxisCategoryOrder = config.xAxis?.categoryOrder
+  const categoryOrderConfig = useMemo(
+    () =>
+      ({
+        xAxis: {
+          dataKey: xAxisDataKey,
+          type: xAxisType,
+          categoryOrderType: xAxisCategoryOrderType,
+          categoryOrder: xAxisCategoryOrder
+        }
+      } as Pick<ChartConfig, 'xAxis'>),
+    [xAxisDataKey, xAxisType, xAxisCategoryOrderType, xAxisCategoryOrder]
+  )
 
   // Declaratively calculate series keys for pie charts based on filtered data
   const pieSeriesKeys = useMemo(() => {
-    if (config.visualizationType !== 'Pie' || !config.xAxis?.dataKey) return null
+    if (visualizationType !== 'Pie' || !xAxisDataKey) return null
     const data = filteredData?.length > 0 ? filteredData : excludedData
     if (!data) return null
-    return uniq(data.map(d => d[config.xAxis.dataKey]))
-  }, [config.visualizationType, config.xAxis?.dataKey, filteredData, excludedData])
+    return uniq(sortByCategoryOrder(data, categoryOrderConfig).map(d => d[xAxisDataKey]))
+  }, [visualizationType, xAxisDataKey, categoryOrderConfig, filteredData, excludedData])
 
   const prepareConfig = (loadedConfig: ChartConfig) => {
     // Create defaults without version to avoid overriding legacy configs
@@ -458,13 +476,15 @@ const CdcChart: React.FC<CdcChartProps> = ({
     if (newConfig.visualizationType === 'Pie') {
       // Use the same data that will be passed to PieChart (after exclusions and filters)
       const pieData = currentData.length > 0 ? currentData : newExcludedData
-      newConfig.runtime.seriesKeys = uniq(pieData.map(d => d[newConfig.xAxis.dataKey]))
+      newConfig.runtime.seriesKeys = uniq(sortByCategoryOrder(pieData, newConfig).map(d => d[newConfig.xAxis.dataKey]))
       newConfig.runtime.seriesLabelsAll = newConfig.runtime.seriesKeys
       newConfig.runtime.isPieChart = true // Flag to know when to use derived keys
     } else if (newConfig.visualizationType === 'Radar') {
       // Radar chart: seriesKeys are the entity names from xAxis.dataKey
       const radarData = currentData.length > 0 ? currentData : newExcludedData
-      newConfig.runtime.seriesKeys = uniq(radarData.map(d => d[newConfig.xAxis.dataKey]))
+      newConfig.runtime.seriesKeys = uniq(
+        sortByCategoryOrder(radarData, newConfig).map(d => d[newConfig.xAxis.dataKey])
+      )
       newConfig.runtime.seriesLabelsAll = newConfig.runtime.seriesKeys
     } else {
       const finalData = dataOverride || newConfig.formattedData || newConfig.data
@@ -777,6 +797,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
   }
 
   const configDataDependency = configObj?.data?.length ? configObj.data : null
+  const configDataMetadataDependency = configObj?.dataMetadata ? JSON.stringify(configObj.dataMetadata) : null
   const configExclusionsDependency = [
     configObj?.xAxis?.type,
     configObj?.xAxis?.dataKey,
@@ -807,7 +828,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     }
 
     load()
-  }, [configDataDependency, configExclusionsDependency])
+  }, [configDataDependency, configDataMetadataDependency, configExclusionsDependency])
 
   /**
    * When cove has a config and container ref publish the cove_loaded event.
@@ -1058,6 +1079,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
         rightSuffix,
         bottomPrefix,
         bottomSuffix,
+        bottomCommas,
         bottomAbbreviated,
         preserveOriginalDecimals
       }
@@ -1153,7 +1175,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
 
     if (
       (axis === 'left' && commas && abbreviated && shouldAbbreviate) ||
-      (axis === 'bottom' && commas && abbreviated && shouldAbbreviate)
+      (axis === 'bottom' && bottomCommas && bottomAbbreviated && shouldAbbreviate)
     ) {
       num = num // eslint-disable-line
     } else {
@@ -1243,9 +1265,14 @@ const CdcChart: React.FC<CdcChartProps> = ({
     return config?.xAxis?.dataKey ? transform.cleanData(data, excludedKey, keysToClean) : data
   }
 
+  const orderedTableData = useMemo(
+    () => sortByCategoryOrder(filteredData || excludedData, categoryOrderConfig),
+    [filteredData, excludedData, categoryOrderConfig]
+  )
+
   const getTableRuntimeData = () => {
     if (visualizationType === 'Sankey') return config?.data?.[0]?.tableData
-    const data = filteredData || excludedData
+    const data = orderedTableData
     if (config.visualizationType === 'Pie' && !config.dataFormat?.showPiePercent) {
       return getPiePercent(data, config?.yAxis?.dataKey)
     }
@@ -1271,7 +1298,10 @@ const CdcChart: React.FC<CdcChartProps> = ({
   }
 
   // Transform and clean data for chart rendering
-  const transformedData = getTransformedData({ brushData: state.brushData, filteredData, excludedData, clean })
+  const transformedData = sortByCategoryOrder(
+    getTransformedData({ brushData: state.brushData, filteredData, excludedData, clean }),
+    config
+  )
   const configYAxisDomainData = (config as ChartConfig).yAxisDomainData
   const yAxisDomainData = useMemo(() => {
     if (Array.isArray(configYAxisDomainData) && configYAxisDomainData.length > 0) {
@@ -1723,7 +1753,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     setSharedFilter,
     setSharedFilterValue,
     svgRef,
-    tableData: filteredData || excludedData,
+    tableData: orderedTableData,
     transformedData,
     twoColorPalette,
     unfilteredData: stateData,

package/src/_stories/Chart.PieLabels.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+import Chart from '../CdcChart'
+import pieConfig from './_mock/pie_with_data.json'
+import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import { assertVisualizationRendered, waitForPresence } from '@cdc/core/helpers/testing'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Pie Labels',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const CategoryPercentageLabels: Story = {
+  args: {
+    config: editConfigKeys(pieConfig, [
+      { path: ['labels'], value: true },
+      { path: ['legend', 'hide'], value: true }
+    ]),
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('.pie-label', canvasElement)
+    expect(canvasElement.querySelector('line')).toBeNull()
+  }
+}
+
+export const DonutCategoryPercentageLabels: Story = {
+  args: {
+    config: editConfigKeys(pieConfig, [
+      { path: ['labels'], value: true },
+      { path: ['legend', 'hide'], value: true },
+      { path: ['pieType'], value: 'Donut' }
+    ]),
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('.pie-label--outside', canvasElement)
+    expect(canvasElement.querySelector('.pie-label--inside')).toBeNull()
+    expect(canvasElement.querySelector('line')).toBeNull()
+  }
+}
+
+export default meta

package/src/_stories/Chart.smoke.stories.tsx

@@ -26,6 +26,19 @@ const meta: Meta<typeof Chart> = {
 
 type Story = StoryObj<typeof Chart>
 
+const multipleLinesStoryData = [
+  { week_end: '2024-01-06', Adults: 45.1, Children: 29.3, pathogen: 'COVID-19' },
+  { week_end: '2024-01-13', Adults: 46.7, Children: 30.2, pathogen: 'COVID-19' },
+  { week_end: '2024-01-20', Adults: 48.0, Children: 31.0, pathogen: 'COVID-19' }
+]
+
+const multipleLinesConfig = editConfigKeys(multipleLines, [
+  { path: ['tooltips', 'dateDisplayFormat'], value: '%b. %d %Y' },
+  { path: ['formattedData'], value: multipleLinesStoryData },
+  { path: ['dataUrl'], value: undefined },
+  { path: ['runtimeDataUrl'], value: undefined }
+])
+
 export const line_Chart_Two_Points_Regression_Test: Story = {
   args: {
     config: lineChartTwoPointsRegressionTest,
@@ -47,7 +60,7 @@ export const line_Chart_Two_Points_New_Chart: Story = {
 
 export const multiple_lines: Story = {
   args: {
-    config: editConfigKeys(multipleLines, [{ path: ['tooltips', 'dateDisplayFormat'], value: '%b. %d %Y' }])
+    config: multipleLinesConfig
   },
   play: async ({ canvasElement }) => {
     await assertVisualizationRendered(canvasElement)

package/src/_stories/ChartPrefixSuffix.smoke.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
 import barConfig from './_mock/line_chart_two_points_new_chart.json'
 import annotationConfig from './_mock/annotation_category_mock.json'
 import areaPrefix from './_mock/annotation_category_mock.json'
@@ -7,7 +8,7 @@ import scatterPlotConfig from './_mock/scatterplot_mock.json'
 
 import Chart from '../CdcChartComponent'
 import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
-import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+import { assertVisualizationRendered, waitForPresence } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Prefix Suffix',
@@ -16,6 +17,11 @@ const meta: Meta<typeof Chart> = {
 
 type Story = StoryObj<typeof Chart>
 
+const getSvgTextValues = (root: ParentNode | null, selector: string = 'text') => {
+  if (!root) return []
+  return Array.from(root.querySelectorAll(selector)).map(node => node.textContent?.trim() || '')
+}
+
 export const Inline_Label: Story = {
   args: {
     config: editConfigKeys(barConfig, [
@@ -198,4 +204,25 @@ export const ScatterPlot_Bottom_Commas: Story = {
   }
 }
 
+export const ScatterPlot_Bottom_Commas_And_Abbreviated: Story = {
+  args: {
+    config: editConfigKeys(scatterPlotConfig, [
+      { path: ['dataFormat', 'bottomCommas'], value: true },
+      { path: ['dataFormat', 'bottomAbbreviated'], value: true },
+      { path: ['dataFormat', 'bottomPrefix'], value: '$' },
+      { path: ['dataFormat', 'commas'], value: false },
+      { path: ['dataFormat', 'abbreviated'], value: false }
+    ])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('svg g.bottom-axis', canvasElement)
+
+    const svgText = getSvgTextValues(canvasElement, 'svg g.bottom-axis text')
+    const hasBottomAxisCurrencyAbbreviation = svgText.some(text => /^\$\d+(\.\d+)?K$/.test(text))
+
+    expect(hasBottomAxisCurrencyAbbreviation).toBe(true)
+  }
+}
+
 export default meta

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

@@ -21,7 +21,6 @@ import isNumber from '@cdc/core/helpers/isNumber'
 // Local context and types
 import BarChartContext, { BarChartContextValues } from './context'
 import { ChartContext } from '../../../types/ChartContext'
-import _ from 'lodash'
 import { getBarData } from '../helpers/getBarData'
 import { getHorizontalBarHeights } from '../helpers/getBarHeights'
 import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
@@ -76,7 +75,7 @@ const BarChartHorizontal = () => {
       <defs>
         {Object.entries(config.legend.patterns).map(([key, pattern]) => {
           const patternId = getChartPatternId(key)
-          const size = pattern.patternSize || 8
+          const size = pattern.patternSize || 10
 
           switch (pattern.shape) {
             case 'circles':

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

@@ -59,7 +59,7 @@ const BarChartStackedHorizontal = () => {
       <defs>
         {Object.entries(config.legend.patterns).map(([key, pattern]) => {
           const patternId = getChartPatternId(key)
-          const size = pattern.patternSize || 8
+          const size = pattern.patternSize || 10
 
           switch (pattern.shape) {
             case 'circles':

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

@@ -44,7 +44,7 @@ const BarChartStackedVertical = () => {
       <defs>
         {Object.entries(config.legend.patterns).map(([key, pattern]) => {
           const patternId = getChartPatternId(key)
-          const size = pattern.patternSize || 8
+          const size = pattern.patternSize || 10
 
           switch (pattern.shape) {
             case 'circles':

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

@@ -19,7 +19,6 @@ import createBarElement from '@cdc/core/components/createBarElement'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 // Types
 import { type ChartContext } from '../../../types/ChartContext'
-import _ from 'lodash'
 import { getBarData } from '../helpers/getBarData'
 import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
 import { getChartPatternId } from '../../../helpers/getChartPatternId'
@@ -90,7 +89,7 @@ const BarChartVertical = () => {
       <defs>
         {Object.entries(config.legend.patterns).map(([key, pattern]) => {
           const patternId = getChartPatternId(key)
-          const size = pattern.patternSize || 8
+          const size = pattern.patternSize || 10
 
           switch (pattern.shape) {
             case 'circles':

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

@@ -1,28 +1,28 @@
-import _ from 'lodash'
-import { TransformedData } from '../../../types/ChartContext'
-import { ChartConfig } from '../../../types/ChartConfig'
-
-export const getBarData = (config: ChartConfig, data: TransformedData[], hasConfidenceInterval: boolean) => {
-  const dynamicSeries = config.series.find(s => s.dynamicCategory)
-  if (!dynamicSeries) return data
-  const { dynamicCategory, dataKey } = dynamicSeries
-  const xAxisKey = config.runtime.originalXAxis.dataKey
-  const xAxisGroupDataLookup = _.groupBy(data, xAxisKey)
-  return Object.values(xAxisGroupDataLookup).map(group => {
-    return group.reduce((acc, datum) => {
-      const dataValue = datum[dataKey]
-      const dataCategory = datum[dynamicCategory]
-      if (hasConfidenceInterval) {
-        const { lower, upper } = config.confidenceKeys
-        if (!acc.CI) acc.CI = {}
-        const lowerValue = datum[lower]
-        const upperValue = datum[upper]
-        acc.CI[dataCategory] = { lower: lowerValue, upper: upperValue }
-      }
-      acc[dataCategory] = dataValue
-      acc[xAxisKey] = datum[xAxisKey]
-      acc.dynamicData = true
-      return acc
-    }, {})
-  })
-}
+import groupBy from 'lodash/groupBy'
+import { TransformedData } from '../../../types/ChartContext'
+import { ChartConfig } from '../../../types/ChartConfig'
+
+export const getBarData = (config: ChartConfig, data: TransformedData[], hasConfidenceInterval: boolean) => {
+  const dynamicSeries = config.series.find(s => s.dynamicCategory)
+  if (!dynamicSeries) return data
+  const { dynamicCategory, dataKey } = dynamicSeries
+  const xAxisKey = config.runtime.originalXAxis.dataKey
+  const xAxisGroupDataLookup = groupBy(data, xAxisKey)
+  return Object.values(xAxisGroupDataLookup).map(group => {
+    return group.reduce((acc, datum) => {
+      const dataValue = datum[dataKey]
+      const dataCategory = datum[dynamicCategory]
+      if (hasConfidenceInterval) {
+        const { lower, upper } = config.confidenceKeys
+        if (!acc.CI) acc.CI = {}
+        const lowerValue = datum[lower]
+        const upperValue = datum[upper]
+        acc.CI[dataCategory] = { lower: lowerValue, upper: upperValue }
+      }
+      acc[dataCategory] = dataValue
+      acc[xAxisKey] = datum[xAxisKey]
+      acc.dynamicData = true
+      return acc
+    }, {})
+  })
+}

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

@@ -1,5 +1,5 @@
 import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
-import _ from 'lodash'
+import round from 'lodash/round'
 import { ChartConfig } from '../../../types/ChartConfig'
 
 export const getHorizontalBarHeights = <T>(config: Partial<ChartConfig>, bars: (T & { index })[]) => {
@@ -41,7 +41,7 @@ export const getHorizontalBarHeights = <T>(config: Partial<ChartConfig>, bars: (
   // 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)
+    const y = bar.index === 0 ? 0 : round(totalBarHeight * i)
     return { ...bar, y, height: barHeight }
   })
 }

package/src/components/BarChart/helpers/tests/useBarChart.test.tsx

@@ -0,0 +1,98 @@
+import { renderHook } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { createMockChartContext, createMockConfig } from '../../../LinearChart/tests/mockConfigContext'
+import { useBarChart } from '../useBarChart'
+
+const baseConfig = createMockConfig()
+
+const makeConfigContext = (countColumnOverrides: Record<string, unknown> = {}) => {
+  const config = createMockConfig({
+    visualizationType: 'Bar',
+    orientation: 'horizontal',
+    barHeight: 25,
+    xAxis: {
+      ...baseConfig.xAxis,
+      type: 'categorical',
+      dataKey: 'Cause of death'
+    },
+    yAxis: {
+      ...baseConfig.yAxis,
+      labelPlacement: 'Below Bar'
+    },
+    series: [{ dataKey: 'Percentage', type: 'Bar', axis: 'Left', tooltip: true }] as any,
+    columns: {
+      Count: {
+        name: 'Count',
+        label: 'Count',
+        prefix: '',
+        suffix: '',
+        roundToPlace: 0,
+        commas: true,
+        dataTable: true,
+        tooltips: true,
+        ...countColumnOverrides
+      }
+    } as any,
+    dataFormat: {
+      abbreviated: false,
+      bottomAbbreviated: false,
+      bottomPrefix: '',
+      bottomRoundTo: 0,
+      bottomSuffix: '',
+      bottomCommas: false,
+      commas: false,
+      prefix: '',
+      preserveOriginalDecimals: false,
+      rightPrefix: '',
+      rightRoundTo: 0,
+      rightSuffix: '',
+      roundTo: 1,
+      suffix: '%'
+    } as any,
+    runtime: {
+      ...baseConfig.runtime,
+      xAxis: {
+        ...baseConfig.runtime.xAxis,
+        type: 'categorical',
+        dataKey: 'Cause of death'
+      },
+      yAxis: {
+        ...baseConfig.runtime.yAxis,
+        dataKey: 'Percentage'
+      },
+      series: [{ dataKey: 'Percentage', type: 'Bar', axis: 'Left', tooltip: true }],
+      seriesKeys: ['Percentage'],
+      seriesLabels: { Percentage: 'Percentage' },
+      seriesLabelsAll: ['Percentage']
+    } as any
+  })
+
+  return createMockChartContext(config, {
+    tableData: [
+      {
+        'Cause of death': 'Cardiovascular conditions',
+        Percentage: 22,
+        Count: 146
+      }
+    ],
+    updateConfig: vi.fn()
+  })
+}
+
+describe('useBarChart', () => {
+  it('does not apply the left-axis suffix to an additional single-series tooltip column', () => {
+    const configContext = makeConfigContext()
+    const { result } = renderHook(() => useBarChart(vi.fn(), vi.fn(), configContext))
+
+    expect(result.current.getAdditionalColumn('Percentage', 'Cardiovascular conditions')).toBe('Count : 146 <br/>')
+  })
+
+  it('applies an additional column suffix when one is configured', () => {
+    const configContext = makeConfigContext({ suffix: ' deaths' })
+    const { result } = renderHook(() => useBarChart(vi.fn(), vi.fn(), configContext))
+
+    expect(result.current.getAdditionalColumn('Percentage', 'Cardiovascular conditions')).toBe(
+      'Count : 146 deaths <br/>'
+    )
+  })
+})

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

@@ -6,7 +6,7 @@ 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'
-import { getSeriesOwnedColumnNames } from '../../../helpers/seriesColumnSettings'
+import { getSeriesColumnFormattingParams, getSeriesOwnedColumnNames } from '../../../helpers/seriesColumnSettings'
 
 export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, configContext) => {
   const {
@@ -184,10 +184,9 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
       if (seriesOwnedColumnNames.includes(colConfig.name || colKeys)) return
       if (series && colConfig.series && colConfig.series !== series && !colConfig.tooltips) return
       const formattingParams = {
-        addColPrefix: config.columns[colKeys].prefix,
-        addColSuffix: config.columns[colKeys].suffix,
-        addColRoundTo: config.columns[colKeys].roundToPlace ? config.columns[colKeys].roundToPlace : '',
-        addColCommas: config.columns[colKeys].commas
+        addColPrefix: '',
+        addColSuffix: '',
+        ...getSeriesColumnFormattingParams(config.columns[colKeys])
       }
 
       const formattedValue = formatColNumber(

package/src/components/BoxPlot/BoxPlot.Horizontal.tsx

@@ -5,7 +5,8 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import ConfigContext from '../../ConfigContext'
 import { handleTooltip, createPlots } from './helpers/index'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
-import _ from 'lodash'
+import map from 'lodash/map'
+import round from 'lodash/round'
 
 const BoxPlotHorizontal = ({ xScale, yScale, seriesScale }) => {
   const { config, transformedData: data, colorScale, seriesHighlight } = useContext(ConfigContext)
@@ -63,7 +64,7 @@ const BoxPlotHorizontal = ({ xScale, yScale, seriesScale }) => {
                     maxProps={{ stroke: defaultColor, strokeWidth: 1, opacity: fillOpacity }}
                     medianProps={{ stroke: defaultColor, strokeWidth: 1, opacity: fillOpacity }}
                     outliers={
-                      config.boxplot.plotOutlierValues ? _.map(plot.columnOutliers[item.dataKey], item => item) : []
+                      config.boxplot.plotOutlierValues ? map(plot.columnOutliers[item.dataKey], item => item) : []
                     }
                     outlierProps={{
                       style: {
@@ -78,10 +79,10 @@ const BoxPlotHorizontal = ({ xScale, yScale, seriesScale }) => {
                         config.boxplot,
                         plot.columnCategory,
                         item.dataKey,
-                        _.round(plot.q1[item.dataKey], config.dataFormat.roundTo),
-                        _.round(plot.q3[item.dataKey], config.dataFormat.roundTo),
-                        _.round(plot.median[item.dataKey], config.dataFormat.roundTo),
-                        _.round(plot.iqr[item.dataKey], config.dataFormat.roundTo),
+                        round(plot.q1[item.dataKey], config.dataFormat.roundTo),
+                        round(plot.q3[item.dataKey], config.dataFormat.roundTo),
+                        round(plot.median[item.dataKey], config.dataFormat.roundTo),
+                        round(plot.iqr[item.dataKey], config.dataFormat.roundTo),
                         config.xAxis.label,
                         defaultColor
                       ),