@cdc/chart 4.26.2 → 4.26.4

package/src/_stories/_mock/smallest_left_axis_max.json

@@ -0,0 +1,104 @@
+{
+  "type": "chart",
+  "version": "4.26.3",
+  "visualizationType": "Line",
+  "visualizationSubType": "regular",
+  "title": "Smallest Left Axis Maximum Demo",
+  "titleStyle": "small",
+  "showTitle": true,
+  "theme": "theme-blue",
+  "animate": false,
+  "fontSize": "medium",
+  "lineDatapointStyle": "hover",
+  "lineDatapointColor": "Same as Line",
+  "isResponsiveTicks": false,
+  "general": {
+    "showDownloadButton": false,
+    "showMissingDataLabel": true,
+    "hideNullValue": true
+  },
+  "padding": { "left": 5, "right": 5 },
+  "heights": { "vertical": "300", "horizontal": 750 },
+  "barThickness": 0.35,
+  "orientation": "vertical",
+  "yAxis": {
+    "hideAxis": true,
+    "displayNumbersOnBar": false,
+    "hideLabel": false,
+    "hideTicks": true,
+    "size": "25",
+    "gridLines": true,
+    "enablePadding": false,
+    "min": "",
+    "max": "",
+    "numTicks": "5",
+    "scalePadding": "0",
+    "tickRotation": "",
+    "anchors": [],
+    "categories": [],
+    "label": "",
+    "inlineLabel": " cases",
+    "type": "linear",
+    "smallestLeftAxisMax": 5
+  },
+  "xAxis": {
+    "sortDates": false,
+    "anchors": [],
+    "type": "categorical",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "0",
+    "tickRotation": "0",
+    "numTicks": "",
+    "labelOffset": 0,
+    "padding": "4",
+    "dataKey": "Month",
+    "label": "Month",
+    "tickWidthMax": 100
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": false,
+    "show": true,
+    "showDownloadUrl": false,
+    "showVertical": true
+  },
+  "series": [{ "dataKey": "Cases", "type": "Line", "axis": "Left", "tooltip": true }],
+  "tooltips": { "opacity": 90, "singleSeries": false },
+  "legend": {
+    "hide": true
+  },
+  "filters": [
+    {
+      "values": ["Region A", "Region B", "Region C"],
+      "active": "Region B",
+      "order": "asc",
+      "columnName": "Region",
+      "filterStyle": "dropdown"
+    }
+  ],
+  "data": [
+    { "Month": "Jan", "Cases": "12", "Region": "Region A" },
+    { "Month": "Feb", "Cases": "18", "Region": "Region A" },
+    { "Month": "Mar", "Cases": "15", "Region": "Region A" },
+    { "Month": "Apr", "Cases": "22", "Region": "Region A" },
+    { "Month": "May", "Cases": "28", "Region": "Region A" },
+    { "Month": "Jun", "Cases": "20", "Region": "Region A" },
+
+    { "Month": "Jan", "Cases": "1", "Region": "Region B" },
+    { "Month": "Feb", "Cases": "0", "Region": "Region B" },
+    { "Month": "Mar", "Cases": "1", "Region": "Region B" },
+    { "Month": "Apr", "Cases": "0", "Region": "Region B" },
+    { "Month": "May", "Cases": "1", "Region": "Region B" },
+    { "Month": "Jun", "Cases": "0", "Region": "Region B" },
+
+    { "Month": "Jan", "Cases": "45", "Region": "Region C" },
+    { "Month": "Feb", "Cases": "52", "Region": "Region C" },
+    { "Month": "Mar", "Cases": "48", "Region": "Region C" },
+    { "Month": "Apr", "Cases": "60", "Region": "Region C" },
+    { "Month": "May", "Cases": "55", "Region": "Region C" },
+    { "Month": "Jun", "Cases": "50", "Region": "Region C" }
+  ]
+}

package/src/components/Annotations/components/AnnotationDraggable.styles.css

@@ -1,25 +1,25 @@
-.cdc-open-viz-module.type-chart .annotation__desktop-label {
-  line-height: 1.1rem;
+.cove-visualization.type-chart .annotation__desktop-label {
   font-size: 16px;
+  line-height: 1.1rem;
 }
 
-.cdc-open-viz-module.type-chart {
+.cove-visualization.type-chart {
   .annotation__mobile-label-circle {
     stroke-width: 1;
   }
 
   .annotation__has-dropdown-number {
-    display: flex;
-    justify-content: center;
     align-items: center;
+    border: 1px solid #666;
     border-radius: 50%;
-    width: 24px;
+    box-sizing: border-box;
+    display: flex;
+    font-size: 14px;
     height: 24px;
-    min-width: 24px;
+    justify-content: center;
     min-height: 24px;
-    border: 1px solid #666;
+    min-width: 24px;
     text-align: center;
-    font-size: 14px;
-    box-sizing: border-box;
+    width: 24px;
   }
 }

package/src/components/Annotations/components/AnnotationDraggable.tsx

@@ -218,7 +218,7 @@ const Annotations = ({
               return (
                 <HtmlLabel
                   className='annotation__desktop-label'
-                  containerStyle={{ width: `${labelWidth}px` }}
+                  containerStyle={{ width: 'fit-content', maxWidth: `${labelWidth}px` }}
                   horizontalAnchor={horizontalAnchor}
                   verticalAnchor={verticalAnchor}
                   showAnchorLine={false}

package/src/components/Annotations/components/AnnotationDropdown.styles.css

@@ -1,4 +1,4 @@
-.cdc-open-viz-module.type-chart {
+.cove-visualization.type-chart {
   .annotation__dropdown-list {
     list-style: none;
   }

package/src/components/Annotations/components/AnnotationList.styles.css

@@ -1,23 +1,23 @@
-.cdc-open-viz-module.type-chart {
+.cove-visualization.type-chart {
   .annotation__title-circle {
-    display: flex;
-    justify-content: center;
     align-items: center;
+    border: 1px solid #666;
     border-radius: 50%;
-    padding: 8px;
-    width: 24px;
+    display: flex;
+    font-size: 14px;
     height: 24px;
-    margin-right: 5px;
+    justify-content: center;
     line-height: 1.5rem;
-    border: 1px solid #666;
+    margin-right: 5px;
+    padding: 8px;
     text-align: center;
-    font-size: 14px;
+    width: 24px;
   }
 
   .annotation__title-wrapper {
+    align-items: center;
     display: flex;
     flex-wrap: nowrap;
-    align-items: center;
   }
 
   .annotation__title-wrapper .annotation__title-text {
@@ -32,8 +32,8 @@
     margin-top: 5px;
   }
 
-  .cove-component__content {
-    container-type: inline-size;
+  .cove-visualization__body {
     container-name: content;
+    container-type: inline-size;
   }
 }

package/src/components/AreaChart/components/AreaChart.Stacked.jsx

@@ -11,7 +11,15 @@ import { Bar, AreaStack } from '@visx/shape'
 import { Group } from '@visx/group'
 import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 
-const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff }) => {
+const AreaChartStacked = ({
+  xScale,
+  yScale,
+  yMax,
+  xMax,
+  yAxisWidth,
+  handleTooltipMouseOver,
+  handleTooltipMouseOff
+}) => {
   // import data from context
   let { transformedData: data, config, seriesHighlight, colorScale, rawData, parseDate } = useContext(ConfigContext)
   // Draw transparent bars over the chart to get tooltip data
@@ -39,7 +47,7 @@ const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver,
           <Group
             className='area-chart'
             key='area-wrapper'
-            left={Number(config.yAxis.size) + strokeWidth / 2}
+            left={yAxisWidth + strokeWidth / 2}
             height={Number(yMax)}
             style={{ overflow: 'hidden' }}
           >

package/src/components/Axis/BottomAxis.tsx

@@ -199,12 +199,13 @@ const BottomAxis: React.FC<BottomAxisProps> = ({
 
         return (
           <Group className='bottom-axis' width={parentWidth}>
-            {filteredTicks.map((tick, i, propsTicks) => {
+            {filteredTicks.map((tick, i) => {
               // when using LogScale show major ticks values only
               const showTick = String(tick.value).startsWith('1') || tick.value === 0.1 ? 'block' : 'none'
               const tickLength = showTick === 'block' ? MAJOR_TICK_LENGTH : DEFAULT_TICK_LENGTH
               const to = { x: tick.to.x, y: tickLength }
-              const limitedWidth = 100 / propsTicks.length
+              const tickSlotWidth = filteredTicks.length > 0 ? xMax / filteredTicks.length : xMax
+              const limitedWidth = Math.max(Math.min(maxLengthOfTick, tickSlotWidth), 1)
 
               // Configure rotation using effective values (computed above without mutations)
               const tickRotation =
@@ -246,7 +247,13 @@ const BottomAxis: React.FC<BottomAxisProps> = ({
                 </Group>
               )
             })}
-            {!config.xAxis.hideAxis && <Line from={props.axisFromPoint} to={props.axisToPoint} stroke='#333' />}
+            {!config.xAxis.hideAxis && (
+              <Line
+                from={isForestPlot ? { ...props.axisFromPoint, x: 0 } : props.axisFromPoint}
+                to={props.axisToPoint}
+                stroke='#333'
+              />
+            )}
             <Text
               innerRef={xAxisTitleRef}
               className='x-axis-title-label'

package/src/components/Axis/LeftAxis.tsx

@@ -36,7 +36,6 @@ interface LeftAxisProps {
   suffixWidth?: number
   horizontalYAxisLabelSpace?: number
   categoryLabelSpace?: number
-  yLabelOffset?: number
 }
 
 const LeftAxis: React.FC<LeftAxisProps> = ({
@@ -53,8 +52,7 @@ const LeftAxis: React.FC<LeftAxisProps> = ({
   suffixRef,
   suffixWidth = 0,
   horizontalYAxisLabelSpace = 0,
-  categoryLabelSpace = 0,
-  yLabelOffset = 0
+  categoryLabelSpace = 0
 }) => {
   const { config, colorScale, seriesHighlight } = useContext(ConfigContext)
   const { runtime, orientation, visualizationType, visualizationSubType, heights } = config
@@ -387,7 +385,7 @@ const LeftAxis: React.FC<LeftAxisProps> = ({
               className='y-label'
               textAnchor='middle'
               verticalAnchor='start'
-              transform={`translate(${-1 * yAxisWidth + yLabelOffset}, ${axisCenter}) rotate(-90)`}
+              transform={`translate(${-1 * yAxisWidth}, ${axisCenter}) rotate(-90)`}
               fontWeight='bold'
               fill={config.yAxis.labelColor}
               fontSize={axisLabelFontSize}

package/src/components/Axis/LeftAxisGridlines.tsx

@@ -10,7 +10,6 @@ interface LeftAxisGridlinesProps {
   xMax: number
   yAxisWidth: number
   numTicks: number
-  yLabelOffset: number
   axisLabelFontSize: number
 }
 
@@ -19,7 +18,6 @@ const LeftAxisGridlines: React.FC<LeftAxisGridlinesProps> = ({
   xMax,
   yAxisWidth,
   numTicks,
-  yLabelOffset,
   axisLabelFontSize
 }) => {
   const { config } = useContext(ConfigContext)
@@ -60,7 +58,7 @@ const LeftAxisGridlines: React.FC<LeftAxisGridlinesProps> = ({
               className='y-label'
               textAnchor='middle'
               verticalAnchor='start'
-              transform={`translate(${-1 * yAxisWidth + yLabelOffset}, ${axisCenter}) rotate(-90)`}
+              transform={`translate(${-1 * yAxisWidth}, ${axisCenter}) rotate(-90)`}
               fontWeight='bold'
               fill={config.yAxis.labelColor}
               fontSize={axisLabelFontSize}

package/src/components/Axis/PairedBarAxis.tsx

@@ -63,7 +63,9 @@ export const PairedBarAxis: React.FC<PairedBarAxisProps> = ({
     const numberOfTicks = filteredTicks?.length
     const xMaxHalf = xScale.range()[0] || xMax / 2
 
-    const tickWidthAll = filteredTicks.map(tick => getTextWidth(formatNumber(tick.value, 'left'), tickLabelFont))
+    const tickWidthAll = filteredTicks.map(tick =>
+      getTextWidth(tick.formattedValue ?? formatNumber(tick.value, 'left', true), tickLabelFont)
+    )
     const sumOfTickWidth = tickWidthAll.reduce((a, b) => a + b, BASE_TICK_WIDTH_ACCUMULATOR)
     const spaceBetweenEachTick = (xMaxHalf - sumOfTickWidth) / numberOfTicks
 
@@ -115,7 +117,7 @@ export const PairedBarAxis: React.FC<PairedBarAxisProps> = ({
             textAnchor={textAnchor}
             fontSize={tickLabelFontSize}
           >
-            {formatNumber(tick.value, 'left')}
+            {tick.formattedValue ?? formatNumber(tick.value, 'left', true)}
           </Text>
         )}
       </Group>
@@ -129,7 +131,7 @@ export const PairedBarAxis: React.FC<PairedBarAxisProps> = ({
         top={yMax}
         left={yAxisWidth}
         label={runtime.xAxis.label}
-        tickFormat={isDateScale(runtime.xAxis) ? formatDate : formatNumber}
+        tickFormat={isDateScale(runtime.xAxis) ? formatDate : tick => formatNumber(tick, 'left', true)}
         scale={g1xScale}
         stroke='#333'
         tickStroke='#333'
@@ -150,7 +152,11 @@ export const PairedBarAxis: React.FC<PairedBarAxisProps> = ({
         left={yAxisWidth}
         label={runtime.xAxis.label}
         tickFormat={
-          isDateScale(runtime.xAxis) ? formatDate : runtime.xAxis.dataKey !== 'Year' ? formatNumber : tick => tick
+          isDateScale(runtime.xAxis)
+            ? formatDate
+            : runtime.xAxis.dataKey !== 'Year'
+            ? tick => formatNumber(tick, 'left', true)
+            : tick => tick
         }
         scale={g2xScale}
         stroke='#333'

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

@@ -24,6 +24,9 @@ import { ChartContext } from '../../../types/ChartContext'
 import _ from 'lodash'
 import { getBarData } from '../helpers/getBarData'
 import { getHorizontalBarHeights } from '../helpers/getBarHeights'
+import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
+import { getChartPatternId } from '../../../helpers/getChartPatternId'
+import { buildSeriesTooltipListHtml } from '../../../helpers/tooltipHelpers'
 
 const BarChartHorizontal = () => {
   const { xScale, yScale, yMax, seriesScale, barChart } = useContext<BarChartContextValues>(BarChartContext)
@@ -72,7 +75,7 @@ const BarChartHorizontal = () => {
     return (
       <defs>
         {Object.entries(config.legend.patterns).map(([key, pattern]) => {
-          const patternId = `chart-pattern-${key}`
+          const patternId = getChartPatternId(key)
           const size = pattern.patternSize || 8
 
           switch (pattern.shape) {
@@ -241,11 +244,14 @@ const BarChartHorizontal = () => {
                     : xAxisValue
                   const additionalColTooltip = getAdditionalColumn(bar.key, hoveredBar)
                   const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
-                  const tooltip = `<ul>
-                  <li class="tooltip-heading"">${yAxisTooltip}</li>
-                  <li class="tooltip-body ">${tooltipBody}</li>
-                  <li class="tooltip-body ">${additionalColTooltip}</li>
-                    </li></ul>`
+                  const tooltip = buildSeriesTooltipListHtml({
+                    config,
+                    colorScale,
+                    heading: yAxisTooltip,
+                    seriesKey: bar.key,
+                    seriesText: tooltipBody,
+                    extraRows: additionalColTooltip ? [additionalColTooltip] : []
+                  })
 
                   // configure colors
                   let labelColor = APP_FONT_COLOR
@@ -324,33 +330,15 @@ const BarChartHorizontal = () => {
                   })
 
                   // Check if this bar should use a pattern
-                  const getPatternUrl = (): string | null => {
-                    if (!config.legend.patterns || Object.keys(config.legend.patterns).length === 0) {
-                      return null
-                    }
-
-                    // Find a pattern that matches this specific bar
-                    for (const [patternKey, pattern] of Object.entries(config.legend.patterns)) {
-                      if (pattern.dataKey && pattern.dataValue) {
-                        // For grouped bar charts, check if the pattern's dataKey matches the current bar's series key
-                        // and if the pattern's dataValue matches the current bar's value
-                        if (pattern.dataKey === bar.key && String(bar.value) === String(pattern.dataValue)) {
-                          return `url(#chart-pattern-${patternKey})`
-                        }
-                        // Fallback for non-grouped charts: check datum field value
-                        else if (!config.series || config.series.length <= 1) {
-                          const dataFieldValue = datum[pattern.dataKey]
-                          if (String(dataFieldValue) === String(pattern.dataValue)) {
-                            return `url(#chart-pattern-${patternKey})`
-                          }
-                        }
-                      }
-                    }
-
-                    return null
-                  }
-
-                  const patternUrl = getPatternUrl()
+                  const patternUrl = getPatternUrlForBar({
+                    patterns: config.legend?.patterns,
+                    datum,
+                    seriesKey: bar.key,
+                    seriesValue: bar.value,
+                    seriesLabels: config.runtime?.seriesLabels,
+                    seriesKeys: config.series?.map(series => series.dataKey),
+                    allowNonSeriesFieldMatch: !config.series || config.series.length <= 1
+                  })
                   const baseBackground = getBarBackgroundColor()
 
                   return (

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

@@ -14,6 +14,9 @@ import { type ChartContext } from '../../../types/ChartContext'
 
 import createBarElement from '@cdc/core/components/createBarElement'
 import { getHorizontalBarHeights } from '../helpers/getBarHeights'
+import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
+import { getChartPatternId } from '../../../helpers/getChartPatternId'
+import { buildSeriesTooltipListHtml } from '../../../helpers/tooltipHelpers'
 
 const BarChartStackedHorizontal = () => {
   const { yMax, yScale, xScale, barChart } = useContext<BarChartContextValues>(BarChartContext)
@@ -55,7 +58,7 @@ const BarChartStackedHorizontal = () => {
     return (
       <defs>
         {Object.entries(config.legend.patterns).map(([key, pattern]) => {
-          const patternId = `chart-pattern-${key}`
+          const patternId = getChartPatternId(key)
           const size = pattern.patternSize || 8
 
           switch (pattern.shape) {
@@ -159,42 +162,25 @@ const BarChartStackedHorizontal = () => {
                 const textWidth = getTextWidth(xAxisValue, `normal ${labelFontSize}px sans-serif`)
                 const additionalColTooltip = getAdditionalColumn(bar.key, hoveredBar)
                 const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${xAxisValue}`
-                const tooltip = `<ul>
-                  <li class="tooltip-heading"">${yAxisTooltip}</li>
-                  <li class="tooltip-body ">${tooltipBody}</li>
-                  <li class="tooltip-body ">${additionalColTooltip}</li>
-                    </li></ul>`
+                const tooltip = buildSeriesTooltipListHtml({
+                  config,
+                  colorScale,
+                  heading: yAxisTooltip,
+                  seriesKey: bar.key,
+                  seriesText: tooltipBody,
+                  extraRows: additionalColTooltip ? [additionalColTooltip] : []
+                })
 
                 // Check if this bar should use a pattern
-                const getPatternUrl = (): string | null => {
-                  if (!config.legend.patterns || Object.keys(config.legend.patterns).length === 0) {
-                    return null
-                  }
-
-                  // Find a pattern that matches this specific bar
-                  for (const [patternKey, pattern] of Object.entries(config.legend.patterns)) {
-                    if (pattern.dataKey && pattern.dataValue) {
-                      // For stacked bar charts, check if the pattern's dataKey matches the current bar's series key
-                      // and if the pattern's dataValue matches the current bar's value
-                      const barValue = data[bar.index][bar.key]
-                      if (pattern.dataKey === bar.key && String(barValue) === String(pattern.dataValue)) {
-                        return `url(#chart-pattern-${patternKey})`
-                      }
-                      // Fallback for non-series pattern matching (like the original stacked pattern test)
-                      // Only check this if the pattern dataKey is NOT a series key
-                      else if (!config.runtime.seriesLabels || !config.runtime.seriesLabels[pattern.dataKey]) {
-                        const dataFieldValue = data[bar.index][pattern.dataKey]
-                        if (String(dataFieldValue) === String(pattern.dataValue)) {
-                          return `url(#chart-pattern-${patternKey})`
-                        }
-                      }
-                    }
-                  }
-
-                  return null
-                }
-
-                const patternUrl = getPatternUrl()
+                const patternUrl = getPatternUrlForBar({
+                  patterns: config.legend?.patterns,
+                  datum: data[bar.index],
+                  seriesKey: bar.key,
+                  seriesValue: data[bar.index][bar.key],
+                  seriesLabels: config.runtime?.seriesLabels,
+                  seriesKeys: config.series?.map(series => series.dataKey),
+                  allowNonSeriesFieldMatch: true
+                })
 
                 return (
                   <React.Fragment key={`stack-${stackIndex}-bar-${index}-${barStack.index}`}>

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

@@ -8,6 +8,9 @@ import Regions from '../../Regions'
 import { addMinimumBarHeights } from '../helpers'
 
 import createBarElement from '@cdc/core/components/createBarElement'
+import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
+import { getChartPatternId } from '../../../helpers/getChartPatternId'
+import { buildSeriesTooltipListHtml } from '../../../helpers/tooltipHelpers'
 
 const BarChartStackedVertical = () => {
   const [barWidth, setBarWidth] = useState(0)
@@ -40,7 +43,7 @@ const BarChartStackedVertical = () => {
     return (
       <defs>
         {Object.entries(config.legend.patterns).map(([key, pattern]) => {
-          const patternId = `chart-pattern-${key}`
+          const patternId = getChartPatternId(key)
           const size = pattern.patternSize || 8
 
           switch (pattern.shape) {
@@ -141,45 +144,27 @@ const BarChartStackedVertical = () => {
                     : xAxisValue
                   const additionalColTooltip = getAdditionalColumn(bar.key, hoveredBar)
                   const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
-                  const tooltip = `<ul>
-                  <li class="tooltip-heading"">${xAxisTooltip}</li>
-                  <li class="tooltip-body ">${tooltipBody}</li>
-                  <li class="tooltip-body ">${additionalColTooltip}</li>
-                    </li></ul>`
+                  const tooltip = buildSeriesTooltipListHtml({
+                    config,
+                    colorScale,
+                    heading: xAxisTooltip,
+                    seriesKey: bar.key,
+                    seriesText: tooltipBody,
+                    extraRows: additionalColTooltip ? [additionalColTooltip] : []
+                  })
 
                   setBarWidth(barThickness)
 
                   // Check if this bar should use a pattern
-                  const getPatternUrl = (): string | null => {
-                    if (!config.legend.patterns || Object.keys(config.legend.patterns).length === 0) {
-                      return null
-                    }
-
-                    // Find a pattern that matches this specific bar
-                    for (const [patternKey, patternObj] of Object.entries(config.legend.patterns)) {
-                      const pattern = patternObj as any
-                      if (pattern?.dataKey && pattern?.dataValue) {
-                        // For stacked bar charts, check if the pattern's dataKey matches the current bar's series key
-                        // and if the pattern's dataValue matches the current bar's value
-                        const barValue = bar.bar.data[bar.key]
-                        if (pattern.dataKey === bar.key && String(barValue) === String(pattern.dataValue)) {
-                          return `url(#chart-pattern-${patternKey})`
-                        }
-                        // Fallback for non-series pattern matching (like the original stacked pattern test)
-                        // Only check this if the pattern dataKey is NOT a series key
-                        else if (!config.runtime.seriesLabels || !config.runtime.seriesLabels[pattern.dataKey]) {
-                          const dataFieldValue = bar.bar.data[pattern.dataKey]
-                          if (String(dataFieldValue) === String(pattern.dataValue)) {
-                            return `url(#chart-pattern-${patternKey})`
-                          }
-                        }
-                      }
-                    }
-
-                    return null
-                  }
-
-                  const patternUrl = getPatternUrl()
+                  const patternUrl = getPatternUrlForBar({
+                    patterns: config.legend?.patterns,
+                    datum: bar.bar.data,
+                    seriesKey: bar.key,
+                    seriesValue: bar.bar.data[bar.key],
+                    seriesLabels: config.runtime?.seriesLabels,
+                    seriesKeys: config.series?.map(series => series.dataKey),
+                    allowNonSeriesFieldMatch: true
+                  })
 
                   return (
                     <Group key={`${barStack.index}--${bar.index}--${orientation}`}>