@cdc/chart 4.25.6 → 4.25.7

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

@@ -59,7 +59,9 @@ export const BarChartHorizontal = () => {
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
-  const hasConfidenceInterval = Object.keys(config.confidenceKeys).length > 0
+  const hasConfidenceInterval = [config.confidenceKeys?.upper, config.confidenceKeys?.lower].every(
+    v => v != null && String(v).trim() !== ''
+  )
 
   const _data = getBarData(config, data, hasConfidenceInterval)
 
@@ -262,6 +264,21 @@ export const BarChartHorizontal = () => {
                           }
                         })}
 
+                        {(absentDataLabel || isSuppressed) && (
+                          <rect
+                            x={barX}
+                            y={0}
+                            width={yMax}
+                            height={numbericBarHeight}
+                            fill='transparent'
+                            data-tooltip-place='top'
+                            data-tooltip-offset='{"top":3}'
+                            style={{ pointerEvents: 'all', cursor: 'pointer' }}
+                            data-tooltip-html={tooltip}
+                            data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                          />
+                        )}
+
                         {config.preliminaryData?.map((pd, index) => {
                           // check if user selected column
                           const selectedSuppressionColumn = !pd.column || pd.column === bar.key
@@ -301,7 +318,7 @@ export const BarChartHorizontal = () => {
                           )
                         })}
 
-                        {!config.isLollipopChart && (
+                        {!config.isLollipopChart && !hasConfidenceInterval && (
                           <Text // prettier-ignore
                             display={displayBar ? 'block' : 'none'}
                             x={bar.y}
@@ -315,6 +332,21 @@ export const BarChartHorizontal = () => {
                             {testZeroValue(bar.value) ? '' : barDefaultLabel}
                           </Text>
                         )}
+
+                        {!config.isLollipopChart && hasConfidenceInterval && (
+                          <Text // prettier-ignore
+                            display={displayBar ? 'block' : 'none'}
+                            x={bar.value < 0 ? bar.y + barWidth : bar.y - barWidth}
+                            opacity={transparentBar ? 0.5 : 1}
+                            y={config.barHeight / 2 + config.barHeight * bar.index}
+                            fill={labelColor}
+                            dx={-textPadding}
+                            verticalAnchor='middle'
+                            textAnchor={bar.value < 0 ? 'end' : 'start'}
+                          >
+                            {testZeroValue(bar.value) ? '' : barDefaultLabel}
+                          </Text>
+                        )}
                         <Text // prettier-ignore
                           display={displayBar ? 'block' : 'none'}
                           x={bar.y}

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

@@ -288,6 +288,21 @@ export const BarChartVertical = () => {
                           }
                         })}
 
+                        {(absentDataLabel || isSuppressed) && (
+                          <rect
+                            x={barX}
+                            y={0}
+                            width={barWidth}
+                            height={yMax}
+                            fill='transparent'
+                            data-tooltip-place='top'
+                            data-tooltip-offset='{"top":3}'
+                            style={{ pointerEvents: 'all', cursor: 'pointer' }}
+                            data-tooltip-html={tooltip}
+                            data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                          />
+                        )}
+
                         {config.preliminaryData.map((pd, index) => {
                           // check if user selected column
                           const selectedSuppressionColumn = !pd.column || pd.column === bar.key

package/src/components/BoxPlot/BoxPlot.Horizontal.tsx

@@ -0,0 +1,131 @@
+import React, { useContext } from 'react'
+import { Group } from '@visx/group'
+import { BoxPlot } from '@visx/stats'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import ConfigContext from '../../ConfigContext'
+import { handleTooltip, createPlots } from './helpers/index'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
+import _ from 'lodash'
+
+const BoxPlotHorizontal = ({ xScale, yScale, seriesScale }) => {
+  const { config, transformedData: data, colorScale, seriesHighlight } = useContext(ConfigContext)
+  const yOffset = Number(config.xAxis.size)
+  const defaultColor = APP_FONT_COLOR
+  const tooltip_id = `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
+  // generate summary stats
+  const plots = createPlots(data, config)
+  const { plotNonOutlierValues, plotOutlierValues } = config.boxplot
+
+  return (
+    <ErrorBoundary component='BoxPlot Horizontal'>
+      <Group left={yOffset} top={0} className='boxplot'>
+        {plots.map(plot => {
+          const category = plot.columnCategory
+
+          return config.series.map(item => {
+            const y0 = yScale(category)
+            const offset = seriesScale(item.dataKey)
+            const isTransparent =
+              config.legend.behavior === 'highlight' &&
+              seriesHighlight.length > 0 &&
+              seriesHighlight.indexOf(item.dataKey) === -1
+            const displayPlot =
+              config.legend.behavior === 'highlight' ||
+              seriesHighlight.length === 0 ||
+              seriesHighlight.indexOf(item.dataKey) !== -1
+            const fillOpacity = isTransparent ? 0.3 : 0.7
+            // outlier & non-outlier arrays
+            const nonOut = plot.columnNonOutliers?.[item.dataKey] || []
+            const out = plot.columnOutliers?.[item.dataKey] || []
+
+            return (
+              <Group key={`${category}-${item.dataKey}`} top={y0 + offset}>
+                {displayPlot && (
+                  <BoxPlot
+                    min={Number(plot.min[item.dataKey])}
+                    max={Number(plot.max[item.dataKey])}
+                    thirdQuartile={plot.q3[item.dataKey]}
+                    firstQuartile={plot.q1[item.dataKey]}
+                    median={plot.median[item.dataKey]}
+                    horizontal={true}
+                    valueScale={xScale}
+                    boxWidth={seriesScale.bandwidth()}
+                    fill={colorScale(item.dataKey)}
+                    fillOpacity={1}
+                    stroke={defaultColor}
+                    boxProps={{
+                      fill: colorScale(item.dataKey),
+                      strokeWidth: config.boxplot.borders === 'true' ? 1.5 : 0,
+                      stroke: defaultColor,
+                      fillOpacity: fillOpacity
+                    }}
+                    minProps={{ stroke: defaultColor, strokeWidth: 1, opacity: fillOpacity }}
+                    maxProps={{ stroke: defaultColor, strokeWidth: 1, opacity: fillOpacity }}
+                    medianProps={{ stroke: defaultColor, strokeWidth: 1, opacity: fillOpacity }}
+                    outliers={
+                      config.boxplot.plotOutlierValues ? _.map(plot.columnOutliers[item.dataKey], item => item) : []
+                    }
+                    outlierProps={{
+                      style: {
+                        fill: colorScale(item.dataKey),
+                        opacity: fillOpacity,
+                        stroke: defaultColor
+                      }
+                    }}
+                    container
+                    containerProps={{
+                      'data-tooltip-html': handleTooltip(
+                        config.boxplot,
+                        plot.columnCategory,
+                        item.dataKey,
+                        _.round(plot.q1[item.dataKey], config.dataFormat.roundTo),
+                        _.round(plot.q3[item.dataKey], config.dataFormat.roundTo),
+                        _.round(plot.median[item.dataKey], config.dataFormat.roundTo),
+                        _.round(plot.iqr[item.dataKey], config.dataFormat.roundTo),
+                        config.xAxis.label,
+                        defaultColor
+                      ),
+                      'data-tooltip-id': tooltip_id,
+                      tabIndex: -1
+                    }}
+                  />
+                )}
+
+                {/* non-outlier points */}
+                {plotNonOutlierValues &&
+                  nonOut.map((value, idx) => (
+                    <circle
+                      display={displayPlot ? 'block' : 'none'}
+                      key={`non-${category}-${item.dataKey}-${idx}`}
+                      cx={xScale(value)}
+                      cy={seriesScale.bandwidth() / 2}
+                      r={4}
+                      opacity={fillOpacity}
+                      fill={defaultColor}
+                      style={{ stroke: defaultColor }}
+                    />
+                  ))}
+
+                {/* outlier points */}
+                {plotOutlierValues &&
+                  out.map((value, idx) => (
+                    <circle
+                      display={displayPlot ? 'block' : 'none'}
+                      key={`out-${category}-${item.dataKey}-${idx}`}
+                      cx={xScale(value)}
+                      cy={seriesScale.bandwidth() / 2}
+                      r={4}
+                      opacity={fillOpacity}
+                      fill={defaultColor}
+                      style={{ stroke: defaultColor }}
+                    />
+                  ))}
+              </Group>
+            )
+          })
+        })}
+      </Group>
+    </ErrorBoundary>
+  )
+}
+export default BoxPlotHorizontal

package/src/components/BoxPlot/{BoxPlot.tsx → BoxPlot.Vertical.tsx}

@@ -8,7 +8,7 @@ import { handleTooltip, createPlots } from './helpers/index'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import _ from 'lodash'
 
-const CoveBoxPlot = ({ xScale, yScale, seriesScale }) => {
+const BoxPlotVertical = ({ xScale, yScale, seriesScale }) => {
   const { config, colorScale, seriesHighlight, transformedData: data } = useContext(ConfigContext)
   const { boxplot } = config
 
@@ -21,7 +21,7 @@ const CoveBoxPlot = ({ xScale, yScale, seriesScale }) => {
   const color_0 = _.get(colorPalettesChart, [config.palette, 0], '#000')
   const plots = createPlots(data, config)
   return (
-    <ErrorBoundary component='BoxPlot'>
+    <ErrorBoundary component='BoxPlot Vertical'>
       <Group left={Number(config.yAxis.size)} className='boxplot' key={`boxplot-group`}>
         {plots.map((d, i) => {
           const offset = boxWidth - constrainedWidth
@@ -41,7 +41,7 @@ const CoveBoxPlot = ({ xScale, yScale, seriesScale }) => {
                   config.legend.behavior === 'highlight' ||
                   seriesHighlight.length === 0 ||
                   seriesHighlight.indexOf(item.dataKey) !== -1
-                const fillOpacity = isTransparent ? 0.3 : 0.5
+                const fillOpacity = isTransparent ? 0.3 : 0.7
                 return (
                   <Group key={`boxplotplot-${item.dataKey}-${index}`}>
                     {boxplot.plotNonOutlierValues &&
@@ -131,4 +131,4 @@ const CoveBoxPlot = ({ xScale, yScale, seriesScale }) => {
   )
 }
 
-export default CoveBoxPlot
+export default BoxPlotVertical

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

@@ -33,7 +33,7 @@ export const calculateBoxPlotStats = (values: number[]) => {
   if (!values || values.length === 0) return {}
 
   // Sort the values
-  const sortedValues = _.sortBy(values)
+  const sortedValues = _.sortBy(values.map(v => Number(v)))
 
   // Quartiles
   const firstQuartile = d3.quantile(sortedValues, 0.25) ?? 0
@@ -45,18 +45,28 @@ export const calculateBoxPlotStats = (values: number[]) => {
   // 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: d3.min(nonOutliers), // Smallest non-outlier value
-    max: d3.max(nonOutliers), // Largest non-outlier value
-    median: d3.median(sortedValues), // Median of all values
+    min: whiskerMin,
+    max: whiskerMax,
+    median: d3.median(sortedValues),
     firstQuartile,
     thirdQuartile,
-    iqr
+    iqr,
+    outliers
   }
 }
 
@@ -109,16 +119,26 @@ export const createPlots = (data, config) => {
 
       // Calculate outliers and non-outliers for each series key
       Object.keys(keyValues).forEach(key => {
-        const values = keyValues[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
+        }
 
         // Calculate box plot statistics
-        const { firstQuartile, thirdQuartile, min, max, median, iqr } = calculateBoxPlotStats(values)
+        const { firstQuartile, thirdQuartile, min, max, median, iqr, outliers } = calculateBoxPlotStats(cleaned)
         // Calculate outliers and non-outliers
-        columnOutliers[key] = calculateOutliers(values, firstQuartile, thirdQuartile).map(Number)
-        columnNonOutliers[key] = calculateNonOutliers(values, firstQuartile, thirdQuartile).map(Number)
+        columnOutliers[key] = calculateOutliers(cleaned, firstQuartile, thirdQuartile).map(Number)
+        columnNonOutliers[key] = calculateNonOutliers(cleaned, firstQuartile, thirdQuartile).map(Number)
         columnMedian[key] = median
-        columnMin[key] = min
-        columnMax[key] = max
+        columnMin[key] = Number(min)
+        columnMax[key] = Number(max)
         columnQ1[key] = firstQuartile
         columnQ3[key] = thirdQuartile
         columnIqr[key] = iqr

package/src/components/BrushChart.tsx

@@ -120,7 +120,7 @@ const BrushChart = ({ xMax, yMax }: BrushChartProps) => {
       svg.call(brushHandle, selection, formattedStartDate, formattedEndDate)
 
       const payload = {
-        active: config.brush.active,
+        active: config.xAxis.brushActive,
         isBrushing: isUserBrushing,
         data: finalData
       }

package/src/components/EditorPanel/EditorPanel.tsx

@@ -20,6 +20,7 @@ import DataTableEditor from '@cdc/core/components/EditorPanel/DataTableEditor'
 import VizFilterEditor from '@cdc/core/components/EditorPanel/VizFilterEditor'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import { Select, TextField, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
+import MultiSelect from '@cdc/core/components/MultiSelect'
 import { viewports } from '@cdc/core/helpers/getViewport'
 import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 
@@ -109,7 +110,7 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
     let preliminaryData = config.preliminaryData ? [...config.preliminaryData] : []
     const defaultValues = {
       type: defaultType,
-      seriesKey: '',
+      seriesKeys: [],
       label: 'Suppressed',
       column: '',
       value: '',
@@ -159,7 +160,7 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
               displayTable,
               displayTooltip,
               label,
-              seriesKey,
+              seriesKeys,
               style,
               symbol,
               type,
@@ -384,14 +385,18 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
                   </>
                 ) : (
                   <>
-                    <Select
-                      value={seriesKey}
-                      initial='Select'
-                      fieldName='seriesKey'
-                      label='ASSOCIATE TO SERIES'
-                      updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
-                      options={config.runtime.lineSeriesKeys ?? config.runtime?.seriesKeys}
-                    />
+                    <label>
+                      <span className='edit-label'>ASSOCIATE TO THESE SERIES</span>
+                      <MultiSelect
+                        fieldName='seriesKeys'
+                        updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                        options={(config.runtime.lineSeriesKeys ?? config.runtime?.seriesKeys).map(c => ({
+                          label: c,
+                          value: c
+                        }))}
+                        selected={seriesKeys}
+                      />
+                    </label>
                     <Select
                       value={column}
                       initial='Select'
@@ -1193,7 +1198,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
   if (isDebug && config?.series?.length === 0) {
     let setdatacol = setDataColumn()
     if (setdatacol !== '') addNewSeries(setdatacol)
-    if (isDebug) console.error('### COVE DEBUG: Chart: Setting default datacol=', setdatacol) // eslint-disable-line
+    if (isDebug) console.log('### COVE DEBUG: Chart: Setting default datacol=', setdatacol) // eslint-disable-line
   }
 
   const chartsWithOptions = [
@@ -2926,9 +2931,9 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                       />
                       {visHasBrushChart() && (
                         <CheckBox
-                          value={config.brush.active}
-                          section='brush'
-                          fieldName='active'
+                          value={config.xAxis.brushActive}
+                          section='xAxis'
+                          fieldName='brushActive'
                           label='Brush Slider '
                           updateField={updateFieldDeprecated}
                           tooltip={

package/src/components/EditorPanel/components/Panels/Panel.General.tsx

@@ -131,7 +131,7 @@ const PanelGeneral: FC<PanelProps> = props => {
             options={Object.keys(approvedCurveTypes)}
           />
         )}
-        {visualizationType === 'Bar' && (
+        {(visualizationType === 'Bar' || visualizationType === 'Box Plot') && (
           <Select
             value={config.orientation || 'vertical'}
             fieldName='orientation'
@@ -178,7 +178,7 @@ const PanelGeneral: FC<PanelProps> = props => {
             options={['standard', 'shallow', 'finger']}
           />
         )}
-        {visualizationType === 'Bar' && config.orientation === 'horizontal' && (
+        {(visualizationType === 'Bar' || visualizationType === 'Box Plot') && config.orientation === 'horizontal' && (
           <Select
             value={config.yAxis.labelPlacement || 'Below Bar'}
             section='yAxis'

package/src/components/Forecasting/{Forecasting.jsx → Forecasting.tsx}

@@ -1,9 +1,10 @@
 import React, { useContext } from 'react'
-
+import { replace } from 'lodash'
 // cdc
 import ConfigContext from '../../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { colorPalettesChart, sequentialPalettes } from '@cdc/core/data/colorPalettes'
+import { getBridgedData } from '../../helpers/getBridgedData'
 
 // visx & d3
 import { curveMonotoneX } from '@visx/curve'
@@ -11,7 +12,7 @@ import { Bar, Area, LinePath } from '@visx/shape'
 import { Group } from '@visx/group'
 
 const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, handleTooltipMouseOff }) => {
-  const { transformedData: data, rawData, config, seriesHighlight } = useContext(ConfigContext)
+  const { transformedData: data, rawData, config, seriesHighlight, parseDate } = useContext(ConfigContext)
   const { xAxis, yAxis, legend, runtime } = config
   const DEBUG = false
 
@@ -23,12 +24,17 @@ const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, ha
             if (!group || !group.stages) return false
             return group.stages.map((stage, stageIndex) => {
               const { behavior } = legend
-              const groupData = rawData.filter(d => d[group.stageColumn] === stage.key)
-              let transparentArea = behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(stage.key) === -1
-              let displayArea = behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(stage.key) !== -1
+              let transparentArea =
+                behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(stage.key) === -1
+              let displayArea =
+                behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(stage.key) !== -1
+              const bridgedData = getBridgedData(stage.key, group.stageColumn, rawData)
 
               return (
-                <Group className={`forecasting-areas-combo-${index}`} key={`forecasting-areas--stage-${stage.key.replaceAll(' ', '-')}-${index}`}>
+                <Group
+                  className={`forecasting-areas-combo-${index}`}
+                  key={`forecasting-areas--stage-${replace(stage.key, / /g, '—')}-${index}`}
+                >
                   {group.confidenceIntervals?.map((ciGroup, ciGroupIndex) => {
                     const palette = sequentialPalettes[stage.color] || colorPalettesChart[stage.color] || false
 
@@ -44,13 +50,19 @@ const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, ha
 
                     if (ciGroup.high === '' || ciGroup.low === '') return
                     return (
-                      <Group key={`forecasting-areas--stage-${stage.key.replaceAll(' ', '-')}--group-${stageIndex}-${ciGroupIndex}`}>
+                      <Group
+                        key={`forecasting-areas--stage-${replace(
+                          stage.key,
+                          / /g,
+                          '—'
+                        )}--group-${stageIndex}-${ciGroupIndex}`}
+                      >
                         {/* prettier-ignore */}
                         <Area
                           curve={curveMonotoneX}
-                          data={groupData}
+                          data={bridgedData}
                           fill={getFill()}
-                          opacity={transparentArea ? 0.1 : .5}
+                          opacity={transparentArea? 0.1 : 0.5 }
                           x={d => xScale(Date.parse(d[xAxis.dataKey]))}
                           y0={d => yScale(d[ciGroup.low])}
                           y1={d => yScale(d[ciGroup.high])}
@@ -59,10 +71,10 @@ const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, ha
                         {ciGroupIndex === 0 && (
                           <>
                             {/* prettier-ignore */}
-                            <LinePath data={groupData} x={d => Number(xScale(Date.parse(d[xAxis.dataKey])))} y={d => Number(yScale(d[ciGroup.high]))} curve={curveMonotoneX} stroke={getStroke()} strokeWidth={1} strokeOpacity={1} />
+                            <LinePath data={bridgedData} x={d => Number(xScale(Date.parse(d[xAxis.dataKey])))} y={d => Number(yScale(d[ciGroup.high]))} curve={curveMonotoneX} stroke={getStroke()} strokeWidth={1} strokeOpacity={1} />
 
                             {/* prettier-ignore */}
-                            <LinePath data={groupData} x={d => Number(xScale(Date.parse(d[xAxis.dataKey])))} y={d => Number(yScale(d[ciGroup.low]))} curve={curveMonotoneX} stroke={getStroke()} strokeWidth={1} strokeOpacity={1} />
+                            <LinePath data={bridgedData} x={d => Number(xScale(Date.parse(d[xAxis.dataKey])))} y={d => Number(yScale(d[ciGroup.low]))} curve={curveMonotoneX} stroke={getStroke()} strokeWidth={1} strokeOpacity={1} />
                           </>
                         )}
                       </Group>
@@ -73,7 +85,15 @@ const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, ha
             })
           })}
           <Group key='tooltip-hover-section'>
-            <Bar key={'bars'} width={Number(width)} height={Number(height)} fill={DEBUG ? 'red' : 'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, data)} onMouseOut={handleTooltipMouseOff} />
+            <Bar
+              key={'bars'}
+              width={Number(width)}
+              height={Number(height)}
+              fill={DEBUG ? 'red' : 'transparent'}
+              fillOpacity={0.05}
+              onMouseMove={e => handleTooltipMouseOver(e, data)}
+              onMouseOut={handleTooltipMouseOff}
+            />
           </Group>
         </Group>
       </ErrorBoundary>

package/src/components/Legend/LegendGroup/LegendGroup.tsx

@@ -83,6 +83,7 @@ const LegendGroup = ({ formatLabels }) => {
                         }}
                         key={`legend-item-${i}`}
                         tabIndex={0}
+                        role='button'
                       >
                         <LegendShape shape={config.legend.style === 'boxes' ? 'square' : 'circle'} fill={label.value} />
                         <LegendLabel align='left' margin='0'>

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

@@ -19,9 +19,9 @@ export const getMarginTop = (isLegendBottom, config) => {
   if (!isLegendBottom) {
     return '0px'
   }
-  if (isLegendBottom && config.brush.active && !config.legend.hide) {
+  if (isLegendBottom && config.xAxis.brushActive && !config.legend.hide) {
     const additiolMargin = 25
-    return `${DEFAULT_MARGIN_TOP + config.brush.height + additiolMargin}px`
+    return `${DEFAULT_MARGIN_TOP + config.brush?.height + additiolMargin}px`
   } else {
     return `${DEFAULT_MARGIN_TOP}px`
   }

package/src/components/LineChart/helpers.ts

@@ -17,19 +17,19 @@ export const createStyles = (props: StyleProps): Style[] => {
 
   const dynamicSeriesKey = dynamicCategory ? originalSeriesKey : seriesKey
   const validPreliminaryData: PreliminaryDataItem[] = preliminaryData.filter(
-    pd => pd.seriesKey && pd.column && pd.value && pd.type && pd.style && pd.type === 'effect'
+    pd => pd.seriesKeys?.length && pd.column && pd.value && pd.type && pd.style && pd.type === 'effect'
   )
   const isEffectLine = (pd, dataPoint) => {
     if (dynamicCategory) {
       return (
         pd.type === 'effect' &&
         pd.style !== 'Open Circles' &&
-        pd.seriesKey === seriesKey &&
+        pd.seriesKeys.includes(seriesKey) &&
         String(dataPoint[dynamicSeriesKey]) === String(pd.value)
       )
     } else {
       return (
-        pd.seriesKey === seriesKey &&
+        pd.seriesKeys.includes(seriesKey) &&
         dataPoint[pd.column] === pd.value &&
         pd.type === 'effect' &&
         pd.style !== 'Open Circles'
@@ -71,11 +71,11 @@ export const filterCircles = (
 ): DataItem[] => {
   // Filter and map preliminaryData to get circlesFiltered
   const circlesFiltered = preliminaryData
-    ?.filter(item => item.style.includes('Circles') && item.type === 'effect')
+    ?.filter(item => item.style.includes('Circles') && item.type === 'effect' && item.seriesKeys?.length)
     .map(item => ({
       column: item.column,
       value: item.value,
-      seriesKey: item.seriesKey,
+      seriesKeys: item.seriesKeys,
       circleSize: item.circleSize,
       style: item.style
     }))
@@ -85,7 +85,7 @@ export const filterCircles = (
     circlesFiltered.forEach(fc => {
       if (
         item[fc.column] === fc.value &&
-        fc.seriesKey === seriesKey &&
+        fc.seriesKeys.includes(seriesKey) &&
         item[seriesKey] &&
         fc.style === 'Open Circles'
       ) {
@@ -98,7 +98,7 @@ export const filterCircles = (
       }
       if (
         (!fc.value || item[fc.column] === fc.value) &&
-        fc.seriesKey === seriesKey &&
+        fc.seriesKeys.includes(seriesKey) &&
         item[seriesKey] &&
         fc.style === 'Filled Circles'
       ) {