@cdc/chart 4.24.2 → 4.24.4

package/src/components/EditorPanel/EditorPanel.tsx

@@ -1,7 +1,8 @@
 import { useState, useEffect, useCallback, memo, useContext } from 'react'
 import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
-
+import { isDateScale } from '@cdc/core/helpers/cove/date'
 import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import Layout from '@cdc/core/components/Layout'
 
 // @cdc/core
 import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
@@ -182,7 +183,7 @@ const PreliminaryData = memo(({ config, updateConfig, data }) => {
                 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={seriesKey} initial='Select' fieldName='seriesKey' label='ASSOCIATE TO SERIES' updateField={(section, subsection, fieldName, value) => update(fieldName, value, i)} options={config.runtime.lineSeriesKeys ?? 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()} />
@@ -193,14 +194,34 @@ const PreliminaryData = memo(({ config, updateConfig, data }) => {
         })}
 
       <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'}
+        {config.visualizationType === 'Line' || config.visualizationType === 'Combo' ? '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<ChartContext>(ConfigContext)
+  const {
+    config,
+    updateConfig,
+    tableData,
+    transformedData: data,
+    loading,
+    colorScale,
+    colorPalettes,
+    twoColorPalette,
+    unfilteredData,
+    excludedData,
+    isDashboard,
+    setParentConfig,
+    missingRequiredSections,
+    isDebug,
+    setFilteredData,
+    lineOptions,
+    rawData,
+    highlight,
+    highlightReset
+  } = useContext<ChartContext>(ConfigContext)
 
   const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, unfilteredData)
 
@@ -220,8 +241,10 @@ const EditorPanel = () => {
     visHasAnchors,
     visHasBarBorders,
     visHasDataCutoff,
+    visHasSelectableLegendValues,
     visCanAnimate,
     visHasLegend,
+    visHasLegendAxisAlign,
     visHasBrushChart,
     visSupportsDateCategoryAxis,
     visSupportsValueAxisMin,
@@ -234,6 +257,7 @@ const EditorPanel = () => {
     visSupportsDateCategoryAxisPadding,
     visSupportsRegions,
     visSupportsFilters,
+    visSupportsPreliminaryData,
     visSupportsValueAxisGridLines,
     visSupportsValueAxisLine,
     visSupportsValueAxisTicks,
@@ -329,7 +353,7 @@ const EditorPanel = () => {
     if (updatedConfig.visualizationType === 'Combo') {
       updatedConfig.orientation = 'vertical'
     }
-    if (updatedConfig.xAxis.sortDates && !updatedConfig.xAxis.padding) {
+    if (isDateScale(updatedConfig.xAxis) && !updatedConfig.xAxis.padding) {
       updatedConfig.xAxis.padding = 6
     }
   }
@@ -594,40 +618,10 @@ const EditorPanel = () => {
 
   const onBackClick = () => {
     setDisplayPanel(!displayPanel)
-  }
-
-  const Error = () => {
-    return (
-      <section className='waiting'>
-        <section className='waiting-container'>
-          <h3>Error With Configuration</h3>
-          <p>{config.runtime.editorErrorMessage}</p>
-        </section>
-      </section>
-    )
-  }
-
-  const Confirm = () => {
-    const confirmDone = e => {
-      e.preventDefault()
-
-      let newConfig = { ...config }
-      delete newConfig.newViz
-
-      updateConfig(newConfig)
-    }
-
-    return (
-      <section className='waiting'>
-        <section className='waiting-container'>
-          <h3>Finish Configuring</h3>
-          <p>Set all required options to the left and confirm below to display a preview of the chart.</p>
-          <button className='btn' style={{ margin: '1em auto' }} disabled={missingRequiredSections()} onClick={confirmDone}>
-            I'm Done
-          </button>
-        </section>
-      </section>
-    )
+    updateConfig({
+      ...config,
+      showEditorPanel: !displayPanel
+    })
   }
 
   const convertStateToConfig = () => {
@@ -1003,6 +997,28 @@ const EditorPanel = () => {
       columns: updatedColumns
     })
   }
+
+  const colorCodeByCategory = config.visualizationType === 'Bar' && config.visualizationSubType === 'regular' && config.runtime.seriesKeys.length === 1
+  const getLegendColumns = () => {
+    const colorCodeData = data.map(d => d[config.legend.colorCode])
+    return colorCodeByCategory ? colorCodeData : getColumns(false).filter(d => d !== config.xAxis.dataKey)
+  }
+
+  const updateSeriesIsolateValues = updatedValues => {
+    updateConfig({ ...config, legend: { ...config.legend, seriesHighlight: updatedValues } })
+  }
+
+  const updateBehavior = (section, fieldName, newValue) => {
+    const sectionValue = { ...config[section], [fieldName]: newValue }
+    const updatedConfig = { ...config, [section]: sectionValue }
+
+    if (newValue === 'highlight' && config.legend.seriesHighlight?.length) {
+      updatedConfig.legend.seriesHighlight.length = 0
+    }
+
+    updateConfig(updatedConfig)
+  }
+
   const editorContextValues = {
     addNewExclusion,
     data,
@@ -1031,128 +1047,144 @@ const EditorPanel = () => {
   return (
     <EditorPanelContext.Provider value={editorContextValues}>
       <ErrorBoundary component='EditorPanel'>
-        {config.newViz && <Confirm />}
-        {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'>
-            Configure Chart
-          </div>
-          <section className='form-container'>
-            <Accordion allowZeroExpanded={true}>
-              <Panels.General name='General' />
-              <Panels.ForestPlot name='Forest Plot Settings' />
-              {config.visualizationType !== 'Pie' && config.visualizationType !== 'Forest Plot' && (
-                <AccordionItem>
-                  <AccordionItemHeading>
-                    <AccordionItemButton>Data Series {(!config.series || config.series.length === 0 || (config.visualizationType === 'Paired Bar' && config.series.length < 2)) && <WarningImage width='25' className='warning-icon' />}</AccordionItemButton>
-                  </AccordionItemHeading>
-                  <AccordionItemPanel>
-                    {(!config.series || config.series.length === 0) && config.visualizationType !== 'Paired Bar' && <p className='warning'>At least one series is required</p>}
-                    {(!config.series || config.series.length === 0 || config.series.length < 2) && config.visualizationType === 'Paired Bar' && <p className='warning'>Select two data series for paired bar chart (e.g., Male and Female).</p>}
+        <Layout.Sidebar displayPanel={displayPanel} isDashboard={isDashboard} title={'Configure Chart'} onBackClick={onBackClick}>
+          <Accordion allowZeroExpanded={true}>
+            <Panels.General name='General' />
+            <Panels.ForestPlot name='Forest Plot Settings' />
+            <Panels.Sankey name='Sankey' />
+            {config.visualizationType !== 'Pie' && config.visualizationType !== 'Forest Plot' && config.visualizationType !== 'Sankey' && (
+              <AccordionItem>
+                <AccordionItemHeading>
+                  <AccordionItemButton>Data Series {(!config.series || config.series.length === 0 || (config.visualizationType === 'Paired Bar' && config.series.length < 2)) && <WarningImage width='25' className='warning-icon' />}</AccordionItemButton>
+                </AccordionItemHeading>
+                <AccordionItemPanel>
+                  {(!config.series || config.series.length === 0) && config.visualizationType !== 'Paired Bar' && <p className='warning'>At least one series is required</p>}
+                  {(!config.series || config.series.length === 0 || config.series.length < 2) && config.visualizationType === 'Paired Bar' && <p className='warning'>Select two data series for paired bar chart (e.g., Male and Female).</p>}
+                  <>
+                    <Select
+                      fieldName='visualizationType'
+                      label='Add Data Series'
+                      initial='Select'
+                      onChange={e => {
+                        if (e.target.value !== '' && e.target.value !== 'Select') {
+                          addNewSeries(e.target.value)
+                        }
+                        e.target.value = ''
+                      }}
+                      options={getColumns()}
+                    />
+                    {config.series && config.series.length !== 0 && (
+                      <Panels.Series.Wrapper getColumns={getColumns}>
+                        <fieldset>
+                          <legend className='edit-label float-left'>Displaying</legend>
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>A data series is a set of related data points plotted in a chart and typically represented in the chart legend.</p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        </fieldset>
+
+                        <DragDropContext onDragEnd={({ source, destination }) => handleSeriesChange(source.index, destination.index)}>
+                          <Droppable droppableId='filter_order'>
+                            {/* prettier-ignore */}
+                            {provided => {
+                              return (
+                                <ul {...provided.droppableProps} className='series-list' ref={provided.innerRef}>
+                                  <Panels.Series.List series={config.series} getItemStyle={getItemStyle} sortableItemStyles={sortableItemStyles} chartsWithOptions={chartsWithOptions} />
+                                  {provided.placeholder}
+                                </ul>
+                              )
+                            }}
+                          </Droppable>
+                        </DragDropContext>
+                      </Panels.Series.Wrapper>
+                    )}
+                  </>
+                  {config.series && config.series.length <= 1 && config.visualizationType === 'Bar' && (
                     <>
-                      <Select
-                        fieldName='visualizationType'
-                        label='Add Data Series'
-                        initial='Select'
-                        onChange={e => {
-                          if (e.target.value !== '' && e.target.value !== 'Select') {
-                            addNewSeries(e.target.value)
-                          }
-                          e.target.value = ''
-                        }}
-                        options={getColumns()}
-                      />
-                      {config.series && config.series.length !== 0 && (
-                        <Panels.Series.Wrapper getColumns={getColumns}>
-                          <fieldset>
-                            <legend className='edit-label float-left'>Displaying</legend>
-                            <Tooltip style={{ textTransform: 'none' }}>
-                              <Tooltip.Target>
-                                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                              </Tooltip.Target>
-                              <Tooltip.Content>
-                                <p>A data series is a set of related data points plotted in a chart and typically represented in the chart legend.</p>
-                              </Tooltip.Content>
-                            </Tooltip>
-                          </fieldset>
-
-                          <DragDropContext onDragEnd={({ source, destination }) => handleSeriesChange(source.index, destination.index)}>
-                            <Droppable droppableId='filter_order'>
-                              {/* prettier-ignore */}
-                              {provided => {
-                                return (
-                                  <ul {...provided.droppableProps} className='series-list' ref={provided.innerRef}>
-                                    <Panels.Series.List series={config.series} getItemStyle={getItemStyle} sortableItemStyles={sortableItemStyles} chartsWithOptions={chartsWithOptions} />
-                                    {provided.placeholder}
-                                  </ul>
-                                )
-                              }}
-                            </Droppable>
-                          </DragDropContext>
-                        </Panels.Series.Wrapper>
-                      )}
+                      <span className='divider-heading'>Confidence Keys</span>
+                      <Select value={config.confidenceKeys.upper || ''} section='confidenceKeys' fieldName='upper' label='Upper' updateField={updateField} initial='Select' options={getColumns()} />
+                      <Select value={config.confidenceKeys.lower || ''} section='confidenceKeys' fieldName='lower' label='Lower' updateField={updateField} initial='Select' options={getColumns()} />
                     </>
-                    {config.series && config.series.length <= 1 && config.visualizationType === 'Bar' && (
-                      <>
-                        <span className='divider-heading'>Confidence Keys</span>
-                        <Select value={config.confidenceKeys.upper || ''} section='confidenceKeys' fieldName='upper' label='Upper' updateField={updateField} initial='Select' options={getColumns()} />
-                        <Select value={config.confidenceKeys.lower || ''} section='confidenceKeys' fieldName='lower' label='Lower' updateField={updateField} initial='Select' options={getColumns()} />
-                      </>
-                    )}
-                    {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>
-              )}
-              <Panels.BoxPlot name='Measures' />
-              {/* Left Value Axis */}
-              {visSupportsLeftValueAxis() && (
-                <AccordionItem>
-                  <AccordionItemHeading>
-                    <AccordionItemButton>
-                      {config.visualizationType === 'Pie' ? 'Data Format' : config.orientation === 'vertical' ? 'Left Value Axis' : 'Value Axis'}
-                      {config.visualizationType === 'Pie' && !config.yAxis.dataKey && <WarningImage width='25' className='warning-icon' />}
-                    </AccordionItemButton>
-                  </AccordionItemHeading>
-                  <AccordionItemPanel>
-                    {config.visualizationType === 'Pie' && (
-                      <Select
-                        value={config.yAxis.dataKey || ''}
+                  )}
+                  {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} />} */}
+                  {visSupportsPreliminaryData() && <PreliminaryData config={config} updateConfig={updateConfig} data={data} />}
+                </AccordionItemPanel>
+              </AccordionItem>
+            )}
+            <Panels.BoxPlot name='Measures' />
+            {/* Left Value Axis */}
+            {visSupportsLeftValueAxis() && (
+              <AccordionItem>
+                <AccordionItemHeading>
+                  <AccordionItemButton>
+                    {config.visualizationType === 'Pie' ? 'Data Format' : config.orientation === 'vertical' ? 'Left Value Axis' : 'Value Axis'}
+                    {config.visualizationType === 'Pie' && !config.yAxis.dataKey && <WarningImage width='25' className='warning-icon' />}
+                  </AccordionItemButton>
+                </AccordionItemHeading>
+                <AccordionItemPanel>
+                  {config.visualizationType === 'Pie' && (
+                    <Select
+                      value={config.yAxis.dataKey || ''}
+                      section='yAxis'
+                      fieldName='dataKey'
+                      label='Data Column'
+                      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 data to be visually represented.</p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                    />
+                  )}
+                  {config.visualizationType !== 'Pie' && (
+                    <>
+                      <TextField value={config.yAxis.label} section='yAxis' fieldName='label' label='Label ' updateField={updateField} />
+                      {config.runtime.seriesKeys && config.runtime.seriesKeys.length === 1 && !['Box Plot', 'Deviation Bar', 'Forest Plot'].includes(config.visualizationType) && (
+                        <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} />
+                      <TextField
+                        value={config.yAxis.size}
+                        type='number'
                         section='yAxis'
-                        fieldName='dataKey'
-                        label='Data Column'
-                        initial='Select'
-                        required={true}
+                        fieldName='size'
+                        label={config.orientation === 'horizontal' ? 'Size (Height)' : 'Size (Width)'}
+                        className='number-narrow'
                         updateField={updateField}
-                        options={getColumns(false)}
                         tooltip={
                           <Tooltip style={{ textTransform: 'none' }}>
                             <Tooltip.Target>
-                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                              <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
                             </Tooltip.Target>
                             <Tooltip.Content>
-                              <p>Select the source data to be visually represented.</p>
+                              <p>{`Increase the size if elements in the ${config.orientation} axis are being crowded or hidden behind other elements.  Decrease if less space is required for the value axis.`}</p>
                             </Tooltip.Content>
                           </Tooltip>
                         }
                       />
-                    )}
-                    {config.visualizationType !== 'Pie' && (
-                      <>
-                        <TextField value={config.yAxis.label} section='yAxis' fieldName='label' label='Label ' updateField={updateField} />
-                        {config.runtime.seriesKeys && config.runtime.seriesKeys.length === 1 && !['Box Plot', 'Deviation Bar', 'Forest Plot'].includes(config.visualizationType) && (
-                          <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.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 || 0} 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.yAxis.size}
+                          value={config.xAxis.maxTickRotation}
                           type='number'
-                          section='yAxis'
-                          fieldName='size'
-                          label={config.orientation === 'horizontal' ? 'Size (Height)' : 'Size (Width)'}
+                          min={0}
+                          section='xAxis'
+                          fieldName='maxTickRotation'
+                          label='Max Tick Rotation'
                           className='number-narrow'
                           updateField={updateField}
                           tooltip={
@@ -1161,527 +1193,507 @@ const EditorPanel = () => {
                                 <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
                               </Tooltip.Target>
                               <Tooltip.Content>
-                                <p>{`Increase the size if elements in the ${config.orientation} axis are being crowded or hidden behind other elements.  Decrease if less space is required for the value axis.`}</p>
+                                <p>Degrees ticks will be rotated if values overlap, especially in smaller viewports.</p>
                               </Tooltip.Content>
                             </Tooltip>
                           }
                         />
-                        {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.isResponsiveTicks && config.orientation === 'horizontal' && 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' }}>
-                                <Tooltip.Target>
-                                  <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>
-                                </Tooltip.Content>
-                              </Tooltip>
-                            }
-                          />
-                        )}
-
-                        {/* Hiding this for now, not interested in moving the axis lines away from chart comp. right now. */}
-                        {/* <TextField value={config.yAxis.axisPadding} type='number' max={10} min={0} section='yAxis' fieldName='axisPadding' label={'Axis Padding'} className='number-narrow' updateField={updateField} /> */}
-                        {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.yAxis.enablePadding && <TextField type='number' section='yAxis' fieldName='scalePadding' label='Padding Percentage' className='number-narrow' updateField={updateField} value={config.yAxis.scalePadding} />}
-                        {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>
-                    <CheckBox value={config.dataFormat.commas} section='dataFormat' fieldName='commas' label='Add commas' updateField={updateField} />
-                    <CheckBox
-                      value={config.dataFormat.abbreviated}
+                      )}
+
+                      {/* Hiding this for now, not interested in moving the axis lines away from chart comp. right now. */}
+                      {/* <TextField value={config.yAxis.axisPadding} type='number' max={10} min={0} section='yAxis' fieldName='axisPadding' label={'Axis Padding'} className='number-narrow' updateField={updateField} /> */}
+                      {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.yAxis.enablePadding && <TextField type='number' section='yAxis' fieldName='scalePadding' label='Padding Percentage' className='number-narrow' updateField={updateField} value={config.yAxis.scalePadding} />}
+                      {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>
+                  <CheckBox value={config.dataFormat.commas} section='dataFormat' fieldName='commas' label='Add commas' updateField={updateField} />
+                  <CheckBox
+                    value={config.dataFormat.abbreviated}
+                    section='dataFormat'
+                    fieldName='abbreviated'
+                    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>
+                    }
+                  />
+                  <TextField value={config.dataFormat.roundTo ? config.dataFormat.roundTo : 0} type='number' section='dataFormat' fieldName='roundTo' label='Round to decimal point' className='number-narrow' updateField={updateField} min={0} />
+                  <div className='two-col-inputs'>
+                    <TextField
+                      value={config.dataFormat.prefix}
                       section='dataFormat'
-                      fieldName='abbreviated'
-                      label='Abbreviate Axis Values'
+                      fieldName='prefix'
+                      label='Prefix'
                       updateField={updateField}
                       tooltip={
                         <Tooltip style={{ textTransform: 'none' }}>
                           <Tooltip.Target>
-                            <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                           </Tooltip.Target>
                           <Tooltip.Content>
-                            <p>{`This option abbreviates very large or very small numbers on the value axis`}</p>
+                            {config.visualizationType === 'Pie' && <p>Enter a data prefix to display in the data table and chart tooltips, if applicable.</p>}
+                            {config.visualizationType !== 'Pie' && <p>Enter a data prefix (such as "$"), if applicable.</p>}
                           </Tooltip.Content>
                         </Tooltip>
                       }
                     />
-                    <TextField value={config.dataFormat.roundTo ? config.dataFormat.roundTo : 0} type='number' section='dataFormat' fieldName='roundTo' label='Round to decimal point' className='number-narrow' updateField={updateField} min={0} />
-                    <div className='two-col-inputs'>
-                      <TextField
-                        value={config.dataFormat.prefix}
-                        section='dataFormat'
-                        fieldName='prefix'
-                        label='Prefix'
-                        updateField={updateField}
-                        tooltip={
-                          <Tooltip style={{ textTransform: 'none' }}>
-                            <Tooltip.Target>
-                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                            </Tooltip.Target>
-                            <Tooltip.Content>
-                              {config.visualizationType === 'Pie' && <p>Enter a data prefix to display in the data table and chart tooltips, if applicable.</p>}
-                              {config.visualizationType !== 'Pie' && <p>Enter a data prefix (such as "$"), if applicable.</p>}
-                            </Tooltip.Content>
-                          </Tooltip>
-                        }
-                      />
-                      <TextField
-                        value={config.dataFormat.suffix}
-                        section='dataFormat'
-                        fieldName='suffix'
-                        label='Suffix'
-                        updateField={updateField}
-                        tooltip={
-                          <Tooltip style={{ textTransform: 'none' }}>
-                            <Tooltip.Target>
-                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                            </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>
-                        }
-                      />
-                    </div>
+                    <TextField
+                      value={config.dataFormat.suffix}
+                      section='dataFormat'
+                      fieldName='suffix'
+                      label='Suffix'
+                      updateField={updateField}
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </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>
+                      }
+                    />
+                  </div>
 
-                    {config.orientation === 'horizontal' ? ( // horizontal - x is vertical y is horizontal
+                  {config.orientation === 'horizontal' ? ( // horizontal - x is vertical y is horizontal
+                    <>
+                      {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} />}
+                      {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>
+                      {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' && (
+                        <>
+                          <TextField value={config.xAxis.target} section='xAxis' fieldName='target' type='number' label='Deviation point' placeholder='Auto' updateField={updateField} />
+                          <TextField value={config.xAxis.targetLabel || 'Target'} section='xAxis' fieldName='targetLabel' type='text' label='Deviation point Label' updateField={updateField} />
+                          <CheckBox value={config.xAxis.showTargetLabel} section='xAxis' fieldName='showTargetLabel' label='Show Deviation point label' updateField={updateField} />
+                        </>
+                      )}
+                    </>
+                  ) : (
+                    config.visualizationType !== 'Pie' && (
                       <>
-                        {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} />}
-                        {visSupportsValueAxisMax() && <TextField value={config.xAxis.max} section='xAxis' fieldName='max' label='max value' type='number' placeholder='Auto' updateField={updateField} />}
+                        <CheckBox value={config.yAxis.hideAxis} section='yAxis' fieldName='hideAxis' label='Hide Axis' updateField={updateField} />
+                        <CheckBox value={config.yAxis.hideLabel} section='yAxis' fieldName='hideLabel' label='Hide Label' updateField={updateField} />
+                        <CheckBox value={config.yAxis.hideTicks} section='yAxis' fieldName='hideTicks' label='Hide Ticks' updateField={updateField} />
+
+                        <TextField value={config.yAxis.max} section='yAxis' fieldName='max' type='number' label='left axis max value' placeholder='Auto' updateField={updateField} />
                         <span style={{ color: 'red', display: 'block' }}>{warningMsg.maxMsg}</span>
-                        {visSupportsValueAxisMin() && <TextField value={config.xAxis.min} section='xAxis' fieldName='min' type='number' label='min value' placeholder='Auto' updateField={updateField} />}
+                        <TextField value={config.yAxis.min} section='yAxis' fieldName='min' type='number' label='left axis min value' placeholder='Auto' updateField={updateField} />
                         <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
-                        {config.visualizationType === 'Deviation Bar' && (
-                          <>
-                            <TextField value={config.xAxis.target} section='xAxis' fieldName='target' type='number' label='Deviation point' placeholder='Auto' updateField={updateField} />
-                            <TextField value={config.xAxis.targetLabel || 'Target'} section='xAxis' fieldName='targetLabel' type='text' label='Deviation point Label' updateField={updateField} />
-                            <CheckBox value={config.xAxis.showTargetLabel} section='xAxis' fieldName='showTargetLabel' label='Show Deviation point label' updateField={updateField} />
-                          </>
-                        )}
                       </>
-                    ) : (
-                      config.visualizationType !== 'Pie' && (
-                        <>
-                          <CheckBox value={config.yAxis.hideAxis} section='yAxis' fieldName='hideAxis' label='Hide Axis' updateField={updateField} />
-                          <CheckBox value={config.yAxis.hideLabel} section='yAxis' fieldName='hideLabel' label='Hide Label' updateField={updateField} />
-                          <CheckBox value={config.yAxis.hideTicks} section='yAxis' fieldName='hideTicks' label='Hide Ticks' updateField={updateField} />
-
-                          <TextField value={config.yAxis.max} section='yAxis' fieldName='max' type='number' label='left axis max value' placeholder='Auto' updateField={updateField} />
-                          <span style={{ color: 'red', display: 'block' }}>{warningMsg.maxMsg}</span>
-                          <TextField value={config.yAxis.min} section='yAxis' fieldName='min' type='number' label='left axis min value' placeholder='Auto' updateField={updateField} />
-                          <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
-                        </>
-                      )
-                    )}
-
-                    {/* start: anchors */}
-                    {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={`yaxis-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.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>
-
-                                <label>
-                                  <span>Anchor Color</span>
-                                  <input
-                                    type='text'
-                                    value={config.yAxis.anchors[index].color ? config.yAxis.anchors[index].color : ''}
-                                    onChange={e => {
+                    )
+                  )}
+
+                  {/* start: anchors */}
+                  {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={`yaxis-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 copiedAnchors = [...config.yAxis.anchors]
-                                      copiedAnchors[index].color = e.target.value
+                                      const copiedAnchorGroups = [...config.yAxis.anchors]
+                                      copiedAnchorGroups.splice(index, 1)
                                       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
+                                          anchors: copiedAnchorGroups
                                         }
                                       })
                                     }}
                                   >
-                                    <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({} as Anchor)
-                            updateConfig({
-                              ...config,
-                              yAxis: {
-                                ...config.yAxis,
-                                anchors
-                              }
-                            })
-                          }}
-                        >
-                          Add Anchor
-                        </button>
-                      </div>
-                    )}
+                                    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.xAxis?.anchors?.map((anchor, index) => (
-                            <AccordionItem className='series-item series-item--chart' key={`xaxis-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.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>
+                              <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>
-                                  <span>Anchor Color</span>
-                                  <input
-                                    type='text'
-                                    value={config.xAxis.anchors[index].color ? config.xAxis.anchors[index].color : ''}
-                                    onChange={e => {
+                              <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({} as Anchor)
+                          updateConfig({
+                            ...config,
+                            yAxis: {
+                              ...config.yAxis,
+                              anchors
+                            }
+                          })
+                        }}
+                      >
+                        Add Anchor
+                      </button>
+                    </div>
+                  )}
+
+                  {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-${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 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
+                                      const copiedAnchorGroups = [...config.xAxis.anchors]
+                                      copiedAnchorGroups.splice(index, 1)
                                       updateConfig({
                                         ...config,
                                         xAxis: {
                                           ...config.xAxis,
-                                          anchors: copiedAnchors
+                                          anchors: copiedAnchorGroups
                                         }
                                       })
                                     }}
                                   >
-                                    <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({} as Anchor)
-                            updateConfig({
-                              ...config,
-                              xAxis: {
-                                ...config.xAxis,
-                                anchors
-                              }
-                            })
-                          }}
-                        >
-                          Add Anchor
-                        </button>
-                      </div>
-                    )}
-                    {/* end: anchors */}
-                  </AccordionItemPanel>
-                </AccordionItem>
-              )}
-              {/* Right Value Axis Settings */}
-              {hasRightAxis && (
-                <AccordionItem>
-                  <AccordionItemHeading>
-                    <AccordionItemButton>Right Value Axis</AccordionItemButton>
-                  </AccordionItemHeading>
-                  <AccordionItemPanel>
-                    <TextField value={config.yAxis.rightLabel} section='yAxis' fieldName='rightLabel' label='Label' updateField={updateField} />
-                    <TextField value={config.yAxis.rightNumTicks} placeholder='Auto' type='number' section='yAxis' fieldName='rightNumTicks' label='Number of ticks' className='number-narrow' updateField={updateField} />
-                    <TextField value={config.yAxis.rightAxisSize} type='number' section='yAxis' fieldName='rightAxisSize' label='Size (Width)' className='number-narrow' updateField={updateField} />
-                    <TextField value={config.yAxis.rightLabelOffsetSize} type='number' section='yAxis' fieldName='rightLabelOffsetSize' label='Label Offset' className='number-narrow' updateField={updateField} />
-
-                    <span className='divider-heading'>Number Formatting</span>
-                    <CheckBox value={config.dataFormat.rightCommas} section='dataFormat' fieldName='rightCommas' label='Add commas' updateField={updateField} />
-                    <TextField value={config.dataFormat.rightRoundTo} type='number' section='dataFormat' fieldName='rightRoundTo' label='Round to decimal point' className='number-narrow' updateField={updateField} min={0} />
-                    <div className='two-col-inputs'>
-                      <TextField
-                        value={config.dataFormat.rightPrefix}
-                        section='dataFormat'
-                        fieldName='rightPrefix'
-                        label='Prefix'
-                        updateField={updateField}
-                        tooltip={
-                          <Tooltip style={{ textTransform: 'none' }}>
-                            <Tooltip.Target>
-                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                            </Tooltip.Target>
-                            <Tooltip.Content>
-                              {config.visualizationType === 'Pie' && <p>Enter a data prefix to display in the data table and chart tooltips, if applicable.</p>}
-                              {config.visualizationType !== 'Pie' && <p>Enter a data prefix (such as "$"), if applicable.</p>}
-                            </Tooltip.Content>
-                          </Tooltip>
-                        }
-                      />
-                      <TextField
-                        value={config.dataFormat.rightSuffix}
-                        section='dataFormat'
-                        fieldName='rightSuffix'
-                        label='Suffix'
-                        updateField={updateField}
-                        tooltip={
-                          <Tooltip style={{ textTransform: 'none' }}>
-                            <Tooltip.Target>
-                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                            </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>
-                        }
-                      />
+                                    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>
+
+                              <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>
+
+                              <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({} as Anchor)
+                          updateConfig({
+                            ...config,
+                            xAxis: {
+                              ...config.xAxis,
+                              anchors
+                            }
+                          })
+                        }}
+                      >
+                        Add Anchor
+                      </button>
                     </div>
+                  )}
+                  {/* end: anchors */}
+                </AccordionItemPanel>
+              </AccordionItem>
+            )}
+            {/* Right Value Axis Settings */}
+            {hasRightAxis && (
+              <AccordionItem>
+                <AccordionItemHeading>
+                  <AccordionItemButton>Right Value Axis</AccordionItemButton>
+                </AccordionItemHeading>
+                <AccordionItemPanel>
+                  <TextField value={config.yAxis.rightLabel} section='yAxis' fieldName='rightLabel' label='Label' updateField={updateField} />
+                  <TextField value={config.yAxis.rightNumTicks} placeholder='Auto' type='number' section='yAxis' fieldName='rightNumTicks' label='Number of ticks' className='number-narrow' updateField={updateField} />
+                  <TextField value={config.yAxis.rightAxisSize} type='number' section='yAxis' fieldName='rightAxisSize' label='Size (Width)' className='number-narrow' updateField={updateField} />
+                  <TextField value={config.yAxis.rightLabelOffsetSize} type='number' section='yAxis' fieldName='rightLabelOffsetSize' label='Label Offset' className='number-narrow' updateField={updateField} />
+
+                  <span className='divider-heading'>Number Formatting</span>
+                  <CheckBox value={config.dataFormat.rightCommas} section='dataFormat' fieldName='rightCommas' label='Add commas' updateField={updateField} />
+                  <TextField value={config.dataFormat.rightRoundTo} type='number' section='dataFormat' fieldName='rightRoundTo' label='Round to decimal point' className='number-narrow' updateField={updateField} min={0} />
+                  <div className='two-col-inputs'>
+                    <TextField
+                      value={config.dataFormat.rightPrefix}
+                      section='dataFormat'
+                      fieldName='rightPrefix'
+                      label='Prefix'
+                      updateField={updateField}
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            {config.visualizationType === 'Pie' && <p>Enter a data prefix to display in the data table and chart tooltips, if applicable.</p>}
+                            {config.visualizationType !== 'Pie' && <p>Enter a data prefix (such as "$"), if applicable.</p>}
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                    />
+                    <TextField
+                      value={config.dataFormat.rightSuffix}
+                      section='dataFormat'
+                      fieldName='rightSuffix'
+                      label='Suffix'
+                      updateField={updateField}
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </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>
+                      }
+                    />
+                  </div>
+
+                  <CheckBox value={config.yAxis.rightHideAxis} section='yAxis' fieldName='rightHideAxis' label='Hide Axis' updateField={updateField} />
+                  <CheckBox value={config.yAxis.rightHideLabel} section='yAxis' fieldName='rightHideLabel' label='Hide Label' updateField={updateField} />
+                  <CheckBox value={config.yAxis.rightHideTicks} section='yAxis' fieldName='rightHideTicks' label='Hide Ticks' updateField={updateField} />
+
+                  <TextField value={config.yAxis.max} section='yAxis' fieldName='rightMax' type='number' label='right axis max value' placeholder='Auto' updateField={updateField} />
+                  <span style={{ color: 'red', display: 'block' }}>{warningMsg.rightMaxMessage}</span>
+                  <TextField value={config.yAxis.min} section='yAxis' fieldName='rightMin' type='number' label='right axis min value' placeholder='Auto' updateField={updateField} />
+                  <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
+                </AccordionItemPanel>
+              </AccordionItem>
+            )}
+            {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' && (
+                        <>
+                          <label>
+                            <span className='edit-label'>
+                              Data Scaling Type
+                              <Tooltip style={{ textTransform: 'none', display: 'inline-block' }}>
+                                <Tooltip.Target>
+                                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                </Tooltip.Target>
+                                <Tooltip.Content>Linear scales are employed for quantitative data, while time scales are used for time-series data.</Tooltip.Content>
+                              </Tooltip>
+                            </span>
+                            <select
+                              value={config.xAxis.type}
+                              onChange={e =>
+                                updateConfig({
+                                  ...config,
+                                  xAxis: {
+                                    ...config.xAxis,
+                                    type: e.target.value
+                                  }
+                                })
+                              }
+                            >
+                              <option value='categorical'>Categorical (Linear Scale)</option>
+                              <option value='date'>Date (Linear Scale)</option>
+                              <option value='date-time'>Date (Date Time Scale)</option>
+                              {config.visualizationType === 'Scatter Plot' && <option value={'continuous'}>Continuous</option>}
+                            </select>
+                          </label>
 
-                    <CheckBox value={config.yAxis.rightHideAxis} section='yAxis' fieldName='rightHideAxis' label='Hide Axis' updateField={updateField} />
-                    <CheckBox value={config.yAxis.rightHideLabel} section='yAxis' fieldName='rightHideLabel' label='Hide Label' updateField={updateField} />
-                    <CheckBox value={config.yAxis.rightHideTicks} section='yAxis' fieldName='rightHideTicks' label='Hide Ticks' updateField={updateField} />
-
-                    <TextField value={config.yAxis.max} section='yAxis' fieldName='rightMax' type='number' label='right axis max value' placeholder='Auto' updateField={updateField} />
-                    <span style={{ color: 'red', display: 'block' }}>{warningMsg.rightMaxMessage}</span>
-                    <TextField value={config.yAxis.min} section='yAxis' fieldName='rightMin' type='number' label='right axis min value' placeholder='Auto' updateField={updateField} />
-                    <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
-                  </AccordionItemPanel>
-                </AccordionItem>
-              )}
-              {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']} />
-                            {(config.visualizationType === 'Bar' || config.visualizationType === 'Line' || config.visualizationType === 'Combo' || config.visualizationType === 'Area Chart') && config.xAxis.type === 'date' && config.orientation !== 'horizontal' && (
-                              <CheckBox value={config.xAxis.sortDates} section='xAxis' fieldName='sortDates' label='Force Date Scale (Sort Dates)' updateField={updateField} />
-                            )}{' '}
-                            {visSupportsDateCategoryAxisPadding() && (
-                              <TextField
-                                value={config.xAxis.padding}
-                                type='number'
-                                min={0}
-                                section='xAxis'
-                                fieldName='padding'
-                                label={'Padding (Percent)'}
-                                className='number-narrow'
-                                updateField={updateField}
-                                tooltip={
-                                  <Tooltip style={{ textTransform: 'none' }}>
-                                    <Tooltip.Target>
-                                      <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                                    </Tooltip.Target>
-                                    <Tooltip.Content>
-                                      <p>For use with date scale. Extends the earliest and latest dates represented on the scale by the percentage specified.</p>
-                                    </Tooltip.Content>
-                                  </Tooltip>
-                                }
-                              />
-                            )}
-                          </>
-                        )}
-                        <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>
-                          }
-                        />
-                      </>
-                    )}
+                          <CheckBox value={config.xAxis.manual} section='xAxis' fieldName='manual' label='Manual Ticks' updateField={updateField} />
 
-                    {config.visualizationType === 'Pie' && (
+                          {visSupportsDateCategoryAxisPadding() && (
+                            <TextField
+                              value={config.xAxis.padding}
+                              type='number'
+                              min={0}
+                              section='xAxis'
+                              fieldName='padding'
+                              label={'Padding (Percent)'}
+                              className='number-narrow'
+                              updateField={updateField}
+                              tooltip={
+                                <Tooltip style={{ textTransform: 'none' }}>
+                                  <Tooltip.Target>
+                                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                  </Tooltip.Target>
+                                  <Tooltip.Content>
+                                    <p>For use with date scale. Extends the earliest and latest dates represented on the scale by the percentage specified.</p>
+                                  </Tooltip.Content>
+                                </Tooltip>
+                              }
+                            />
+                          )}
+                        </>
+                      )}
                       <Select
-                        value={config.xAxis.dataKey || ''}
+                        value={config.xAxis.dataKey || setCategoryAxis() || ''}
                         section='xAxis'
                         fieldName='dataKey'
-                        label='Segment Labels'
+                        label='Data Key'
                         initial='Select'
                         required={true}
                         updateField={updateField}
@@ -1692,317 +1704,268 @@ const EditorPanel = () => {
                               <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>
+                              <p>Select the column or row containing the categories or dates for this axis. </p>
                             </Tooltip.Content>
                           </Tooltip>
                         }
                       />
-                    )}
-
-                    {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>
-                              }
-                            />
+                    </>
+                  )}
+
+                  {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>
+                      }
+                    />
+                  )}
 
-                            <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>
-                              }
-                            />
+                  {config.visualizationType !== 'Pie' && (
+                    <>
+                      <TextField value={config.xAxis.label} section='xAxis' fieldName='label' label='Label' updateField={updateField} />
 
-                            <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 === '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
-                              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 field specifies the pattern used to read and interpret dates in your dataset, ensuring the dates are correctly understood and processed. </p>
-                                  </Tooltip.Content>
-                                </Tooltip>
-                              }
-                              value={config.xAxis.dateParseFormat}
-                              section='xAxis'
-                              fieldName='dateParseFormat'
-                              placeholder='Ex. %Y-%m-%d'
-                              label='Date Parse Format'
-                              updateField={updateField}
-                            />
-                            <TextField
-                              tooltip={
-                                <Tooltip style={{ textTransform: 'none' }}>
-                                  <Tooltip.Target>
-                                    <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
-                                  </Tooltip.Target>
-                                  <Tooltip.Content>
-                                    <p> Adjusts the date display format on the axis for clear, visual date representation.</p>
-                                  </Tooltip.Content>
-                                </Tooltip>
-                              }
-                              value={config.xAxis.dateDisplayFormat}
-                              section='xAxis'
-                              fieldName='dateDisplayFormat'
-                              placeholder='Ex. %Y-%m-%d'
-                              label='AXIS DATE DISPLAY FORMAT'
-                              updateField={updateField}
-                            />
-                            <TextField
-                              tooltip={
-                                <Tooltip style={{ textTransform: 'none' }}>
-                                  <Tooltip.Target>
-                                    <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
-                                  </Tooltip.Target>
-                                  <Tooltip.Content>
-                                    <p>Specify a custom format for displaying dates in data table. If left empty, dates will adopt the Axis Date Display format. </p>
-                                  </Tooltip.Content>
-                                </Tooltip>
-                              }
-                              value={config.table.dateDisplayFormat}
-                              section='table'
-                              fieldName='dateDisplayFormat'
-                              placeholder='Ex. %Y-%m-%d'
-                              label='DATA TABLE DATE DISPLAY FORMAT'
-                              updateField={updateField}
-                            />
-                            <TextField
-                              tooltip={
-                                <Tooltip style={{ textTransform: 'none' }}>
-                                  <Tooltip.Target>
-                                    <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
-                                  </Tooltip.Target>
-                                  <Tooltip.Content>
-                                    <p>Specify a custom format for displaying dates on hovers. If left empty, dates will adopt the Axis Date Display format. </p>
-                                  </Tooltip.Content>
-                                </Tooltip>
-                              }
-                              value={config.tooltips.dateDisplayFormat}
-                              section='tooltips'
-                              fieldName='dateDisplayFormat'
-                              placeholder='Ex. %Y-%m-%d'
-                              label='HOVER 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.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 prefix (such as "$"), if applicable.</p>
+                                </Tooltip.Content>
+                              </Tooltip>
+                            }
+                          />
 
-                        {config.exclusions.active && (
-                          <>
-                            {config.xAxis.type === 'categorical' && (
-                              <>
-                                {config.exclusions.keys.length > 0 && (
-                                  <>
-                                    <fieldset>
-                                      <legend className='edit-label'>Excluded Keys</legend>
-                                    </fieldset>
-                                    <ExclusionsList />
-                                  </>
-                                )}
+                          <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>
+                            }
+                          />
 
-                                <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)}
-                                />
-                              </>
-                            )}
+                          <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 === '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 || ''} />
-                              </>
-                            )}
-                          </>
-                        )}
-
-                        {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} />}
-
-                        {visSupportsDateCategoryAxisPadding() && <TextField value={config.xAxis.padding} type='number' min={0} section='xAxis' fieldName='padding' label={'Padding (Percent)'} 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' && (
+                      {isDateScale(config.xAxis) && (
+                        <>
+                          <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.maxTickRotation}
-                            type='number'
-                            min={0}
+                            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 field specifies the pattern used to read and interpret dates in your dataset, ensuring the dates are correctly understood and processed. </p>
+                                </Tooltip.Content>
+                              </Tooltip>
+                            }
+                            value={config.xAxis.dateParseFormat}
                             section='xAxis'
-                            fieldName='maxTickRotation'
-                            label='Max Tick Rotation'
-                            className='number-narrow'
+                            fieldName='dateParseFormat'
+                            placeholder='Ex. %Y-%m-%d'
+                            label='Date Parse Format'
                             updateField={updateField}
+                          />
+                          <TextField
                             tooltip={
                               <Tooltip style={{ textTransform: 'none' }}>
                                 <Tooltip.Target>
                                   <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> Adjusts the date display format on the axis for clear, visual date representation.</p>
                                 </Tooltip.Content>
                               </Tooltip>
                             }
+                            value={config.xAxis.dateDisplayFormat}
+                            section='xAxis'
+                            fieldName='dateDisplayFormat'
+                            placeholder='Ex. %Y-%m-%d'
+                            label='AXIS DATE DISPLAY FORMAT'
+                            updateField={updateField}
                           />
-                        )}
-
-                        {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>
-                          </>
-                        )}
-                      </>
-                    )}
+                          <TextField
+                            tooltip={
+                              <Tooltip style={{ textTransform: 'none' }}>
+                                <Tooltip.Target>
+                                  <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+                                </Tooltip.Target>
+                                <Tooltip.Content>
+                                  <p>Specify a custom format for displaying dates in data table. If left empty, dates will adopt the Axis Date Display format. </p>
+                                </Tooltip.Content>
+                              </Tooltip>
+                            }
+                            value={config.table.dateDisplayFormat}
+                            section='table'
+                            fieldName='dateDisplayFormat'
+                            placeholder='Ex. %Y-%m-%d'
+                            label='DATA TABLE DATE DISPLAY FORMAT'
+                            updateField={updateField}
+                          />
+                          <TextField
+                            tooltip={
+                              <Tooltip style={{ textTransform: 'none' }}>
+                                <Tooltip.Target>
+                                  <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+                                </Tooltip.Target>
+                                <Tooltip.Content>
+                                  <p>Specify a custom format for displaying dates on hovers. If left empty, dates will adopt the Axis Date Display format. </p>
+                                </Tooltip.Content>
+                              </Tooltip>
+                            }
+                            value={config.tooltips.dateDisplayFormat}
+                            section='tooltips'
+                            fieldName='dateDisplayFormat'
+                            placeholder='Ex. %Y-%m-%d'
+                            label='HOVER DATE DISPLAY FORMAT'
+                            updateField={updateField}
+                          />
+                        </>
+                      )}
 
-                    {config.visualizationType === 'Pie' && (
-                      <>
-                        <CheckBox
-                          value={config.exclusions.active}
-                          section='exclusions'
-                          fieldName='active'
-                          label={'Exclude one or more values'}
+                      <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 || ''} />
+                            </>
+                          )}
+                        </>
+                      )}
+
+                      {visSupportsDateCategoryNumTicks() && config.xAxis.type !== 'date-time' && config.xAxis.manual && (
+                        <TextField value={config.xAxis.manualStep} placeholder='Auto' type='number' min={1} section='xAxis' fieldName='manualStep' label='Step count' className='number-narrow' updateField={updateField} />
+                      )}
+                      {visSupportsDateCategoryNumTicks() && (config.xAxis.type === 'date-time' || !config.xAxis.manual) && (
+                        <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' }}>
@@ -2010,543 +1973,619 @@ const EditorPanel = () => {
                                 <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>
+                                <p>Degrees ticks will be rotated if values overlap, especially in smaller viewports.</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)}
-                            />
-                          </>
-                        )}
-                      </>
-                    )}
+                      {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} />}
+                        </>
+                      )}
 
-                    {/* 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>
+                      {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>
+                        </>
+                      )}
+                    </>
+                  )}
 
-                                <label>
-                                  <span>Anchor Color</span>
-                                  <input
-                                    type='text'
-                                    value={config.xAxis.anchors[index].color ? config.xAxis.anchors[index].color : ''}
-                                    onChange={e => {
+                  {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 copiedAnchors = [...config.xAxis.anchors]
-                                      copiedAnchors[index].color = e.target.value
+                                      const copiedAnchorGroups = [...config.xAxis.anchors]
+                                      copiedAnchorGroups.splice(index, 1)
                                       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: copiedAnchors
+                                          anchors: copiedAnchorGroups
                                         }
                                       })
                                     }}
                                   >
-                                    <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({} as Anchor)
-                            updateConfig({
-                              ...config,
-                              xAxis: {
-                                ...config.xAxis,
-                                anchors
-                              }
-                            })
-                          }}
-                        >
-                          Add Anchor
-                        </button>
-                      </div>
-                    )}
+                                    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>
 
-                    {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 => {
+                              <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>
+
+                              <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({} as Anchor)
+                          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 copiedAnchors = [...config.yAxis.anchors]
-                                      copiedAnchors[index].value = e.target.value
+                                      const copiedAnchorGroups = [...config.yAxis.anchors]
+                                      copiedAnchorGroups.splice(index, 1)
                                       updateConfig({
                                         ...config,
                                         yAxis: {
                                           ...config.yAxis,
-                                          anchors: copiedAnchors
+                                          anchors: copiedAnchorGroups
                                         }
                                       })
                                     }}
-                                  />
-                                </label>
+                                  >
+                                    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>
-                                  <span>Anchor Color</span>
+                              <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>
+
+                      <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>
+                <AccordionItemHeading>
+                  <AccordionItemButton>Columns</AccordionItemButton>
+                </AccordionItemHeading>
+                <AccordionItemPanel>
+                  {'navigation' !== config.type && (
+                    <fieldset className='primary-fieldset edit-block'>
+                      <label>
+                        <span className='edit-label'>
+                          Additional Columns
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>You can specify additional columns to display in tooltips and / or the supporting data table.</p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        </span>
+                      </label>
+                      {additionalColumns.map(val => (
+                        <fieldset className='edit-block' key={val}>
+                          <button
+                            className='remove-column'
+                            onClick={event => {
+                              event.preventDefault()
+                              removeAdditionalColumn(val)
+                            }}
+                          >
+                            Remove
+                          </button>
+                          <label>
+                            <span className='edit-label column-heading'>Column</span>
+                            <select
+                              value={config.columns[val] ? config.columns[val].name : getColumns()[0]}
+                              onChange={event => {
+                                editColumn(val, 'name', event.target.value)
+                              }}
+                            >
+                              {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} />
+                          <ul className='column-edit'>
+                            <li className='three-col'>
+                              <TextField value={config.columns[val].prefix} section='columns' subsection={val} fieldName='prefix' label='Prefix' updateField={updateField} />
+                              <TextField value={config.columns[val].suffix} section='columns' subsection={val} fieldName='suffix' label='Suffix' updateField={updateField} />
+                              <TextField type='number' value={config.columns[val].roundToPlace} section='columns' subsection={val} fieldName='roundToPlace' label='Round' updateField={updateField} />
+                            </li>
+                            <li>
+                              <label className='checkbox'>
+                                <input
+                                  type='checkbox'
+                                  checked={config.columns[val].commas}
+                                  onChange={event => {
+                                    editColumn(val, 'commas', event.target.checked)
+                                  }}
+                                />
+                                <span className='edit-label'>Add Commas to Numbers</span>
+                              </label>
+                            </li>
+                            <li>
+                              {config.table.showVertical && (
+                                <label className='checkbox'>
                                   <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
-                                        }
-                                      })
+                                    type='checkbox'
+                                    checked={config.columns[val].dataTable}
+                                    onChange={event => {
+                                      editColumn(val, 'dataTable', event.target.checked)
                                     }}
                                   />
+                                  <span className='edit-label'>Show in Data Table</span>
                                 </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>
-
-                        <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>
-                  <AccordionItemHeading>
-                    <AccordionItemButton>Columns</AccordionItemButton>
-                  </AccordionItemHeading>
-                  <AccordionItemPanel>
-                    {'navigation' !== config.type && (
-                      <fieldset className='primary-fieldset edit-block'>
-                        <label>
-                          <span className='edit-label'>
-                            Additional Columns
-                            <Tooltip style={{ textTransform: 'none' }}>
-                              <Tooltip.Target>
-                                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                              </Tooltip.Target>
-                              <Tooltip.Content>
-                                <p>You can specify additional columns to display in tooltips and / or the supporting data table.</p>
-                              </Tooltip.Content>
-                            </Tooltip>
-                          </span>
-                        </label>
-                        {additionalColumns.map(val => (
-                          <fieldset className='edit-block' key={val}>
-                            <button
-                              className='remove-column'
-                              onClick={event => {
-                                event.preventDefault()
-                                removeAdditionalColumn(val)
-                              }}
-                            >
-                              Remove
-                            </button>
-                            <label>
-                              <span className='edit-label column-heading'>Column</span>
-                              <select
-                                value={config.columns[val] ? config.columns[val].name : getColumns()[0]}
-                                onChange={event => {
-                                  editColumn(val, 'name', event.target.value)
-                                }}
-                              >
-                                {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} />
-                            <ul className='column-edit'>
-                              <li className='three-col'>
-                                <TextField value={config.columns[val].prefix} section='columns' subsection={val} fieldName='prefix' label='Prefix' updateField={updateField} />
-                                <TextField value={config.columns[val].suffix} section='columns' subsection={val} fieldName='suffix' label='Suffix' updateField={updateField} />
-                                <TextField type='number' value={config.columns[val].roundToPlace} section='columns' subsection={val} fieldName='roundToPlace' label='Round' updateField={updateField} />
-                              </li>
+                              )}
+                            </li>
+                            {config.visualizationType === 'Pie' && (
                               <li>
                                 <label className='checkbox'>
                                   <input
                                     type='checkbox'
-                                    checked={config.columns[val].commas}
+                                    checked={config.columns[val].showInViz}
                                     onChange={event => {
-                                      editColumn(val, 'commas', event.target.checked)
+                                      editColumn(val, 'showInViz', event.target.checked)
                                     }}
                                   />
-                                  <span className='edit-label'>Add Commas to Numbers</span>
+                                  <span className='edit-label'>Show in Visualization</span>
                                 </label>
                               </li>
-                              <li>
-                                {config.table.showVertical && (
+                            )}
+
+                            {/* disable for now */}
+
+                            <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>
+
+                            {config.visualizationType === 'Forest Plot' && (
+                              <>
+                                <li>
                                   <label className='checkbox'>
                                     <input
                                       type='checkbox'
-                                      checked={config.columns[val].dataTable}
+                                      checked={config.columns[val].forestPlot || false}
                                       onChange={event => {
-                                        editColumn(val, 'dataTable', event.target.checked)
+                                        editColumn(val, 'forestPlot', event.target.checked)
                                       }}
                                     />
-                                    <span className='edit-label'>Show in Data Table</span>
+                                    <span className='edit-label'>Show in Forest Plot</span>
                                   </label>
-                                )}
-                              </li>
-                              {config.visualizationType === 'Pie' && (
+                                </li>
                                 <li>
                                   <label className='checkbox'>
                                     <input
                                       type='checkbox'
-                                      checked={config.columns[val].showInViz}
+                                      checked={config.columns[val].forestPlotAlignRight || false}
                                       onChange={event => {
-                                        editColumn(val, 'showInViz', event.target.checked)
+                                        editColumn(val, 'forestPlotAlignRight', event.target.checked)
                                       }}
                                     />
-                                    <span className='edit-label'>Show in Visualization</span>
+                                    <span className='edit-label'>Align Right</span>
                                   </label>
                                 </li>
-                              )}
-
-                              {/* disable for now */}
-
-                              <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>
 
-                              {config.visualizationType === 'Forest Plot' && (
-                                <>
-                                  <li>
-                                    <label className='checkbox'>
-                                      <input
-                                        type='checkbox'
-                                        checked={config.columns[val].forestPlot || false}
-                                        onChange={event => {
-                                          editColumn(val, 'forestPlot', event.target.checked)
-                                        }}
-                                      />
-                                      <span className='edit-label'>Show in Forest Plot</span>
-                                    </label>
-                                  </li>
+                                {!config.columns[val].forestPlotAlignRight && (
                                   <li>
-                                    <label className='checkbox'>
+                                    <label className='text'>
+                                      <span className='edit-label'>Forest Plot Starting Point</span>
                                       <input
-                                        type='checkbox'
-                                        checked={config.columns[val].forestPlotAlignRight || false}
+                                        type='number'
+                                        value={config.columns[val].forestPlotStartingPoint || 0}
                                         onChange={event => {
-                                          editColumn(val, 'forestPlotAlignRight', event.target.checked)
+                                          editColumn(val, 'forestPlotStartingPoint', event.target.value)
                                         }}
                                       />
-                                      <span className='edit-label'>Align Right</span>
                                     </label>
                                   </li>
-
-                                  {!config.columns[val].forestPlotAlignRight && (
-                                    <li>
-                                      <label className='text'>
-                                        <span className='edit-label'>Forest Plot Starting Point</span>
-                                        <input
-                                          type='number'
-                                          value={config.columns[val].forestPlotStartingPoint || 0}
-                                          onChange={event => {
-                                            editColumn(val, 'forestPlotStartingPoint', event.target.value)
-                                          }}
-                                        />
-                                      </label>
-                                    </li>
-                                  )}
-                                </>
-                              )}
-                            </ul>
+                                )}
+                              </>
+                            )}
+                          </ul>
+                        </fieldset>
+                      ))}
+                      <button
+                        className={'btn full-width'}
+                        onClick={event => {
+                          event.preventDefault()
+                          addAdditionalColumn(additionalColumns.length + 1)
+                        }}
+                      >
+                        Add Column
+                      </button>
+                    </fieldset>
+                  )}
+                  {'category' === config.legend.type && (
+                    <fieldset className='primary-fieldset edit-block'>
+                      <label>
+                        <span className='edit-label'>
+                          Additional Category
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>You can provide additional categories to ensure they appear in the legend</p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        </span>
+                      </label>
+                      {config.legend.additionalCategories &&
+                        config.legend.additionalCategories.map((val, i) => (
+                          <fieldset className='edit-block' key={val}>
+                            <button
+                              className='remove-column'
+                              onClick={event => {
+                                event.preventDefault()
+                                const updatedAdditionaCategories = [...config.legend.additionalCategories]
+                                updatedAdditionaCategories.splice(i, 1)
+                                updateField('legend', null, 'additionalCategories', updatedAdditionaCategories)
+                              }}
+                            >
+                              Remove
+                            </button>
+                            <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
-                          className={'btn full-width'}
-                          onClick={event => {
-                            event.preventDefault()
-                            addAdditionalColumn(additionalColumns.length + 1)
-                          }}
-                        >
-                          Add Column
-                        </button>
-                      </fieldset>
-                    )}
-                    {'category' === config.legend.type && (
-                      <fieldset className='primary-fieldset edit-block'>
-                        <label>
-                          <span className='edit-label'>
-                            Additional Category
-                            <Tooltip style={{ textTransform: 'none' }}>
-                              <Tooltip.Target>
-                                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                              </Tooltip.Target>
-                              <Tooltip.Content>
-                                <p>You can provide additional categories to ensure they appear in the legend</p>
-                              </Tooltip.Content>
-                            </Tooltip>
-                          </span>
-                        </label>
-                        {config.legend.additionalCategories &&
-                          config.legend.additionalCategories.map((val, i) => (
-                            <fieldset className='edit-block' key={val}>
-                              <button
-                                className='remove-column'
-                                onClick={event => {
-                                  event.preventDefault()
-                                  const updatedAdditionaCategories = [...config.legend.additionalCategories]
-                                  updatedAdditionaCategories.splice(i, 1)
-                                  updateField('legend', null, 'additionalCategories', updatedAdditionaCategories)
-                                }}
-                              >
-                                Remove
-                              </button>
-                              <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
-                          className={'btn full-width'}
-                          onClick={event => {
-                            event.preventDefault()
-                            const updatedAdditionaCategories = [...(config.legend.additionalCategories || [])]
-                            updatedAdditionaCategories.push('')
-                            updateField('legend', null, 'additionalCategories', updatedAdditionaCategories)
-                          }}
-                        >
-                          Add Category
-                        </button>
-                      </fieldset>
-                    )}
-                  </AccordionItemPanel>
-                </AccordionItem>
-              )}
-              {/* End Columns */}
-              {visHasLegend() && (
-                <AccordionItem>
-                  <AccordionItemHeading>
-                    <AccordionItemButton>Legend</AccordionItemButton>
-                  </AccordionItemHeading>
-                  <AccordionItemPanel>
-                    <CheckBox value={config.legend.reverseLabelOrder} section='legend' fieldName='reverseLabelOrder' label='Reverse Labels' updateField={updateField} />
-                    {/* <fieldset className="checkbox-group">
+                      <button
+                        className={'btn full-width'}
+                        onClick={event => {
+                          event.preventDefault()
+                          const updatedAdditionaCategories = [...(config.legend.additionalCategories || [])]
+                          updatedAdditionaCategories.push('')
+                          updateField('legend', null, 'additionalCategories', updatedAdditionaCategories)
+                        }}
+                      >
+                        Add Category
+                      </button>
+                    </fieldset>
+                  )}
+                </AccordionItemPanel>
+              </AccordionItem>
+            )}
+            {/* End Columns */}
+            {visHasLegend() && (
+              <AccordionItem>
+                <AccordionItemHeading>
+                  <AccordionItemButton>Legend</AccordionItemButton>
+                </AccordionItemHeading>
+                <AccordionItemPanel>
+                  <CheckBox value={config.legend.reverseLabelOrder} section='legend' fieldName='reverseLabelOrder' label='Reverse Labels' updateField={updateField} />
+                  {/* <fieldset className="checkbox-group">
                     <CheckBox value={config.legend.dynamicLegend} section="legend" fieldName="dynamicLegend" label="Dynamic Legend" updateField={updateField}/>
                     {config.legend.dynamicLegend && (
                       <>
@@ -2557,57 +2596,128 @@ const EditorPanel = () => {
                       </>
                     )}
                   </fieldset> */}
-                    <CheckBox
-                      value={config.legend.hide ? true : false}
-                      section='legend'
-                      fieldName='hide'
-                      label='Hide Legend'
-                      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>With a single-series chart, consider hiding the legend to reduce visual clutter.</p>
-                          </Tooltip.Content>
-                        </Tooltip>
-                      }
-                    />
-                    {/* {config.visualizationType === 'Box Plot' &&
+                  <CheckBox
+                    value={config.legend.hide ? true : false}
+                    section='legend'
+                    fieldName='hide'
+                    label='Hide Legend'
+                    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>With a single-series chart, consider hiding the legend to reduce visual clutter.</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                  />
+                  {/* {config.visualizationType === 'Box Plot' &&
                     <>
                       <CheckBox value={config.boxplot.legend.displayHowToReadText} fieldName='displayHowToReadText' section='boxplot' subsection='legend' label='Display How To Read Text' updateField={updateField} />
                       <TextField type='textarea' value={config.boxplot.legend.howToReadText} updateField={updateField} fieldName='howToReadText' section='boxplot' subsection='legend' label='How to read text' />
                     </>
                   } */}
-                    {config.visualizationType === 'Line' && <CheckBox value={config.legend.lineMode} section='legend' fieldName='lineMode' label='Show Lined Style Legend' updateField={updateField} />}
-                    {config.visualizationType === 'Bar' && config.visualizationSubType === 'regular' && config.runtime.seriesKeys.length === 1 && (
-                      <Select value={config.legend.colorCode} section='legend' fieldName='colorCode' label='Color code by category' initial='Select' updateField={updateField} options={getDataValueOptions(data)} />
-                    )}
-                    <Select value={config.legend.behavior} section='legend' fieldName='behavior' label='Legend Behavior (When clicked)' updateField={updateField} options={['highlight', 'isolate']} />
-                    {config.legend.behavior === 'highlight' && config.tooltips.singleSeries && <CheckBox value={config.legend.highlightOnHover} section='legend' fieldName='highlightOnHover' label='HIGHLIGHT DATA SERIES ON HOVER' updateField={updateField} />}
-                    <TextField value={config.legend.label} section='legend' fieldName='label' label='Title' updateField={updateField} />
-                    <Select value={config.legend.position} section='legend' fieldName='position' label='Position' updateField={updateField} options={['right', 'left', 'bottom']} />
-                    {config.legend.position === 'bottom' && (
-                      <>
-                        <CheckBox value={config.legend.singleRow} section='legend' fieldName='singleRow' label='Single Row Legend' updateField={updateField} />
-                        <CheckBox value={config.legend.verticalSorted} section='legend' fieldName='verticalSorted' label='Vertical sorted Legend' updateField={updateField} />
-                      </>
-                    )}
-                    <TextField type='textarea' value={config.legend.description} updateField={updateField} section='legend' fieldName='description' label='Legend Description' />
-                  </AccordionItemPanel>
-                </AccordionItem>
-              )}
-              {visSupportsFilters() && (
-                <AccordionItem>
-                  <AccordionItemHeading>
-                    <AccordionItemButton>Filters</AccordionItemButton>
-                  </AccordionItemHeading>
-                  <AccordionItemPanel>
-                    {config.filters && (
-                      <>
-                        {/* prettier-ignore */}
-                        <Select
+                  {config.visualizationType === 'Line' && <CheckBox value={config.legend.lineMode} section='legend' fieldName='lineMode' label='Show Lined Style Legend' updateField={updateField} />}
+                  {config.visualizationType === 'Bar' && config.visualizationSubType === 'regular' && config.runtime.seriesKeys.length === 1 && (
+                    <Select value={config.legend.colorCode} section='legend' fieldName='colorCode' label='Color code by category' initial='Select' updateField={updateField} options={getDataValueOptions(data)} />
+                  )}
+                  <Select value={config.legend.behavior} section='legend' fieldName='behavior' label='Legend Behavior (When clicked)' updateField={(...[section, , fieldName, value]) => updateBehavior(section, fieldName, value)} options={['highlight', 'isolate']} />
+                  {visHasLegendAxisAlign() && <CheckBox value={config.legend.axisAlign} fieldName='axisAlign' section='legend' label='Align to Axis on Isolate' updateField={updateField} />}
+
+                  {config.legend.behavior === 'highlight' && config.tooltips.singleSeries && <CheckBox value={config.legend.highlightOnHover} section='legend' fieldName='highlightOnHover' label='HIGHLIGHT DATA SERIES ON HOVER' updateField={updateField} />}
+
+                  {/* start: isolated values */}
+                  {visHasSelectableLegendValues && config.legend.behavior === 'isolate' && !colorCodeByCategory && (
+                    <fieldset className='primary-fieldset edit-block' key={'additional-highlight-values'}>
+                      <label>
+                        <span className='edit-label'>
+                          Isolate Data Series
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>You can choose data series that are shown on load. Others will be added when the user clicks on them in the legend.</p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        </span>
+                      </label>
+                      {config.legend.seriesHighlight &&
+                        config.legend.seriesHighlight.map((val, i) => (
+                          <fieldset className='edit-block' key={`${val}-${i}`}>
+                            <button
+                              className='remove-column'
+                              onClick={event => {
+                                event.preventDefault()
+                                const updatedSeriesHighlight = [...config.legend.seriesHighlight]
+                                updatedSeriesHighlight.splice(i, 1)
+                                updateField('legend', null, 'seriesHighlight', updatedSeriesHighlight)
+                                if (!updatedSeriesHighlight.length) {
+                                  highlightReset()
+                                }
+                              }}
+                            >
+                              Remove
+                            </button>
+                            <Select
+                              value={config.legend.seriesHighlight[i]}
+                              fieldName='seriesHighlight'
+                              label='Isolate Value'
+                              onChange={e => {
+                                const updatedSeriesHighlight = [...config.legend.seriesHighlight]
+                                if (!updatedSeriesHighlight.includes(e.target.value)) {
+                                  updatedSeriesHighlight[i] = e.target.value
+                                  updateSeriesIsolateValues([...updatedSeriesHighlight])
+                                }
+                              }}
+                              options={getLegendColumns()}
+                            />
+                          </fieldset>
+                        ))}
+                      <button
+                        className={'btn full-width'}
+                        onClick={event => {
+                          event.preventDefault()
+                          const legendColumns = getLegendColumns()
+                          const updatedSeriesHighlight = [...config.legend.seriesHighlight]
+                          const seriesLength = updatedSeriesHighlight.length
+                          if (seriesLength < legendColumns.length) {
+                            const [newSeriesHighlight] = legendColumns.filter(d => !updatedSeriesHighlight.includes(d))
+                            updatedSeriesHighlight.push(newSeriesHighlight)
+                            updateSeriesIsolateValues([...updatedSeriesHighlight])
+                          }
+                        }}
+                      >
+                        Add Isolate Value
+                      </button>
+                    </fieldset>
+                  )}
+                  {/* end: isolated values */}
+
+                  <TextField value={config.legend.label} section='legend' fieldName='label' label='Title' updateField={updateField} />
+                  <Select value={config.legend.position} section='legend' fieldName='position' label='Position' updateField={updateField} options={['right', 'left', 'bottom']} />
+                  {config.legend.position === 'bottom' && (
+                    <>
+                      <CheckBox value={config.legend.singleRow} section='legend' fieldName='singleRow' label='Single Row Legend' updateField={updateField} />
+                      <CheckBox value={config.legend.verticalSorted} section='legend' fieldName='verticalSorted' label='Vertical sorted Legend' updateField={updateField} />
+                    </>
+                  )}
+                  <TextField type='textarea' value={config.legend.description} updateField={updateField} section='legend' fieldName='description' label='Legend Description' />
+                </AccordionItemPanel>
+              </AccordionItem>
+            )}
+            {visSupportsFilters() && (
+              <AccordionItem>
+                <AccordionItemHeading>
+                  <AccordionItemButton>Filters</AccordionItemButton>
+                </AccordionItemHeading>
+                <AccordionItemPanel>
+                  {config.filters && (
+                    <>
+                      {/* prettier-ignore */}
+                      <Select
                         value={config.filterBehavior}
                         fieldName='filterBehavior'
                         label='Filter Behavior'
@@ -2624,150 +2734,160 @@ const EditorPanel = () => {
                           </Tooltip>
                         }
                         />
-                        <br />
-                      </>
-                    )}
-                    {config.filters && (
-                      <ul className='filters-list'>
-                        {/* Whether filters should apply onChange or Apply Button */}
-
-                        {config.filters.map((filter, index) => {
-                          if (filter.type === 'url') return <></>
-
-                          return (
-                            <fieldset className='edit-block' key={index}>
-                              <button
-                                type='button'
-                                className='remove-column'
-                                onClick={() => {
-                                  removeFilter(index)
+                      <br />
+                    </>
+                  )}
+                  {config.filters && (
+                    <ul className='filters-list'>
+                      {/* Whether filters should apply onChange or Apply Button */}
+
+                      {config.filters.map((filter, index) => {
+                        if (filter.type === 'url') return <></>
+
+                        return (
+                          <fieldset className='edit-block' key={index}>
+                            <button
+                              type='button'
+                              className='remove-column'
+                              onClick={() => {
+                                removeFilter(index)
+                              }}
+                            >
+                              Remove
+                            </button>
+                            <label>
+                              <span className='edit-label column-heading'>Filter</span>
+                              <select
+                                value={filter.columnName}
+                                onChange={e => {
+                                  updateFilterProp('columnName', index, e.target.value)
                                 }}
                               >
-                                Remove
-                              </button>
-                              <label>
-                                <span className='edit-label column-heading'>Filter</span>
-                                <select
-                                  value={filter.columnName}
-                                  onChange={e => {
-                                    updateFilterProp('columnName', index, e.target.value)
-                                  }}
-                                >
-                                  <option value=''>- Select Option -</option>
-                                  {getFilters().map((dataKey, index) => (
-                                    <option value={dataKey} key={index}>
-                                      {dataKey}
-                                    </option>
-                                  ))}
-                                </select>
-                              </label>
+                                <option value=''>- Select Option -</option>
+                                {getFilters().map((dataKey, index) => (
+                                  <option value={dataKey} key={index}>
+                                    {dataKey}
+                                  </option>
+                                ))}
+                              </select>
+                            </label>
 
-                              <label>
-                                <span className='edit-showDropdown column-heading'>Show Filter Input</span>
-                                <input
-                                  type='checkbox'
-                                  checked={filter.showDropdown === undefined ? true : filter.showDropdown}
-                                  onChange={e => {
-                                    updateFilterProp('showDropdown', index, e.target.checked)
-                                  }}
-                                />
-                              </label>
+                            <label>
+                              <span className='edit-showDropdown column-heading'>Show Filter Input</span>
+                              <input
+                                type='checkbox'
+                                checked={filter.showDropdown === undefined ? true : filter.showDropdown}
+                                onChange={e => {
+                                  updateFilterProp('showDropdown', index, e.target.checked)
+                                }}
+                              />
+                            </label>
 
-                              <label>
-                                <span className='edit-label column-heading'>Filter Style</span>
+                            <label>
+                              <span className='edit-label column-heading'>Filter Style</span>
 
-                                <select
-                                  value={filter.filterStyle}
-                                  onChange={e => {
-                                    updateFilterProp('filterStyle', index, e.target.value)
-                                  }}
-                                >
-                                  {filterStyleOptions.map((item, index) => {
-                                    return (
-                                      <option key={`filter-style-${index}`} value={item}>
-                                        {item}
-                                      </option>
-                                    )
-                                  })}
-                                </select>
-                              </label>
-                              <label>
-                                <span className='edit-label column-heading'>Label</span>
-                                <input
-                                  type='text'
-                                  value={filter.label}
-                                  onChange={e => {
-                                    updateFilterProp('label', index, e.target.value)
-                                  }}
-                                />
-                              </label>
+                              <select
+                                value={filter.filterStyle}
+                                onChange={e => {
+                                  updateFilterProp('filterStyle', index, e.target.value)
+                                }}
+                              >
+                                {filterStyleOptions.map((item, index) => {
+                                  return (
+                                    <option key={`filter-style-${index}`} value={item}>
+                                      {item}
+                                    </option>
+                                  )
+                                })}
+                              </select>
+                            </label>
+                            <label>
+                              <span className='edit-label column-heading'>Label</span>
+                              <input
+                                type='text'
+                                value={filter.label}
+                                onChange={e => {
+                                  updateFilterProp('label', index, e.target.value)
+                                }}
+                              />
+                            </label>
 
-                              <label>
-                                <span className='edit-filterOrder column-heading'>Filter Order</span>
-                                <select value={filter.order ? filter.order : 'asc'} onChange={e => updateFilterProp('order', index, e.target.value)}>
-                                  {filterOrderOptions.map((option, index) => {
-                                    return (
-                                      <option value={option.value} key={`filter-${index}`}>
-                                        {option.label}
-                                      </option>
-                                    )
-                                  })}
-                                </select>
+                            <label>
+                              <span className='edit-label column-heading'>Default Value Set By Query String Parameter</span>
+                              <input
+                                type='text'
+                                value={filter.setByQueryParameter}
+                                onChange={e => {
+                                  updateFilterProp('setByQueryParameter', index, e.target.value)
+                                }}
+                              />
+                            </label>
 
-                                {filter.order === 'cust' && (
-                                  <DragDropContext onDragEnd={({ source, destination }) => handleFilterOrder(source.index, destination.index, index, config.filters[index])}>
-                                    <Droppable droppableId='filter_order'>
-                                      {provided => (
-                                        <ul {...provided.droppableProps} className='sort-list' ref={provided.innerRef} style={{ marginTop: '1em' }}>
-                                          {config.filters[index]?.values.map((value, index) => {
-                                            return (
-                                              <Draggable key={value} draggableId={`draggableFilter-${value}`} index={index}>
-                                                {(provided, snapshot) => (
-                                                  <li>
-                                                    <div className={snapshot.isDragging ? 'currently-dragging' : ''} style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
-                                                      {value}
-                                                    </div>
-                                                  </li>
-                                                )}
-                                              </Draggable>
-                                            )
-                                          })}
-                                          {provided.placeholder}
-                                        </ul>
-                                      )}
-                                    </Droppable>
-                                  </DragDropContext>
-                                )}
-                              </label>
-                            </fieldset>
-                          )
-                        })}
-                      </ul>
-                    )}
-                    {!config.filters && <p style={{ textAlign: 'center' }}>There are currently no filters.</p>}
-                    <button type='button' onClick={addNewFilter} className='btn full-width'>
-                      Add Filter
-                    </button>
-                  </AccordionItemPanel>
-                </AccordionItem>
-              )}
-              <Panels.Visual name='Visual' />
-              {/* Spark Line has no data table */}
-              {config.visualizationType !== 'Spark Line' && (
-                <AccordionItem>
-                  <AccordionItemHeading>
-                    <AccordionItemButton>Data Table</AccordionItemButton>
-                  </AccordionItemHeading>
-                  <AccordionItemPanel>
-                    <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>
-        </section>
+                            <label>
+                              <span className='edit-filterOrder column-heading'>Filter Order</span>
+                              <select value={filter.order ? filter.order : 'asc'} onChange={e => updateFilterProp('order', index, e.target.value)}>
+                                {filterOrderOptions.map((option, index) => {
+                                  return (
+                                    <option value={option.value} key={`filter-${index}`}>
+                                      {option.label}
+                                    </option>
+                                  )
+                                })}
+                              </select>
+
+                              {filter.order === 'cust' && (
+                                <DragDropContext onDragEnd={({ source, destination }) => handleFilterOrder(source.index, destination.index, index, config.filters[index])}>
+                                  <Droppable droppableId='filter_order'>
+                                    {provided => (
+                                      <ul {...provided.droppableProps} className='sort-list' ref={provided.innerRef} style={{ marginTop: '1em' }}>
+                                        {config.filters[index]?.values.map((value, index) => {
+                                          return (
+                                            <Draggable key={value} draggableId={`draggableFilter-${value}`} index={index}>
+                                              {(provided, snapshot) => (
+                                                <li>
+                                                  <div className={snapshot.isDragging ? 'currently-dragging' : ''} style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+                                                    {value}
+                                                  </div>
+                                                </li>
+                                              )}
+                                            </Draggable>
+                                          )
+                                        })}
+                                        {provided.placeholder}
+                                      </ul>
+                                    )}
+                                  </Droppable>
+                                </DragDropContext>
+                              )}
+                            </label>
+                          </fieldset>
+                        )
+                      })}
+                    </ul>
+                  )}
+                  {!config.filters && <p style={{ textAlign: 'center' }}>There are currently no filters.</p>}
+                  <button type='button' onClick={addNewFilter} className='btn full-width'>
+                    Add Filter
+                  </button>
+                </AccordionItemPanel>
+              </AccordionItem>
+            )}
+            <Panels.Visual name='Visual' />
+            {/* Spark Line has no data table */}
+            {config.visualizationType !== 'Spark Line' && (
+              <AccordionItem>
+                <AccordionItemHeading>
+                  <AccordionItemButton>Data Table</AccordionItemButton>
+                </AccordionItemHeading>
+                <AccordionItemPanel>
+                  <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} />}
+        </Layout.Sidebar>
       </ErrorBoundary>
     </EditorPanelContext.Provider>
   )