@cdc/chart 4.26.2 → 4.26.3

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

@@ -8,6 +8,8 @@ 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'
 
 const BarChartStackedVertical = () => {
   const [barWidth, setBarWidth] = useState(0)
@@ -40,7 +42,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) {
@@ -150,36 +152,15 @@ const BarChartStackedVertical = () => {
                   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}`}>

package/src/components/BarChart/components/BarChart.Vertical.tsx

@@ -21,6 +21,8 @@ import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import { type ChartContext } from '../../../types/ChartContext'
 import _ from 'lodash'
 import { getBarData } from '../helpers/getBarData'
+import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
+import { getChartPatternId } from '../../../helpers/getChartPatternId'
 
 const BarChartVertical = () => {
   const { xScale, yScale, xMax, yMax, seriesScale, convertLineToBarGraph, barChart } =
@@ -86,7 +88,7 @@ const BarChartVertical = () => {
     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) {
@@ -325,33 +327,15 @@ const BarChartVertical = () => {
                   }
 
                   // 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(colorScale(config.runtime.seriesLabels[bar.key]))
 
                   // Confidence Interval Variables

package/src/components/BarChart/helpers/getPatternUrl.ts

@@ -0,0 +1,94 @@
+import { getChartPatternId } from '../../../helpers/getChartPatternId'
+
+type LegendPattern = {
+  dataKey?: string
+  dataValue?: string | number
+}
+
+type SeriesLabels = Record<string, string> | undefined
+
+type GetPatternUrlArgs = {
+  patterns?: Record<string, LegendPattern>
+  datum: Record<string, any>
+  seriesKey: string
+  seriesValue: string | number
+  seriesLabels?: SeriesLabels
+  seriesKeys?: string[]
+  allowNonSeriesFieldMatch?: boolean
+}
+
+const normalizeString = (value: unknown): string => String(value ?? '').trim()
+
+const hasPatternValue = (value: unknown): boolean => normalizeString(value) !== ''
+
+const isNumericLike = (value: string): boolean => value !== '' && !Number.isNaN(Number(value))
+
+const valuesMatch = (left: unknown, right: unknown): boolean => {
+  const normalizedLeft = normalizeString(left)
+  const normalizedRight = normalizeString(right)
+
+  if (normalizedLeft === '' || normalizedRight === '') {
+    return false
+  }
+
+  if (isNumericLike(normalizedLeft) && isNumericLike(normalizedRight)) {
+    return Number(normalizedLeft) === Number(normalizedRight)
+  }
+
+  return normalizedLeft === normalizedRight
+}
+
+const isSeriesDataKey = (dataKey: string, seriesLabels?: SeriesLabels, seriesKeys?: string[]): boolean => {
+  if (Array.isArray(seriesKeys) && seriesKeys.length > 0) {
+    return seriesKeys.includes(dataKey)
+  }
+  if (!seriesLabels) return false
+  return Object.prototype.hasOwnProperty.call(seriesLabels, dataKey)
+}
+
+export const getPatternUrl = ({
+  patterns,
+  datum,
+  seriesKey,
+  seriesValue,
+  seriesLabels,
+  seriesKeys,
+  allowNonSeriesFieldMatch = true
+}: GetPatternUrlArgs): string | null => {
+  if (!patterns) {
+    return null
+  }
+
+  let broadMatchUrl: string | null = null
+
+  for (const patternKey in patterns) {
+    if (!Object.prototype.hasOwnProperty.call(patterns, patternKey)) continue
+    const pattern = patterns[patternKey]
+    const dataKey = normalizeString(pattern.dataKey)
+
+    if (!hasPatternValue(pattern.dataValue)) {
+      continue
+    }
+
+    if (dataKey === '') {
+      if (!broadMatchUrl && valuesMatch(seriesValue, pattern.dataValue)) {
+        broadMatchUrl = `url(#${getChartPatternId(patternKey)})`
+      }
+      continue
+    }
+
+    if (dataKey === seriesKey && valuesMatch(seriesValue, pattern.dataValue)) {
+      return `url(#${getChartPatternId(patternKey)})`
+    }
+
+    if (
+      allowNonSeriesFieldMatch &&
+      !isSeriesDataKey(dataKey, seriesLabels, seriesKeys) &&
+      valuesMatch(datum?.[dataKey], pattern.dataValue)
+    ) {
+      return `url(#${getChartPatternId(patternKey)})`
+    }
+  }
+
+  return broadMatchUrl
+}

package/src/components/BarChart/helpers/tests/getPatternUrl.test.ts

@@ -0,0 +1,134 @@
+import { getPatternUrl } from '../getPatternUrl'
+import { getChartPatternId } from '../../../../helpers/getChartPatternId'
+
+describe('getPatternUrl', () => {
+  const pattern1Url = `url(#${getChartPatternId('Pattern1')})`
+  const pattern2Url = `url(#${getChartPatternId('Pattern2')})`
+
+  it('matches specific series patterns by series key and value', () => {
+    const patternUrl = getPatternUrl({
+      patterns: {
+        Pattern1: { dataKey: 'y1', dataValue: '19000' }
+      },
+      datum: { category: 'Q1', y1: 19000, y2: 47000 },
+      seriesKey: 'y1',
+      seriesValue: 19000,
+      seriesLabels: { y1: 'Series 1', y2: 'Series 2' }
+    })
+
+    expect(patternUrl).toBe(pattern1Url)
+  })
+
+  it('matches specific non-series field patterns', () => {
+    const patternUrl = getPatternUrl({
+      patterns: {
+        Pattern1: { dataKey: 'category', dataValue: 'Q1' }
+      },
+      datum: { category: 'Q1', y1: 19000, y2: 47000 },
+      seriesKey: 'y2',
+      seriesValue: 47000,
+      seriesLabels: { y1: 'Series 1', y2: 'Series 2' }
+    })
+
+    expect(patternUrl).toBe(pattern1Url)
+  })
+
+  it('does not match non-series field patterns when non-series matching is disabled', () => {
+    const patternUrl = getPatternUrl({
+      patterns: {
+        Pattern1: { dataKey: 'category', dataValue: 'Q1' }
+      },
+      datum: { category: 'Q1', y1: 19000, y2: 47000 },
+      seriesKey: 'y2',
+      seriesValue: 47000,
+      seriesLabels: { y1: 'Series 1', y2: 'Series 2' },
+      allowNonSeriesFieldMatch: false
+    })
+
+    expect(patternUrl).toBeNull()
+  })
+
+  it('matches blank dataKey pattern by value across series', () => {
+    const patternUrl = getPatternUrl({
+      patterns: {
+        Pattern1: { dataKey: '', dataValue: '47000' }
+      },
+      datum: { category: 'Q1', y1: 19000, y2: 47000 },
+      seriesKey: 'y2',
+      seriesValue: 47000,
+      seriesLabels: { y1: 'Series 1', y2: 'Series 2' }
+    })
+
+    expect(patternUrl).toBe(pattern1Url)
+  })
+
+  it('does not match blank dataKey pattern with empty dataValue', () => {
+    const patternUrl = getPatternUrl({
+      patterns: {
+        Pattern1: { dataKey: '', dataValue: '' }
+      },
+      datum: { category: 'Q1', y1: 19000, y2: 47000 },
+      seriesKey: 'y2',
+      seriesValue: 47000,
+      seriesLabels: { y1: 'Series 1', y2: 'Series 2' }
+    })
+
+    expect(patternUrl).toBeNull()
+  })
+
+  it('prioritizes specific match over broad match', () => {
+    const patternUrl = getPatternUrl({
+      patterns: {
+        Pattern1: { dataKey: '', dataValue: '19000' },
+        Pattern2: { dataKey: 'y1', dataValue: '19000' }
+      },
+      datum: { category: 'Q1', y1: 19000, y2: 47000 },
+      seriesKey: 'y1',
+      seriesValue: 19000,
+      seriesLabels: { y1: 'Series 1', y2: 'Series 2' }
+    })
+
+    expect(patternUrl).toBe(pattern2Url)
+  })
+
+  it('uses seriesKeys as fallback to identify series keys when seriesLabels are missing', () => {
+    const patternUrl = getPatternUrl({
+      patterns: {
+        Pattern1: { dataKey: 'y1', dataValue: '19000' }
+      },
+      datum: { category: 'Q1', y1: 19000, y2: 19000 },
+      seriesKey: 'y2',
+      seriesValue: 19000,
+      seriesKeys: ['y1', 'y2']
+    })
+
+    expect(patternUrl).toBeNull()
+  })
+
+  it('sanitizes special-character pattern keys in returned url fragments', () => {
+    const patternKey = 'Pattern 1 / @ value'
+    const patternUrl = getPatternUrl({
+      patterns: {
+        [patternKey]: { dataKey: 'y1', dataValue: '19000' }
+      },
+      datum: { category: 'Q1', y1: 19000, y2: 47000 },
+      seriesKey: 'y1',
+      seriesValue: 19000,
+      seriesLabels: { y1: 'Series 1', y2: 'Series 2' }
+    })
+
+    expect(patternUrl).toBe(`url(#${getChartPatternId(patternKey)})`)
+  })
+
+  it('creates distinct ids for keys that sanitize to the same base id', () => {
+    const keyA = 'A B'
+    const keyB = 'A@B'
+
+    const idA = getChartPatternId(keyA)
+    const idB = getChartPatternId(keyB)
+
+    expect(idA).not.toBe(idB)
+    expect(idA.startsWith('chart-pattern-A-B-')).toBe(true)
+    expect(idB.startsWith('chart-pattern-A-B-')).toBe(true)
+  })
+})

package/src/components/BarChart/helpers/useBarChart.ts

@@ -6,6 +6,7 @@ import { getPaletteColors } from '@cdc/core/helpers/palettes/utils'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizSubType, getVizTitle } from '@cdc/core/helpers/metrics/utils'
 import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
+import { getSeriesOwnedColumnNames } from '../../../helpers/seriesColumnSettings'
 
 export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, configContext) => {
   const {
@@ -51,6 +52,7 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
     isBarAndLegendIsolate && seriesHighlight?.length
       ? seriesHighlight
       : config.runtime.barSeriesKeys || config.runtime.seriesKeys
+  const seriesOwnedColumnNames = getSeriesOwnedColumnNames(config.series)
 
   useEffect(() => {
     if (orientation === 'horizontal' && !config.yAxis.labelPlacement) {
@@ -179,6 +181,7 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
       }) || {}
     Object.keys(columns).forEach(colKeys => {
       const colConfig = config.columns[colKeys]
+      if (seriesOwnedColumnNames.includes(colConfig.name || colKeys)) return
       if (series && colConfig.series && colConfig.series !== series && !colConfig.tooltips) return
       const formattingParams = {
         addColPrefix: config.columns[colKeys].prefix,

package/src/components/Brush/BrushSelector.tsx

@@ -8,6 +8,7 @@ import { Bounds } from '@visx/brush/lib/types'
 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 MiniChartPreview from './MiniChartPreview'
 
 interface BrushSelectorProps {
@@ -125,7 +126,7 @@ const BrushSelector: FC<BrushSelectorProps> = ({ xMax, yMax }) => {
     return (
       <>
         {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) {

package/src/components/Brush/MiniChartPreview.tsx

@@ -3,6 +3,7 @@ import { LinePath, AreaClosed, AreaStack } from '@visx/shape'
 import * as allCurves from '@visx/curve'
 import { handleLineType } from '../../helpers/handleLineType'
 import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
+import { getPatternUrl as getPatternUrlForBar } from '../BarChart/helpers/getPatternUrl'
 
 interface MiniChartPreviewProps {
   series: any[]
@@ -33,6 +34,8 @@ const MiniChartPreview = memo<MiniChartPreviewProps>(
     const lineSeries = isComboChart
       ? series.filter(s => !barSeriesTypes.has(s.type) && s.type !== 'Area Chart')
       : series
+    const patternSeriesKeys = Array.isArray(series) ? series.map(_series => _series.dataKey) : []
+    const allowGroupedNonSeriesFieldMatch = !config.series || config.series.length <= 1
 
     let barElements: React.ReactElement[] = []
 
@@ -44,30 +47,6 @@ const MiniChartPreview = memo<MiniChartPreviewProps>(
       const barStrokeColor = config?.barHasBorder === 'true' ? '#000' : 'transparent'
       const barStrokeWidth = config?.barHasBorder === 'true' ? 1 : 0
 
-      const getPatternUrl = (datum, seriesKey: string, value: string | number) => {
-        if (!config.legend?.patterns || Object.keys(config.legend.patterns).length === 0) {
-          return null
-        }
-
-        for (const [patternKey, patternObj] of Object.entries(config.legend.patterns)) {
-          const pattern = patternObj as any
-          if (pattern.dataKey && pattern.dataValue) {
-            if (pattern.dataKey === seriesKey && String(value) === String(pattern.dataValue)) {
-              return `url(#chart-pattern-${patternKey})`
-            }
-
-            if (!config.runtime?.seriesLabels || !config.runtime.seriesLabels[pattern.dataKey]) {
-              const dataFieldValue = datum[pattern.dataKey]
-              if (String(dataFieldValue) === String(pattern.dataValue)) {
-                return `url(#chart-pattern-${patternKey})`
-              }
-            }
-          }
-        }
-
-        return null
-      }
-
       tableData.forEach((d, i) => {
         const xVal = xScale(d[dataKey])
         if (xVal === undefined || isNaN(xVal)) {
@@ -90,7 +69,15 @@ const MiniChartPreview = memo<MiniChartPreviewProps>(
             if (isNaN(value) || value === 0) return
 
             const seriesColor = colorScale?.(config.runtime.seriesLabels?.[s.dataKey] || s.dataKey) || '#666'
-            const patternUrl = getPatternUrl(d, s.dataKey, value)
+            const patternUrl = getPatternUrlForBar({
+              patterns: config.legend?.patterns,
+              datum: d,
+              seriesKey: s.dataKey,
+              seriesValue: value,
+              seriesLabels: config.runtime?.seriesLabels,
+              seriesKeys: patternSeriesKeys,
+              allowNonSeriesFieldMatch: true
+            })
 
             // Calculate the bottom and top of this segment
             // For stacked bars, each segment sits on top of the previous one
@@ -145,7 +132,15 @@ const MiniChartPreview = memo<MiniChartPreviewProps>(
             if (isNaN(value)) return
 
             const seriesColor = colorScale?.(config.runtime.seriesLabels?.[s.dataKey] || s.dataKey) || '#666'
-            const patternUrl = getPatternUrl(d, s.dataKey, value)
+            const patternUrl = getPatternUrlForBar({
+              patterns: config.legend?.patterns,
+              datum: d,
+              seriesKey: s.dataKey,
+              seriesValue: value,
+              seriesLabels: config.runtime?.seriesLabels,
+              seriesKeys: patternSeriesKeys,
+              allowNonSeriesFieldMatch: allowGroupedNonSeriesFieldMatch
+            })
 
             // Calculate bar position and height
             const valueY = miniYScale(value)

package/src/components/EditorPanel/EditorPanel.tsx

@@ -45,7 +45,10 @@ import '@cdc/core/components/EditorPanel/EditorPanel.styles.css'
 import './editor-panel.scss'
 import { Anchor } from '@cdc/core/types/Axis'
 import EditorPanelContext from './EditorPanelContext'
-import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
+import flatMap from 'lodash/flatMap'
+import keys from 'lodash/keys'
+import uniq from 'lodash/uniq'
 import { adjustedSymbols as symbolCodes } from '@cdc/core/helpers/footnoteSymbols'
 import { updateFieldRankByValue } from './helpers/updateFieldRankByValue'
 import cloneConfig from '@cdc/core/helpers/cloneConfig'
@@ -55,6 +58,7 @@ import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
 import { paletteMigrationMap, twoColorPaletteMigrationMap } from '@cdc/core/helpers/palettes/migratePaletteName'
 import { isV1Palette, migratePaletteWithMap } from '@cdc/core/helpers/palettes/utils'
 import { USE_V2_MIGRATION } from '@cdc/core/helpers/constants'
+import { getSeriesOwnedColumnNames } from '../../helpers/seriesColumnSettings'
 
 interface PreliminaryProps {
   config: ChartConfig
@@ -70,7 +74,7 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
   const hasComboBarSeries = isCombo && barSeriesExists
 
   const getColumnOptions = () => {
-    return _.uniq(_.flatMap(data, _.keys))
+    return uniq(flatMap(data, keys))
   }
 
   const getTypeOptions = () => {
@@ -935,6 +939,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
 
   // Extract column names from data with memoization (replaces getColumns)
   const allColumns = useDataColumns(dataSourceForColumns)
+  const seriesOwnedColumnNames = useMemo(() => getSeriesOwnedColumnNames(config.series), [config.series])
 
   // Filter out series columns and confidence key columns (except lower and upper)
   const filteredColumns = useMemo(() => {
@@ -1519,46 +1524,8 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
     'Deviation Bar'
   ]
 
-  const columnsOptions = [
-    <option value='' key={'Select Option'}>
-      - Select Option -
-    </option>
-  ]
-
-  if (config.data && config.series) {
-    Object.keys(config.data?.[0] || []).map(colName => {
-      // OMIT ANY COLUMNS THAT ARE IN DATA SERIES!
-      const found = config?.series.some(series => series.dataKey === colName)
-      if (colName !== config.xAxis.dataKey && !found) {
-        // if not the index then add it
-        return columnsOptions.push(
-          <option value={colName} key={colName}>
-            {colName}
-          </option>
-        )
-      }
-    })
-  }
-
-  // for pie charts
-  if (!config.data && data) {
-    if (!data[0]) return
-    Object.keys(data[0]).map(colName => {
-      // OMIT ANY COLUMNS THAT ARE IN DATA SERIES!
-      const found = data.some(el => el.dataKey === colName)
-      if (colName !== config.xAxis.dataKey && !found) {
-        // if not the index then add it
-        return columnsOptions.push(
-          <option value={colName} key={colName}>
-            {colName}
-          </option>
-        )
-      }
-    })
-  }
-
   const removeAdditionalColumn = columnName => {
-    const newColumns = _.cloneDeep(config.columns)
+    const newColumns = cloneDeep(config.columns)
 
     delete newColumns[columnName]
 
@@ -2487,6 +2454,28 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                 <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
                               </>
                             )}
+                            <TextField
+                              value={config.yAxis.smallestLeftAxisMax}
+                              section='yAxis'
+                              fieldName='smallestLeftAxisMax'
+                              type='number'
+                              label='Smallest Left Axis Maximum'
+                              placeholder='Auto'
+                              tooltip={
+                                <Tooltip style={{ textTransform: 'none' }}>
+                                  <Tooltip.Target>
+                                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                  </Tooltip.Target>
+                                  <Tooltip.Content>
+                                    <p>
+                                      Example: If your data only goes up to 1, the axis might show 0, 0.2, 0.4, 0.6,
+                                      0.8, 1. Setting this to 5 would make the axis show 0, 1, 2, 3, 4, 5 instead.
+                                    </p>
+                                  </Tooltip.Content>
+                                </Tooltip>
+                              }
+                              updateField={updateFieldDeprecated}
+                            />
                           </>
                         )
                       )}
@@ -2886,7 +2875,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                       />
 
                       <TextField
-                        value={config.yAxis.max}
+                        value={config.yAxis.rightMax}
                         section='yAxis'
                         fieldName='rightMax'
                         type='number'
@@ -2896,7 +2885,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                       />
                       <span style={{ color: 'red', display: 'block' }}>{warningMsg.rightMaxMessage}</span>
                       <TextField
-                        value={config.yAxis.min}
+                        value={config.yAxis.rightMin}
                         section='yAxis'
                         fieldName='rightMin'
                         type='number'
@@ -2905,6 +2894,28 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                         updateField={updateFieldDeprecated}
                       />
                       <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
+                      <TextField
+                        value={config.yAxis.smallestRightAxisMax}
+                        section='yAxis'
+                        fieldName='smallestRightAxisMax'
+                        type='number'
+                        label='Smallest Right Axis Maximum'
+                        placeholder='Auto'
+                        tooltip={
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>
+                                Example: If your data only goes up to 1, the axis might show 0, 0.2, 0.4, 0.6, 0.8, 1.
+                                Setting this to 5 would make the axis show 0, 1, 2, 3, 4, 5 instead.
+                              </p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        }
+                        updateField={updateFieldDeprecated}
+                      />
                     </AccordionItemPanel>
                   </AccordionItem>
                 )}
@@ -4143,6 +4154,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                         config={config}
                         updateField={updateFieldDeprecated}
                         deleteColumn={removeAdditionalColumn}
+                        hiddenColumnNames={seriesOwnedColumnNames}
                       />{' '}
                     </AccordionItemPanel>
                   </AccordionItem>
@@ -4600,6 +4612,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                     enableMarkupVariables={config.enableMarkupVariables || false}
                     onMarkupVariablesChange={variables => updateField(null, null, 'markupVariables', variables)}
                     onToggleEnable={enabled => updateField(null, null, 'enableMarkupVariables', enabled)}
+                    dataMetadata={config.dataMetadata}
                   />
                 )}
                 <Panels.SmallMultiples name='Small Multiples' />