@cdc/chart 4.26.7 → 4.26.10

package/src/components/PairedBarChart.test.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import ConfigContext from '../ConfigContext'
+import PairedBarChart from './PairedBarChart'
+import { createMockChartContext, createMockConfig } from './LinearChart/tests/mockConfigContext'
+
+vi.mock('@cdc/core/helpers/cove/accessibility', () => ({
+  getContrastColor: () => '#000'
+}))
+
+vi.mock('@cdc/core/helpers/getTextWidth', () => ({
+  getTextWidth: () => 10
+}))
+
+const renderPairedBar = (casesLabel: string) => {
+  const baseConfig = createMockConfig()
+  const data = [{ Year: '2024', Cases: 10, Deaths: 2 }]
+  const config = createMockConfig({
+    visualizationType: 'Paired Bar',
+    orientation: 'horizontal',
+    barHasBorder: 'false',
+    barHeight: 25,
+    barSpace: 15,
+    xAxis: { ...baseConfig.xAxis, dataKey: 'Year', size: '50', type: 'categorical' },
+    yAxis: { ...baseConfig.yAxis, displayNumbersOnBar: false },
+    series: [
+      { dataKey: 'Cases', name: 'Reported Cases', type: 'Paired Bar', axis: 'Left', tooltip: true },
+      { dataKey: 'Deaths', name: 'Reported Deaths', type: 'Paired Bar', axis: 'Left', tooltip: true }
+    ] as any,
+    columns: {
+      Cases: { name: 'Cases', label: casesLabel },
+      Deaths: { name: 'Deaths', label: 'Death Rate' }
+    } as any,
+    runtime: {
+      ...baseConfig.runtime,
+      seriesLabels: { Cases: 'Reported Cases', Deaths: 'Reported Deaths' }
+    } as any
+  })
+  const context = createMockChartContext(config, {
+    transformedData: data,
+    colorScale: () => '#005ea8',
+    formatNumber: value => String(value)
+  })
+
+  return render(
+    <ConfigContext.Provider value={context}>
+      <PairedBarChart width={400} height={100} originalWidth={450} yAxisWidth={50} />
+    </ConfigContext.Provider>
+  )
+}
+
+describe('PairedBarChart tooltips', () => {
+  it('uses the customized series column label without rendering an undefined heading', () => {
+    const { container } = renderPairedBar('Case Rate')
+    const tooltip = container.querySelector('.bar.group-1')?.getAttribute('data-tooltip-html') || ''
+
+    expect(tooltip).toContain('Year: 2024')
+    expect(tooltip).toContain('Case Rate: 10')
+    expect(tooltip).not.toContain('Reported Cases')
+    expect(tooltip).not.toContain('undefined:')
+  })
+
+  it('falls back to the Series Name when the Label matches the data key', () => {
+    const { container } = renderPairedBar('Cases')
+    const tooltip = container.querySelector('.bar.group-1')?.getAttribute('data-tooltip-html') || ''
+
+    expect(tooltip).toContain('Reported Cases: 10')
+    expect(tooltip).not.toContain('undefined:')
+  })
+})

package/src/components/PieChart/PieChart.tsx

@@ -7,7 +7,7 @@ import { Group } from '@visx/group'
 import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
 import { colorPalettesChart as colorPalettes } from '@cdc/core/data/colorPalettes'
 import { getPaletteColors } from '@cdc/core/helpers/palettes/utils'
-import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
+import { getColorPaletteMajorVersion } from '@cdc/core/helpers/getColorPaletteMajorVersion'
 import {
   v2ColorDistribution,
   divergentColorDistribution,
@@ -26,6 +26,7 @@ import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 import { type TooltipDisplayData } from '../../helpers/tooltipHelpers'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 import { getPieLabelPosition } from './helpers/labelPlacement'
+import { getV21ChartDistributionColors } from '../../helpers/getV21ChartDistributionColors'
 
 type TooltipData = TooltipDisplayData
 
@@ -57,8 +58,7 @@ const measurePieLabelText = (text: string) => {
   const measured =
     typeof document === 'undefined'
       ? Math.ceil(text.length * ENHANCED_PIE_LABEL_FONT_SIZE * 0.6)
-      : (getTextWidth(text, ENHANCED_PIE_LABEL_FONT) ??
-        Math.ceil(text.length * ENHANCED_PIE_LABEL_FONT_SIZE * 0.6))
+      : getTextWidth(text, ENHANCED_PIE_LABEL_FONT) ?? Math.ceil(text.length * ENHANCED_PIE_LABEL_FONT_SIZE * 0.6)
 
   // Avoid unbounded growth in long-lived sessions with many unique labels.
   if (pieLabelTextWidthCache.size >= MAX_PIE_LABEL_TEXT_CACHE) pieLabelTextWidthCache.clear()
@@ -158,7 +158,10 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
 
   // Helper function to determine enhanced distribution type and apply it
   const applyEnhancedColorDistribution = (config, palette, numberOfKeys) => {
-    const version = getColorPaletteVersion(config)
+    const v21DistributionColors = getV21ChartDistributionColors(config, palette, numberOfKeys)
+    if (v21DistributionColors) return v21DistributionColors
+
+    const version = getColorPaletteMajorVersion(config)
     const configPalette = config.general?.palette?.name || config.palette
 
     // Skip enhanced distribution if not v2, too many keys, or wrong palette length
@@ -170,7 +173,6 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
     const isDivergent = configPalette && configPalette.includes('divergent')
     const isColorblindSafe =
       configPalette && (configPalette.includes('colorblindsafe') || configPalette.includes('qualitative_standard'))
-
     // Determine which distribution to use based on palette type
     let distributionMap = null
     if (isDivergent) {
@@ -251,6 +253,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
     config.xAxis.dataKey,
     config.general?.palette?.name,
     config.general?.palette?.isReversed,
+    config.general?.palette?.version,
     config.general?.palette?.customColors,
     config.general?.palette?.customColorsOrdered,
     config.palette
@@ -438,9 +441,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
     ? Math.min(width - labelGutter * 2, height - VERTICAL_LABEL_GUTTER * 2)
     : Math.min(width, height)
 
-  const radius = showCategoryPercentageLabels
-    ? Math.max(0, availableDiameter / 2)
-    : Math.min(width, height) / 2
+  const radius = showCategoryPercentageLabels ? Math.max(0, availableDiameter / 2) : Math.min(width, height) / 2
   const svgWidth = showCategoryPercentageLabels ? width : radius * 2
   const svgLeftOffset = Math.max((props.parentWidth - svgWidth) / 2, 0)
   const centerY = height / 2

package/src/components/RacingChartRenderer.tsx

@@ -0,0 +1,44 @@
+import { type ReactNode, type RefObject } from 'react'
+import ParentSize from '@visx/responsive/lib/components/ParentSize'
+import BarChartRace, { BarChartRaceFallback, type BarRaceEligibility } from './BarChartRace'
+import LineChartRace, { LineChartRaceFallback, type LineRaceEligibility } from './LineChartRace'
+
+type Props = {
+  barRace: BarRaceEligibility
+  family: 'Bar' | 'Line'
+  lineRace: LineRaceEligibility
+  parentRef: RefObject<HTMLDivElement>
+  renderTopYAxisTitles: () => ReactNode
+  svgRef: RefObject<SVGAElement>
+}
+
+const RacingChartRenderer = ({ barRace, family, lineRace, parentRef, renderTopYAxisTitles, svgRef }: Props) => {
+  const eligibility = family === 'Bar' ? barRace : lineRace
+
+  return (
+    <>
+      {(family === 'Line' || !eligibility.eligible) && renderTopYAxisTitles()}
+      <div ref={parentRef} style={{ width: '100%' }}>
+        <ParentSize>
+          {parent => {
+            if (family === 'Bar') {
+              return barRace.eligible ? (
+                <BarChartRace parentWidth={parent.width} race={barRace} />
+              ) : (
+                <BarChartRaceFallback ref={svgRef} parentWidth={parent.width} parentHeight={parent.height} />
+              )
+            }
+
+            return lineRace.eligible ? (
+              <LineChartRace ref={svgRef} parentWidth={parent.width} parentHeight={parent.height} race={lineRace} />
+            ) : (
+              <LineChartRaceFallback ref={svgRef} parentWidth={parent.width} parentHeight={parent.height} />
+            )
+          }}
+        </ParentSize>
+      </div>
+    </>
+  )
+}
+
+export default RacingChartRenderer

package/src/components/Regions/components/Regions.test.tsx

@@ -0,0 +1,179 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { scaleBand, scaleTime } from '@visx/scale'
+import { describe, expect, it } from 'vitest'
+import ConfigContext from '../../../ConfigContext'
+import { createMockChartContext } from '../../LinearChart/tests/mockConfigContext'
+import { RegionFills, useRegionLayouts, type RegionBoundaryMode } from './Regions'
+
+const regions = [
+  {
+    from: 'A',
+    to: 'B',
+    label: 'Region',
+    background: '#005ea8',
+    color: '#1b1b1b'
+  }
+]
+
+const RegionHarness = ({ xScale, seriesScale, boundaryMode, xMax = 300 }) => {
+  const regionLayout = useRegionLayouts({ xScale, seriesScale, boundaryMode, xMax })
+  return (
+    <svg>
+      <RegionFills layouts={regionLayout.layouts} yMax={200} />
+    </svg>
+  )
+}
+
+const renderRegion = ({
+  boundaryMode,
+  xScale,
+  seriesScale,
+  xMax = 300,
+  configOverrides = {}
+}: {
+  boundaryMode: RegionBoundaryMode
+  xScale: any
+  seriesScale?: any
+  xMax?: number
+  configOverrides?: any
+}) => {
+  const context = createMockChartContext({
+    regions,
+    orientation: 'vertical',
+    xAxis: {
+      ...createMockChartContext().config.xAxis,
+      type: 'categorical'
+    },
+    ...configOverrides
+  })
+  const result = render(
+    <ConfigContext.Provider value={context}>
+      <RegionHarness xScale={xScale} seriesScale={seriesScale} boundaryMode={boundaryMode} xMax={xMax} />
+    </ConfigContext.Provider>
+  )
+  return result.container.querySelector('.region-fill')
+}
+
+describe('scale-owned region layouts', () => {
+  it('uses the complete outer category allocation for band-boundary regions', () => {
+    const xScale = scaleBand({ domain: ['A', 'B', 'C'], range: [0, 300], padding: 0 })
+    const fill = renderRegion({
+      boundaryMode: 'band',
+      xScale,
+      seriesScale: scaleBand({ domain: ['one', 'two'], range: [0, 100] })
+    })
+
+    expect(Number(fill?.getAttribute('x'))).toBe(0)
+    expect(Number(fill?.getAttribute('width'))).toBe(200)
+  })
+
+  it('uses category centers for point-mark regions', () => {
+    const xScale = scaleBand({ domain: ['A', 'B', 'C'], range: [0, 300], padding: 0 })
+    const fill = renderRegion({ boundaryMode: 'point', xScale })
+
+    expect(Number(fill?.getAttribute('x'))).toBe(50)
+    expect(Number(fill?.getAttribute('width'))).toBe(100)
+  })
+
+  it('uses the centered series-scale range for date-time bar groups', () => {
+    const first = new Date('2024-01-01').getTime()
+    const second = new Date('2024-01-08').getTime()
+    const xScale = scaleTime({ domain: [first, second], range: [50, 250] })
+    const seriesScale = scaleBand({ domain: ['one', 'two'], range: [0, 40], padding: 0 })
+    const pointFill = renderRegion({
+      boundaryMode: 'point',
+      xScale,
+      configOverrides: {
+        regions: [{ ...regions[0], from: '2024-01-01', to: '2024-01-08' }],
+        xAxis: {
+          ...createMockChartContext().config.xAxis,
+          type: 'date-time',
+          dateParseFormat: '%Y-%m-%d'
+        }
+      }
+    })
+    const bandFill = renderRegion({
+      boundaryMode: 'band',
+      xScale,
+      seriesScale,
+      configOverrides: {
+        regions: [{ ...regions[0], from: '2024-01-01', to: '2024-01-08' }],
+        xAxis: {
+          ...createMockChartContext().config.xAxis,
+          type: 'date-time',
+          dateParseFormat: '%Y-%m-%d'
+        }
+      }
+    })
+
+    expect(Number(bandFill?.getAttribute('x'))).toBe(Number(pointFill?.getAttribute('x')) - 20)
+    expect(Number(bandFill?.getAttribute('width'))).toBe(Number(pointFill?.getAttribute('width')) + 40)
+  })
+
+  it('ends date-time Last Date bar regions at the final bar group edge', () => {
+    const first = new Date('2024-01-01').getTime()
+    const second = new Date('2024-01-08').getTime()
+    const xScale = scaleTime({ domain: [first, second], range: [50, 250] })
+    const seriesScale = scaleBand({ domain: ['one', 'two'], range: [0, 40], padding: 0 })
+    const fill = renderRegion({
+      boundaryMode: 'band',
+      xScale,
+      seriesScale,
+      configOverrides: {
+        regions: [
+          {
+            ...regions[0],
+            from: '2024-01-01T00:00:00',
+            to: '',
+            toType: 'Last Date'
+          }
+        ],
+        xAxis: {
+          ...createMockChartContext().config.xAxis,
+          type: 'date-time',
+          dateParseFormat: '%Y-%m-%d'
+        }
+      }
+    })
+
+    const expectedFrom = Number(xScale(first)) - 20
+    const expectedTo = Number(xScale(second)) + 20
+
+    expect(Number(fill?.getAttribute('x'))).toBe(expectedFrom)
+    expect(Number(fill?.getAttribute('width'))).toBe(expectedTo - expectedFrom)
+  })
+
+  it('ends Last Date regions at the final date band edge instead of the plot edge', () => {
+    const first = new Date('2024-01-01').getTime()
+    const second = new Date('2024-01-08').getTime()
+    const third = new Date('2024-01-15').getTime()
+    const xScale = scaleBand({ domain: [first, second, third], range: [0, 300], padding: 0.2 })
+    const fill = renderRegion({
+      boundaryMode: 'band',
+      xScale,
+      configOverrides: {
+        regions: [
+          {
+            ...regions[0],
+            from: '2024-01-01',
+            to: '',
+            toType: 'Last Date'
+          }
+        ],
+        xAxis: {
+          ...createMockChartContext().config.xAxis,
+          type: 'date',
+          dateParseFormat: '%Y-%m-%d'
+        }
+      }
+    })
+
+    const expectedFrom = Number(xScale(first))
+    const expectedTo = Number(xScale(third)) + xScale.bandwidth()
+
+    expect(Number(fill?.getAttribute('x'))).toBe(expectedFrom)
+    expect(Number(fill?.getAttribute('width'))).toBeCloseTo(expectedTo - expectedFrom)
+    expect(expectedTo).toBeLessThan(300)
+  })
+})

package/src/components/Regions/components/Regions.tsx

@@ -7,15 +7,6 @@ import { formatDate } from '@cdc/core/helpers/cove/date.js'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
 
-// Constants for visualization types
-const VIZ_TYPES = {
-  BAR: 'Bar',
-  LINE: 'Line',
-  AREA: 'Area Chart',
-  COMBO: 'Combo',
-  HORIZON: 'Horizon Chart'
-} as const
-
 const DEFAULT_REGION_BACKGROUND = 'var(--cool-gray-50, #71767a)'
 const TICK_LABEL_FONT_SIZE = 16
 const TICK_LABEL_FONT_SIZE_SMALL = 13
@@ -25,6 +16,7 @@ const REGION_LABEL_MAX_PLOT_WIDTH_RATIO = 1 / 3
 const REGION_LABEL_COMFORTABLE_MIN_WIDTH = 120
 const REGION_LABEL_COMFORTABLE_MIN_WIDTH_SMALL = 96
 const REGION_LABEL_FONT_FAMILY = 'Nunito, sans-serif'
+const SUPPORTED_REGION_VISUALIZATION_TYPES: readonly string[] = ['Line', 'Area Chart', 'Horizon Chart', 'Bar', 'Combo']
 
 type Region = {
   from: string
@@ -42,14 +34,30 @@ type XScale = {
   bandwidth?: () => number
 }
 
-type RegionsProps = {
+type RegionScale = {
+  range: () => number[]
+}
+
+export type RegionBoundaryMode = 'point' | 'band'
+
+type RegionLayoutProps = {
   xScale: XScale
-  yMax: number
-  barWidth?: number
-  totalBarsInGroup?: number
+  seriesScale?: RegionScale
+  boundaryMode: RegionBoundaryMode
   xMax?: number
 }
 
+type RegionFillProps = {
+  layouts: RegionLayout[]
+  yMax: number
+}
+
+type RegionLabelsProps = {
+  layouts: RegionLayout[]
+  regionLabelFontSize: number
+  isMobileViewport: boolean
+}
+
 type HighlightedAreaProps = {
   x: number
   width: number
@@ -62,6 +70,13 @@ type RegionLabelLayout = {
   width: number
 }
 
+export type RegionLayout = {
+  region: Region
+  clippedFrom: number
+  width: number
+  chartEnd: number
+}
+
 type RegionLabelProps = {
   label: string
   color: string
@@ -73,7 +88,15 @@ type RegionLabelProps = {
 }
 
 const HighlightedArea: React.FC<HighlightedAreaProps> = ({ x, width, yMax, background }) => (
-  <rect x={x} y={0} width={width} height={yMax} fill={background || DEFAULT_REGION_BACKGROUND} opacity={0.3} />
+  <rect
+    className='region-fill'
+    x={x}
+    y={0}
+    width={width}
+    height={yMax}
+    fill={background || DEFAULT_REGION_BACKGROUND}
+    opacity={0.3}
+  />
 )
 
 const clamp = (value: number, min: number, max: number): number => Math.min(Math.max(value, min), max)
@@ -147,6 +170,7 @@ const RegionLabel: React.FC<RegionLabelProps> = ({
 
   return (
     <Text
+      className='region-label'
       x={labelLayout.x}
       y={getRegionLabelY(fontSize)}
       width={labelLayout.width}
@@ -177,22 +201,20 @@ const findClosestDate = <T,>(targetTime: number, domain: T[], getTime: (d: T) =>
   return closest
 }
 
-/** Check if visualization type is line-like (Line, Area Chart, or Horizon Chart) */
-const isLineLike = (type: string): boolean =>
-  type === VIZ_TYPES.LINE || type === VIZ_TYPES.AREA || type === VIZ_TYPES.HORIZON
-
-/** Check if visualization type is bar-like (Bar or Combo) */
-const isBarLike = (type: string): boolean => type === VIZ_TYPES.BAR || type === VIZ_TYPES.COMBO
-
 // TODO: should regions be removed on categorical axis?
-const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGroup = 1, yMax, xMax }) => {
+export const useRegionLayouts = ({ xScale, seriesScale, boundaryMode, xMax }: RegionLayoutProps) => {
   const { parseDate, config, tableData, vizViewport } = useContext<ChartContext>(ConfigContext)
 
-  const { regions, visualizationType, orientation, xAxis } = config
+  const { regions, orientation, xAxis } = config
   const isMobileViewport = isMobileFontViewport(vizViewport || 'lg')
   const regionLabelFontSize = isMobileViewport ? TICK_LABEL_FONT_SIZE_SMALL : TICK_LABEL_FONT_SIZE
 
-  const getBarOffset = (): number => (barWidth * totalBarsInGroup) / 2
+  const getBandWidth = (): number => xScale.bandwidth?.() || 0
+  const getDateTimeBandOffset = (): number => {
+    const range = seriesScale?.range?.() || []
+    if (range.length < 2) return 0
+    return Math.abs(Number(range[range.length - 1]) - Number(range[0])) / 2
+  }
 
   // ============================================
   // HELPER FUNCTIONS FOR PREVIOUS DAYS
@@ -374,7 +396,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       return calculateBarLastDatePosition_Categorical()
     }
     let to = xScale(region.to)
-    return to + barWidth * totalBarsInGroup
+    return to + getBandWidth()
   }
 
   const getBarFromValue_Date = (region: Region): number => {
@@ -403,7 +425,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
     const closestDate = findClosestDate(parsedDate, domain, d => d)
     let to = xScale(closestDate)
 
-    return to + barWidth * totalBarsInGroup
+    return to + getBandWidth()
   }
 
   const getBarFromValue_DateTime = (region: Region): number => {
@@ -415,7 +437,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date, config.locale)).getTime()
       from = xScale(parsedDate)
     }
-    return from - getBarOffset()
+    return from - getDateTimeBandOffset()
   }
 
   const getBarToValue_DateTime = (region: Region): number => {
@@ -423,14 +445,10 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       return calculateBarLastDatePosition_DateTime()
     }
     let to = xScale(parseDate(region.to).getTime())
-    return to - getBarOffset()
+    return to + getDateTimeBandOffset()
   }
 
   const calculateBarLastDatePosition_Categorical = (): number => {
-    const domain = xScale.domain()
-    const lastDate = domain[domain.length - 1]
-    const lastDatePosition = xScale(lastDate)
-    const bandwidth = xScale.bandwidth ? xScale.bandwidth() : 0
     // For categorical bars, extend to the end of the last bar
     // Don't add chartStart - xScale already returns positions in the chart coordinate space
     return xMax
@@ -440,18 +458,14 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
     const domain = xScale.domain()
     const lastDate = domain[domain.length - 1]
     const lastDatePosition = xScale(lastDate)
-    const offset = barWidth * totalBarsInGroup
-    // Don't add chartStart - xScale already returns positions in chart coordinate space
-    return Number(lastDatePosition + offset)
+    return Number(lastDatePosition) + getBandWidth()
   }
 
   const calculateBarLastDatePosition_DateTime = (): number => {
     const domain = xScale.domain()
     const lastDate = domain[domain.length - 1]
     const lastDatePosition = xScale(lastDate)
-    // For date-time bars, don't add chartStart - xScale returns positions in chart coordinate space
-    // Also don't subtract barOffset since we want to extend to the edge
-    return Number(lastDatePosition)
+    return Number(lastDatePosition) + getDateTimeBandOffset()
   }
 
   const isRegionInVisibleDomain = (region: Region): boolean => {
@@ -484,11 +498,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
   // ============================================
 
   const getFromValue = (region: Region): number => {
-    const isLine = isLineLike(visualizationType)
-    const isBar = isBarLike(visualizationType)
-
-    // LINE/AREA CHARTS
-    if (isLine) {
+    if (boundaryMode === 'point') {
       if (xAxis.type === 'categorical') {
         return getLineFromValue_Categorical(region)
       } else if (xAxis.type === 'date') {
@@ -498,8 +508,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       }
     }
 
-    // BAR CHARTS
-    if (isBar) {
+    if (boundaryMode === 'band') {
       if (xAxis.type === 'categorical') {
         return getBarFromValue_Categorical(region)
       } else if (xAxis.type === 'date') {
@@ -513,11 +522,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
   }
 
   const getToValue = (region: Region): number => {
-    const isLine = isLineLike(visualizationType)
-    const isBar = isBarLike(visualizationType)
-
-    // LINE/AREA CHARTS
-    if (isLine) {
+    if (boundaryMode === 'point') {
       if (xAxis.type === 'categorical') {
         return getLineToValue_Categorical(region)
       } else if (xAxis.type === 'date') {
@@ -527,8 +532,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       }
     }
 
-    // BAR CHARTS
-    if (isBar) {
+    if (boundaryMode === 'band') {
       if (xAxis.type === 'categorical') {
         return getBarToValue_Categorical(region)
       } else if (xAxis.type === 'date') {
@@ -543,12 +547,18 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
 
   const getWidth = (to: number, from: number): number => Math.max(0, to - from)
 
-  if (!regions || orientation !== 'vertical') return null
+  if (
+    !SUPPORTED_REGION_VISUALIZATION_TYPES.includes(config.visualizationType) ||
+    !regions ||
+    orientation !== 'vertical'
+  ) {
+    return { layouts: [], regionLabelFontSize, isMobileViewport }
+  }
 
   const chartStart = 0
   const chartEnd = xMax !== undefined ? xMax : 1000
 
-  return regions.map((region: Region) => {
+  const layouts = regions.map((region: Region): RegionLayout | null => {
     if (!isRegionInVisibleDomain(region)) return null
 
     const from = getFromValue(region)
@@ -566,21 +576,46 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
 
     if (width <= 0) return null
 
-    return (
-      <Group height={100} className='regions regions-group--line' key={region.label} pointerEvents='none'>
-        <HighlightedArea x={clippedFrom} width={width} yMax={yMax} background={region.background} />
-        <RegionLabel
-          label={region.label}
-          color={region.color}
-          clippedFrom={clippedFrom}
-          regionWidth={width}
-          plotWidth={chartEnd}
-          fontSize={regionLabelFontSize}
-          isMobileViewport={isMobileViewport}
-        />
-      </Group>
-    )
+    return { region, clippedFrom, width, chartEnd }
   })
+
+  return {
+    layouts: layouts.filter((layout): layout is RegionLayout => layout !== null),
+    regionLabelFontSize,
+    isMobileViewport
+  }
+}
+
+export const RegionFills: React.FC<RegionFillProps> = ({ layouts, yMax }) => {
+  return layouts.map(({ region, clippedFrom, width }, index) => (
+    <Group
+      height={100}
+      className='regions regions-group--line regions-layer--fill'
+      key={`${region.label}-${index}`}
+      pointerEvents='none'
+    >
+      <HighlightedArea x={clippedFrom} width={width} yMax={yMax} background={region.background} />
+    </Group>
+  ))
 }
 
-export default Regions
+export const RegionLabels: React.FC<RegionLabelsProps> = ({ layouts, regionLabelFontSize, isMobileViewport }) => {
+  return layouts.map(({ region, clippedFrom, width, chartEnd }, index) => (
+    <Group
+      height={100}
+      className='regions regions-group--line regions-layer--label'
+      key={`${region.label}-${index}`}
+      pointerEvents='none'
+    >
+      <RegionLabel
+        label={region.label}
+        color={region.color}
+        clippedFrom={clippedFrom}
+        regionWidth={width}
+        plotWidth={chartEnd}
+        fontSize={regionLabelFontSize}
+        isMobileViewport={isMobileViewport}
+      />
+    </Group>
+  ))
+}

package/src/components/Regions/index.tsx

@@ -1,3 +1,2 @@
-import Regions from './components/Regions'
-
-export default Regions
+export { RegionFills, RegionLabels, useRegionLayouts } from './components/Regions'
+export type { RegionBoundaryMode, RegionLayout } from './components/Regions'