@cdc/chart 4.26.2 → 4.26.3

package/src/data/legacy-defaults.ts

@@ -0,0 +1,18 @@
+// Preserves the OLD default values for properties changed in initial-state.js.
+// When the backfill loop fills a missing property, it uses these values instead
+// of the current defaults so that existing configs aren't visually affected.
+//
+// - Changed defaults: record the ORIGINAL value before any changes.
+// - New properties:   set to `undefined` so they are not backfilled at all.
+//
+// See backfillDefaults() in @cdc/core for the shared fill logic.
+export const LEGACY_CHART_DEFAULTS: Record<string, Record<string, unknown>> = {
+  general: { useIntelligentLineChartLabels: undefined },
+  yAxis: { hideAxis: false, hideTicks: false, gridLines: false, numTicks: '' },
+  xAxis: { numTicks: '', dateDisplayFormat: undefined, viewportNumTicks: undefined },
+  table: { expanded: true, dateDisplayFormat: '' },
+  legend: { position: 'right' },
+  dataFormat: { commas: false },
+  tooltips: { dateDisplayFormat: '' },
+  visual: { border: false, accent: false, background: false }
+}

package/src/helpers/abbreviateNumber.ts

@@ -1,17 +1,24 @@
-export const abbreviateNumber = num => {
-  let unit = ''
-  let absNum = Math.abs(num)
-
-  if (absNum >= 1e9) {
-    unit = 'B'
-    num = num / 1e9
-  } else if (absNum >= 1e6) {
-    unit = 'M'
-    num = num / 1e6
-  } else if (absNum >= 1e3) {
-    unit = 'K'
-    num = num / 1e3
-  }
-
-  return num + unit
-}
+const abbreviationUnits: Record<string, { K: string; M: string; B: string }> = {
+  'es-MX': { K: ' mil', M: ' M', B: ' mil M' }
+}
+
+const defaultUnits = { K: 'K', M: 'M', B: 'B' }
+
+export const abbreviateNumber = (num, locale?: string) => {
+  const units = (locale && abbreviationUnits[locale]) || defaultUnits
+  let unit = ''
+  let absNum = Math.abs(num)
+
+  if (absNum >= 1e9) {
+    unit = units.B
+    num = num / 1e9
+  } else if (absNum >= 1e6) {
+    unit = units.M
+    num = num / 1e6
+  } else if (absNum >= 1e3) {
+    unit = units.K
+    num = num / 1e3
+  }
+
+  return num + unit
+}

package/src/helpers/getChartPatternId.ts

@@ -0,0 +1,17 @@
+import { sanitizeToSvgId } from '@cdc/core/helpers/cove/string'
+
+const getStableKeyHash = (input: string): string => {
+  // djb2 variant, deterministic and cheap for short editor keys
+  let hash = 5381
+  for (let i = 0; i < input.length; i++) {
+    hash = (hash * 33) ^ input.charCodeAt(i)
+  }
+  return (hash >>> 0).toString(36)
+}
+
+export const getChartPatternId = (patternKey: string): string => {
+  const rawKey = String(patternKey)
+  const sanitizedKey = sanitizeToSvgId(rawKey)
+  const hashSuffix = getStableKeyHash(rawKey)
+  return `chart-pattern-${sanitizedKey}-${hashSuffix}`
+}

package/src/helpers/getMinMax.ts

@@ -37,8 +37,8 @@ const getMinMax = ({
   let leftMax = 0
   let rightMax = 0
 
-  if (!data) {
-    return { min, max }
+  if (!data || !config.runtime) {
+    return { min, max, leftMax, rightMax }
   }
 
   const { visualizationType, series } = config
@@ -248,6 +248,20 @@ const getMinMax = ({
     min = min / 1.1
   }
 
+  // Enforce smallest left axis max so small-data charts don't show misleading decimal ticks
+  const smallestLeftAxisMaxRaw = config.yAxis.smallestLeftAxisMax
+  if (smallestLeftAxisMaxRaw !== null && smallestLeftAxisMaxRaw !== '') {
+    const smallestLeftAxisMax = Number(smallestLeftAxisMaxRaw)
+    if (!Number.isNaN(smallestLeftAxisMax)) {
+      if (max < smallestLeftAxisMax) {
+        max = smallestLeftAxisMax
+      }
+      if (leftMax < smallestLeftAxisMax) {
+        leftMax = smallestLeftAxisMax
+      }
+    }
+  }
+
   return { min, max, leftMax, rightMax }
 }
 export default getMinMax

package/src/helpers/seriesColumnSettings.ts

@@ -0,0 +1,114 @@
+import { Column } from '@cdc/core/types/Column'
+import { Series } from '@cdc/core/types/Series'
+
+type ChartColumns = Record<string, Partial<Column>>
+type SeriesItem = Series[number]
+type ColumnFormattingParams = {
+  addColPrefix?: string
+  addColSuffix?: string
+  addColRoundTo?: number
+  addColCommas?: boolean
+}
+
+const hasOwn = (object: object, key: keyof Column) => Object.prototype.hasOwnProperty.call(object, key)
+
+export const createDefaultSeriesColumnConfig = (columnName: string): Column => ({
+  name: columnName,
+  label: columnName,
+  prefix: '',
+  suffix: '',
+  roundToPlace: 0,
+  commas: false,
+  dataTable: true,
+  order: undefined,
+  showInViz: false,
+  startingPoint: '0',
+  series: undefined,
+  tooltips: false,
+  forestPlot: false,
+  forestPlotAlignRight: false,
+  forestPlotStartingPoint: 0
+})
+
+export const getSeriesOwnedColumnNames = (series: Partial<SeriesItem>[] = []): string[] => {
+  return series.map(item => item?.dataKey).filter(Boolean)
+}
+
+export const findColumnConfigByName = (
+  columns: ChartColumns = {},
+  columnName: string
+): { columnKey: string; columnConfig: Partial<Column> } | null => {
+  for (const [columnKey, columnConfig] of Object.entries(columns)) {
+    if (columnConfig?.name === columnName || (!columnConfig?.name && columnKey === columnName)) {
+      return { columnKey, columnConfig }
+    }
+  }
+
+  return null
+}
+
+export const getSeriesColumnConfig = (columns: ChartColumns = {}, seriesKey: string) => {
+  const existingEntry = findColumnConfigByName(columns, seriesKey)
+  const baseColumnConfig = createDefaultSeriesColumnConfig(seriesKey)
+
+  return {
+    columnKey: existingEntry?.columnKey || seriesKey,
+    columnConfig: {
+      ...baseColumnConfig,
+      ...(existingEntry?.columnConfig || {}),
+      name: seriesKey,
+      label: existingEntry?.columnConfig?.label ?? baseColumnConfig.label
+    }
+  }
+}
+
+export const upsertSeriesColumnConfig = (
+  columns: ChartColumns = {},
+  seriesKey: string,
+  updates: Partial<Column>
+): ChartColumns => {
+  const existingEntry = findColumnConfigByName(columns, seriesKey)
+  const columnKey = existingEntry?.columnKey || seriesKey
+  const nextColumnConfig = {
+    ...(existingEntry?.columnConfig || {}),
+    ...updates,
+    name: seriesKey
+  }
+
+  if (
+    nextColumnConfig.label === undefined &&
+    !hasOwn(existingEntry?.columnConfig || {}, 'label') &&
+    !hasOwn(updates, 'label')
+  ) {
+    delete nextColumnConfig.label
+  }
+
+  return {
+    ...columns,
+    [columnKey]: nextColumnConfig
+  }
+}
+
+export const getSeriesColumnFormattingParams = (columnConfig?: Partial<Column>): ColumnFormattingParams | undefined => {
+  if (!columnConfig) return undefined
+
+  const formattingParams: ColumnFormattingParams = {}
+
+  if (hasOwn(columnConfig, 'prefix')) {
+    formattingParams.addColPrefix = columnConfig.prefix ?? ''
+  }
+
+  if (hasOwn(columnConfig, 'suffix')) {
+    formattingParams.addColSuffix = columnConfig.suffix ?? ''
+  }
+
+  if (hasOwn(columnConfig, 'roundToPlace')) {
+    formattingParams.addColRoundTo = columnConfig.roundToPlace ?? 0
+  }
+
+  if (hasOwn(columnConfig, 'commas')) {
+    formattingParams.addColCommas = columnConfig.commas ?? false
+  }
+
+  return Object.keys(formattingParams).length ? formattingParams : undefined
+}

package/src/helpers/tests/countNumOfTicks.test.ts

@@ -0,0 +1,77 @@
+import { countNumOfTicks } from '../countNumOfTicks'
+import { expect, describe, it } from 'vitest'
+
+const baseArgs = {
+  max: 100,
+  min: 0,
+  data: [{ a: 1 }, { a: 2 }, { a: 3 }, { a: 4 }, { a: 5 }],
+  config: { visualizationType: 'Bar' } as any
+}
+
+describe('countNumOfTicks', () => {
+  it('uses viewport-specific tick count when viewportNumTicks[currentViewport] is set', () => {
+    const result = countNumOfTicks({
+      ...baseArgs,
+      axis: 'xAxis',
+      runtime: { xAxis: { numTicks: 6, viewportNumTicks: { xs: 3, xxs: 2 } } },
+      currentViewport: 'xs',
+      isHorizontal: false
+    })
+    expect(result).toBe(3)
+  })
+
+  it('falls back to numTicks when viewportNumTicks is absent', () => {
+    const result = countNumOfTicks({
+      ...baseArgs,
+      axis: 'xAxis',
+      runtime: { xAxis: { numTicks: 6 } },
+      currentViewport: 'xs',
+      isHorizontal: false
+    })
+    expect(result).toBe(6)
+  })
+
+  it('falls back to numTicks when current viewport has no entry in viewportNumTicks', () => {
+    const result = countNumOfTicks({
+      ...baseArgs,
+      axis: 'xAxis',
+      runtime: { xAxis: { numTicks: 6, viewportNumTicks: { xxs: 2 } } },
+      currentViewport: 'lg',
+      isHorizontal: false
+    })
+    expect(result).toBe(6)
+  })
+
+  it('xAxis vertical with numTicks: 6 returns 6', () => {
+    const result = countNumOfTicks({
+      ...baseArgs,
+      axis: 'xAxis',
+      runtime: { xAxis: { numTicks: 6 } },
+      currentViewport: 'lg',
+      isHorizontal: false
+    })
+    expect(result).toBe(6)
+  })
+
+  it('yAxis with numTicks: 4 returns 4', () => {
+    const result = countNumOfTicks({
+      ...baseArgs,
+      axis: 'yAxis',
+      runtime: { yAxis: { numTicks: 4 } },
+      currentViewport: 'lg',
+      isHorizontal: false
+    })
+    expect(result).toBe(4)
+  })
+
+  it('xAxis horizontal with no numTicks returns 4 (hardcoded fallback)', () => {
+    const result = countNumOfTicks({
+      ...baseArgs,
+      axis: 'xAxis',
+      runtime: { xAxis: { numTicks: '' } },
+      currentViewport: 'lg',
+      isHorizontal: true
+    })
+    expect(result).toBe(4)
+  })
+})

package/src/helpers/tests/seriesColumnSettings.test.ts

@@ -0,0 +1,84 @@
+import {
+  createDefaultSeriesColumnConfig,
+  findColumnConfigByName,
+  getSeriesColumnConfig,
+  getSeriesColumnFormattingParams,
+  getSeriesOwnedColumnNames,
+  upsertSeriesColumnConfig
+} from '../seriesColumnSettings'
+
+describe('seriesColumnSettings', () => {
+  it('returns all current series data keys as owned column names', () => {
+    expect(getSeriesOwnedColumnNames([{ dataKey: 'cases' }, { dataKey: 'deaths' }, {}])).toEqual(['cases', 'deaths'])
+  })
+
+  it('finds an existing column config by configured name', () => {
+    const result = findColumnConfigByName(
+      {
+        additionalColumn1: { name: 'cases', label: 'Cases', tooltips: true }
+      },
+      'cases'
+    )
+
+    expect(result).toEqual({
+      columnKey: 'additionalColumn1',
+      columnConfig: { name: 'cases', label: 'Cases', tooltips: true }
+    })
+  })
+
+  it('returns a default-backed series column config when none exists yet', () => {
+    const result = getSeriesColumnConfig({}, 'cases')
+
+    expect(result.columnKey).toBe('cases')
+    expect(result.columnConfig).toEqual(createDefaultSeriesColumnConfig('cases'))
+  })
+
+  it('updates an existing matching column config without changing its key', () => {
+    const updatedColumns = upsertSeriesColumnConfig(
+      {
+        additionalColumn1: { name: 'cases', label: 'Cases', dataTable: false }
+      },
+      'cases',
+      { prefix: '$', commas: true }
+    )
+
+    expect(updatedColumns).toEqual({
+      additionalColumn1: {
+        name: 'cases',
+        label: 'Cases',
+        dataTable: false,
+        prefix: '$',
+        commas: true
+      }
+    })
+  })
+
+  it('does not persist display defaults when creating a new series-owned column config', () => {
+    expect(upsertSeriesColumnConfig({}, 'cases', { label: 'Cases' })).toEqual({
+      cases: {
+        name: 'cases',
+        label: 'Cases'
+      }
+    })
+  })
+
+  it('only returns explicit formatting overrides and preserves falsey values', () => {
+    expect(
+      getSeriesColumnFormattingParams({
+        prefix: '',
+        suffix: ' units',
+        roundToPlace: 0,
+        commas: false
+      })
+    ).toEqual({
+      addColPrefix: '',
+      addColSuffix: ' units',
+      addColRoundTo: 0,
+      addColCommas: false
+    })
+  })
+
+  it('returns undefined when no formatting overrides were explicitly configured', () => {
+    expect(getSeriesColumnFormattingParams({ label: 'Cases' })).toBeUndefined()
+  })
+})

package/src/hooks/useRightAxis.ts

@@ -27,6 +27,20 @@ export default function useRightAxis({ config, yMax = 0, data = [] }) {
     minValue = config.yAxis.rightMin
   }
 
+  // Enforce smallest right axis max so small-data charts don't show misleading decimal ticks
+  const smallestRightAxisMaxRaw = config.yAxis.smallestRightAxisMax
+  let smallestRightAxisMax: number | null = null
+
+  if (smallestRightAxisMaxRaw !== null && smallestRightAxisMaxRaw !== undefined && smallestRightAxisMaxRaw !== '') {
+    const coercedSmallestRightAxisMax = Number(smallestRightAxisMaxRaw)
+    if (!Number.isNaN(coercedSmallestRightAxisMax)) {
+      smallestRightAxisMax = coercedSmallestRightAxisMax
+    }
+  }
+
+  if (smallestRightAxisMax !== null && max < smallestRightAxisMax) {
+    max = smallestRightAxisMax
+  }
   // if there is a bar series & the right axis doesn't include a negative number, default to zero
   const hasBarSeries = config.runtime?.barSeriesKeys?.length > 0
   const hasLineSeries = config.runtime?.lineSeriesKeys?.length > 0

package/src/hooks/useScales.ts

@@ -9,6 +9,7 @@ import {
   getTicks
 } from '@visx/scale'
 import { useContext } from 'react'
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 import ConfigContext from '../ConfigContext'
 import { ChartConfig } from '../types/ChartConfig'
 import { ChartContext } from '../types/ChartContext'
@@ -59,9 +60,8 @@ const useScales = (properties: useScaleProps) => {
   } = properties
 
   const context = useContext<ChartContext>(ConfigContext)
-  const { rawData, dimensions, convertLineToBarGraph = false } = context
+  const { convertLineToBarGraph = false } = context
 
-  const [screenWidth] = dimensions
   const isHorizontal = config.orientation === 'horizontal'
   const { visualizationType, xAxis, forestPlot, runtime } = config
   const isForestPlot = visualizationType === 'Forest Plot'
@@ -308,65 +308,38 @@ const useScales = (properties: useScaleProps) => {
     }
 
     yScale = scaleLinear({
-      domain: [0, rawData.length],
+      domain: [0, data.length],
       range: resolvedYRange()
     })
 
     const xAxisPadding = 5
+    const [plotStart, plotEnd] = getForestPlotRange(config, data as Record<string, any>[], xMax)
+
+    if (forestPlot.type === 'Linear') {
+      xScale = scaleLinear<LinearScaleConfig>({
+        domain: [
+          Math.min(...data.map(d => parseFloat(d[forestPlot.lower]))) - xAxisPadding,
+          Math.max(...data.map(d => parseFloat(d[forestPlot.upper]))) + xAxisPadding
+        ],
+        range: [plotStart, plotEnd],
+        type: scaleTypes.LINEAR
+      })
+      xScale.type = scaleTypes.LINEAR
+    }
 
-    const leftWidthOffset = (Number(forestPlot.leftWidthOffset) / 100) * xMax
-    const rightWidthOffset = (Number(forestPlot.rightWidthOffset) / 100) * xMax
-
-    const rightWidthOffsetMobile = (Number(forestPlot.rightWidthOffsetMobile) / 100) * xMax
-    const leftWidthOffsetMobile = (Number(forestPlot.leftWidthOffsetMobile) / 100) * xMax
-
-    if (screenWidth > 480) {
-      if (forestPlot.type === 'Linear') {
-        xScale = scaleLinear({
-          domain: [
-            Math.min(...data.map(d => parseFloat(d[forestPlot.lower]))) - xAxisPadding,
-            Math.max(...data.map(d => parseFloat(d[forestPlot.upper]))) + xAxisPadding
-          ],
-          range: [leftWidthOffset, Number(screenWidth) - rightWidthOffset]
-        })
-        xScale.type = scaleTypes.LINEAR
-      }
-      if (forestPlot.type === 'Logarithmic') {
-        let max = Math.max(...data.map(d => parseFloat(d[forestPlot.upper])))
-        let fp_min = Math.min(...data.map(d => parseFloat(d[forestPlot.lower])))
-
-        xScale = scaleLog<LogScaleConfig>({
-          domain: [fp_min, max],
-          range: [leftWidthOffset, xMax - rightWidthOffset],
-          nice: true
-        })
-        xScale.type = scaleTypes.LOG
-      }
-    } else {
-      if (forestPlot.type === 'Linear') {
-        xScale = scaleLinear<LinearScaleConfig>({
-          domain: [
-            Math.min(...data.map(d => parseFloat(d[forestPlot.lower]))) - xAxisPadding,
-            Math.max(...data.map(d => parseFloat(d[forestPlot.upper]))) + xAxisPadding
-          ],
-          range: [leftWidthOffsetMobile, xMax - rightWidthOffsetMobile],
-          type: scaleTypes.LINEAR
-        })
-      }
-
-      if (forestPlot.type === 'Logarithmic') {
-        let max = Math.max(...data.map(d => parseFloat(d[forestPlot.upper])))
-        let fp_min = Math.min(...data.map(d => parseFloat(d[forestPlot.lower])))
-
-        xScale = scaleLog<LogScaleConfig>({
-          domain: [fp_min, max],
-          range: [leftWidthOffset, xMax - rightWidthOffset],
-          nice: true,
-          base: max > 1 ? 10 : 2,
-          round: false,
-          type: scaleTypes.LOG
-        })
-      }
+    if (forestPlot.type === 'Logarithmic') {
+      const max = Math.max(...data.map(d => parseFloat(d[forestPlot.upper])))
+      const fp_min = Math.min(...data.map(d => parseFloat(d[forestPlot.lower])))
+
+      xScale = scaleLog<LogScaleConfig>({
+        domain: [fp_min, max],
+        range: [plotStart, plotEnd],
+        nice: true,
+        base: max > 1 ? 10 : 2,
+        round: false,
+        type: scaleTypes.LOG
+      })
+      xScale.type = scaleTypes.LOG
     }
   }
   return {
@@ -525,3 +498,66 @@ const sortXAxisData = (xAxisData, sortByRecentDate) => {
     return xAxisData.sort((a, b) => Number(a) - Number(b))
   }
 }
+
+const FOREST_PLOT_FONT = 'normal 12px Nunito, sans-serif'
+const FOREST_PLOT_GAP = 24
+const FOREST_PLOT_MIN_WIDTH = 120
+const FOREST_PLOT_MAX_LEFT_RATIO = 0.45
+const FOREST_PLOT_MAX_RIGHT_RATIO = 0.35
+
+const getForestPlotRange = (config: ChartConfig, data: Record<string, any>[], xMax: number): [number, number] => {
+  if (!xMax) return [0, 0]
+
+  const leftReserve = getForestPlotLeftReserve(config, data, xMax)
+  const rightReserve = getForestPlotRightReserve(config, data, xMax)
+  const availableReserve = Math.max(xMax - FOREST_PLOT_MIN_WIDTH, 0)
+  const totalReserve = leftReserve + rightReserve
+
+  if (totalReserve <= availableReserve) {
+    return [leftReserve, xMax - rightReserve]
+  }
+
+  if (!availableReserve || !totalReserve) {
+    return [0, xMax]
+  }
+
+  const reserveScale = availableReserve / totalReserve
+  return [leftReserve * reserveScale, xMax - rightReserve * reserveScale]
+}
+
+const getForestPlotLeftReserve = (config: ChartConfig, data: Record<string, any>[], xMax: number) => {
+  const { forestPlot, xAxis } = config
+  const columns = Object.values(config.columns || {}) as Record<string, any>[]
+  const studyTextWidth = forestPlot.hideDateCategoryCol
+    ? 0
+    : getForestPlotTextWidth([xAxis.dataKey, ...data.map(row => row?.[xAxis.dataKey])])
+
+  const leftColumnExtent = columns
+    .filter(column => column?.forestPlot && !column?.forestPlotAlignRight)
+    .reduce((maxExtent, column) => {
+      const columnStart = Number(column.forestPlotStartingPoint ?? column.startingPoint ?? 0)
+      const columnWidth = getForestPlotTextWidth([column.label, ...data.map(row => row?.[column.name])])
+      return Math.max(maxExtent, columnStart + columnWidth)
+    }, 0)
+
+  const reserve = Math.max(studyTextWidth, leftColumnExtent)
+  return reserve ? Math.min(reserve + FOREST_PLOT_GAP, xMax * FOREST_PLOT_MAX_LEFT_RATIO) : 0
+}
+
+const getForestPlotRightReserve = (config: ChartConfig, data: Record<string, any>[], xMax: number) => {
+  const columns = Object.values(config.columns || {}) as Record<string, any>[]
+  const rightColumnWidth = columns
+    .filter(column => column?.forestPlot && column?.forestPlotAlignRight)
+    .reduce((maxWidth, column) => {
+      const columnWidth = getForestPlotTextWidth([column.label, ...data.map(row => row?.[column.name])])
+      return Math.max(maxWidth, columnWidth)
+    }, 0)
+
+  return rightColumnWidth ? Math.min(rightColumnWidth + FOREST_PLOT_GAP, xMax * FOREST_PLOT_MAX_RIGHT_RATIO) : 0
+}
+
+const getForestPlotTextWidth = (values: unknown[]) =>
+  values.reduce((maxWidth, value) => {
+    const text = value === null || value === undefined ? '' : String(value)
+    return Math.max(maxWidth, getTextWidth(text, FOREST_PLOT_FONT) || 0)
+  }, 0)

package/src/hooks/useTooltip.tsx

@@ -10,6 +10,11 @@ import { localPoint } from '@visx/event'
 import { bisector } from 'd3-array'
 import _, { get } from 'lodash'
 import { getHorizontalBarHeights } from '../components/BarChart/helpers/getBarHeights'
+import {
+  findColumnConfigByName,
+  getSeriesColumnFormattingParams,
+  getSeriesOwnedColumnNames
+} from '../helpers/seriesColumnSettings'
 
 export const useTooltip = props => {
   // Track the last X-axis value to prevent duplicate analytics events
@@ -27,6 +32,7 @@ export const useTooltip = props => {
   } = useContext<ChartContext>(ConfigContext)
   const { xScale, yScale, seriesScale, showTooltip, hideTooltip, interactionLabel = '' } = props
   const { xAxis, visualizationType, orientation, yAxis, runtime } = config
+  const seriesOwnedColumnNames = getSeriesOwnedColumnNames(config.series)
 
   // Track the latest xScale in a ref to prevent stale closures
   const xScaleRef = useRef(xScale)
@@ -72,8 +78,14 @@ export const useTooltip = props => {
 
   const getFormattedValue = (seriesKey, value, config, getAxisPosition) => {
     // handle case where data is missing
-    const showMissingDataValue = config.general.showMissingDataLabel && (!value || value === 'null')
-    const formattedValue = seriesKey === config.xAxis.dataKey ? value : formatNumber(value, getAxisPosition(seriesKey))
+    const showMissingDataValue =
+      config.general.showMissingDataLabel && (value === null || value === undefined || value === '' || value === 'null')
+    const seriesColumnConfig = findColumnConfigByName(config.columns || {}, seriesKey)?.columnConfig
+    const formattingParams = getSeriesColumnFormattingParams(seriesColumnConfig)
+    const formattedValue =
+      seriesKey === config.xAxis.dataKey
+        ? value
+        : formatColNumber(value, getAxisPosition(seriesKey), true, config, formattingParams)
 
     return showMissingDataValue ? 'N/A' : formattedValue
   }
@@ -98,6 +110,9 @@ export const useTooltip = props => {
     const columnsWithTooltips = []
     const tooltipItems = [] as any[][]
     for (const [colKey, column] of Object.entries(config.columns)) {
+      const columnName = column.name || colKey
+      if (seriesOwnedColumnNames.includes(columnName)) continue
+
       const formattingParams = {
         addColPrefix: column.prefix,
         addColSuffix: column.suffix,
@@ -633,7 +648,9 @@ export const useTooltip = props => {
    */
   const getSeriesNameFromLabel = originalColumnName => {
     let series = config.runtime.series.filter(s => s.dataKey === originalColumnName)
-    if (series[0]?.name) return series[0]?.name
+    if (series[0] && series[0].name !== undefined) return series[0]?.name
+    const columnConfig = findColumnConfigByName(config.columns || {}, originalColumnName)?.columnConfig
+    if (columnConfig?.label !== undefined) return columnConfig.label
     return originalColumnName
   }