@cdc/chart 4.24.10 → 4.24.12-2

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

@@ -1,6 +1,11 @@
 import { memo, useContext } from 'react'
 import { useEditorPermissions } from '../../useEditorPermissions.js'
-import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import {
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton
+} from 'react-accessible-accordion'
 import { type ChartConfig } from '../../../../types/ChartConfig.js'
 import { TextField, Select } from '@cdc/core/components/EditorPanel/Inputs'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
@@ -58,7 +63,7 @@ const RegionSettings = memo(({ config, updateConfig }: { config: ChartConfig; up
           <div className='edit-block' key={`region-${i}`}>
             <button
               type='button'
-              className='remove-column'
+              className='btn btn-danger remove-column'
               onClick={event => {
                 event.preventDefault()
                 removeColumn(i)
@@ -68,8 +73,18 @@ const RegionSettings = memo(({ config, updateConfig }: { config: ChartConfig; up
             </button>
             <TextField value={label} label='Region Label' fieldName='label' i={i} updateField={updateField} />
             <div className='two-col-inputs'>
-              <TextField value={color} label='Text Color' fieldName='color' updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)} />
-              <TextField value={background} label='Background' fieldName='background' updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)} />
+              <TextField
+                value={color}
+                label='Text Color'
+                fieldName='color'
+                updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)}
+              />
+              <TextField
+                value={background}
+                label='Background'
+                fieldName='background'
+                updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)}
+              />
             </div>
 
             <Select
@@ -91,11 +106,17 @@ const RegionSettings = memo(({ config, updateConfig }: { config: ChartConfig; up
               options={fromOptions}
             />
 
-            {(config.regions[i].fromType === 'Fixed' || config.regions[i].fromType === 'Previous Days' || !config.regions[i].fromType) && (
+            {(config.regions[i].fromType === 'Fixed' ||
+              config.regions[i].fromType === 'Previous Days' ||
+              !config.regions[i].fromType) && (
               <>
                 <TextField
                   value={from}
-                  label={config.regions[i].fromType === 'Fixed' || !config.regions[i]?.fromType ? 'From Value' : 'Previous Number of Days'}
+                  label={
+                    config.regions[i].fromType === 'Fixed' || !config.regions[i]?.fromType
+                      ? 'From Value'
+                      : 'Previous Number of Days'
+                  }
                   fieldName='from'
                   updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)}
                   tooltip={
@@ -104,7 +125,10 @@ const RegionSettings = memo(({ config, updateConfig }: { config: ChartConfig; up
                         <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                       </Tooltip.Target>
                       <Tooltip.Content>
-                        <p>When using categorical (linear scale) match the data set value. When using date (linear / date time scale) match the x-axis value.</p>
+                        <p>
+                          When using categorical (linear scale) match the data set value. When using date (linear / date
+                          time scale) match the x-axis value.
+                        </p>
                       </Tooltip.Content>
                     </Tooltip>
                   }
@@ -131,13 +155,20 @@ const RegionSettings = memo(({ config, updateConfig }: { config: ChartConfig; up
               options={toOptions}
             />
 
-            {(config.regions[i].toType === 'Fixed' || !config.regions[i].toType) && <TextField value={to} label='To Value' fieldName='to' updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)} />}
+            {(config.regions[i].toType === 'Fixed' || !config.regions[i].toType) && (
+              <TextField
+                value={to}
+                label='To Value'
+                fieldName='to'
+                updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)}
+              />
+            )}
           </div>
         ))}
       {!config.regions && <p style={{ textAlign: 'center' }}>There are currently no regions.</p>}
       <button
         type='button'
-        className='btn full-width'
+        className='btn btn-primary full-width'
         onClick={e => {
           e.preventDefault()
           addColumn()

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

@@ -11,7 +11,7 @@ import {
 } from 'react-accessible-accordion'
 import EditorPanelContext, { type EditorPanelContext as EPContext } from '../../EditorPanelContext'
 
-const SankeySettings = () => {
+const SankeySettings: React.FC<PanelProps> = props => {
   const { config, updateConfig } = useContext(ConfigContext)
   const data = config.data?.[0]
   const { updateField } = useContext<EPContext>(EditorPanelContext)
@@ -109,7 +109,7 @@ const SankeySettings = () => {
                   onChange={e => updateStoryNode('segmentTextAfter', e.target.value, i)}
                 />
               </label>
-              <Button onClick={e => removeStoryNode(i)} className='btn' style={{ background: 'tomato' }}>
+              <Button onClick={e => removeStoryNode(i)} className='btn btn-danger full-width'>
                 Remove Story Node
               </Button>
             </div>
@@ -117,7 +117,7 @@ const SankeySettings = () => {
         {data?.storyNodeText?.length < 3 && (
           <button
             type='button'
-            className='btn full-width'
+            className='btn btn-primary full-width'
             onClick={e => {
               e.preventDefault()
               addStoryNode()

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

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { useContext, useMemo } from 'react'
 import ConfigContext from '../../../../ConfigContext'
 
 // Core
@@ -7,10 +7,18 @@ import Check from '@cdc/core/assets/icon-check.svg'
 import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 import { sequentialPalettes } from '@cdc/core/data/colorPalettes'
 import Icon from '@cdc/core/components/ui/Icon'
+import { Select } from '@cdc/core/components/EditorPanel/Inputs'
 
 // Third Party
-import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import {
+  Accordion,
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton
+} from 'react-accessible-accordion'
 import { Draggable } from '@hello-pangea/dnd'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
 
 const SeriesContext = React.createContext({})
 
@@ -48,7 +56,11 @@ const SeriesWrapper = props => {
     updateConfig({ ...config, series })
   }
 
-  return <SeriesContext.Provider value={{ updateSeries, supportedRightAxisTypes, getColumns, selectComponent }}>{props.children}</SeriesContext.Provider>
+  return (
+    <SeriesContext.Provider value={{ updateSeries, supportedRightAxisTypes, getColumns, selectComponent }}>
+      {props.children}
+    </SeriesContext.Provider>
+  )
 }
 
 const SeriesDropdownLineType = props => {
@@ -245,7 +257,9 @@ const SeriesDropdownForecastColor = props => {
     <InputSelect
       key={`${stage}--${stageIndex}`}
       initial='Select an option'
-      value={config.series?.[index].stages?.[stageIndex].color ? config.series?.[index].stages?.[stageIndex].color : 'Select'}
+      value={
+        config.series?.[index].stages?.[stageIndex].color ? config.series?.[index].stages?.[stageIndex].color : 'Select'
+      }
       label={`${stage.key} Series Color`}
       onChange={event => {
         const copyOfSeries = [...config.series] // copy the entire series array
@@ -315,55 +329,33 @@ const SeriesDropdownConfidenceInterval = props => {
                 <AccordionItemPanel>
                   <div className='input-group'>
                     <label htmlFor='showInTooltip'>Show In Tooltip</label>
-                    <div className={'cove-input__checkbox--small'} onClick={e => updateShowInTooltip(e, index, ciIndex)}>
-                      <div className={`cove-input__checkbox-box${'blue' ? ' custom-color' : ''}`} style={{ backgroundColor: '' }}>
+                    <div
+                      className={'cove-input__checkbox--small'}
+                      onClick={e => updateShowInTooltip(e, index, ciIndex)}
+                    >
+                      <div
+                        className={`cove-input__checkbox-box${'blue' ? ' custom-color' : ''}`}
+                        style={{ backgroundColor: '' }}
+                      >
                         {showInTooltip && <Check className='' style={{ fill: '#025eaa' }} />}
                       </div>
-                      <input className='cove-input--hidden' type='checkbox' name={'showInTooltip'} checked={showInTooltip ? showInTooltip : false} readOnly />
+                      <input
+                        className='cove-input--hidden'
+                        type='checkbox'
+                        name={'showInTooltip'}
+                        checked={showInTooltip ? showInTooltip : false}
+                        readOnly
+                      />
                     </div>
                   </div>
 
-                  {/* <label>
-                    High Label
-                    <input
-                      type='text'
-                      key={`series-ci-high-label-${index}`}
-                      value={series.confidenceIntervals[index]?.highLabel ? series.confidenceIntervals[index]?.highLabel : ''}
-                      onChange={e => {
-                        const copiedConfidenceArray = [...config.series[index].confidenceIntervals]
-                        copiedConfidenceArray[ciIndex].highLabel = e.target.value
-                        const copyOfSeries = [...config.series] // copy the entire series array
-                        copyOfSeries[index] = { ...copyOfSeries[index], confidenceIntervals: copiedConfidenceArray }
-                        updateConfig({
-                          ...config,
-                          series: copyOfSeries
-                        })
-                      }}
-                    />
-                  </label> */}
-
-                  {/* <label>
-                    Low label
-                    <input
-                      type='text'
-                      key={`series-ci-high-label-${index}`}
-                      value={series.confidenceIntervals[index]?.lowLabel ? series.confidenceIntervals[index]?.lowLabel : ''}
-                      onChange={e => {
-                        const copiedConfidenceArray = [...config.series[index].confidenceIntervals]
-                        copiedConfidenceArray[ciIndex].lowLabel = e.target.value
-                        const copyOfSeries = [...config.series] // copy the entire series array
-                        copyOfSeries[index] = { ...copyOfSeries[index], confidenceIntervals: copiedConfidenceArray }
-                        updateConfig({
-                          ...config,
-                          series: copyOfSeries
-                        })
-                      }}
-                    />
-                  </label> */}
-
                   <InputSelect
                     initial='Select an option'
-                    value={config.series[index].confidenceIntervals[ciIndex].low ? config.series[index].confidenceIntervals[ciIndex].low : 'Select'}
+                    value={
+                      config.series[index].confidenceIntervals[ciIndex].low
+                        ? config.series[index].confidenceIntervals[ciIndex].low
+                        : 'Select'
+                    }
                     label='Low Confidence Interval'
                     onChange={e => {
                       const copiedConfidenceArray = [...config.series[index].confidenceIntervals]
@@ -379,7 +371,11 @@ const SeriesDropdownConfidenceInterval = props => {
                   />
                   <InputSelect
                     initial='Select an option'
-                    value={config.series[index].confidenceIntervals[ciIndex].high ? config.series[index].confidenceIntervals[ciIndex].high : 'Select'}
+                    value={
+                      config.series[index].confidenceIntervals[ciIndex].high
+                        ? config.series[index].confidenceIntervals[ciIndex].high
+                        : 'Select'
+                    }
                     label='High Confidence Interval'
                     onChange={e => {
                       const copiedConfidenceArray = [...config.series[index].confidenceIntervals]
@@ -399,7 +395,7 @@ const SeriesDropdownConfidenceInterval = props => {
           })}
         </Accordion>
         <button
-          className='btn full-width'
+          className='btn btn-primary full-width'
           onClick={e => {
             e.preventDefault()
             let copiedIndex = null
@@ -409,7 +405,10 @@ const SeriesDropdownConfidenceInterval = props => {
               copiedIndex = []
             }
             const copyOfSeries = [...config.series] // copy the entire series array
-            copyOfSeries[index] = { ...copyOfSeries[index], confidenceIntervals: [...copiedIndex, { high: '', low: '' }] } // update the nested array
+            copyOfSeries[index] = {
+              ...copyOfSeries[index],
+              confidenceIntervals: [...copiedIndex, { high: '', low: '' }]
+            } // update the nested array
             updateConfig({
               ...config,
               series: copyOfSeries
@@ -468,7 +467,19 @@ const SeriesInputWeight = props => {
 const SeriesInputName = props => {
   const { series, index: i } = props
   const { config, updateConfig } = useContext(ConfigContext)
-  const adjustableNameSeriesTypes = ['Bump Chart', 'Bar', 'Line', 'Area Chart', 'Combo', 'Deviation', 'Paired', 'Scatter', 'dashed-sm', 'dashed-md', 'dashed-lg']
+  const adjustableNameSeriesTypes = [
+    'Bump Chart',
+    'Bar',
+    'Line',
+    'Area Chart',
+    'Combo',
+    'Deviation',
+    'Paired',
+    'Scatter',
+    'dashed-sm',
+    'dashed-md',
+    'dashed-lg'
+  ]
 
   if (!adjustableNameSeriesTypes.includes(series.type)) return
 
@@ -532,7 +543,13 @@ const SeriesDisplayInTooltip = props => {
           <div className={`cove-input__checkbox-box${'blue' ? ' custom-color' : ''}`} style={{ backgroundColor: '' }}>
             {series.tooltip && <Check className='' style={{ fill: '#025eaa' }} />}
           </div>
-          <input className='cove-input--hidden' type='checkbox' name={`series-tooltip--${index}`} checked={series.tooltip ? series.tooltip : false} readOnly />
+          <input
+            className='cove-input--hidden'
+            type='checkbox'
+            name={`series-tooltip--${index}`}
+            checked={series.tooltip ? series.tooltip : false}
+            readOnly
+          />
         </div>
       </div>
     </>
@@ -591,17 +608,33 @@ const SeriesButtonRemove = props => {
 
 const SeriesItem = props => {
   const { config } = useContext(ConfigContext)
-
+  const { updateSeries, getColumns } = useContext(SeriesContext)
   const { series, getItemStyle, sortableItemStyles, chartsWithOptions, index: i } = props
-
+  const showDynamicCategory =
+    ['Bar', 'Line'].includes(config.visualizationType) &&
+    config.visualizationSubType !== 'Stacked' &&
+    !config.series.find(s => s.dynamicCategory && s.dataKey !== series.dataKey)
   return (
     <Draggable key={series.dataKey} draggableId={`draggableFilter-${series.dataKey}`} index={i}>
       {(provided, snapshot) => (
-        <div key={i} className={snapshot.isDragging ? 'currently-dragging' : ''} style={getItemStyle(snapshot.isDragging, provided.draggableProps.style, sortableItemStyles)} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+        <div
+          key={i}
+          className={snapshot.isDragging ? 'currently-dragging' : ''}
+          style={getItemStyle(snapshot.isDragging, provided.draggableProps.style, sortableItemStyles)}
+          ref={provided.innerRef}
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+        >
           <Accordion allowZeroExpanded>
             <AccordionItem className='series-item series-item--chart'>
               <AccordionItemHeading className='series-item__title'>
-                <AccordionItemButton className={chartsWithOptions.includes(config.visualizationType) ? 'accordion__button' : 'accordion__button hide-arrow'}>
+                <AccordionItemButton
+                  className={
+                    chartsWithOptions.includes(config.visualizationType)
+                      ? 'accordion__button'
+                      : 'accordion__button hide-arrow'
+                  }
+                >
                   <Icon display='move' size={15} style={{ cursor: 'default' }} />
                   {series.dataKey}
                   <Series.Button.Remove series={series} index={i} />
@@ -610,6 +643,30 @@ const SeriesItem = props => {
               {chartsWithOptions.includes(config.visualizationType) && (
                 <AccordionItemPanel>
                   <Series.Input.Name series={series} index={i} />
+                  {showDynamicCategory && (
+                    <Select
+                      label='Dynamic Category'
+                      value={series.dynamicCategory}
+                      options={['- Select - ', ...getColumns().filter(col => series.dataKey !== col)]}
+                      updateField={(_section, _subsection, _fieldName, value) => {
+                        if (value === '- Select -') value = ''
+                        updateSeries(i, value, 'dynamicCategory')
+                      }}
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>
+                              This field is Optional. If you have a dynamic data series you can select the category
+                              field here. You can only add one dynamic category per visualization.
+                            </p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                    />
+                  )}
                   <Series.Input.Weight series={series} index={i} />
                   <Series.Dropdown.SeriesType series={series} index={i} />
                   <Series.Dropdown.AxisPosition series={series} index={i} />
@@ -630,7 +687,16 @@ const SeriesItem = props => {
 const SeriesList = props => {
   const { series, getItemStyle, sortableItemStyles, chartsWithOptions } = props
   return series.map((series, i) => {
-    return <SeriesItem getItemStyle={getItemStyle} sortableItemStyles={sortableItemStyles} chartsWithOptions={chartsWithOptions} series={series} index={i} key={`series-list-${i}`} />
+    return (
+      <SeriesItem
+        getItemStyle={getItemStyle}
+        sortableItemStyles={sortableItemStyles}
+        chartsWithOptions={chartsWithOptions}
+        series={series}
+        index={i}
+        key={`series-list-${i}`}
+      />
+    )
   })
 }
 

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

@@ -435,8 +435,7 @@ const PanelVisual: FC<PanelProps> = props => {
               min={15}
             />
           )}
-        {((config.visualizationType === 'Bar' && config.orientation !== 'horizontal') ||
-          config.visualizationType === 'Combo') && (
+        {(config.orientation !== 'horizontal' || config.visualizationType === 'Combo') && (
           <TextField
             value={config.barThickness}
             type='number'

package/src/components/EditorPanel/useEditorPermissions.ts

@@ -44,6 +44,18 @@ export const useEditorPermissions = () => {
     return true
   }
 
+  const visSupportsDateCategoryAxisMin = () => {
+    const enabledCharts = ['Scatter Plot']
+    if (enabledCharts.includes(visualizationType)) return true
+    return false
+  }
+
+  const visSupportsDateCategoryAxisMax = () => {
+    const enabledCharts = ['Scatter Plot']
+    if (enabledCharts.includes(visualizationType)) return true
+    return false
+  }
+
   const visSupportsSuperTitle = () => {
     const disabledCharts = ['Spark Line']
     if (disabledCharts.includes(visualizationType)) return false
@@ -88,7 +100,7 @@ export const useEditorPermissions = () => {
   const visHasLegend = () => {
     switch (visualizationType) {
       case 'Box Plot':
-        return false
+        return true
       case 'Forest Plot':
         return false
       case 'Spark Line':
@@ -141,7 +153,6 @@ export const useEditorPermissions = () => {
     }
   }
   const visHasBrushChart = () => {
-    return false
     if (config.xAxis.type === 'categorical') return false
     return ['Line', 'Bar', 'Area Chart', 'Combo'].includes(visualizationType) && orientation === 'vertical'
   }
@@ -372,6 +383,10 @@ export const useEditorPermissions = () => {
     )
   }
 
+  const visSupportsYPadding = () => {
+    return !config.dataFormat.onlyShowTopPrefixSuffix || !config.dataFormat.suffix?.includes(' ')
+  }
+
   const visHasSingleSeriesTooltip = () => {
     if (visualizationType === 'Bar' || visualizationType === 'Line') {
       return true
@@ -414,6 +429,8 @@ export const useEditorPermissions = () => {
     visSupportsChartHeight,
     visSupportsMobileChartHeight,
     visSupportsDateCategoryAxis,
+    visSupportsDateCategoryAxisMin,
+    visSupportsDateCategoryAxisMax,
     visSupportsDateCategoryAxisLabel,
     visSupportsDateCategoryAxisLine,
     visSupportsDateCategoryAxisTicks,
@@ -443,6 +460,7 @@ export const useEditorPermissions = () => {
     visSupportsValueAxisMax,
     visSupportsValueAxisMin,
     visSupportsDynamicSeries,
+    visSupportsYPadding,
     visHasSingleSeriesTooltip,
     visHasCategoricalAxis
   }

package/src/components/Legend/Legend.Component.tsx

@@ -2,14 +2,14 @@ import parse from 'html-react-parser'
 import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
 import LegendShape from '@cdc/core/components/LegendShape'
 import Button from '@cdc/core/components/elements/Button'
-import useLegendClasses from '../../hooks/useLegendClasses'
+import { getLegendClasses } from './helpers/getLegendClasses'
 import { useHighlightedBars } from '../../hooks/useHighlightedBars'
 import { handleLineType } from '../../helpers/handleLineType'
 
 import { getMarginTop, getGradientConfig, getMarginBottom } from './helpers/index'
 import { Line } from '@visx/shape'
 import { Label } from '../../types/Label'
-import { ChartConfig } from '../../types/ChartConfig'
+import { ChartConfig, ViewportSize } from '../../types/ChartConfig'
 import { ColorScale } from '../../types/ChartContext'
 import { forwardRef, useState } from 'react'
 import LegendSuppression from './Legend.Suppression'
@@ -17,10 +17,12 @@ import LegendGradient from '@cdc/core/components/Legend/Legend.Gradient'
 import { DimensionsType } from '@cdc/core/types/Dimensions'
 import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
 
+const LEGEND_PADDING = 30
+
 export interface LegendProps {
   colorScale: ColorScale
   config: ChartConfig
-  currentViewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
+  currentViewport: ViewportSize
   formatLabels: (labels: Label[]) => Label[]
   highlight: Function
   highlightReset: Function
@@ -46,7 +48,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
     },
     ref
   ) => {
-    const { innerClasses, containerClasses } = useLegendClasses(config)
+    const { innerClasses, containerClasses } = getLegendClasses(config)
     const { runtime, legend } = config
 
     const [hasSuppression, setHasSuppression] = useState(false)
@@ -78,7 +80,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
           config={config}
           {...getGradientConfig(config, formatLabels, colorScale)}
           dimensions={dimensions}
-          currentViewport={currentViewport}
+          parentPaddingToSubtract={legend.hideBorder ? 0 : LEGEND_PADDING}
         />
 
         <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
@@ -129,7 +131,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
                         }}
                         role='button'
                       >
-                        <div className='d-flex justify-content-center align-items-center'>
+                        <>
                           {config.visualizationType === 'Line' && config.legend.style === 'lines' ? (
                             <svg width={40} height={25}>
                               <Line
@@ -141,17 +143,14 @@ const Legend: React.FC<LegendProps> = forwardRef(
                               />
                             </svg>
                           ) : (
-                            <div className='d-flex flex-column mt-1'>
+                            <>
                               <LegendShape
                                 shape={config.legend.style === 'boxes' ? 'square' : 'circle'}
-                                viewport={currentViewport}
-                                margin='0'
                                 fill={label.value}
-                                display={true}
                               />
-                            </div>
+                            </>
                           )}
-                        </div>
+                        </>
 
                         <LegendLabel align='left' margin='0 0 0 4px'>
                           {label.text}

package/src/components/Legend/Legend.tsx

@@ -17,6 +17,7 @@ const Legend = forwardRef((props, ref) => {
     transformedData: data,
     currentViewport,
     dimensions,
+    getTextWidth
   } = useContext(ConfigContext)
   if (!config.legend) return null
   // create fn to reverse labels while legend is Bottom.  Legend-right , legend-left works by default.
@@ -24,22 +25,21 @@ const Legend = forwardRef((props, ref) => {
   const createLegendLabels = createFormatLabels(config, tableData, data, colorScale)
 
   return (
-    !['Box Plot'].includes(config.visualizationType) && (
-      <Fragment>
-        <LegendComponent
-          dimensions={dimensions}
-          ref={ref}
-          skipId={props.skipId || 'legend'}
-          config={config}
-          colorScale={colorScale}
-          seriesHighlight={seriesHighlight}
-          highlight={highlight}
-          highlightReset={highlightReset}
-          currentViewport={currentViewport}
-          formatLabels={createLegendLabels}
-        />
-      </Fragment>
-    )
+    <Fragment>
+      <LegendComponent
+        getTextWidth={getTextWidth}
+        dimensions={dimensions}
+        ref={ref}
+        skipId={props.skipId || 'legend'}
+        config={config}
+        colorScale={colorScale}
+        seriesHighlight={seriesHighlight}
+        highlight={highlight}
+        highlightReset={highlightReset}
+        currentViewport={currentViewport}
+        formatLabels={createLegendLabels}
+      />
+    </Fragment>
   )
 })
 

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

@@ -0,0 +1,59 @@
+import { ChartConfig } from './../../../types/ChartConfig'
+
+export const getLegendClasses = (config: ChartConfig) => {
+  const { position, singleRow, reverseLabelOrder, verticalSorted, hideBorder } = config.legend
+  const containerClasses = ['legend-container']
+  const innerClasses = ['legend-container__inner']
+
+  // Handle legend positioning
+  switch (position) {
+    case 'left':
+      containerClasses.push('left')
+      break
+    case 'right':
+      containerClasses.push('right')
+      break
+    case 'bottom':
+      containerClasses.push('bottom')
+      innerClasses.push('double-column', 'bottom')
+      break
+    case 'top':
+      containerClasses.push('top')
+      innerClasses.push('double-column', 'top')
+      break
+  }
+
+  // Handle single row configuration for 'bottom' and 'top' positions
+  if (['bottom', 'top'].includes(position) && singleRow) {
+    innerClasses.push('single-row')
+  }
+
+  // Reverse label order
+  if (reverseLabelOrder) {
+    innerClasses.push('d-flex', 'flex-column-reverse')
+  }
+
+  // Vertical sorting for 'bottom' and 'top' positions
+  if (['bottom', 'top'].includes(position) && verticalSorted) {
+    innerClasses.push('vertical-sorted')
+  }
+
+  // Configure border classes
+  if (hideBorder.side && (['right', 'left'].includes(position) || !position)) {
+    containerClasses.push('border-0')
+  }
+
+  if (hideBorder.topBottom && ['top', 'bottom'].includes(position)) {
+    containerClasses.push('border-0')
+  }
+
+  if (hideBorder.topBottom && ['top'].includes(position)) {
+    containerClasses.push('p-0')
+  }
+
+  return {
+    containerClasses,
+    innerClasses
+  }
+}
+export default getLegendClasses