@cdc/chart 4.23.11 → 4.24.1

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

@@ -1,10 +1,8 @@
-import React, { useState, useEffect, useCallback, memo, useContext } from 'react'
+import { useState, useEffect, useCallback, memo, useContext } from 'react'
 import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
 
 import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
 
-import { useDebounce } from 'use-debounce'
-
 // @cdc/core
 import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
@@ -12,128 +10,31 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import Icon from '@cdc/core/components/ui/Icon'
 import InputToggle from '@cdc/core/components/inputs/InputToggle'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
+import { Select, TextField, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
 
 // chart components
-import ForestPlotSettings from './ForestPlotSettings'
-import Series from './Series'
+import Panels from './components/Panels'
+import Series from './components/Panel.Series.jsx'
 
 // cdc additional
-import { useColorPalette } from '../hooks/useColorPalette'
-import { useEditorPermissions } from '../hooks/useEditorPermissions'
+import { useColorPalette } from '../../hooks/useColorPalette'
+import { useEditorPermissions } from './useEditorPermissions'
 import { useFilters } from '@cdc/core/components/Filters'
-import { useHighlightedBars } from '../hooks/useHighlightedBars'
-import ConfigContext from '../ConfigContext'
-import useReduceData from '../hooks/useReduceData'
-import useRightAxis from '../hooks/useRightAxis'
-import WarningImage from '../images/warning.svg'
-import useMinMax from './../hooks/useMinMax'
-
-/* eslint-disable react-hooks/rules-of-hooks */
-const TextField = memo(({ label, tooltip, section = null, subsection = null, fieldName, updateField, value: stateValue, type = 'input', i = null, min = null, ...attributes }) => {
-  const [value, setValue] = useState(stateValue)
-
-  const [debouncedValue] = useDebounce(value, 500)
-
-  useEffect(() => {
-    if ('string' === typeof debouncedValue && stateValue !== debouncedValue) {
-      updateField(section, subsection, fieldName, debouncedValue, i)
-    }
-  }, [debouncedValue]) // eslint-disable-line
-
-  let name = subsection ? `${section}-${subsection}-${fieldName}` : `${section}-${subsection}-${fieldName}`
-
-  const onChange = e => {
-    if ('number' !== type || min === null) {
-      setValue(e.target.value)
-    } else {
-      if (!e.target.value || min <= parseFloat(e.target.value)) {
-        setValue(e.target.value)
-      } else {
-        setValue(min.toString())
-      }
-    }
-  }
-
-  let formElement = <input type='text' name={name} onChange={onChange} {...attributes} value={value} />
-
-  if ('textarea' === type) {
-    formElement = <textarea name={name} onChange={onChange} {...attributes} value={value}></textarea>
-  }
+import { useHighlightedBars } from '../../hooks/useHighlightedBars'
+import ConfigContext from '../../ConfigContext'
+import useReduceData from '../../hooks/useReduceData'
+import useRightAxis from '../../hooks/useRightAxis'
+import WarningImage from '../../images/warning.svg'
+import useMinMax from '../../hooks/useMinMax'
 
-  if ('number' === type) {
-    formElement = <input type='number' name={name} onChange={onChange} {...attributes} value={value} />
-  }
-
-  if ('date' === type) {
-    formElement = <input type='date' name={name} onChange={onChange} {...attributes} value={value} />
-  }
-
-  return (
-    <label>
-      <span className='edit-label column-heading'>
-        {label}
-        {tooltip}
-      </span>
-      {formElement}
-    </label>
-  )
-})
-
-const CheckBox = memo(({ label, value, fieldName, section = null, subsection = null, tooltip, updateField, ...attributes }) => (
-  <label className='checkbox column-heading'>
-    <input
-      type='checkbox'
-      name={fieldName}
-      checked={value}
-      onChange={e => {
-        updateField(section, subsection, fieldName, !value)
-      }}
-      {...attributes}
-    />
-    <span className='edit-label'>
-      {label}
-      {tooltip}
-    </span>
-  </label>
-))
-
-const Select = memo(({ label, value, options, fieldName, section = null, subsection = null, required = false, tooltip, updateField, initial: initialValue, ...attributes }) => {
-  let optionsJsx = options.map((optionName, index) => (
-    <option value={optionName} key={index}>
-      {optionName}
-    </option>
-  ))
-
-  if (initialValue) {
-    optionsJsx.unshift(
-      <option value='' key='initial'>
-        {initialValue}
-      </option>
-    )
-  }
+import { type ChartConfig } from '../../types/ChartConfig'
+import { type ChartContext } from '../../types/ChartContext'
 
-  return (
-    <label>
-      <span className='edit-label'>
-        {label}
-        {tooltip}
-      </span>
-      <select
-        className={required && !value ? 'warning' : ''}
-        name={fieldName}
-        value={value}
-        onChange={event => {
-          updateField(section, subsection, fieldName, event.target.value)
-        }}
-        {...attributes}
-      >
-        {optionsJsx}
-      </select>
-    </label>
-  )
-})
+import './editor-panel.scss'
+import { Anchor } from '@cdc/core/types/Axis'
+import DataTableEditor from '@cdc/core/components/EditorPanel/DataTableEditor'
 
-const DataSuppression = memo(({ config, updateConfig, data }) => {
+const DataSuppression = memo(({ config, updateConfig, data }: any) => {
   const getColumnOptions = () => {
     const keys = new Set()
     data.forEach(d => {
@@ -207,104 +108,99 @@ const DataSuppression = memo(({ config, updateConfig, data }) => {
     </>
   )
 })
+const PreliminaryData = memo(({ config, updateConfig, data }) => {
+  const getColumnOptions = () => {
+    const keys = new Set()
+    data.forEach(d => {
+      Object.keys(d).forEach(key => {
+        keys.add(key)
+      })
+    })
+    return [...keys]
+  }
 
-const Regions = memo(({ config, updateConfig }) => {
-  let regionUpdate = (fieldName, value, i) => {
-    let regions = []
-
-    if (config.regions) {
-      regions = [...config.regions]
+  const getTypeOptions = () => {
+    if (config.visualizationType === 'Line' || config.visualizationType === 'Combo') {
+      return ['effect']
+    } else {
+      return ['suppression']
     }
-
-    regions[i][fieldName] = value
-    updateConfig({ ...config, regions })
   }
 
-  // only for Regions
-  let updateField = (section, subsection, fieldName, value, i) => regionUpdate(fieldName, value, i)
+  const getStyleOptions = () => {
+    if (config.visualizationType === 'Line' || config.visualizationType === 'Combo') {
+      return ['Open Circles']
+    }
+    if (config.visualizationType === 'Bar') {
+      return ['star']
+    }
+  }
 
   let removeColumn = i => {
-    let regions = []
+    let preliminaryData = []
 
-    if (config.regions) {
-      regions = [...config.regions]
+    if (config.preliminaryData) {
+      preliminaryData = [...config.preliminaryData]
     }
 
-    regions.splice(i, 1)
+    preliminaryData.splice(i, 1)
 
-    updateConfig({ ...config, regions })
+    updateConfig({ ...config, preliminaryData })
   }
 
   let addColumn = () => {
-    let regions = []
+    let preliminaryData = config.preliminaryData ? [...config.preliminaryData] : []
+    preliminaryData.push({ type: '', label: '', column: '', value: '', style: '' })
+    updateConfig({ ...config, preliminaryData })
+  }
 
-    if (config.regions) {
-      regions = [...config.regions]
-    }
+  let update = (fieldName, value, i) => {
+    let preliminaryData = []
 
-    regions.push({})
+    if (config.preliminaryData) {
+      preliminaryData = [...config.preliminaryData]
+    }
 
-    updateConfig({ ...config, regions })
+    preliminaryData[i][fieldName] = value
+    updateConfig({ ...config, preliminaryData })
   }
 
   return (
     <>
-      {config.regions &&
-        config.regions.map(({ label, color, from, to, background }, i) => (
-          <div className='edit-block' key={`region-${i}`}>
-            <button
-              type='button'
-              className='remove-column'
-              onClick={event => {
-                event.preventDefault()
-                removeColumn(i)
-              }}
-            >
-              Remove
-            </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)} />
-            </div>
-            <div className='two-col-inputs'>
-              <TextField
-                value={from}
-                label='From Value'
-                fieldName='from'
-                updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)}
-                tooltip={
-                  <Tooltip style={{ textTransform: 'none' }}>
-                    <Tooltip.Target>
-                      <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                    </Tooltip.Target>
-                    <Tooltip.Content>
-                      <p>The date needs to be in the original format of the data. Not the displayed format of the data.</p>
-                    </Tooltip.Content>
-                  </Tooltip>
-                }
-              />
-              <TextField value={to} label='To Value' fieldName='to' updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)} />
+      {config.preliminaryData &&
+        config.preliminaryData.map(({ seriesKey, type, label, column, value, style }, i) => {
+          return (
+            <div key={`preliminaryData-${i}`} className='edit-block'>
+              <button
+                type='button'
+                className='remove-column'
+                onClick={event => {
+                  event.preventDefault()
+                  removeColumn(i)
+                }}
+              >
+                Remove
+              </button>
+              <Select value={type} initial='Select' fieldName='type' label='Type' updateField={(section, subsection, fieldName, value) => update(fieldName, value, i)} options={getTypeOptions()} />
+              <Select value={seriesKey} initial='Select' fieldName='seriesKey' label='ASSOCIATE TO SERIES' updateField={(section, subsection, fieldName, value) => update(fieldName, value, i)} options={config.runtime?.seriesKeys} />
+              <Select value={column} initial='Select' fieldName='column' label='COLUMN WITH CONFIGURATION VALUE' updateField={(section, subsection, fieldName, value) => update(fieldName, value, i)} options={getColumnOptions()} />
+              <TextField value={value} fieldName='value' label='VALUE TO TRIGGER' updateField={(section, subsection, fieldName, value) => update(fieldName, value, i)} />
+              <Select value={style} initial='Select' fieldName='style' label='Style' updateField={(section, subsection, fieldName, value) => update(fieldName, value, i)} options={getStyleOptions()} />
+
+              <TextField value={label} fieldName='label' label='Label' placeholder='' updateField={(section, subsection, fieldName, value) => update(fieldName, value, i)} />
             </div>
-          </div>
-        ))}
-      {!config.regions && <p style={{ textAlign: 'center' }}>There are currently no regions.</p>}
-      <button
-        type='button'
-        className='btn full-width'
-        onClick={e => {
-          e.preventDefault()
-          addColumn()
-        }}
-      >
-        Add Region
+          )
+        })}
+
+      <button type='button' onClick={addColumn} className='btn full-width'>
+        {config.visualizationType === 'Line' ? 'Add Special Line' : config.visualizationType === 'Bar' ? ' Add Special Bar' : 'Add Special Line/Bar'}
       </button>
     </>
   )
 })
 
 const EditorPanel = () => {
-  const { config, updateConfig, transformedData: data, loading, colorPalettes, twoColorPalette, unfilteredData, excludedData, isDashboard, setParentConfig, missingRequiredSections, isDebug, setFilteredData, lineOptions, rawData } = useContext(ConfigContext)
+  const { config, updateConfig, transformedData: data, loading, colorPalettes, twoColorPalette, unfilteredData, excludedData, isDashboard, setParentConfig, missingRequiredSections, isDebug, setFilteredData, lineOptions, rawData } = useContext<ChartContext>(ConfigContext)
 
   const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, unfilteredData)
 
@@ -328,6 +224,9 @@ const EditorPanel = () => {
     visCanAnimate,
     visHasLegend,
     visHasBrushChart,
+    visSupportsDateCategoryAxis,
+    visSupportsValueAxisMin,
+    visSupportsValueAxisMax,
     visSupportsDateCategoryAxisLabel,
     visSupportsDateCategoryAxisLine,
     visSupportsDateCategoryAxisTicks,
@@ -884,7 +783,7 @@ const EditorPanel = () => {
   }
 
   const validateMinValue = () => {
-    const enteredValue = config[section].min
+    const enteredValue = parseFloat(config[section].min)
     let minVal = Number(minValue)
     let message = ''
 
@@ -892,19 +791,19 @@ const EditorPanel = () => {
       case config.useLogScale && ['Line', 'Combo', 'Bar'].includes(config.visualizationType) && enteredValue < 0:
         message = 'Negative numbers are not supported in logarithmic scale'
         break
-      case (config.visualizationType === 'Line' || config.visualizationType === 'Spark Line') && enteredValue && parseFloat(enteredValue) > minVal:
+      case (config.visualizationType === 'Line' || config.visualizationType === 'Spark Line') && enteredValue > minVal:
         message = 'Value should not exceed ' + minValue
         break
-      case config.visualizationType === 'Combo' && isAllLine && enteredValue && parseFloat(enteredValue) > minVal:
+      case config.visualizationType === 'Combo' && isAllLine && enteredValue > minVal:
         message = 'Value should not exceed ' + minValue
         break
-      case (config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && !isAllLine)) && enteredValue && minVal > 0 && parseFloat(enteredValue) > 0:
+      case (config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && !isAllLine)) && minVal > 0 && enteredValue > 0:
         message = config.useLogScale ? 'Value must be equal to 0' : 'Value must be less than or equal to 0'
         break
-      case config.visualizationType === 'Deviation Bar' && parseFloat(enteredValue) >= Math.min(minVal, config.xAxis.target):
+      case config.visualizationType === 'Deviation Bar' && enteredValue >= Math.min(minVal, config.xAxis.target):
         message = 'Value must be less than ' + Math.min(minVal, config.xAxis.target)
         break
-      case config.visualizationType !== 'Deviation Bar' && enteredValue && minVal < 0 && parseFloat(enteredValue) > minVal:
+      case config.visualizationType !== 'Deviation Bar' && enteredValue && minVal < 0 && enteredValue > minVal:
         message = 'Value should not exceed ' + minValue
         break
       default:
@@ -1116,7 +1015,7 @@ const EditorPanel = () => {
       {undefined === config.newViz && config.runtime && config.runtime.editorErrorMessage && <Error />}
       <button className={displayPanel ? `editor-toggle` : `editor-toggle collapsed`} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={onBackClick}></button>
       <section className={`${displayPanel ? 'editor-panel cove' : 'hidden editor-panel cove'}${isDashboard ? ' dashboard' : ''}`}>
-        <div aria-level='2' role='heading' className='heading-2'>
+        <div aria-level={2} role='heading' className='heading-2'>
           Configure Chart
         </div>
         <section className='form-container'>
@@ -1251,7 +1150,7 @@ const EditorPanel = () => {
                 {visSupportsChartHeight() && config.orientation === 'vertical' && <TextField type='number' value={config.heights.vertical} section='heights' fieldName='vertical' label='Chart Height' updateField={updateField} />}
               </AccordionItemPanel>
             </AccordionItem>
-            {config.visualizationType === 'Forest Plot' && <ForestPlotSettings />}
+            {config.visualizationType === 'Forest Plot' && <Panels.ForestPlot name='Forest Plot Settings' editColumn={editColumn} setCategoryAxis={setCategoryAxis} />}
             {config.visualizationType !== 'Pie' && config.visualizationType !== 'Forest Plot' && (
               <AccordionItem>
                 <AccordionItemHeading>
@@ -1274,7 +1173,7 @@ const EditorPanel = () => {
                       options={getColumns()}
                     />
                     {config.series && config.series.length !== 0 && (
-                      <Series.Wrapper getColumns={getColumns}>
+                      <Panels.Series.Wrapper getColumns={getColumns}>
                         <fieldset>
                           <legend className='edit-label float-left'>Displaying</legend>
                           <Tooltip style={{ textTransform: 'none' }}>
@@ -1293,14 +1192,14 @@ const EditorPanel = () => {
                             {provided => {
                               return (
                                 <ul {...provided.droppableProps} className='series-list' ref={provided.innerRef}>
-                                  <Series.List series={config.series} getItemStyle={getItemStyle} sortableItemStyles={sortableItemStyles} chartsWithOptions={chartsWithOptions} />
+                                  <Panels.Series.List series={config.series} getItemStyle={getItemStyle} sortableItemStyles={sortableItemStyles} chartsWithOptions={chartsWithOptions} />
                                   {provided.placeholder}
                                 </ul>
                               )
                             }}
                           </Droppable>
                         </DragDropContext>
-                      </Series.Wrapper>
+                      </Panels.Series.Wrapper>
                     )}
                   </>
                   {config.series && config.series.length <= 1 && config.visualizationType === 'Bar' && (
@@ -1312,6 +1211,7 @@ const EditorPanel = () => {
                   )}
                   {visSupportsRankByValue() && config.series && config.series.length === 1 && <Select fieldName='visualizationType' label='Rank by Value' initial='Select' onChange={e => sortSeries(e.target.value)} options={['asc', 'desc']} />}
                   {/* {visHasDataSuppression() && <DataSuppression config={config} updateConfig={updateConfig} data={data} />} */}
+                  {config.visualizationType === 'Line' && <PreliminaryData config={config} updateConfig={updateConfig} data={data} />}
                 </AccordionItemPanel>
               </AccordionItem>
             )}
@@ -1489,7 +1389,7 @@ const EditorPanel = () => {
                         <CheckBox value={config.isLegendValue} fieldName='isLegendValue' label='Use Legend Value in Hover' updateField={updateField} />
                       )}
                       <TextField value={config.yAxis.numTicks} placeholder='Auto' type='number' section='yAxis' fieldName='numTicks' label='Number of ticks' className='number-narrow' updateField={updateField} />
-                      {config.visualizationType === 'Paired Bar' && <TextField value={config.yAxis.tickRotation || 0} type='number' min='0' section='yAxis' fieldName='tickRotation' label='Tick rotation (Degrees)' className='number-narrow' updateField={updateField} />}
+                      {config.visualizationType === 'Paired Bar' && <TextField value={config.yAxis.tickRotation || 0} type='number' min={0} section='yAxis' fieldName='tickRotation' label='Tick rotation (Degrees)' className='number-narrow' updateField={updateField} />}
                       <TextField
                         value={config.yAxis.size}
                         type='number'
@@ -1510,12 +1410,12 @@ const EditorPanel = () => {
                         }
                       />
                       {config.orientation === 'horizontal' && config.visualizationType !== 'Paired Bar' && <CheckBox value={config.isResponsiveTicks} fieldName='isResponsiveTicks' label='Use Responsive Ticks' updateField={updateField} />}
-                      {(config.orientation === 'vertical' || !config.isResponsiveTicks) && <TextField value={config.yAxis.tickRotation} type='number' min='0' section='yAxis' fieldName='tickRotation' label='Tick rotation (Degrees)' className='number-narrow' updateField={updateField} />}
+                      {(config.orientation === 'vertical' || !config.isResponsiveTicks) && <TextField value={config.yAxis.tickRotation} type='number' min={0} section='yAxis' fieldName='tickRotation' label='Tick rotation (Degrees)' className='number-narrow' updateField={updateField} />}
                       {config.isResponsiveTicks && config.orientation === 'horizontal' && config.visualizationType !== 'Paired Bar' && (
                         <TextField
                           value={config.xAxis.maxTickRotation}
                           type='number'
-                          min='0'
+                          min={0}
                           section='xAxis'
                           fieldName='maxTickRotation'
                           label='Max Tick Rotation'
@@ -1539,7 +1439,7 @@ const EditorPanel = () => {
                       {config.orientation === 'horizontal' && <TextField value={config.xAxis.labelOffset} section='xAxis' fieldName='labelOffset' label='Label offset' type='number' className='number-narrow' updateField={updateField} />}
                       {visSupportsValueAxisGridLines() && <CheckBox value={config.yAxis.gridLines} section='yAxis' fieldName='gridLines' label='Show Gridlines' updateField={updateField} />}
                       <CheckBox value={config.yAxis.enablePadding} section='yAxis' fieldName='enablePadding' label='Add Padding to Value Axis Scale' updateField={updateField} />
-                      {config.visualizationSubType === 'regular' && <CheckBox value={config.useLogScale} fieldName='useLogScale' label='use logarithmic scale' updateField={updateField} />}
+                      {config.visualizationSubType === 'regular' && config.visualizationType !== 'Forest Plot' && <CheckBox value={config.useLogScale} fieldName='useLogScale' label='use logarithmic scale' updateField={updateField} />}
                     </>
                   )}
                   <span className='divider-heading'>Number Formatting</span>
@@ -1606,9 +1506,9 @@ const EditorPanel = () => {
                       {visSupportsValueAxisLine() && <CheckBox value={config.xAxis.hideAxis} section='xAxis' fieldName='hideAxis' label='Hide Axis' updateField={updateField} />}
                       {visSupportsValueAxisLabels() && <CheckBox value={config.xAxis.hideLabel} section='xAxis' fieldName='hideLabel' label='Hide Label' updateField={updateField} />}
                       {visSupportsValueAxisTicks() && <CheckBox value={config.xAxis.hideTicks} section='xAxis' fieldName='hideTicks' label='Hide Ticks' updateField={updateField} />}
-                      <TextField value={config.xAxis.max} section='xAxis' fieldName='max' label='max value' type='number' placeholder='Auto' updateField={updateField} />
+                      {visSupportsValueAxisMax() && <TextField value={config.xAxis.max} section='xAxis' fieldName='max' label='max value' type='number' placeholder='Auto' updateField={updateField} />}
                       <span style={{ color: 'red', display: 'block' }}>{warningMsg.maxMsg}</span>
-                      <TextField value={config.xAxis.min} section='xAxis' fieldName='min' type='number' label='min value' placeholder='Auto' updateField={updateField} />
+                      {visSupportsValueAxisMin() && <TextField value={config.xAxis.min} section='xAxis' fieldName='min' type='number' label='min value' placeholder='Auto' updateField={updateField} />}
                       <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
                       {config.visualizationType === 'Deviation Bar' && (
                         <>
@@ -1745,7 +1645,7 @@ const EditorPanel = () => {
                         onClick={e => {
                           e.preventDefault()
                           const anchors = [...config.yAxis.anchors]
-                          anchors.push({})
+                          anchors.push({} as Anchor)
                           updateConfig({
                             ...config,
                             yAxis: {
@@ -1871,7 +1771,7 @@ const EditorPanel = () => {
                         onClick={e => {
                           e.preventDefault()
                           const anchors = [...config.xAxis.anchors]
-                          anchors.push({})
+                          anchors.push({} as Anchor)
                           updateConfig({
                             ...config,
                             xAxis: {
@@ -1954,25 +1854,52 @@ const EditorPanel = () => {
                 </AccordionItemPanel>
               </AccordionItem>
             )}
-            <AccordionItem>
-              <AccordionItemHeading>
-                <AccordionItemButton>
-                  {config.visualizationType === 'Pie' ? 'Segments' : 'Date/Category Axis'}
-                  {!config.xAxis.dataKey && <WarningImage width='25' className='warning-icon' />}
-                </AccordionItemButton>
-              </AccordionItemHeading>
-              <AccordionItemPanel>
-                {config.visualizationType !== 'Pie' && (
-                  <>
-                    {config.visualizationType !== 'Forest Plot' && (
-                      <Select value={config.xAxis.type} section='xAxis' fieldName='type' label='Data Type' updateField={updateField} options={config.visualizationType !== 'Scatter Plot' ? ['categorical', 'date'] : ['categorical', 'continuous', 'date']} />
-                    )}
-                    <CheckBox value={config.xAxis.sortDates} section='xAxis' fieldName='sortDates' label='Force Date Scale (Sort Dates)' updateField={updateField} />{' '}
+            {visSupportsDateCategoryAxis() && (
+              <AccordionItem>
+                <AccordionItemHeading>
+                  <AccordionItemButton>
+                    {config.visualizationType === 'Pie' ? 'Segments' : 'Date/Category Axis'}
+                    {!config.xAxis.dataKey && <WarningImage width='25' className='warning-icon' />}
+                  </AccordionItemButton>
+                </AccordionItemHeading>
+                <AccordionItemPanel>
+                  {config.visualizationType !== 'Pie' && (
+                    <>
+                      {config.visualizationType !== 'Forest Plot' && (
+                        <>
+                          <Select value={config.xAxis.type} section='xAxis' fieldName='type' label='Data Type' updateField={updateField} options={config.visualizationType !== 'Scatter Plot' ? ['categorical', 'date'] : ['categorical', 'continuous', 'date']} />
+                          <CheckBox value={config.xAxis.sortDates} section='xAxis' fieldName='sortDates' label='Force Date Scale (Sort Dates)' updateField={updateField} />{' '}
+                        </>
+                      )}
+                      <Select
+                        value={config.xAxis.dataKey || setCategoryAxis() || ''}
+                        section='xAxis'
+                        fieldName='dataKey'
+                        label='Data Key'
+                        initial='Select'
+                        required={true}
+                        updateField={updateField}
+                        options={getColumns(false)}
+                        tooltip={
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>Select the column or row containing the categories or dates for this axis. </p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        }
+                      />
+                    </>
+                  )}
+
+                  {config.visualizationType === 'Pie' && (
                     <Select
-                      value={config.xAxis.dataKey || setCategoryAxis() || ''}
+                      value={config.xAxis.dataKey || ''}
                       section='xAxis'
                       fieldName='dataKey'
-                      label='Data Key'
+                      label='Segment Labels'
                       initial='Select'
                       required={true}
                       updateField={updateField}
@@ -1983,86 +1910,169 @@ const EditorPanel = () => {
                             <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                           </Tooltip.Target>
                           <Tooltip.Content>
-                            <p>Select the column or row containing the categories or dates for this axis. </p>
+                            <p>Select the source row or column that contains the segment labels. Depending on the data structure, it may be listed as "Key."</p>
                           </Tooltip.Content>
                         </Tooltip>
                       }
                     />
-                  </>
-                )}
+                  )}
 
-                {config.visualizationType === 'Pie' && (
-                  <Select
-                    value={config.xAxis.dataKey || ''}
-                    section='xAxis'
-                    fieldName='dataKey'
-                    label='Segment Labels'
-                    initial='Select'
-                    required={true}
-                    updateField={updateField}
-                    options={getColumns(false)}
-                    tooltip={
-                      <Tooltip style={{ textTransform: 'none' }}>
-                        <Tooltip.Target>
-                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                        </Tooltip.Target>
-                        <Tooltip.Content>
-                          <p>Select the source row or column that contains the segment labels. Depending on the data structure, it may be listed as "Key."</p>
-                        </Tooltip.Content>
-                      </Tooltip>
-                    }
-                  />
-                )}
+                  {config.visualizationType !== 'Pie' && (
+                    <>
+                      <TextField value={config.xAxis.label} section='xAxis' fieldName='label' label='Label' updateField={updateField} />
 
-                {config.visualizationType !== 'Pie' && (
-                  <>
-                    <TextField value={config.xAxis.label} section='xAxis' fieldName='label' label='Label' updateField={updateField} />
+                      {config.xAxis.type === 'continuous' && (
+                        <>
+                          <TextField
+                            value={config.dataFormat.bottomPrefix}
+                            section='dataFormat'
+                            fieldName='bottomPrefix'
+                            label='Prefix'
+                            updateField={updateField}
+                            tooltip={
+                              <Tooltip style={{ textTransform: 'none' }}>
+                                <Tooltip.Target>
+                                  <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+                                </Tooltip.Target>
+                                <Tooltip.Content>
+                                  <p>Enter a data suffix (such as "%"), if applicable.</p>
+                                </Tooltip.Content>
+                              </Tooltip>
+                            }
+                          />
+
+                          <TextField
+                            value={config.dataFormat.bottomSuffix}
+                            section='dataFormat'
+                            fieldName='bottomSuffix'
+                            label='Suffix'
+                            updateField={updateField}
+                            tooltip={
+                              <Tooltip style={{ textTransform: 'none' }}>
+                                <Tooltip.Target>
+                                  <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+                                </Tooltip.Target>
+                                <Tooltip.Content>
+                                  <p>Enter a data suffix (such as "%"), if applicable.</p>
+                                </Tooltip.Content>
+                              </Tooltip>
+                            }
+                          />
+
+                          <CheckBox
+                            value={config.dataFormat.bottomAbbreviated}
+                            section='dataFormat'
+                            fieldName='bottomAbbreviated'
+                            label='Abbreviate Axis Values'
+                            updateField={updateField}
+                            tooltip={
+                              <Tooltip style={{ textTransform: 'none' }}>
+                                <Tooltip.Target>
+                                  <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+                                </Tooltip.Target>
+                                <Tooltip.Content>
+                                  <p>{`This option abbreviates very large or very small numbers on the value axis`}</p>
+                                </Tooltip.Content>
+                              </Tooltip>
+                            }
+                          />
+                        </>
+                      )}
 
-                    {config.xAxis.type === 'continuous' && (
-                      <>
-                        <TextField
-                          value={config.dataFormat.bottomPrefix}
-                          section='dataFormat'
-                          fieldName='bottomPrefix'
-                          label='Prefix'
-                          updateField={updateField}
-                          tooltip={
-                            <Tooltip style={{ textTransform: 'none' }}>
-                              <Tooltip.Target>
-                                <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
-                              </Tooltip.Target>
-                              <Tooltip.Content>
-                                {config.visualizationType === 'Pie' && <p>Enter a data suffix to display in the data table and tooltips, if applicable.</p>}
-                                {config.visualizationType !== 'Pie' && <p>Enter a data suffix (such as "%"), if applicable.</p>}
-                              </Tooltip.Content>
-                            </Tooltip>
-                          }
-                        />
+                      {config.xAxis.type === 'date' && (
+                        <>
+                          <p style={{ padding: '1.5em 0 0.5em', fontSize: '.9rem', lineHeight: '1rem' }}>
+                            Format how charts should parse and display your dates using{' '}
+                            <a href='https://github.com/d3/d3-time-format#locale_format' target='_blank' rel='noreferrer'>
+                              these guidelines
+                            </a>
+                            .
+                          </p>
+                          <TextField value={config.xAxis.dateParseFormat} section='xAxis' fieldName='dateParseFormat' placeholder='Ex. %Y-%m-%d' label='Date Parse Format' updateField={updateField} />
+                          <TextField value={config.xAxis.dateDisplayFormat} section='xAxis' fieldName='dateDisplayFormat' placeholder='Ex. %Y-%m-%d' label='Date Display Format' updateField={updateField} />
+                        </>
+                      )}
 
-                        <TextField
-                          value={config.dataFormat.bottomSuffix}
-                          section='dataFormat'
-                          fieldName='bottomSuffix'
-                          label='Suffix'
-                          updateField={updateField}
-                          tooltip={
-                            <Tooltip style={{ textTransform: 'none' }}>
-                              <Tooltip.Target>
-                                <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
-                              </Tooltip.Target>
-                              <Tooltip.Content>
-                                {config.visualizationType === 'Pie' && <p>Enter a data suffix to display in the data table and tooltips, if applicable.</p>}
-                                {config.visualizationType !== 'Pie' && <p>Enter a data suffix (such as "%"), if applicable.</p>}
-                              </Tooltip.Content>
-                            </Tooltip>
-                          }
-                        />
+                      <CheckBox
+                        value={config.exclusions.active}
+                        section='exclusions'
+                        fieldName='active'
+                        label={config.xAxis.type === 'date' ? 'Limit by start and/or end dates' : 'Exclude one or more values'}
+                        tooltip={
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>When this option is checked, you can select source-file values for exclusion from the date/category axis. </p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        }
+                        updateField={updateField}
+                      />
+                      {/* {visHasBrushChart && <CheckBox value={config.brush.active} section='brush' fieldName='active' label='Brush Slider ' updateField={updateField} />} */}
+
+                      {config.exclusions.active && (
+                        <>
+                          {config.xAxis.type === 'categorical' && (
+                            <>
+                              {config.exclusions.keys.length > 0 && (
+                                <>
+                                  <fieldset>
+                                    <legend className='edit-label'>Excluded Keys</legend>
+                                  </fieldset>
+                                  <ExclusionsList />
+                                </>
+                              )}
+
+                              <Select
+                                fieldName='visualizationType'
+                                label='Add Exclusion'
+                                initial='Select'
+                                onChange={e => {
+                                  if (e.target.value !== '' && e.target.value !== 'Select') {
+                                    addNewExclusion(e.target.value)
+                                  }
+                                  e.target.value = ''
+                                }}
+                                options={getDataValues(config.xAxis.dataKey, true)}
+                              />
+                            </>
+                          )}
+
+                          {config.xAxis.type === 'date' && (
+                            <>
+                              <TextField type='date' section='exclusions' fieldName='dateStart' label='Start Date' updateField={updateField} value={config.exclusions.dateStart || ''} />
+                              <TextField type='date' section='exclusions' fieldName='dateEnd' label='End Date' updateField={updateField} value={config.exclusions.dateEnd || ''} />
+                            </>
+                          )}
+                        </>
+                      )}
 
-                        <CheckBox
-                          value={config.dataFormat.bottomAbbreviated}
-                          section='dataFormat'
-                          fieldName='bottomAbbreviated'
-                          label='Abbreviate Axis Values'
+                      {visSupportsDateCategoryNumTicks() && <TextField value={config.xAxis.numTicks} placeholder='Auto' type='number' min={1} section='xAxis' fieldName='numTicks' label='Number of ticks' className='number-narrow' updateField={updateField} />}
+                      {visSupportsDateCategoryHeight() && <TextField value={config.xAxis.size} type='number' min={0} section='xAxis' fieldName='size' label={config.orientation === 'horizontal' ? 'Size (Width)' : 'Size (Height)'} className='number-narrow' updateField={updateField} />}
+
+                      {/* Hiding this for now, not interested in moving the axis lines away from chart comp. right now. */}
+                      {/* <TextField value={config.xAxis.axisPadding} type='number' max={10} min={0} section='xAxis' fieldName='axisPadding' label={'Axis Padding'} className='number-narrow' updateField={updateField} /> */}
+                      {(config.xAxis.type === 'continuous' || config.forestPlot.type === 'Logarithmic') && (
+                        <>
+                          <CheckBox value={config.dataFormat.bottomCommas} section='dataFormat' fieldName='bottomCommas' label='Add commas' updateField={updateField} />
+                          <TextField value={config.dataFormat.bottomRoundTo} type='number' section='dataFormat' fieldName='bottomRoundTo' label='Round to decimal point' className='number-narrow' updateField={updateField} min={0} />
+                        </>
+                      )}
+                      {visSupportsResponsiveTicks() && config.orientation === 'vertical' && config.visualizationType !== 'Paired Bar' && <CheckBox value={config.isResponsiveTicks} fieldName='isResponsiveTicks' label='Use Responsive Ticks' updateField={updateField} />}
+                      {(config.orientation === 'horizontal' || !config.isResponsiveTicks) && visSupportsDateCategoryTickRotation() && (
+                        <TextField value={config.xAxis.tickRotation} type='number' min={0} section='xAxis' fieldName='tickRotation' label='Tick rotation (Degrees)' className='number-narrow' updateField={updateField} />
+                      )}
+                      {config.orientation === 'vertical' && config.isResponsiveTicks && config.visualizationType !== 'Paired Bar' && (
+                        <TextField
+                          value={config.xAxis.maxTickRotation}
+                          type='number'
+                          min={0}
+                          section='xAxis'
+                          fieldName='maxTickRotation'
+                          label='Max Tick Rotation'
+                          className='number-narrow'
                           updateField={updateField}
                           tooltip={
                             <Tooltip style={{ textTransform: 'none' }}>
@@ -2070,108 +2080,75 @@ const EditorPanel = () => {
                                 <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
                               </Tooltip.Target>
                               <Tooltip.Content>
-                                <p>{`This option abbreviates very large or very small numbers on the value axis`}</p>
+                                <p>Degrees ticks will be rotated if values overlap, especially in smaller viewports.</p>
                               </Tooltip.Content>
                             </Tooltip>
                           }
                         />
-                      </>
-                    )}
-
-                    {config.xAxis.type === 'date' && (
-                      <>
-                        <p style={{ padding: '1.5em 0 0.5em', fontSize: '.9rem', lineHeight: '1rem' }}>
-                          Format how charts should parse and display your dates using{' '}
-                          <a href='https://github.com/d3/d3-time-format#locale_format' target='_blank' rel='noreferrer'>
-                            these guidelines
-                          </a>
-                          .
-                        </p>
-                        <TextField value={config.xAxis.dateParseFormat} section='xAxis' fieldName='dateParseFormat' placeholder='Ex. %Y-%m-%d' label='Date Parse Format' updateField={updateField} />
-                        <TextField value={config.xAxis.dateDisplayFormat} section='xAxis' fieldName='dateDisplayFormat' placeholder='Ex. %Y-%m-%d' label='Date Display Format' updateField={updateField} />
-                      </>
-                    )}
-
-                    <CheckBox
-                      value={config.exclusions.active}
-                      section='exclusions'
-                      fieldName='active'
-                      label={config.xAxis.type === 'date' ? 'Limit by start and/or end dates' : 'Exclude one or more values'}
-                      tooltip={
-                        <Tooltip style={{ textTransform: 'none' }}>
-                          <Tooltip.Target>
-                            <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
-                          </Tooltip.Target>
-                          <Tooltip.Content>
-                            <p>When this option is checked, you can select source-file values for exclusion from the date/category axis. </p>
-                          </Tooltip.Content>
-                        </Tooltip>
-                      }
-                      updateField={updateField}
-                    />
-                    {/* {visHasBrushChart && <CheckBox value={config.brush.active} section='brush' fieldName='active' label='Brush Slider ' updateField={updateField} />} */}
-
-                    {config.exclusions.active && (
-                      <>
-                        {config.xAxis.type === 'categorical' && (
-                          <>
-                            {config.exclusions.keys.length > 0 && (
-                              <>
-                                <fieldset>
-                                  <legend className='edit-label'>Excluded Keys</legend>
-                                </fieldset>
-                                <ExclusionsList />
-                              </>
-                            )}
+                      )}
 
-                            <Select
-                              fieldName='visualizationType'
-                              label='Add Exclusion'
-                              initial='Select'
-                              onChange={e => {
-                                if (e.target.value !== '' && e.target.value !== 'Select') {
-                                  addNewExclusion(e.target.value)
-                                }
-                                e.target.value = ''
-                              }}
-                              options={getDataValues(config.xAxis.dataKey, true)}
-                            />
-                          </>
-                        )}
-
-                        {config.xAxis.type === 'date' && (
-                          <>
-                            <TextField type='date' section='exclusions' fieldName='dateStart' label='Start Date' updateField={updateField} value={config.exclusions.dateStart || ''} />
-                            <TextField type='date' section='exclusions' fieldName='dateEnd' label='End Date' updateField={updateField} value={config.exclusions.dateEnd || ''} />
-                          </>
-                        )}
-                      </>
-                    )}
+                      {config.orientation === 'horizontal' ? (
+                        <>
+                          {visSupportsDateCategoryAxisLine() && <CheckBox value={config.yAxis.hideAxis} section='yAxis' fieldName='hideAxis' label='Hide Axis' updateField={updateField} />}
+                          {visSupportsDateCategoryAxisLabel() && <CheckBox value={config.yAxis.hideLabel} section='yAxis' fieldName='hideLabel' label='Hide Label' updateField={updateField} />}
+                        </>
+                      ) : (
+                        <>
+                          {visSupportsDateCategoryAxisLine() && <CheckBox value={config.xAxis.hideAxis} section='xAxis' fieldName='hideAxis' label='Hide Axis' updateField={updateField} />}
+                          {visSupportsDateCategoryAxisLabel() && <CheckBox value={config.xAxis.hideLabel} section='xAxis' fieldName='hideLabel' label='Hide Label' updateField={updateField} />}
+                          {visSupportsDateCategoryAxisTicks() && <CheckBox value={config.xAxis.hideTicks} section='xAxis' fieldName='hideTicks' label='Hide Ticks' updateField={updateField} />}
+                        </>
+                      )}
 
-                    {visSupportsDateCategoryNumTicks() && <TextField value={config.xAxis.numTicks} placeholder='Auto' type='number' min='1' section='xAxis' fieldName='numTicks' label='Number of ticks' className='number-narrow' updateField={updateField} />}
-                    {visSupportsDateCategoryHeight() && <TextField value={config.xAxis.size} type='number' min='0' section='xAxis' fieldName='size' label={config.orientation === 'horizontal' ? 'Size (Width)' : 'Size (Height)'} className='number-narrow' updateField={updateField} />}
+                      {config.series?.length === 1 && config.visualizationType === 'Bar' && (
+                        <>
+                          {/* HIGHLIGHTED BARS */}
+                          <label htmlFor='barHighlight'>Bar Highlighting</label>
+                          {config.series.length === 1 &&
+                            highlightedBarValues.map((highlightedBarValue, i) => (
+                              <fieldset>
+                                <div className='edit-block' key={`highlighted-bar-${i}`}>
+                                  <button className='remove-column' onClick={e => handleRemoveHighlightedBar(e, i)}>
+                                    Remove
+                                  </button>
+                                  <p>Highlighted Bar {i + 1}</p>
+                                  <label>
+                                    <span className='edit-label column-heading'>Value</span>
+                                    <select value={config.highlightedBarValues[i].value} onChange={e => handleUpdateHighlightedBar(e, i)}>
+                                      <option value=''>- Select Value -</option>
+                                      {highlightedSeriesValues && [...new Set(highlightedSeriesValues)].sort().map(option => <option key={`special-class-value-option-${i}-${option}`}>{option}</option>)}
+                                    </select>
+                                  </label>
+                                  <label>
+                                    <span className='edit-label column-heading'>Color</span>
+                                    <input type='text' value={config.highlightedBarValues[i].color ? config.highlightedBarValues[i].color : ''} onChange={e => handleUpdateHighlightedBarColor(e, i)} />
+                                  </label>
+                                  <label>
+                                    <span className='edit-label column-heading'>Border Width</span>
+                                    <input max='5' min='0' type='number' value={config.highlightedBarValues[i].borderWidth ? config.highlightedBarValues[i].borderWidth : ''} onChange={e => handleUpdateHighlightedBorderWidth(e, i)} />
+                                  </label>
+                                  <label>
+                                    <span className='edit-label column-heading'>Legend Label</span>
+                                    <input type='text' value={config.highlightedBarValues[i].legendLabel ? config.highlightedBarValues[i].legendLabel : ''} onChange={e => handleHighlightedBarLegendLabel(e, i)} />
+                                  </label>
+                                </div>
+                              </fieldset>
+                            ))}
+                          <button className='btn full-width' onClick={e => handleAddNewHighlightedBar(e)}>
+                            Add Highlighted Bar
+                          </button>
+                        </>
+                      )}
+                    </>
+                  )}
 
-                    {/* Hiding this for now, not interested in moving the axis lines away from chart comp. right now. */}
-                    {/* <TextField value={config.xAxis.axisPadding} type='number' max={10} min={0} section='xAxis' fieldName='axisPadding' label={'Axis Padding'} className='number-narrow' updateField={updateField} /> */}
-                    {(config.xAxis.type === 'continuous' || config.forestPlot.type === 'Logarithmic') && (
-                      <>
-                        <CheckBox value={config.dataFormat.bottomCommas} section='dataFormat' fieldName='bottomCommas' label='Add commas' updateField={updateField} />
-                        <TextField value={config.dataFormat.bottomRoundTo} type='number' section='dataFormat' fieldName='bottomRoundTo' label='Round to decimal point' className='number-narrow' updateField={updateField} min={0} />
-                      </>
-                    )}
-                    {visSupportsResponsiveTicks() && config.orientation === 'vertical' && config.visualizationType !== 'Paired Bar' && <CheckBox value={config.isResponsiveTicks} fieldName='isResponsiveTicks' label='Use Responsive Ticks' updateField={updateField} />}
-                    {(config.orientation === 'horizontal' || !config.isResponsiveTicks) && visSupportsDateCategoryTickRotation() && (
-                      <TextField value={config.xAxis.tickRotation} type='number' min='0' section='xAxis' fieldName='tickRotation' label='Tick rotation (Degrees)' className='number-narrow' updateField={updateField} />
-                    )}
-                    {config.orientation === 'vertical' && config.isResponsiveTicks && config.visualizationType !== 'Paired Bar' && (
-                      <TextField
-                        value={config.xAxis.maxTickRotation}
-                        type='number'
-                        min='0'
-                        section='xAxis'
-                        fieldName='maxTickRotation'
-                        label='Max Tick Rotation'
-                        className='number-narrow'
+                  {config.visualizationType === 'Pie' && (
+                    <>
+                      <CheckBox
+                        value={config.exclusions.active}
+                        section='exclusions'
+                        fieldName='active'
+                        label={'Exclude one or more values'}
                         updateField={updateField}
                         tooltip={
                           <Tooltip style={{ textTransform: 'none' }}>
@@ -2179,379 +2156,295 @@ const EditorPanel = () => {
                               <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
                             </Tooltip.Target>
                             <Tooltip.Content>
-                              <p>Degrees ticks will be rotated if values overlap, especially in smaller viewports.</p>
+                              <p>When this option is checked, you can select values for exclusion from the pie segments.</p>
                             </Tooltip.Content>
                           </Tooltip>
                         }
                       />
-                    )}
-
-                    {config.orientation === 'horizontal' ? (
-                      <>
-                        {visSupportsDateCategoryAxisLine() && <CheckBox value={config.yAxis.hideAxis} section='yAxis' fieldName='hideAxis' label='Hide Axis' updateField={updateField} />}
-                        {visSupportsDateCategoryAxisLabel() && <CheckBox value={config.yAxis.hideLabel} section='yAxis' fieldName='hideLabel' label='Hide Label' updateField={updateField} />}
-                      </>
-                    ) : (
-                      <>
-                        {visSupportsDateCategoryAxisLine() && <CheckBox value={config.xAxis.hideAxis} section='xAxis' fieldName='hideAxis' label='Hide Axis' updateField={updateField} />}
-                        {visSupportsDateCategoryAxisLabel() && <CheckBox value={config.xAxis.hideLabel} section='xAxis' fieldName='hideLabel' label='Hide Label' updateField={updateField} />}
-                        {visSupportsDateCategoryAxisTicks() && <CheckBox value={config.xAxis.hideTicks} section='xAxis' fieldName='hideTicks' label='Hide Ticks' updateField={updateField} />}
-                      </>
-                    )}
-
-                    {config.series?.length === 1 && config.visualizationType === 'Bar' && (
-                      <>
-                        {/* HIGHLIGHTED BARS */}
-                        <label htmlFor='barHighlight'>Bar Highlighting</label>
-                        {config.series.length === 1 &&
-                          highlightedBarValues.map((highlightedBarValue, i) => (
-                            <fieldset>
-                              <div className='edit-block' key={`highlighted-bar-${i}`}>
-                                <button className='remove-column' onClick={e => handleRemoveHighlightedBar(e, i)}>
-                                  Remove
-                                </button>
-                                <p>Highlighted Bar {i + 1}</p>
-                                <label>
-                                  <span className='edit-label column-heading'>Value</span>
-                                  <select value={config.highlightedBarValues[i].value} onChange={e => handleUpdateHighlightedBar(e, i)}>
-                                    <option value=''>- Select Value -</option>
-                                    {highlightedSeriesValues && [...new Set(highlightedSeriesValues)].sort().map(option => <option key={`special-class-value-option-${i}-${option}`}>{option}</option>)}
-                                  </select>
-                                </label>
-                                <label>
-                                  <span className='edit-label column-heading'>Color</span>
-                                  <input type='text' value={config.highlightedBarValues[i].color ? config.highlightedBarValues[i].color : ''} onChange={e => handleUpdateHighlightedBarColor(e, i)} />
-                                </label>
-                                <label>
-                                  <span className='edit-label column-heading'>Border Width</span>
-                                  <input max='5' min='0' type='number' value={config.highlightedBarValues[i].borderWidth ? config.highlightedBarValues[i].borderWidth : ''} onChange={e => handleUpdateHighlightedBorderWidth(e, i)} />
-                                </label>
-                                <label>
-                                  <span className='edit-label column-heading'>Legend Label</span>
-                                  <input type='text' value={config.highlightedBarValues[i].legendLabel ? config.highlightedBarValues[i].legendLabel : ''} onChange={e => handleHighlightedBarLegendLabel(e, i)} />
-                                </label>
-                              </div>
-                            </fieldset>
-                          ))}
-                        <button className='btn full-width' onClick={e => handleAddNewHighlightedBar(e)}>
-                          Add Highlighted Bar
-                        </button>
-                      </>
-                    )}
-                  </>
-                )}
+                      {config.exclusions.active && (
+                        <>
+                          {config.exclusions.keys.length > 0 && (
+                            <>
+                              <fieldset>
+                                <legend className='edit-label'>Excluded Keys</legend>
+                              </fieldset>
+                              <ExclusionsList />
+                            </>
+                          )}
+
+                          <Select
+                            fieldName='visualizationType'
+                            label='Add Exclusion'
+                            initial='Select'
+                            onChange={e => {
+                              if (e.target.value !== '' && e.target.value !== 'Select') {
+                                addNewExclusion(e.target.value)
+                              }
+                              e.target.value = ''
+                            }}
+                            options={getDataValues(config.xAxis.dataKey, true)}
+                          />
+                        </>
+                      )}
+                    </>
+                  )}
 
-                {config.visualizationType === 'Pie' && (
-                  <>
-                    <CheckBox
-                      value={config.exclusions.active}
-                      section='exclusions'
-                      fieldName='active'
-                      label={'Exclude one or more values'}
-                      updateField={updateField}
-                      tooltip={
-                        <Tooltip style={{ textTransform: 'none' }}>
-                          <Tooltip.Target>
-                            <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
-                          </Tooltip.Target>
-                          <Tooltip.Content>
-                            <p>When this option is checked, you can select values for exclusion from the pie segments.</p>
-                          </Tooltip.Content>
-                        </Tooltip>
-                      }
-                    />
-                    {config.exclusions.active && (
-                      <>
-                        {config.exclusions.keys.length > 0 && (
-                          <>
-                            <fieldset>
-                              <legend className='edit-label'>Excluded Keys</legend>
-                            </fieldset>
-                            <ExclusionsList />
-                          </>
-                        )}
-
-                        <Select
-                          fieldName='visualizationType'
-                          label='Add Exclusion'
-                          initial='Select'
-                          onChange={e => {
-                            if (e.target.value !== '' && e.target.value !== 'Select') {
-                              addNewExclusion(e.target.value)
-                            }
-                            e.target.value = ''
-                          }}
-                          options={getDataValues(config.xAxis.dataKey, true)}
-                        />
-                      </>
-                    )}
-                  </>
-                )}
+                  {/* anchors */}
+                  {visHasAnchors() && config.orientation !== 'horizontal' && (
+                    <div className='edit-block'>
+                      <span className='edit-label column-heading'>Anchors</span>
+                      <Accordion allowZeroExpanded>
+                        {config.xAxis?.anchors?.map((anchor, index) => (
+                          <AccordionItem className='series-item series-item--chart' key={`xaxis-anchors-2-${index}`}>
+                            <AccordionItemHeading className='series-item__title'>
+                              <>
+                                <AccordionItemButton className={'accordion__button accordion__button'}>
+                                  Anchor {index + 1}
+                                  <button
+                                    className='series-list__remove'
+                                    onClick={e => {
+                                      e.preventDefault()
+                                      const copiedAnchorGroups = [...config.xAxis.anchors]
+                                      copiedAnchorGroups.splice(index, 1)
+                                      updateConfig({
+                                        ...config,
+                                        xAxis: {
+                                          ...config.xAxis,
+                                          anchors: copiedAnchorGroups
+                                        }
+                                      })
+                                    }}
+                                  >
+                                    Remove
+                                  </button>
+                                </AccordionItemButton>
+                              </>
+                            </AccordionItemHeading>
+                            <AccordionItemPanel>
+                              <label>
+                                <span>Anchor Value</span>
+                                <Tooltip style={{ textTransform: 'none' }}>
+                                  <Tooltip.Target>
+                                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                  </Tooltip.Target>
+                                  <Tooltip.Content>
+                                    <p>Enter the value as its shown in the data column</p>
+                                  </Tooltip.Content>
+                                </Tooltip>
+                                <input
+                                  type='text'
+                                  value={config.xAxis.anchors[index].value ? config.xAxis.anchors[index].value : ''}
+                                  onChange={e => {
+                                    e.preventDefault()
+                                    const copiedAnchors = [...config.xAxis.anchors]
+                                    copiedAnchors[index].value = e.target.value
+                                    updateConfig({
+                                      ...config,
+                                      xAxis: {
+                                        ...config.xAxis,
+                                        anchors: copiedAnchors
+                                      }
+                                    })
+                                  }}
+                                />
+                              </label>
 
-                {/* anchors */}
-                {visHasAnchors() && config.orientation !== 'horizontal' && (
-                  <div className='edit-block'>
-                    <span className='edit-label column-heading'>Anchors</span>
-                    <Accordion allowZeroExpanded>
-                      {config.xAxis?.anchors?.map((anchor, index) => (
-                        <AccordionItem className='series-item series-item--chart' key={`xaxis-anchors-2-${index}`}>
-                          <AccordionItemHeading className='series-item__title'>
-                            <>
-                              <AccordionItemButton className={'accordion__button accordion__button'}>
-                                Anchor {index + 1}
-                                <button
-                                  className='series-list__remove'
-                                  onClick={e => {
+                              <label>
+                                <span>Anchor Color</span>
+                                <input
+                                  type='text'
+                                  value={config.xAxis.anchors[index].color ? config.xAxis.anchors[index].color : ''}
+                                  onChange={e => {
                                     e.preventDefault()
-                                    const copiedAnchorGroups = [...config.xAxis.anchors]
-                                    copiedAnchorGroups.splice(index, 1)
+                                    const copiedAnchors = [...config.xAxis.anchors]
+                                    copiedAnchors[index].color = e.target.value
+                                    updateConfig({
+                                      ...config,
+                                      xAxis: {
+                                        ...config.xAxis,
+                                        anchors: copiedAnchors
+                                      }
+                                    })
+                                  }}
+                                />
+                              </label>
+
+                              <label>
+                                Anchor Line Style
+                                <select
+                                  value={config.xAxis.anchors[index].lineStyle || ''}
+                                  onChange={e => {
+                                    const copiedAnchors = [...config.xAxis.anchors]
+                                    copiedAnchors[index].lineStyle = e.target.value
                                     updateConfig({
                                       ...config,
                                       xAxis: {
                                         ...config.xAxis,
-                                        anchors: copiedAnchorGroups
+                                        anchors: copiedAnchors
                                       }
                                     })
                                   }}
                                 >
-                                  Remove
-                                </button>
-                              </AccordionItemButton>
-                            </>
-                          </AccordionItemHeading>
-                          <AccordionItemPanel>
-                            <label>
-                              <span>Anchor Value</span>
-                              <Tooltip style={{ textTransform: 'none' }}>
-                                <Tooltip.Target>
-                                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                                </Tooltip.Target>
-                                <Tooltip.Content>
-                                  <p>Enter the value as its shown in the data column</p>
-                                </Tooltip.Content>
-                              </Tooltip>
-                              <input
-                                type='text'
-                                value={config.xAxis.anchors[index].value ? config.xAxis.anchors[index].value : ''}
-                                onChange={e => {
-                                  e.preventDefault()
-                                  const copiedAnchors = [...config.xAxis.anchors]
-                                  copiedAnchors[index].value = e.target.value
-                                  updateConfig({
-                                    ...config,
-                                    xAxis: {
-                                      ...config.xAxis,
-                                      anchors: copiedAnchors
-                                    }
-                                  })
-                                }}
-                              />
-                            </label>
+                                  <option>Select</option>
+                                  {lineOptions.map(line => (
+                                    <option key={line.key}>{line.value}</option>
+                                  ))}
+                                </select>
+                              </label>
+                            </AccordionItemPanel>
+                          </AccordionItem>
+                        ))}
+                      </Accordion>
 
-                            <label>
-                              <span>Anchor Color</span>
-                              <input
-                                type='text'
-                                value={config.xAxis.anchors[index].color ? config.xAxis.anchors[index].color : ''}
-                                onChange={e => {
-                                  e.preventDefault()
-                                  const copiedAnchors = [...config.xAxis.anchors]
-                                  copiedAnchors[index].color = e.target.value
-                                  updateConfig({
-                                    ...config,
-                                    xAxis: {
-                                      ...config.xAxis,
-                                      anchors: copiedAnchors
-                                    }
-                                  })
-                                }}
-                              />
-                            </label>
+                      <button
+                        className='btn full-width'
+                        onClick={e => {
+                          e.preventDefault()
+                          const anchors = [...config.xAxis.anchors]
+                          anchors.push({} as Anchor)
+                          updateConfig({
+                            ...config,
+                            xAxis: {
+                              ...config.xAxis,
+                              anchors
+                            }
+                          })
+                        }}
+                      >
+                        Add Anchor
+                      </button>
+                    </div>
+                  )}
 
-                            <label>
-                              Anchor Line Style
-                              <select
-                                value={config.xAxis.anchors[index].lineStyle || ''}
-                                onChange={e => {
-                                  const copiedAnchors = [...config.xAxis.anchors]
-                                  copiedAnchors[index].lineStyle = e.target.value
-                                  updateConfig({
-                                    ...config,
-                                    xAxis: {
-                                      ...config.xAxis,
-                                      anchors: copiedAnchors
-                                    }
-                                  })
-                                }}
-                              >
-                                <option>Select</option>
-                                {lineOptions.map(line => (
-                                  <option key={line.key}>{line.value}</option>
-                                ))}
-                              </select>
-                            </label>
-                          </AccordionItemPanel>
-                        </AccordionItem>
-                      ))}
-                    </Accordion>
-
-                    <button
-                      className='btn full-width'
-                      onClick={e => {
-                        e.preventDefault()
-                        const anchors = [...config.xAxis.anchors]
-                        anchors.push({})
-                        updateConfig({
-                          ...config,
-                          xAxis: {
-                            ...config.xAxis,
-                            anchors
-                          }
-                        })
-                      }}
-                    >
-                      Add Anchor
-                    </button>
-                  </div>
-                )}
+                  {visHasAnchors() && config.orientation === 'horizontal' && (
+                    <div className='edit-block'>
+                      <span className='edit-label column-heading'>Anchors</span>
+                      <Accordion allowZeroExpanded>
+                        {config.yAxis?.anchors?.map((anchor, index) => (
+                          <AccordionItem className='series-item series-item--chart' key={`accordion-yaxis-anchors-${index}`}>
+                            <AccordionItemHeading className='series-item__title'>
+                              <>
+                                <AccordionItemButton className={'accordion__button accordion__button'}>
+                                  Anchor {index + 1}
+                                  <button
+                                    className='series-list__remove'
+                                    onClick={e => {
+                                      e.preventDefault()
+                                      const copiedAnchorGroups = [...config.yAxis.anchors]
+                                      copiedAnchorGroups.splice(index, 1)
+                                      updateConfig({
+                                        ...config,
+                                        yAxis: {
+                                          ...config.yAxis,
+                                          anchors: copiedAnchorGroups
+                                        }
+                                      })
+                                    }}
+                                  >
+                                    Remove
+                                  </button>
+                                </AccordionItemButton>
+                              </>
+                            </AccordionItemHeading>
+                            <AccordionItemPanel>
+                              <label>
+                                <span>Anchor Value</span>
+                                <Tooltip style={{ textTransform: 'none' }}>
+                                  <Tooltip.Target>
+                                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                  </Tooltip.Target>
+                                  <Tooltip.Content>
+                                    <p>Enter the value as its shown in the data column</p>
+                                  </Tooltip.Content>
+                                </Tooltip>
+                                <input
+                                  type='text'
+                                  value={config.yAxis.anchors[index].value ? config.yAxis.anchors[index].value : ''}
+                                  onChange={e => {
+                                    e.preventDefault()
+                                    const copiedAnchors = [...config.yAxis.anchors]
+                                    copiedAnchors[index].value = e.target.value
+                                    updateConfig({
+                                      ...config,
+                                      yAxis: {
+                                        ...config.yAxis,
+                                        anchors: copiedAnchors
+                                      }
+                                    })
+                                  }}
+                                />
+                              </label>
 
-                {visHasAnchors() && config.orientation === 'horizontal' && (
-                  <div className='edit-block'>
-                    <span className='edit-label column-heading'>Anchors</span>
-                    <Accordion allowZeroExpanded>
-                      {config.yAxis?.anchors?.map((anchor, index) => (
-                        <AccordionItem className='series-item series-item--chart' key={`accordion-yaxis-anchors-${index}`}>
-                          <AccordionItemHeading className='series-item__title'>
-                            <>
-                              <AccordionItemButton className={'accordion__button accordion__button'}>
-                                Anchor {index + 1}
-                                <button
-                                  className='series-list__remove'
-                                  onClick={e => {
+                              <label>
+                                <span>Anchor Color</span>
+                                <input
+                                  type='text'
+                                  value={config.yAxis.anchors[index].color ? config.yAxis.anchors[index].color : ''}
+                                  onChange={e => {
                                     e.preventDefault()
-                                    const copiedAnchorGroups = [...config.yAxis.anchors]
-                                    copiedAnchorGroups.splice(index, 1)
+                                    const copiedAnchors = [...config.yAxis.anchors]
+                                    copiedAnchors[index].color = e.target.value
                                     updateConfig({
                                       ...config,
                                       yAxis: {
                                         ...config.yAxis,
-                                        anchors: copiedAnchorGroups
+                                        anchors: copiedAnchors
                                       }
                                     })
                                   }}
-                                >
-                                  Remove
-                                </button>
-                              </AccordionItemButton>
-                            </>
-                          </AccordionItemHeading>
-                          <AccordionItemPanel>
-                            <label>
-                              <span>Anchor Value</span>
-                              <Tooltip style={{ textTransform: 'none' }}>
-                                <Tooltip.Target>
-                                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                                </Tooltip.Target>
-                                <Tooltip.Content>
-                                  <p>Enter the value as its shown in the data column</p>
-                                </Tooltip.Content>
-                              </Tooltip>
-                              <input
-                                type='text'
-                                value={config.yAxis.anchors[index].value ? config.yAxis.anchors[index].value : ''}
-                                onChange={e => {
-                                  e.preventDefault()
-                                  const copiedAnchors = [...config.yAxis.anchors]
-                                  copiedAnchors[index].value = e.target.value
-                                  updateConfig({
-                                    ...config,
-                                    yAxis: {
-                                      ...config.yAxis,
-                                      anchors: copiedAnchors
-                                    }
-                                  })
-                                }}
-                              />
-                            </label>
+                                />
+                              </label>
 
-                            <label>
-                              <span>Anchor Color</span>
-                              <input
-                                type='text'
-                                value={config.yAxis.anchors[index].color ? config.yAxis.anchors[index].color : ''}
-                                onChange={e => {
-                                  e.preventDefault()
-                                  const copiedAnchors = [...config.yAxis.anchors]
-                                  copiedAnchors[index].color = e.target.value
-                                  updateConfig({
-                                    ...config,
-                                    yAxis: {
-                                      ...config.yAxis,
-                                      anchors: copiedAnchors
-                                    }
-                                  })
-                                }}
-                              />
-                            </label>
+                              <label>
+                                Anchor Line Style
+                                <select
+                                  value={config.yAxis.anchors[index].lineStyle || ''}
+                                  onChange={e => {
+                                    const copiedAnchors = [...config.yAxis.anchors]
+                                    copiedAnchors[index].lineStyle = e.target.value
+                                    updateConfig({
+                                      ...config,
+                                      yAxis: {
+                                        ...config.yAxis,
+                                        anchors: copiedAnchors
+                                      }
+                                    })
+                                  }}
+                                >
+                                  <option>Select</option>
+                                  {lineOptions.map(line => (
+                                    <option key={line.key}>{line.value}</option>
+                                  ))}
+                                </select>
+                              </label>
+                            </AccordionItemPanel>
+                          </AccordionItem>
+                        ))}
+                      </Accordion>
 
-                            <label>
-                              Anchor Line Style
-                              <select
-                                value={config.yAxis.anchors[index].lineStyle || ''}
-                                onChange={e => {
-                                  const copiedAnchors = [...config.yAxis.anchors]
-                                  copiedAnchors[index].lineStyle = e.target.value
-                                  updateConfig({
-                                    ...config,
-                                    yAxis: {
-                                      ...config.yAxis,
-                                      anchors: copiedAnchors
-                                    }
-                                  })
-                                }}
-                              >
-                                <option>Select</option>
-                                {lineOptions.map(line => (
-                                  <option key={line.key}>{line.value}</option>
-                                ))}
-                              </select>
-                            </label>
-                          </AccordionItemPanel>
-                        </AccordionItem>
-                      ))}
-                    </Accordion>
-
-                    <button
-                      className='btn full-width'
-                      onClick={e => {
-                        e.preventDefault()
-                        const anchors = [...config.yAxis.anchors]
-                        anchors.push({})
-                        updateConfig({
-                          ...config,
-                          yAxis: {
-                            ...config.yAxis,
-                            anchors
-                          }
-                        })
-                      }}
-                    >
-                      Add Anchor
-                    </button>
-                  </div>
-                )}
-              </AccordionItemPanel>
-            </AccordionItem>
-            {visSupportsRegions() && (
-              <AccordionItem>
-                <AccordionItemHeading>
-                  <AccordionItemButton>Regions</AccordionItemButton>
-                </AccordionItemHeading>
-                <AccordionItemPanel>
-                  <Regions config={config} updateConfig={updateConfig} />
+                      <button
+                        className='btn full-width'
+                        onClick={e => {
+                          e.preventDefault()
+                          const anchors = [...config.yAxis.anchors]
+                          anchors.push({} as Anchor)
+                          updateConfig({
+                            ...config,
+                            yAxis: {
+                              ...config.yAxis,
+                              anchors
+                            }
+                          })
+                        }}
+                      >
+                        Add Anchor
+                      </button>
+                    </div>
+                  )}
                 </AccordionItemPanel>
               </AccordionItem>
-            )}{' '}
+            )}
+            <Panels.Regions name='Regions' />
             {/* Columns */}
             {config.visualizationType !== 'Box Plot' && (
               <AccordionItem>
@@ -2588,12 +2481,28 @@ const EditorPanel = () => {
                           <label>
                             <span className='edit-label column-heading'>Column</span>
                             <select
-                              value={config.columns[val] ? config.columns[val].name : columnsOptions[0]}
+                              value={config.columns[val] ? config.columns[val].name : getColumns()[0]}
                               onChange={event => {
                                 editColumn(val, 'name', event.target.value)
                               }}
                             >
-                              {columnsOptions}
+                              {getColumns().map(option => (
+                                <option>{option}</option>
+                              ))}
+                            </select>
+                          </label>
+                          <label>
+                            <span className='edit-label column-heading'>Associate to Series</span>
+                            <select
+                              value={config.columns[val] ? config.columns[val].series : ''}
+                              onChange={event => {
+                                editColumn(val, 'series', event.target.value)
+                              }}
+                            >
+                              <option value=''>Select series</option>
+                              {config.series.map(series => (
+                                <option>{series.dataKey}</option>
+                              ))}
                             </select>
                           </label>
                           <TextField value={config.columns[val].label} section='columns' subsection={val} fieldName='label' label='Label' updateField={updateField} />
@@ -2658,18 +2567,6 @@ const EditorPanel = () => {
                                     <span className='edit-label'>Show in Forest Plot</span>
                                   </label>
                                 </li>
-                                <li>
-                                  <label className='checkbox'>
-                                    <input
-                                      type='checkbox'
-                                      checked={config.columns[val].tooltips || false}
-                                      onChange={event => {
-                                        updateSeriesTooltip(val, event.target.checked)
-                                      }}
-                                    />
-                                    <span className='edit-label'>Show in tooltip</span>
-                                  </label>
-                                </li>
                                 <li>
                                   <label className='checkbox'>
                                     <input
@@ -2742,20 +2639,18 @@ const EditorPanel = () => {
                             >
                               Remove
                             </button>
-                            <label>
-                              <span className='edit-label column-heading'>Category</span>
-                              <TextField
-                                value={val}
-                                section='legend'
-                                subsection={null}
-                                fieldName='additionalCategories'
-                                updateField={(section, subsection, fieldName, value) => {
-                                  const updatedAdditionaCategories = [...config.legend.additionalCategories]
-                                  updatedAdditionaCategories[i] = value
-                                  updateField(section, subsection, fieldName, updatedAdditionaCategories)
-                                }}
-                              />
-                            </label>
+                            <TextField
+                              value={val}
+                              label='Category'
+                              section='legend'
+                              subsection={null}
+                              fieldName='additionalCategories'
+                              updateField={(section, subsection, fieldName, value) => {
+                                const updatedAdditionaCategories = [...config.legend.additionalCategories]
+                                updatedAdditionaCategories[i] = value
+                                updateField(section, subsection, fieldName, updatedAdditionaCategories)
+                              }}
+                            />
                           </fieldset>
                         ))}
                       <button
@@ -2890,7 +2785,7 @@ const EditorPanel = () => {
                                 }}
                               >
                                 <option value=''>- Select Option -</option>
-                                {getFilters(true).map((dataKey, index) => (
+                                {getFilters().map((dataKey, index) => (
                                   <option value={dataKey} key={index}>
                                     {dataKey}
                                   </option>
@@ -2918,8 +2813,12 @@ const EditorPanel = () => {
                                   updateFilterProp('filterStyle', index, e.target.value)
                                 }}
                               >
-                                {filterStyleOptions.map(item => {
-                                  return <option value={item}>{item}</option>
+                                {filterStyleOptions.map((item, index) => {
+                                  return (
+                                    <option key={`filter-style-${index}`} value={item}>
+                                      {item}
+                                    </option>
+                                  )
                                 })}
                               </select>
                             </label>
@@ -2956,7 +2855,7 @@ const EditorPanel = () => {
                                             <Draggable key={value} draggableId={`draggableFilter-${value}`} index={index}>
                                               {(provided, snapshot) => (
                                                 <li>
-                                                  <div className={snapshot.isDragging ? 'currently-dragging' : ''} style={getItemStyle(snapshot.isDragging, provided.draggableProps.style, sortableItemStyles)} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+                                                  <div className={snapshot.isDragging ? 'currently-dragging' : ''} style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                                                     {value}
                                                   </div>
                                                 </li>
@@ -3186,9 +3085,9 @@ const EditorPanel = () => {
                     />
                   </>
                 )}
-                {visSupportsBarThickness() && config.orientation === 'horizontal' && !config.isLollipopChart && config.yAxis.labelPlacement !== 'On Bar' && <TextField type='number' value={config.barHeight || '25'} fieldName='barHeight' label=' Bar Thickness' updateField={updateField} min='15' />}
+                {visSupportsBarThickness() && config.orientation === 'horizontal' && !config.isLollipopChart && config.yAxis.labelPlacement !== 'On Bar' && <TextField type='number' value={config.barHeight || '25'} fieldName='barHeight' label=' Bar Thickness' updateField={updateField} min={15} />}
                 {((config.visualizationType === 'Bar' && config.orientation !== 'horizontal') || config.visualizationType === 'Combo') && <TextField value={config.barThickness} type='number' fieldName='barThickness' label='Bar Thickness' updateField={updateField} />}
-                {visSupportsBarSpace() && <TextField type='number' value={config.barSpace || '15'} fieldName='barSpace' label='Bar Space' updateField={updateField} min='0' />}
+                {visSupportsBarSpace() && <TextField type='number' value={config.barSpace || '15'} fieldName='barSpace' label='Bar Space' updateField={updateField} min={0} />}
                 {(config.visualizationType === 'Bar' || config.visualizationType === 'Line' || config.visualizationType === 'Combo') && <CheckBox value={config.topAxis.hasLine} section='topAxis' fieldName='hasLine' label='Add Top Axis Line' updateField={updateField} />}
 
                 {config.visualizationType === 'Spark Line' && (
@@ -3257,94 +3156,11 @@ const EditorPanel = () => {
                   <AccordionItemButton>Data Table</AccordionItemButton>
                 </AccordionItemHeading>
                 <AccordionItemPanel>
-                  <TextField
-                    value={config.table.label}
-                    updateField={updateField}
-                    section='table'
-                    fieldName='label'
-                    id='tableLabel'
-                    label='Data Table Title'
-                    placeholder='Data Table'
-                    tooltip={
-                      <Tooltip style={{ textTransform: 'none' }}>
-                        <Tooltip.Target>
-                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                        </Tooltip.Target>
-                        <Tooltip.Content>
-                          <p>Label is required for Data Table for 508 Compliance</p>
-                        </Tooltip.Content>
-                      </Tooltip>
-                    }
-                  />
-                  <CheckBox
-                    value={config.table.show}
-                    section='table'
-                    fieldName='show'
-                    label='Show Data Table'
-                    updateField={updateField}
-                    className='column-heading'
-                    tooltip={
-                      <Tooltip style={{ textTransform: 'none' }}>
-                        <Tooltip.Target>
-                          <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
-                        </Tooltip.Target>
-                        <Tooltip.Content>
-                          <p>Hiding the data table may affect accessibility. An alternate form of accessing visualization data is a 508 requirement.</p>
-                        </Tooltip.Content>
-                      </Tooltip>
-                    }
-                  />
-                  {config.visualizationType !== 'Box Plot' && (
-                    <CheckBox
-                      value={config.table.showVertical}
-                      section='table'
-                      fieldName='showVertical'
-                      label='Show Vertical Data'
-                      updateField={updateField}
-                      className='column-heading'
-                      tooltip={
-                        <Tooltip style={{ textTransform: 'none' }}>
-                          <Tooltip.Target>
-                            <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
-                          </Tooltip.Target>
-                          <Tooltip.Content>
-                            <p>This will draw the data table with vertical data instead of horizontal.</p>
-                          </Tooltip.Content>
-                        </Tooltip>
-                      }
-                    />
-                  )}
-                  <TextField value={config.table.indexLabel} section='table' fieldName='indexLabel' label='Index Column Header' updateField={updateField} />
-                  <TextField
-                    value={config.table.caption}
-                    updateField={updateField}
-                    section='table'
-                    type='textarea'
-                    fieldName='caption'
-                    label='Screen Reader Description'
-                    placeholder=' Data table'
-                    tooltip={
-                      <Tooltip style={{ textTransform: 'none' }}>
-                        <Tooltip.Target>
-                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                        </Tooltip.Target>
-                        <Tooltip.Content>
-                          <p>Enter a description of the data table to be read by screen readers.</p>
-                        </Tooltip.Content>
-                      </Tooltip>
-                    }
-                  />
-                  <CheckBox value={config.table.limitHeight} section='table' fieldName='limitHeight' label='Limit Table Height' updateField={updateField} />
-                  {config.table.limitHeight && <TextField value={config.table.height} section='table' fieldName='height' label='Data Table Height' type='number' min='0' max='500' placeholder='Height(px)' updateField={updateField} />}
-                  <CheckBox value={config.table.expanded} section='table' fieldName='expanded' label='Expanded by Default' updateField={updateField} />
-                  {isDashboard && <CheckBox value={config.table.showDataTableLink} section='table' fieldName='showDataTableLink' label='Show Data Table Name & Link' updateField={updateField} />}
-                  {isLoadedFromUrl && <CheckBox value={config.table.showDownloadUrl} section='table' fieldName='showDownloadUrl' label='Show URL to Automatically Updated Data' updateField={updateField} />}
-                  <CheckBox value={config.table.download} section='table' fieldName='download' label='Show Download CSV Link' updateField={updateField} />
-                  <CheckBox value={config.table.showDownloadImgButton} section='table' fieldName='showDownloadImgButton' label='Display Image Button' updateField={updateField} />
-                  {/* <CheckBox value={config.table.showDownloadPdfButton} section='table' fieldName='showDownloadPdfButton' label='Display PDF Button' updateField={updateField} /> */}
+                  <DataTableEditor config={config} columns={Object.keys(data[0] || {})} updateField={updateField} isDashboard={isDashboard} isLoadedFromUrl={isLoadedFromUrl} />{' '}
                 </AccordionItemPanel>
               </AccordionItem>
             )}
+            {/* {(config.visualizationType === 'Bar' || config.visualizationType === 'Line') && <Panels.DateHighlighting name='Date Highlighting' />} */}
           </Accordion>
           {config.type !== 'Spark Line' && <AdvancedEditor loadConfig={updateConfig} state={config} convertStateToConfig={convertStateToConfig} />}
         </section>