@cdc/chart 4.26.7 → 4.26.10

package/src/components/BarChartRace/bar-chart-race.css

@@ -0,0 +1,160 @@
+.bar-chart-race {
+  box-sizing: border-box;
+  min-height: 180px;
+  padding: 0.5rem 0 1rem;
+  width: 100%;
+}
+
+.bar-chart-race__header {
+  align-items: center;
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-start;
+  margin-bottom: 1rem;
+}
+
+.bar-chart-race__frame {
+  font-family: var(--fonts-nunito, var(--app-font-secondary));
+  font-size: 1.5rem;
+}
+
+.bar-chart-race__plot {
+  position: relative;
+}
+
+.bar-chart-race__row {
+  align-items: center;
+  display: grid;
+  grid-template-columns: clamp(6rem, 16%, 8rem) 1fr;
+  height: 40px;
+  left: 0;
+  position: absolute;
+  width: 100%;
+}
+
+.bar-chart-race__category {
+  font-weight: 700;
+  overflow: hidden;
+  padding-right: 0.75rem;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bar-chart-race__bar-area {
+  align-items: center;
+  display: flex;
+  min-width: 0;
+}
+
+.bar-chart-race__bar {
+  flex: 0 0 auto;
+  height: 32px;
+  min-width: 1px;
+  position: relative;
+}
+
+.bar-chart-race__bar--value-inside {
+  overflow: hidden;
+}
+
+.bar-chart-race__value {
+  font-variant-numeric: tabular-nums;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  white-space: nowrap;
+}
+
+.bar-chart-race__value--inside {
+  right: 0.3125rem;
+}
+
+.bar-chart-race__value--after {
+  color: var(--base-black, #1c1d1f);
+  left: 100%;
+  padding-left: 0.5rem;
+}
+
+.bar-chart-race--labels-below-bar .bar-chart-race__row {
+  align-items: start;
+  grid-template-areas:
+    'bar'
+    'category';
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: 32px 24px;
+  height: 56px;
+}
+
+.bar-chart-race--labels-below-bar .bar-chart-race__category {
+  grid-area: category;
+  max-width: 100%;
+  padding: 0.25rem 0 0;
+  text-align: left;
+}
+
+.bar-chart-race--labels-below-bar .bar-chart-race__bar-area {
+  grid-area: bar;
+}
+
+.bar-chart-race__frame-axis {
+  margin-left: clamp(6rem, 16%, 8rem);
+  margin-top: 0.75rem;
+  min-width: 0;
+}
+
+.bar-chart-race--labels-below-bar .bar-chart-race__frame-axis {
+  margin-left: 0;
+}
+
+.bar-chart-race__frame-axis-ticks {
+  border-top: 1px solid var(--cool-gray-30, #a9aeb1);
+  display: flex;
+  overflow-x: auto;
+}
+
+.bar-chart-race__frame-axis-tick {
+  color: var(--cool-gray-70, #565c65);
+  flex: 1 0 5rem;
+  font-size: 0.75rem;
+  min-width: 0;
+  position: relative;
+  text-align: center;
+}
+
+.bar-chart-race__frame-axis-tick.is-active {
+  color: var(--base-black, #1c1d1f);
+  font-weight: 700;
+}
+
+.bar-chart-race__frame-axis-mark {
+  border-left: 1px solid currentColor;
+  display: block;
+  height: 0.4rem;
+  margin: 0 auto 0.2rem;
+  width: 0;
+}
+
+.bar-chart-race__frame-axis-value {
+  display: block;
+  padding: 0 0.25rem;
+  white-space: nowrap;
+}
+
+.bar-chart-race__frame-axis-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 700;
+  margin-top: 0.4rem;
+  text-align: center;
+}
+
+@media (max-width: 480px) {
+  .bar-chart-race__row {
+    grid-template-columns: clamp(5rem, 24%, 6.5rem) 1fr;
+  }
+
+  .bar-chart-race__frame-axis {
+    margin-left: clamp(5rem, 24%, 6.5rem);
+  }
+}

package/src/components/BarChartRace/helpers.test.ts

@@ -0,0 +1,114 @@
+import { describe, expect, it } from 'vitest'
+import { buildBarRaceFrames, clampBarRaceMaxBars, getBarRaceEligibility } from './helpers'
+
+const config = {
+  visualizationType: 'Bar',
+  visualizationSubType: 'racing',
+  orientation: 'horizontal',
+  barStyle: 'flat',
+  isLollipopChart: false,
+  xAxis: { type: 'categorical', dataKey: 'Year' },
+  series: [{ dataKey: 'Value', dynamicCategory: 'Place' }],
+  runtime: { seriesKeys: ['Beta', 'Alpha', 'Gamma'] },
+  barRace: { maxBars: 2 }
+} as any
+
+const data = [
+  { Year: '2020', Place: 'Alpha', Value: 10 },
+  { Year: '2020', Place: 'Beta', Value: 10 },
+  { Year: '2020', Place: 'Gamma', Value: 30 },
+  { Year: '2021', Place: 'Alpha', Value: 50 },
+  { Year: '2021', Place: 'Beta', Value: 20 },
+  { Year: '2021', Place: 'Gamma', Value: 'missing' }
+]
+
+const wideConfig = {
+  ...config,
+  series: [
+    { dataKey: 'Alpha', name: 'Alpha' },
+    { dataKey: 'Beta', name: 'Beta' },
+    { dataKey: 'Gamma', name: 'Gamma' }
+  ],
+  runtime: { seriesKeys: ['Beta', 'Alpha', 'Gamma'] }
+} as any
+
+const wideData = [
+  { Year: '2020', Alpha: 10, Beta: 10, Gamma: 30 },
+  { Year: '2021', Alpha: 50, Beta: 20, Gamma: 'missing' }
+]
+
+describe('bar chart race helpers', () => {
+  it('preserves frame order, ranks descending, and uses runtime order to break ties', () => {
+    const result = buildBarRaceFrames(config, data)
+
+    expect(result.frames.map(frame => frame.key)).toEqual(['2020', '2021'])
+    expect(result.frames[0].items.map(item => item.category)).toEqual(['Gamma', 'Beta'])
+    expect(result.frames[1].items.map(item => item.category)).toEqual(['Alpha', 'Beta'])
+    expect(result.globalMax).toBe(50)
+    expect(result.competitorCount).toBe(3)
+  })
+
+  it('uses ordinary wide series as competitors without a Dynamic Category column', () => {
+    const result = getBarRaceEligibility(wideConfig, wideData)
+
+    expect(result.eligible).toBe(true)
+    expect(result.frames.map(frame => frame.key)).toEqual(['2020', '2021'])
+    expect(result.frames[0].items.map(item => item.category)).toEqual(['Gamma', 'Beta'])
+    expect(result.frames[1].items.map(item => item.category)).toEqual(['Alpha', 'Beta'])
+    expect(result.frames[0].items[0]).toMatchObject({ dataKey: 'Gamma', seriesKey: 'Gamma' })
+    expect(result.competitorCount).toBe(3)
+  })
+
+  it('keeps the global domain stable when the largest value falls outside a frame top N', () => {
+    const result = buildBarRaceFrames({ ...config, barRace: { maxBars: 1 } }, [
+      ...data,
+      { Year: '2022', Place: 'Gamma', Value: 100 }
+    ])
+
+    expect(result.frames[0].items).toHaveLength(1)
+    expect(result.globalMax).toBe(100)
+  })
+
+  it('rejects incompatible or insufficient configs with an actionable reason', () => {
+    expect(getBarRaceEligibility(config, data).eligible).toBe(true)
+    expect(getBarRaceEligibility({ ...config, smallMultiples: { mode: 'by-column' } }, data)).toMatchObject({
+      eligible: false,
+      reason: 'Racing mode does not support small multiples.'
+    })
+    expect(
+      getBarRaceEligibility(
+        config,
+        data.filter(row => row.Year === '2020')
+      ).reason
+    ).toContain('two valid frame')
+    expect(
+      getBarRaceEligibility(
+        config,
+        data.filter(row => row.Place === 'Alpha')
+      ).reason
+    ).toContain('two valid competitors')
+  })
+
+  it('excludes blank, negative, and nonnumeric values and clamps max bars', () => {
+    const result = buildBarRaceFrames(config, [
+      ...data,
+      { Year: '2021', Place: 'Negative', Value: -1 },
+      { Year: '2021', Place: 'Blank', Value: '' },
+      { Year: '2021', Place: 'Null', Value: null },
+      { Year: '2021', Place: 'Boolean', Value: false }
+    ])
+
+    expect(result.competitorCount).toBe(3)
+    expect(clampBarRaceMaxBars(99, result.competitorCount)).toBe(3)
+    expect(clampBarRaceMaxBars(0, result.competitorCount)).toBe(1)
+  })
+
+  it('rejects duplicate rows, nonhorizontal orientation, and nonflat styles', () => {
+    expect(getBarRaceEligibility(config, [...data, data[0]]).reason).toContain('one row per frame')
+    expect(getBarRaceEligibility({ ...config, orientation: 'vertical' }, data).reason).toContain(
+      'horizontal orientation'
+    )
+    expect(getBarRaceEligibility({ ...config, barStyle: 'rounded' }, data).reason).toContain('flat bar style')
+    expect(getBarRaceEligibility(wideConfig, [...wideData, wideData[0]]).reason).toContain('one row per frame')
+  })
+})

package/src/components/BarChartRace/helpers.ts

@@ -0,0 +1,185 @@
+import { type ChartConfig } from '../../types/ChartConfig'
+
+export const DEFAULT_BAR_RACE_MAX_BARS = 10
+
+type DataRow = Record<string, unknown>
+
+export type BarRaceItem = {
+  category: string
+  dataKey: string
+  frame: string
+  rank: number
+  seriesKey: string
+  value: number
+}
+
+export type BarRaceFrame = {
+  key: string
+  items: BarRaceItem[]
+}
+
+export type BarRaceProjection = {
+  competitorCount: number
+  hasDuplicateRows: boolean
+  frames: BarRaceFrame[]
+  globalMax: number
+}
+
+export type BarRaceEligibility = BarRaceProjection & {
+  eligible: boolean
+  reason?: string
+}
+
+const toFiniteNonnegativeNumber = (value: unknown): number | null => {
+  if (typeof value !== 'string' && typeof value !== 'number') return null
+  if (typeof value === 'string' && value.trim() === '') return null
+  const numericValue = typeof value === 'string' ? Number(value.replaceAll(',', '').replace(/%$/, '')) : Number(value)
+  return Number.isFinite(numericValue) && numericValue >= 0 ? numericValue : null
+}
+
+const getMaxBars = (config: Partial<ChartConfig>, competitorCount: number) => {
+  const authoredMax = Number(config.barRace?.maxBars ?? DEFAULT_BAR_RACE_MAX_BARS)
+  const roundedMax = Number.isFinite(authoredMax) ? Math.round(authoredMax) : DEFAULT_BAR_RACE_MAX_BARS
+  return Math.max(1, Math.min(competitorCount, roundedMax))
+}
+
+export const buildBarRaceFrames = (config: Partial<ChartConfig>, data: DataRow[] = []): BarRaceProjection => {
+  const series = Array.isArray(config.series) ? config.series.filter(item => item?.dataKey) : []
+  const dynamicSeries = series.filter(item => item.dynamicCategory)
+  const usesDynamicCategory = series.length === 1 && dynamicSeries.length === 1
+  const frameKey = config.xAxis?.dataKey
+  const emptyProjection = { competitorCount: 0, hasDuplicateRows: false, frames: [], globalMax: 0 }
+
+  if (!frameKey || !series.length || !Array.isArray(data)) return emptyProjection
+
+  const frameOrder: string[] = []
+  const categoryOrder: string[] = []
+  const categoryOrderSet = new Set<string>()
+  const valuesByFrame = new Map<string, Map<string, Omit<BarRaceItem, 'frame' | 'rank'>>>()
+  let hasDuplicateRows = false
+
+  const addValue = (frame: string, category: string, seriesKey: string, dataKey: string, value: number) => {
+    if (!categoryOrderSet.has(seriesKey)) {
+      categoryOrder.push(seriesKey)
+      categoryOrderSet.add(seriesKey)
+    }
+    const frameValues = valuesByFrame.get(frame)
+    if (frameValues?.has(seriesKey)) hasDuplicateRows = true
+    frameValues?.set(seriesKey, { category, dataKey, seriesKey, value })
+  }
+
+  data.forEach(row => {
+    const rawFrame = row?.[frameKey]
+    if (rawFrame === null || rawFrame === undefined || String(rawFrame).trim() === '') return
+    const frame = String(rawFrame).trim()
+    if (!valuesByFrame.has(frame)) {
+      frameOrder.push(frame)
+      valuesByFrame.set(frame, new Map())
+    } else if (!usesDynamicCategory) {
+      hasDuplicateRows = true
+    }
+
+    if (usesDynamicCategory) {
+      const item = dynamicSeries[0]
+      const rawCategory = row?.[item.dynamicCategory]
+      const value = toFiniteNonnegativeNumber(row?.[item.dataKey])
+      if (rawCategory === null || rawCategory === undefined || String(rawCategory).trim() === '' || value === null)
+        return
+      const category = String(rawCategory).trim()
+      addValue(frame, category, category, item.dataKey, value)
+      return
+    }
+
+    series.forEach(item => {
+      const value = toFiniteNonnegativeNumber(row?.[item.dataKey])
+      if (value === null) return
+      addValue(frame, item.name || item.dataKey, item.dataKey, item.dataKey, value)
+    })
+  })
+
+  const runtimeCategoryOrder = Array.isArray(config.runtime?.seriesKeys)
+    ? [...new Set(config.runtime.seriesKeys.map(value => String(value).trim()))].filter(category =>
+        categoryOrderSet.has(category)
+      )
+    : []
+  const runtimeCategorySet = new Set(runtimeCategoryOrder)
+  const stableCategoryOrder = [...runtimeCategoryOrder, ...categoryOrder.filter(item => !runtimeCategorySet.has(item))]
+  const categoryIndex = new Map(stableCategoryOrder.map((category, index) => [category, index]))
+  const maxBars = getMaxBars(config, stableCategoryOrder.length)
+  let globalMax = 0
+
+  const frames = frameOrder.map(frame => {
+    const values = valuesByFrame.get(frame) ?? new Map()
+    const items = [...values.values()]
+      .map(item => ({ ...item, frame, rank: 0 }))
+      .sort(
+        (a, b) => b.value - a.value || (categoryIndex.get(a.seriesKey) ?? 0) - (categoryIndex.get(b.seriesKey) ?? 0)
+      )
+      .slice(0, maxBars)
+      .map((item, rank) => ({ ...item, rank }))
+
+    items.forEach(item => {
+      globalMax = Math.max(globalMax, item.value)
+    })
+
+    return { key: frame, items }
+  })
+
+  // Domain stability must include valid values outside the displayed top N.
+  valuesByFrame.forEach(values => values.forEach(item => (globalMax = Math.max(globalMax, item.value))))
+
+  return { competitorCount: stableCategoryOrder.length, hasDuplicateRows, frames, globalMax }
+}
+
+export const getBarRaceEligibility = (config: Partial<ChartConfig>, data: DataRow[] = []): BarRaceEligibility => {
+  const projection = buildBarRaceFrames(config, data)
+  const series = Array.isArray(config.series) ? config.series : []
+  const dynamicSeries = series.filter(item => item?.dynamicCategory)
+  const hasValidDynamicSeries =
+    series.length === 1 && Boolean(series[0]?.dataKey) && Boolean(String(series[0]?.dynamicCategory || '').trim())
+  const hasValidWideSeries = series.length >= 2 && dynamicSeries.length === 0 && series.every(item => item?.dataKey)
+
+  if (config.visualizationType !== 'Bar') {
+    return { ...projection, eligible: false, reason: 'Racing mode is available only for Bar charts.' }
+  }
+  if (config.xAxis?.type !== 'categorical') {
+    return { ...projection, eligible: false, reason: 'Racing mode requires a categorical Date/Category Axis.' }
+  }
+  if (!hasValidDynamicSeries && !hasValidWideSeries) {
+    return {
+      ...projection,
+      eligible: false,
+      reason: 'Racing mode requires at least two ordinary data series or one series with a Dynamic Category column.'
+    }
+  }
+  if (config.smallMultiples?.mode) {
+    return { ...projection, eligible: false, reason: 'Racing mode does not support small multiples.' }
+  }
+  if (config.orientation !== 'horizontal') {
+    return { ...projection, eligible: false, reason: 'Racing mode requires horizontal orientation.' }
+  }
+  if (config.isLollipopChart || (config.barStyle && config.barStyle !== 'flat')) {
+    return { ...projection, eligible: false, reason: 'Racing mode requires the flat bar style.' }
+  }
+  if (projection.hasDuplicateRows) {
+    return {
+      ...projection,
+      eligible: false,
+      reason: 'Racing mode requires one row per frame and competitor combination.'
+    }
+  }
+  if (projection.frames.length < 2) {
+    return { ...projection, eligible: false, reason: 'Racing mode requires at least two valid frame values.' }
+  }
+  if (projection.competitorCount < 2) {
+    return { ...projection, eligible: false, reason: 'Racing mode requires at least two valid competitors.' }
+  }
+
+  return { ...projection, eligible: true }
+}
+
+export const clampBarRaceMaxBars = (value: unknown, competitorCount: number) => {
+  const numericValue = Number(value)
+  const nextValue = Number.isFinite(numericValue) ? Math.round(numericValue) : DEFAULT_BAR_RACE_MAX_BARS
+  return Math.max(1, Math.min(Math.max(1, competitorCount), nextValue))
+}

package/src/components/BarChartRace/index.ts

@@ -0,0 +1,3 @@
+export { default } from './BarChartRace'
+export { default as BarChartRaceFallback } from './BarChartRaceFallback'
+export * from './helpers'

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

@@ -1,6 +1,5 @@
-import sortBy from 'lodash/sortBy'
 import uniq from 'lodash/uniq'
-import * as d3 from 'd3-array'
+import { calculateBoxPlotStats } from '../../../helpers/boxPlotStats'
 
 interface Plot {
   columnCategory: string
@@ -30,47 +29,6 @@ export const handleTooltip = (boxplot, columnCategory, key, q1, q3, median, iqr,
   `
 }
 
-const calculateBoxPlotStats = (values: number[]) => {
-  if (!values || values.length === 0) return {}
-
-  // Sort the values
-  const sortedValues = sortBy(values.map(v => Number(v)))
-
-  // Quartiles
-  const firstQuartile = d3.quantile(sortedValues, 0.25) ?? 0
-  const thirdQuartile = d3.quantile(sortedValues, 0.75) ?? 0
-
-  // Interquartile Range (IQR)
-  const iqr = thirdQuartile - firstQuartile
-
-  // Outlier Bounds
-  const lowerBound = firstQuartile - 1.5 * iqr
-  const upperBound = thirdQuartile + 1.5 * iqr
-  // const lowerFence = q1 - 1.5 * iqr
-  // const upperFence = q3 + 1.5 * iqr
-
-  // Non-Outlier Values
-  const nonOutliers = sortedValues.filter(value => value >= lowerBound && value <= upperBound)
-  // **Outliers** =
-  const outliers = sortedValues.filter(v => v < lowerBound || v > upperBound)
-  const whiskerMax =
-    sortedValues
-      .slice()
-      .reverse()
-      .find(v => v <= upperBound) ?? thirdQuartile
-  const whiskerMin = nonOutliers.length > 0 ? nonOutliers[0] : firstQuartile
-  // Calculate Box Plot Stats
-  return {
-    min: whiskerMin,
-    max: whiskerMax,
-    median: d3.median(sortedValues),
-    firstQuartile,
-    thirdQuartile,
-    iqr,
-    outliers
-  }
-}
-
 const getValuesBySeriesKey = (group: string, config, data) => {
   const allSeriesKeys = config.series.map(item => item?.dataKey)
   const result = {}
@@ -82,24 +40,6 @@ const getValuesBySeriesKey = (group: string, config, data) => {
   return result
 }
 
-// Helper to calculate outliers based on IQR
-const calculateOutliers = (values: number[], firstQuartile: number, thirdQuartile: number) => {
-  const iqr = thirdQuartile - firstQuartile
-  const lowerBound = firstQuartile - 1.5 * iqr
-  const upperBound = thirdQuartile + 1.5 * iqr
-  return values.filter(value => value < lowerBound || value > upperBound)
-}
-
-// Helper to calculate non-outliers based on IQR
-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
-
-  // Return values within the bounds
-  return values.filter(value => value >= lowerBound && value <= upperBound)
-}
-
 // Main function to create plots with additional outlier data
 export const createPlots = (data, config) => {
   const dataKeys = data.map(d => d[config.xAxis.dataKey])
@@ -120,29 +60,18 @@ export const createPlots = (data, config) => {
 
       // Calculate outliers and non-outliers for each series key
       Object.keys(keyValues).forEach(key => {
-        const raw = keyValues[key] ?? []
-
-        // 2) normalize → trim, drop empties/non-numbers, coerce to Number
-        const cleaned: number[] = raw
-          .map(v => (typeof v === 'string' ? v.trim() : v)) // trim strings
-          .filter(v => v != null && v !== '' && !isNaN(+v)) // drop null/''/non-nums
-          .map(v => +v)
-
-        if (cleaned.length === 0) {
-          return
-        }
+        const stats = calculateBoxPlotStats(keyValues[key] ?? [])
+        if (!stats) return
 
         // Calculate box plot statistics
-        const { firstQuartile, thirdQuartile, min, max, median, iqr, outliers } = calculateBoxPlotStats(cleaned)
-        // Calculate outliers and non-outliers
-        columnOutliers[key] = calculateOutliers(cleaned, firstQuartile, thirdQuartile).map(Number)
-        columnNonOutliers[key] = calculateNonOutliers(cleaned, firstQuartile, thirdQuartile).map(Number)
-        columnMedian[key] = median
-        columnMin[key] = Number(min)
-        columnMax[key] = Number(max)
-        columnQ1[key] = firstQuartile
-        columnQ3[key] = thirdQuartile
-        columnIqr[key] = iqr
+        columnOutliers[key] = stats.outliers
+        columnNonOutliers[key] = stats.nonOutliers
+        columnMedian[key] = stats.median ?? null
+        columnMin[key] = stats.whiskerMin
+        columnMax[key] = stats.whiskerMax
+        columnQ1[key] = stats.q1
+        columnQ3[key] = stats.q3
+        columnIqr[key] = stats.iqr
       })
 
       // Add the plot object to the plots array

package/src/components/Brush/BrushSelector.tsx

@@ -9,6 +9,7 @@ import type { BrushHandleRenderProps } from '@visx/brush/lib/BrushHandle'
 import { isDateScale } from '@cdc/core/helpers/cove/date'
 import ConfigContext, { ChartDispatchContext } from '../../ConfigContext'
 import { getChartPatternId } from '../../helpers/getChartPatternId'
+import getStackedSeriesMax from '../../helpers/getStackedSeriesMax'
 import MiniChartPreview from './MiniChartPreview'
 import { classifyBrushInteraction } from './brushInteraction'
 import type { BrushInteractionTarget } from './brushInteraction'
@@ -173,8 +174,9 @@ const BrushSelector: FC<BrushSelectorProps> = ({ xMax, yMax }) => {
                   id={patternId}
                   height={size}
                   width={size}
-                  fill={pattern.color}
-                  strokeWidth={0.25}
+                  fill='transparent'
+                  stroke={pattern.color}
+                  strokeWidth={0.75}
                 />
               )
             default:
@@ -298,24 +300,9 @@ const BrushSelector: FC<BrushSelectorProps> = ({ xMax, yMax }) => {
     let hasValidValues = false
 
     if (isStacked) {
-      for (const row of tableData) {
-        let rowSum = 0
-        let hasRowValue = false
-        for (const s of leftSeries) {
-          if (!s.dataKey) continue
-          const value = parseFloat(row[s.dataKey])
-          if (!isNaN(value) && isFinite(value)) {
-            rowSum += value
-            hasRowValue = true
-          }
-        }
-        if (hasRowValue) {
-          hasValidValues = true
-          minValue = Math.min(minValue, rowSum)
-          maxValue = Math.max(maxValue, rowSum)
-        }
-      }
-      minValue = Math.min(0, minValue)
+      maxValue = getStackedSeriesMax(tableData, leftSeries)
+      minValue = 0
+      hasValidValues = maxValue !== 0
     } else {
       for (const s of leftSeries) {
         if (!s.dataKey) continue
@@ -831,14 +818,13 @@ const BrushSelector: FC<BrushSelectorProps> = ({ xMax, yMax }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [config.xAxis.brushDefaultRecentDateCount])
 
-  // Selected box style with solid border and pattern fill
   const selectedBoxStyle = useMemo(
     () => ({
-      fill: 'url(#brush_pattern)',
+      fill: config.xAxis.brushHideHatching === true ? 'transparent' : 'url(#brush_pattern)',
       stroke: '#333',
       strokeWidth: 1
     }),
-    []
+    [config.xAxis.brushHideHatching]
   )
 
   // Helper to update brush position programmatically