@cdc/chart 4.26.1 → 4.26.3

package/src/helpers/handleLineType.ts

@@ -1,18 +1,22 @@
-export const handleLineType = lineType => {
-  switch (lineType) {
-    case 'dashed-sm':
-      return '5 5'
-    case 'Dashed Small':
-      return '5 5'
-    case 'dashed-md':
-      return '10 5'
-    case 'Dashed Medium':
-      return '10 5'
-    case 'dashed-lg':
-      return '15 5'
-    case 'Dashed Large':
-      return '15 5'
-    default:
-      return 0
-  }
-}
+const DASH_PATTERNS = {
+  SMALL: '5 5',
+  MEDIUM: '10 5',
+  LARGE: '15 5',
+  SOLID: 0
+} as const
+
+export const handleLineType = (lineType: string): string | number => {
+  switch (lineType) {
+    case 'dashed-sm':
+    case 'Dashed Small':
+      return DASH_PATTERNS.SMALL
+    case 'dashed-md':
+    case 'Dashed Medium':
+      return DASH_PATTERNS.MEDIUM
+    case 'dashed-lg':
+    case 'Dashed Large':
+      return DASH_PATTERNS.LARGE
+    default:
+      return DASH_PATTERNS.SOLID
+  }
+}

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/useProgrammaticTooltip.ts

@@ -8,6 +8,7 @@ interface UseProgrammaticTooltipProps {
   setShowHoverLine: (show: boolean) => void
   handleTooltipMouseOver: (event: MouseEvent, additionalChartData?: any) => void
   hideTooltip: () => void
+  setSynchronizedXValue?: (value: any) => void
 }
 
 /**
@@ -21,7 +22,8 @@ export const useProgrammaticTooltip = ({
   setPoint,
   setShowHoverLine,
   handleTooltipMouseOver,
-  hideTooltip
+  hideTooltip,
+  setSynchronizedXValue
 }: UseProgrammaticTooltipProps) => {
   // Internal SVG ref for DOM manipulation
   const internalSvgRef = useRef<SVGSVGElement>(null)
@@ -50,6 +52,15 @@ export const useProgrammaticTooltip = ({
          * @param {number} yCoordinate - Exact Y coordinate to use
          */
         triggerTooltipAtDataValue: (xAxisValue: any, yCoordinate: number) => {
+          // Warming Stripes positions rects by index (with data sampling), not via xScale,
+          // so synthetic mouse events won't map to the correct data points.
+          // Route through synchronizedXValue state instead, which WarmingStripes
+          // resolves to the matching stripe and calls showTooltip directly.
+          if (config.visualizationType === 'Warming Stripes') {
+            setSynchronizedXValue?.(xAxisValue)
+            return
+          }
+
           const pixelX = getCoordinateFromXValue(xAxisValue)
           const adjustedX = pixelX + Number(config.yAxis.size || 0)
 
@@ -86,10 +97,20 @@ export const useProgrammaticTooltip = ({
         hideTooltip: () => {
           hideTooltip()
           setShowHoverLine(false)
+          setSynchronizedXValue?.(null)
         }
       })
     },
-    [getCoordinateFromXValue, config.yAxis.size, setPoint, setShowHoverLine, handleTooltipMouseOver, hideTooltip]
+    [
+      getCoordinateFromXValue,
+      config.yAxis.size,
+      config.visualizationType,
+      setPoint,
+      setShowHoverLine,
+      handleTooltipMouseOver,
+      hideTooltip,
+      setSynchronizedXValue
+    ]
   )
 
   return internalSvgRef

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'
@@ -121,6 +121,11 @@ const useScales = (properties: useScaleProps) => {
     range: [0, xMax]
   })
 
+  let yScaleAnnotation = scaleLinear({
+    domain: [0, 100],
+    range: [0, yMax]
+  })
+
   // handle  Horizontal bars
   if (isHorizontal) {
     xScale = composeXScale({ min: min * 1.03, max, xMax, config })
@@ -303,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 {
@@ -372,6 +350,7 @@ const useScales = (properties: useScaleProps) => {
     g2xScale,
     xScaleNoPadding,
     xScaleAnnotation,
+    yScaleAnnotation,
     min,
     max,
     leftMax,
@@ -387,6 +366,7 @@ const getFirstDayOfMonth = ms => {
 }
 
 const dateFormatHasMonthButNoDays = dateFormat => {
+  if (!dateFormat) return false
   return (
     (dateFormat.includes('%b') ||
       dateFormat.includes('%B') ||
@@ -518,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,
@@ -592,6 +607,7 @@ export const useTooltip = props => {
       case 'Line':
       case 'Area Chart':
       case 'Pie':
+      case 'Horizon Chart':
         return common
       case 'Combo':
         return [...common, ...ciItems]
@@ -600,6 +616,8 @@ export const useTooltip = props => {
 
       case 'Bar':
         return orientation === 'vertical' ? common : [runtime.yAxis.dataKey, ...runtime?.seriesKeys]
+      case 'Warming Stripes':
+        return common
       default:
         throw new Error('No visualization type found in handleTooltipMouseOver')
     }
@@ -630,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
   }