@cdc/chart 4.24.5 → 4.24.9

package/src/components/EditorPanel/EditorPanel.tsx

@@ -1,7 +1,14 @@
 import { useState, useEffect, useCallback, memo, useContext } from 'react'
 import { DragDropContext, Droppable } from '@hello-pangea/dnd'
+import chroma from 'chroma-js'
 import { isDateScale } from '@cdc/core/helpers/cove/date'
-import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import {
+  Accordion,
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton
+} from 'react-accessible-accordion'
 import Layout from '@cdc/core/components/Layout'
 
 // @cdc/core
@@ -13,6 +20,8 @@ import DataTableEditor from '@cdc/core/components/EditorPanel/DataTableEditor'
 import VizFilterEditor from '@cdc/core/components/EditorPanel/VizFilterEditor'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import { Select, TextField, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
+import { viewports } from '@cdc/core/helpers/getViewport'
+import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 
 // chart components
 import Panels from './components/Panels'
@@ -60,17 +69,16 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
     'Dashed Small': '\u002D \u002D \u002D',
     'Dashed Medium': '\u2013 \u2013',
     'Dashed Large': '\u2014 \u2013',
-    'Open Circles': '\u25EF'
+    'Open Circles': '\u25EF',
+    'Filled Circles': ''
   }
 
   const getStyleOptions = type => {
-    if (config.visualizationType === 'Line' || isCombo) {
-      const options = Object.keys(lineCodes)
-      if (type === 'suppression') {
-        return options.slice(0, -1)
-      } else {
-        return options
-      }
+    const options = Object.keys(lineCodes)
+    if (type === 'suppression') {
+      return options.slice(0, -1)
+    } else {
+      return options
     }
   }
 
@@ -107,7 +115,11 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
       displayTable: true,
       symbol: '',
       iconCode: '',
-      lineCode: ''
+      lineCode: '',
+      hideBarSymbol: false,
+      hideLineStyle: false,
+      circleSize: 6,
+      displayGray: true
     }
     preliminaryData.push(defaultValues)
     updateConfig({ ...config, preliminaryData })
@@ -133,44 +145,50 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
   return (
     <>
       {config.preliminaryData &&
-        config.preliminaryData?.map(({ column, displayLegend, displayTable, displayTooltip, label, seriesKey, style, symbol, type, value }, i) => {
-          return (
-            <div key={`preliminaryData-${i}`} className='edit-block'>
-              <p> {type === 'suppression' ? 'Suppressed' : 'Effect'} Data</p>
-              <button
-                type='button'
-                className='remove-column'
-                onClick={event => {
-                  event.preventDefault()
-                  removeColumn(i)
-                }}
-              >
-                Remove
-              </button>
-
-              <Select value={type} initial={config.visualizationType == 'Bar' ? '' : 'Select'} fieldName='type' label='Type' updateField={(_, __, fieldName, value) => update(fieldName, value, i)} options={getTypeOptions()} />
-              {type === 'suppression' ? (
-                <>
-                  <Select
-                    tooltip={
-                      <Tooltip style={{ textTransform: 'none' }}>
-                        <Tooltip.Target>
-                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                        </Tooltip.Target>
-                        <Tooltip.Content>
-                          <p>If no “Data Series" is selected, the symbol will be applied to "all" suppressed values indicated in the dataset.</p>
-                        </Tooltip.Content>
-                      </Tooltip>
-                    }
-                    value={column}
-                    initial='Select'
-                    fieldName='column'
-                    label='Add Data Series'
-                    updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
-                    options={config.runtime?.seriesKeys}
-                  />
-                  <TextField value={value} fieldName='value' label='Suppressed Data  Value' updateField={(_, __, fieldName, value) => update(fieldName, value, i)} />
-                  {(hasComboLineSeries || config.visualizationType === 'Line') && (
+        config.preliminaryData?.map(
+          (
+            {
+              displayGray,
+              circleSize,
+              column,
+              displayLegend,
+              displayTable,
+              displayTooltip,
+              label,
+              seriesKey,
+              style,
+              symbol,
+              type,
+              value,
+              hideBarSymbol,
+              hideLineStyle
+            },
+            i
+          ) => {
+            return (
+              <div key={`preliminaryData-${i}`} className='edit-block'>
+                <p> {type === 'suppression' ? 'Suppressed' : 'Effect'} Data</p>
+                <button
+                  type='button'
+                  className='remove-column'
+                  onClick={event => {
+                    event.preventDefault()
+                    removeColumn(i)
+                  }}
+                >
+                  Remove
+                </button>
+
+                <Select
+                  value={type}
+                  initial={config.visualizationType == 'Bar' ? '' : 'Select'}
+                  fieldName='type'
+                  label='Type'
+                  updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                  options={getTypeOptions()}
+                />
+                {type === 'suppression' ? (
+                  <>
                     <Select
                       tooltip={
                         <Tooltip style={{ textTransform: 'none' }}>
@@ -178,121 +196,394 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
                             <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                           </Tooltip.Target>
                           <Tooltip.Content>
-                            <p>The recommended approach for presenting data is to include a footnote indicating any data suppression.</p>
+                            <p>
+                              {' '}
+                              Without a selected "Data Series", the suppression symbol will be applied for all series in
+                              the current dataset visualization. However, choosing a specific "data series" will isolate
+                              the suppression to that series.
+                            </p>
                           </Tooltip.Content>
                         </Tooltip>
                       }
-                      value={style}
+                      value={column}
                       initial='Select'
-                      fieldName='style'
-                      label={'suppression line style'}
+                      fieldName='column'
+                      label='Add Data Series'
                       updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
-                      options={getStyleOptions(type)}
+                      options={config.runtime?.seriesKeys}
                     />
-                  )}
+                    <TextField
+                      value={value}
+                      fieldName='value'
+                      label='Suppressed Data  Value'
+                      updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                    />
+                    {(hasComboLineSeries || config.visualizationType === 'Line') && (
+                      <>
+                        <Select
+                          tooltip={
+                            <Tooltip style={{ textTransform: 'none' }}>
+                              <Tooltip.Target>
+                                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                              </Tooltip.Target>
+                              <Tooltip.Content>
+                                <p>
+                                  The recommended approach for presenting data is to include a footnote indicating any
+                                  data suppression.
+                                </p>
+                              </Tooltip.Content>
+                            </Tooltip>
+                          }
+                          value={style}
+                          initial='Select'
+                          fieldName='style'
+                          label={'suppression line style'}
+                          updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                          options={getStyleOptions(type)}
+                        />
+                        <CheckBox
+                          value={hideLineStyle}
+                          fieldName='hideLineStyle'
+                          label='Hide Suppressed line Style'
+                          updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                        />
+                      </>
+                    )}
 
-                  {(hasComboBarSeries || config.visualizationType === 'Bar') && (
+                    {(hasComboBarSeries || config.visualizationType === 'Bar') && (
+                      <>
+                        <Select
+                          tooltip={
+                            <Tooltip style={{ textTransform: 'none' }}>
+                              <Tooltip.Target>
+                                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                              </Tooltip.Target>
+                              <Tooltip.Content>
+                                <p>
+                                  A symbol is <i>required</i> to indicate suppressed data. We suggest "double
+                                  asterisks." If "double asterisks" are already used elsewhere (e.g., footnotes), please
+                                  select an alternative symbol from the menu to denote data suppression.
+                                </p>
+                              </Tooltip.Content>
+                            </Tooltip>
+                          }
+                          value={symbol}
+                          initial='Select'
+                          fieldName='symbol'
+                          label={config.visualizationType === 'Combo' ? 'suppression bar symbol' : 'suppression symbol'}
+                          updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                          options={getSymbolOptions()}
+                        />
+                        <CheckBox
+                          value={hideBarSymbol}
+                          fieldName='hideBarSymbol'
+                          label='Hide Suppressed Bar Symbol  '
+                          updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                        />
+                      </>
+                    )}
+
+                    <TextField
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>This label will display in the tooltip and legend.</p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                      value={label ? label : 'Suppressed'}
+                      fieldName='label'
+                      label='Suppressed Data Label'
+                      placeholder=''
+                      updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                    />
+                    <CheckBox
+                      display={config.visualizationSubType === 'regular'}
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>
+                              Deselecting the "Display In Tooltips" option prevents suppressed values from appearing in
+                              tooltips.
+                            </p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                      value={displayTooltip}
+                      fieldName='displayTooltip'
+                      label='Display in tooltips'
+                      updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                    />
+                    <CheckBox
+                      display={config.visualizationSubType === 'regular'}
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>
+                              Deselecting "Display in Legend" indicates that you do not want to display suppressed data
+                              in the legend.
+                            </p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                      value={displayLegend}
+                      fieldName='displayLegend'
+                      label='Display in legend'
+                      updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                    />
+                    <CheckBox
+                      display={config.visualizationSubType === 'regular'}
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>
+                              Deselecting "Display In Data Table" indicates that you do not want to display suppressed
+                              data in the data table.
+                            </p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                      value={displayTable}
+                      fieldName='displayTable'
+                      label='Display in table'
+                      updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                    />
+                    <CheckBox
+                      display={config.visualizationSubType === 'regular'}
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>Selecting this option will apply to chart, tooltip hover, legend, and data table.</p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                      value={displayGray}
+                      fieldName='displayGray'
+                      label='Highlight Suppressed Data In Gray'
+                      updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                    />
+                  </>
+                ) : (
+                  <>
                     <Select
+                      value={seriesKey}
+                      initial='Select'
+                      fieldName='seriesKey'
+                      label='ASSOCIATE TO SERIES'
+                      updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                      options={config.runtime.lineSeriesKeys ?? config.runtime?.seriesKeys}
+                    />
+                    <Select
+                      value={column}
+                      initial='Select'
+                      fieldName='column'
+                      label='COLUMN WITH CONFIGURATION VALUE'
+                      updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                      options={getColumnOptions()}
+                    />
+                    <TextField
                       tooltip={
                         <Tooltip style={{ textTransform: 'none' }}>
                           <Tooltip.Target>
                             <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                           </Tooltip.Target>
                           <Tooltip.Content>
-                            <p>The suggested method for presenting suppressed data is to use "double asterisks". If "double asterisks" are already used elsewhere (e.g., footnotes), please select an alternative symbol from the menu to denote data suppression.</p>
+                            <p>
+                              If 'Filled Circles' is selected as the style, this field is optional, and the style
+                              'Filled Circles' will apply to all points within the associated series data.
+                            </p>
                           </Tooltip.Content>
                         </Tooltip>
                       }
-                      value={symbol}
+                      value={value}
+                      fieldName='value'
+                      label='VALUE TO TRIGGER'
+                      updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                    />
+                    <Select
+                      value={style}
                       initial='Select'
-                      fieldName='symbol'
-                      label={config.visualizationType === 'Combo' ? 'suppression bar symbol' : 'suppression symbol'}
+                      fieldName='style'
+                      label='Style'
                       updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
-                      options={getSymbolOptions()}
+                      options={getStyleOptions(type)}
                     />
-                  )}
+                    {style.includes('Circles') && (
+                      <TextField
+                        className='number-narrow'
+                        type='number'
+                        value={circleSize}
+                        fieldName='circleSize'
+                        label='circle size'
+                        updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                      />
+                    )}
+                    {style !== 'Filled Circles' && (
+                      <TextField
+                        value={label}
+                        fieldName='label'
+                        label='Label'
+                        placeholder=''
+                        updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                      />
+                    )}
+                  </>
+                )}
+              </div>
+            )
+          }
+        )}
 
-                  <TextField
-                    tooltip={
-                      <Tooltip style={{ textTransform: 'none' }}>
-                        <Tooltip.Target>
-                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                        </Tooltip.Target>
-                        <Tooltip.Content>
-                          <p>This label will display in the tooltip and legend.</p>
-                        </Tooltip.Content>
-                      </Tooltip>
-                    }
-                    value={label ? label : 'Suppressed'}
-                    fieldName='label'
-                    label='Suppressed Data Label'
-                    placeholder=''
-                    updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
-                  />
-                  <CheckBox
-                    tooltip={
-                      <Tooltip style={{ textTransform: 'none' }}>
-                        <Tooltip.Target>
-                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                        </Tooltip.Target>
-                        <Tooltip.Content>
-                          <p>Enabling this tooltip will provide a clearer indication of 'suppressed' or 'zero data' values, whichever is applicable. Deselecting 'Display In Tooltip' indicates that you do not want to display 'suppressed' or 'zero data' values in tooltips when hovering over them.</p>
-                        </Tooltip.Content>
-                      </Tooltip>
-                    }
-                    value={displayTooltip}
-                    fieldName='displayTooltip'
-                    label='Display in tooltips'
-                    updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
-                  />
-                  <CheckBox
-                    tooltip={
-                      <Tooltip style={{ textTransform: 'none' }}>
-                        <Tooltip.Target>
-                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                        </Tooltip.Target>
-                        <Tooltip.Content>
-                          <p>Deselecting "Display in Legend" indicates that you do not want to display suppressed data in the legend.</p>
-                        </Tooltip.Content>
-                      </Tooltip>
-                    }
-                    value={displayLegend}
-                    fieldName='displayLegend'
-                    label='Display in legend'
-                    updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
-                  />
-                  <CheckBox
-                    tooltip={
-                      <Tooltip style={{ textTransform: 'none' }}>
-                        <Tooltip.Target>
-                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                        </Tooltip.Target>
-                        <Tooltip.Content>
-                          <p>Deselecting "Display In Data Table" indicates that you do not want to display suppressed data in the data table.</p>
-                        </Tooltip.Content>
-                      </Tooltip>
-                    }
-                    value={displayTable}
-                    fieldName='displayTable'
-                    label='Display in table'
-                    updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
-                  />
-                </>
-              ) : (
-                <>
-                  <Select value={seriesKey} initial='Select' fieldName='seriesKey' label='ASSOCIATE TO SERIES' updateField={(_, __, fieldName, value) => update(fieldName, value, i)} options={config.runtime.lineSeriesKeys ?? config.runtime?.seriesKeys} />
-                  <Select value={column} initial='Select' fieldName='column' label='COLUMN WITH CONFIGURATION VALUE' updateField={(_, __, fieldName, value) => update(fieldName, value, i)} options={getColumnOptions()} />
-                  <TextField value={value} fieldName='value' label='VALUE TO TRIGGER' updateField={(_, __, fieldName, value) => update(fieldName, value, i)} />
-                  <Select value={style} initial='Select' fieldName='style' label='Style' updateField={(_, __, fieldName, value) => update(fieldName, value, i)} options={getStyleOptions(type)} />
-                  <TextField value={label} fieldName='label' label='Label' placeholder='' updateField={(_, __, fieldName, value) => update(fieldName, value, i)} />
-                </>
+      <button type='button' onClick={addColumn} className='btn full-width'>
+        {config.visualizationType === 'Line'
+          ? 'Add Special Line'
+          : config.visualizationType === 'Bar'
+          ? ' Add Special Bar'
+          : 'Add Special Bar/Line'}
+      </button>
+    </>
+  )
+}
+
+interface CategoricalAxisProps {
+  config: ChartConfig
+  updateConfig: Function
+  display: boolean
+}
+
+const CategoricalAxis: React.FC<CategoricalAxisProps> = ({ config, updateConfig, display }) => {
+  const maxHeight = config?.yAxis?.maxValue
+
+  const totalEnteredHeight =
+    config?.yAxis?.categories?.reduce((sum, obj) => sum + (parseFloat(obj.height) || 0), 0) || 0
+
+  const removeColumn = i => {
+    let categories = []
+
+    if (config.yAxis.categories) {
+      categories = [...config.yAxis.categories]
+    }
+
+    categories.splice(i, 1)
+
+    updateConfig({ ...config, yAxis: { ...config.yAxis, categories } })
+  }
+
+  const getDarkerColor = () => {
+    const timesDarkened = config.yAxis?.categories?.length
+    const darkeningFactor = 0.4
+    const baseColor = '#ddd'
+    return chroma(baseColor)
+      .darken(darkeningFactor * timesDarkened)
+      .hex()
+  }
+
+  const addColumn = () => {
+    const categories = config.yAxis.categories ? [...config.yAxis.categories] : []
+    const defaultValues = {
+      label: 'Label ' + Number(categories.length + 1),
+      height: '',
+      color: getDarkerColor()
+    }
+    categories.push(defaultValues)
+    updateConfig({ ...config, yAxis: { ...config.yAxis, categories: categories } })
+  }
+
+  const update = (fieldName, value, i) => {
+    let categories = []
+
+    if (config.yAxis.categories) {
+      categories = [...config.yAxis.categories]
+    }
+
+    categories[i][fieldName] = value
+
+    updateConfig({ ...config, yAxis: { ...config.yAxis, categories } })
+  }
+
+  if (!display) {
+    return <></>
+  }
+
+  return (
+    <>
+      {config.yAxis.type === 'categorical' &&
+        config.yAxis.categories?.map(({ label, color, height }, i) => {
+          return (
+            <div key={`preliminaryData-${i}`} className='edit-block'>
+              <p>Axis Category {i + 1}</p>
+              <button
+                type='button'
+                className='remove-column'
+                onClick={event => {
+                  event.preventDefault()
+                  removeColumn(i)
+                }}
+              >
+                Remove
+              </button>
+              <TextField
+                tooltip={
+                  <Tooltip style={{ textTransform: 'none' }}>
+                    <Tooltip.Target>
+                      <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                    </Tooltip.Target>
+                    <Tooltip.Content>
+                      <p>
+                        {' '}
+                        Category Height will be ignored for the last category. The last category will fill the rest of
+                        the axis height.
+                      </p>
+                    </Tooltip.Content>
+                  </Tooltip>
+                }
+                type='number'
+                value={height}
+                fieldName='height'
+                label='Category Height'
+                updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+              />
+              {Number(totalEnteredHeight) > Number(maxHeight) && config.yAxis.categories.length - 1 === i && (
+                <span style={{ color: 'red', display: 'block', fontSize: '15px' }}>
+                  Update Max value to show all categories
+                </span>
               )}
+
+              <div className='two-col-inputs'>
+                <TextField
+                  value={color}
+                  fieldName='color'
+                  label='Color'
+                  updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                />
+                <TextField
+                  value={label}
+                  fieldName='label'
+                  label='Label'
+                  updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                />
+              </div>
             </div>
           )
         })}
 
       <button type='button' onClick={addColumn} className='btn full-width'>
-        {config.visualizationType === 'Line' ? 'Add Special Line' : config.visualizationType === 'Bar' ? ' Add Special Bar' : 'Add Special Bar/Line'}
+        Add Axis Category
       </button>
     </>
   )
@@ -318,7 +609,8 @@ const EditorPanel = () => {
     lineOptions,
     rawData,
     highlight,
-    highlightReset
+    highlightReset,
+    dimensions
   } = useContext<ChartContext>(ConfigContext)
 
   const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, unfilteredData)
@@ -340,6 +632,7 @@ const EditorPanel = () => {
     visCanAnimate,
     visHasLegend,
     visHasLegendAxisAlign,
+    visHasLegendColorCategory,
     visHasBrushChart,
     visSupportsDateCategoryAxis,
     visSupportsValueAxisMin,
@@ -368,7 +661,9 @@ const EditorPanel = () => {
     visSupportsRankByValue,
     visSupportsResponsiveTicks,
     visSupportsDateCategoryHeight,
-    visHasDataSuppression
+    visHasDataSuppression,
+    visHasCategoricalAxis,
+    visSupportsDynamicSeries
   } = useEditorPermissions()
 
   // when the visualization type changes we
@@ -381,7 +676,8 @@ const EditorPanel = () => {
       newSeries = config.series.map(series => {
         return {
           ...series,
-          type: config.visualizationType === 'Combo' ? 'Bar' : config.visualizationType ? config.visualizationType : 'Bar',
+          type:
+            config.visualizationType === 'Combo' ? 'Bar' : config.visualizationType ? config.visualizationType : 'Bar',
           axis: 'Left'
         }
       })
@@ -448,10 +744,23 @@ const EditorPanel = () => {
     if (isDateScale(updatedConfig.xAxis) && !updatedConfig.xAxis.padding) {
       updatedConfig.xAxis.padding = 6
     }
+    // DEV-8008 - Remove Bar styling when Line is converted to Bar
+    if (updatedConfig.visualizationType === 'Line') {
+      updatedConfig.visualizationSubType = 'regular'
+      updatedConfig.barStyle = 'flat'
+      updatedConfig.isLollipopChart = false
+    }
   }
 
   const updateField = (section, subsection, fieldName, newValue) => {
-    if (isDebug) console.log('#COVE: CHART: EditorPanel: section, subsection, fieldName, newValue', section, subsection, fieldName, newValue) // eslint-disable-line
+    if (isDebug)
+      console.log(
+        '#COVE: CHART: EditorPanel: section, subsection, fieldName, newValue',
+        section,
+        subsection,
+        fieldName,
+        newValue
+      ) // eslint-disable-line
 
     if (section === 'boxplot' && subsection === 'legend') {
       updateConfig({
@@ -531,6 +840,7 @@ const EditorPanel = () => {
   }
 
   const [displayPanel, setDisplayPanel] = useState(true)
+  const [displayViewportOverrides, setDisplayViewportOverrides] = useState(false)
 
   if (loading) {
     return null
@@ -566,7 +876,14 @@ const EditorPanel = () => {
     })
 
     if (config.visualizationType === 'Forecasting') {
-      newSeries.push({ dataKey: seriesKey, type: config.visualizationType, stages: forecastingStageArr, stageColumn: seriesKey, axis: 'Left', tooltip: true })
+      newSeries.push({
+        dataKey: seriesKey,
+        type: config.visualizationType,
+        stages: forecastingStageArr,
+        stageColumn: seriesKey,
+        axis: 'Left',
+        tooltip: true
+      })
     } else {
       newSeries.push({ dataKey: seriesKey, type: config.visualizationType, axis: 'Left', tooltip: true })
     }
@@ -622,7 +939,14 @@ const EditorPanel = () => {
     if (filter) {
       const { lower, upper } = config.confidenceKeys || {}
       Object.keys(columns).forEach(key => {
-        if ((config.series && config.series.filter(series => series.dataKey === key).length > 0) || (config.confidenceKeys && Object.keys(config.confidenceKeys).includes(key) && ((lower && upper) || lower || upper) && key !== lower && key !== upper)) {
+        if (
+          (config.series && config.series.filter(series => series.dataKey === key).length > 0) ||
+          (config.confidenceKeys &&
+            Object.keys(config.confidenceKeys).includes(key) &&
+            ((lower && upper) || lower || upper) &&
+            key !== lower &&
+            key !== upper)
+        ) {
           delete columns[key]
         }
       })
@@ -631,9 +955,37 @@ const EditorPanel = () => {
     return Object.keys(columns)
   }
 
-  const getDataValueOptions = data => {
+  const getLegendStyleOptions = (option: 'style' | 'subStyle'): string[] => {
+    const options: string[] = []
+
+    switch (option) {
+      case 'style':
+        options.push('circles', 'boxes')
+        if (
+          config.visualizationType === 'Bar' &&
+          (!['right', 'left'].includes(config.legend.position) || !config.legend.position)
+        ) {
+          options.push('gradient')
+        }
+        if (config.visualizationType === 'Line') {
+          options.push('lines')
+        }
+        break
+      case 'subStyle':
+        if (config.visualizationType === 'Bar') {
+          options.push('linear blocks')
+        } else {
+          options.push('linear blocks', 'smooth')
+        }
+
+        break
+    }
+    return options
+  }
+
+  const getDataValueOptions = (data: Record<string, any>[]): string[] => {
     if (!data) return []
-    const set = new Set()
+    const set = new Set<string>()
     for (let i = 0; i < data.length; i++) {
       for (const [key] of Object.entries(data[i])) {
         set.add(key)
@@ -820,7 +1172,9 @@ const EditorPanel = () => {
       case config.visualizationType === 'Combo' && isAllLine && enteredValue > minVal:
         message = 'Value should not exceed ' + minValue
         break
-      case (config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && !isAllLine)) && minVal > 0 && enteredValue > 0:
+      case (config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && !isAllLine)) &&
+        minVal > 0 &&
+        enteredValue > 0:
         message = config.useLogScale ? 'Value must be equal to 0' : 'Value must be less than or equal to 0'
         break
       case config.visualizationType === 'Deviation Bar' && enteredValue >= Math.min(minVal, config.xAxis.target):
@@ -872,7 +1226,17 @@ const EditorPanel = () => {
     if (isDebug) console.log('### COVE DEBUG: Chart: Setting default datacol=', setdatacol) // eslint-disable-line
   }
 
-  const chartsWithOptions = ['Area Chart', 'Combo', 'Line', 'Bar', 'Forecasting', 'Scatter Plot', 'Paired Bar', 'Deviation Bar']
+  const chartsWithOptions = [
+    'Bump Chart',
+    'Area Chart',
+    'Combo',
+    'Line',
+    'Bar',
+    'Forecasting',
+    'Scatter Plot',
+    'Paired Bar',
+    'Deviation Bar'
+  ]
 
   const columnsOptions = [
     <option value='' key={'Select Option'}>
@@ -1000,7 +1364,10 @@ const EditorPanel = () => {
     })
   }
 
-  const colorCodeByCategory = config.visualizationType === 'Bar' && config.visualizationSubType === 'regular' && config.runtime.seriesKeys.length === 1
+  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)
@@ -1021,6 +1388,14 @@ const EditorPanel = () => {
     updateConfig(updatedConfig)
   }
 
+  const updateViewportOverrides = (property, viewport, numTicks) => {
+    const propertyObject = { ...config.xAxis[property] }
+    propertyObject[viewport] = numTicks
+    const updatedConfig = { ...config, xAxis: { ...config.xAxis, [property]: propertyObject } }
+
+    updateConfig(updatedConfig)
+  }
+
   const editorContextValues = {
     addNewExclusion,
     data,
@@ -1049,83 +1424,183 @@ const EditorPanel = () => {
   return (
     <EditorPanelContext.Provider value={editorContextValues}>
       <ErrorBoundary component='EditorPanel'>
-        <Layout.Sidebar displayPanel={displayPanel} isDashboard={isDashboard} title={'Configure Chart'} onBackClick={onBackClick}>
+        <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>
-                              )
+            {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)) &&
+                        !config.dynamicSeries && <WarningImage width='25' className='warning-icon' />}
+                    </AccordionItemButton>
+                  </AccordionItemHeading>
+                  <AccordionItemPanel>
+                    {visSupportsDynamicSeries() && (
+                      <CheckBox
+                        value={config.dynamicSeries}
+                        fieldName='dynamicSeries'
+                        label='Dynamically generate series'
+                        updateField={updateField}
+                      />
+                    )}
+                    {config.dynamicSeries && config.visualizationType === 'Line' && (
+                      <Select
+                        fieldName='dynamicSeriesType'
+                        value={config.dynamicSeriesType}
+                        label='Series Type'
+                        initial='Select'
+                        updateField={updateField}
+                        options={['Line', 'dashed-sm', 'dashed-md', 'dashed-lg']}
+                      />
+                    )}
+                    {config.dynamicSeries &&
+                      config.visualizationType === 'Line' &&
+                      config.dynamicSeriesType === 'Line' && (
+                        <Select
+                          fieldName='dynamicSeriesLineType'
+                          value={config.dynamicSeriesLineType ? config.dynamicSeriesLineType : 'curveLinear'}
+                          label='Line Type'
+                          initial='Select'
+                          updateField={updateField}
+                          options={Object.keys(approvedCurveTypes).map(curveName => approvedCurveTypes[curveName])}
+                        />
+                      )}
+                    {(!visSupportsDynamicSeries() || !config.dynamicSeries) && (
+                      <>
+                        {(!config.series || config.series.length === 0) &&
+                          !config.dynamicSeries &&
+                          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 = ''
                             }}
-                          </Droppable>
-                        </DragDropContext>
-                      </Panels.Series.Wrapper>
+                            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' && (
+                          <>
+                            <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} />} */}
+                        {visSupportsPreliminaryData() && (
+                          <PreliminaryData config={config} updateConfig={updateConfig} data={data} />
+                        )}
+                      </>
                     )}
-                  </>
-                  {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} />} */}
-                  {visSupportsPreliminaryData() && <PreliminaryData config={config} updateConfig={updateConfig} data={data} />}
-                </AccordionItemPanel>
-              </AccordionItem>
-            )}
+                  </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' />}
+                    {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>
@@ -1153,11 +1628,91 @@ const EditorPanel = () => {
                   )}
                   {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} />
+                      <label>
+                        <span className='edit-label'>
+                          Axis Type
+                          <Tooltip style={{ textTransform: 'none', display: 'inline-block' }}>
+                            <Tooltip.Target>
+                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              Select 'Numeric (Linear Scale)' for uniform scaling, 'Numeric (Logarithmic Scale)' for
+                              exponential data, or 'Categorical' for discrete categories.
+                            </Tooltip.Content>
+                          </Tooltip>
+                        </span>
+                        <select
+                          value={config.yAxis.type}
+                          onChange={e =>
+                            updateConfig({
+                              ...config,
+                              yAxis: {
+                                ...config.yAxis,
+                                type: e.target.value
+                              }
+                            })
+                          }
+                        >
+                          <option value='linear'>Numeric (Linear Scale)</option>
+                          {config.visualizationSubType !== 'stacked' && (
+                            <option value='logarithmic'>Numeric (Logarithmic Scale)</option>
+                          )}
+                          {config.orientation !== 'horizontal' && <option value='categorical'>Categorical</option>}
+                        </select>
+                      </label>
+                      <CategoricalAxis
+                        config={config}
+                        updateConfig={updateConfig}
+                        data={data}
+                        display={visHasCategoricalAxis()}
+                      />
+
+                      <TextField
+                        display={!visHasCategoricalAxis()}
+                        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
+                        display={!visHasCategoricalAxis()}
+                        value={config.yAxis.numTicks}
+                        placeholder='Auto'
+                        type='number'
+                        section='yAxis'
+                        fieldName='numTicks'
+                        label='Number of ticks'
+                        className='number-narrow'
+                        tooltip={
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon
+                                display='question'
+                                style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                              />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>
+                                Apporoximate number of ticks. Other factors such as space available and data may change
+                                the exact number of ticks used.
+                              </p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        }
+                        updateField={updateField}
+                      />
                       <TextField
                         value={config.yAxis.size}
                         type='number'
@@ -1169,7 +1724,10 @@ const EditorPanel = () => {
                         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', 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>
@@ -1177,9 +1735,38 @@ const EditorPanel = () => {
                           </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 || 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
+                        display={!visHasCategoricalAxis()}
+                        value={config.yAxis.labelOffset}
+                        section='yAxis'
+                        fieldName='labelOffset'
+                        label='Label offset'
+                        type='number'
+                        className='number-narrow'
+                        updateField={updateField}
+                      />
+                      {config.orientation === 'horizontal' && (
+                        <CheckBox
+                          value={config.isResponsiveTicks}
+                          fieldName='isResponsiveTicks'
+                          label='Use Responsive Ticks'
+                          updateField={updateField}
+                        />
+                      )}
+                      {(config.orientation === 'vertical' || !config.isResponsiveTicks) && (
+                        <TextField
+                          display={!visHasCategoricalAxis()}
+                          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' && (
                         <TextField
                           value={config.xAxis.maxTickRotation}
                           type='number'
@@ -1192,7 +1779,10 @@ const EditorPanel = () => {
                           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', display: 'inline-block', whiteSpace: 'nowrap' }}
+                                />
                               </Tooltip.Target>
                               <Tooltip.Content>
                                 <p>Degrees ticks will be rotated if values overlap, especially in smaller viewports.</p>
@@ -1204,11 +1794,33 @@ const EditorPanel = () => {
 
                       {/* 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} />}
+                      {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}
+                        />
+                      )}
                     </>
                   )}
                   <span className='divider-heading'>Number Formatting</span>
@@ -1221,7 +1833,10 @@ const EditorPanel = () => {
                     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', display: 'inline-block', whiteSpace: 'nowrap' }}
+                          />
                         </Tooltip.Target>
                         <Tooltip.Content>
                           <p>{`Selecting this option will add commas to the left value axis, tooltip hover, and data table.`}</p>
@@ -1230,6 +1845,7 @@ const EditorPanel = () => {
                     }
                   />
                   <CheckBox
+                    display={!visHasCategoricalAxis()}
                     value={config.dataFormat.abbreviated}
                     section='dataFormat'
                     fieldName='abbreviated'
@@ -1238,7 +1854,10 @@ const EditorPanel = () => {
                     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', display: 'inline-block', whiteSpace: 'nowrap' }}
+                          />
                         </Tooltip.Target>
                         <Tooltip.Content>
                           <p>{`This option abbreviates very large or very small numbers on the value axis`}</p>
@@ -1246,7 +1865,16 @@ const EditorPanel = () => {
                       </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} />
+                  <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}
@@ -1260,8 +1888,12 @@ const EditorPanel = () => {
                             <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>}
+                            {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>
                       }
@@ -1278,8 +1910,12 @@ const EditorPanel = () => {
                             <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>}
+                            {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>
                       }
@@ -1288,31 +1924,133 @@ const EditorPanel = () => {
 
                   {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} />}
+                      {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 Tick Labels'
+                          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} />}
+                      {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} />
+                          <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} />
+                        <CheckBox
+                          display={!visHasCategoricalAxis()}
+                          value={config.yAxis.hideAxis}
+                          section='yAxis'
+                          fieldName='hideAxis'
+                          label='Hide Axis'
+                          updateField={updateField}
+                        />
+                        <CheckBox
+                          display={!visHasCategoricalAxis()}
+                          value={config.yAxis.hideLabel}
+                          section='yAxis'
+                          fieldName='hideLabel'
+                          label='Hide Tick Labels'
+                          updateField={updateField}
+                        />
+                        <CheckBox
+                          display={!visHasCategoricalAxis()}
+                          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} />
+                        <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} />
+                        <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>
                       </>
                     )
@@ -1581,14 +2319,60 @@ const EditorPanel = () => {
                   <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} />
+                  <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} />
+                  <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}
@@ -1602,8 +2386,12 @@ const EditorPanel = () => {
                             <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>}
+                            {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>
                       }
@@ -1620,21 +2408,59 @@ const EditorPanel = () => {
                             <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>}
+                            {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} />
+                  <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 Tick Labels'
+                    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} />
+                  <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} />
+                  <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>
@@ -1659,7 +2485,10 @@ const EditorPanel = () => {
                                 <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.Content>
+                                  Linear scales are employed for quantitative data, while time scales are used for
+                                  time-series data.
+                                </Tooltip.Content>
                               </Tooltip>
                             </span>
                             <select
@@ -1674,14 +2503,26 @@ const EditorPanel = () => {
                                 })
                               }
                             >
-                              <option value='categorical'>Categorical (Linear Scale)</option>
-                              <option value='date'>Date (Linear Scale)</option>
+                              {config.visualizationType !== 'Bump Chart' && (
+                                <option value='categorical'>Categorical (Linear Scale)</option>
+                              )}
+                              {config.visualizationType !== 'Bump Chart' && (
+                                <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>}
+                              {config.visualizationType === 'Scatter Plot' && (
+                                <option value={'continuous'}>Continuous</option>
+                              )}
                             </select>
                           </label>
 
-                          <CheckBox value={config.xAxis.manual} section='xAxis' fieldName='manual' label='Manual Ticks' updateField={updateField} />
+                          <CheckBox
+                            value={config.xAxis.manual}
+                            section='xAxis'
+                            fieldName='manual'
+                            label='Manual Ticks'
+                            updateField={updateField}
+                          />
 
                           {visSupportsDateCategoryAxisPadding() && (
                             <TextField
@@ -1699,7 +2540,10 @@ const EditorPanel = () => {
                                     <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>
+                                    <p>
+                                      For use with date scale. Extends the earliest and latest dates represented on the
+                                      scale by the percentage specified.
+                                    </p>
                                   </Tooltip.Content>
                                 </Tooltip>
                               }
@@ -1746,7 +2590,10 @@ 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 source row or column that contains the segment labels. Depending on the data
+                              structure, it may be listed as "Key."
+                            </p>
                           </Tooltip.Content>
                         </Tooltip>
                       }
@@ -1755,7 +2602,13 @@ const EditorPanel = () => {
 
                   {config.visualizationType !== 'Pie' && (
                     <>
-                      <TextField value={config.xAxis.label} section='xAxis' fieldName='label' label='Label' updateField={updateField} />
+                      <TextField
+                        value={config.xAxis.label}
+                        section='xAxis'
+                        fieldName='label'
+                        label='Label'
+                        updateField={updateField}
+                      />
 
                       {config.xAxis.type === 'continuous' && (
                         <>
@@ -1768,7 +2621,10 @@ const EditorPanel = () => {
                             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', display: 'inline-block', whiteSpace: 'nowrap' }}
+                                  />
                                 </Tooltip.Target>
                                 <Tooltip.Content>
                                   <p>Enter a data prefix (such as "$"), if applicable.</p>
@@ -1786,7 +2642,10 @@ const EditorPanel = () => {
                             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', display: 'inline-block', whiteSpace: 'nowrap' }}
+                                  />
                                 </Tooltip.Target>
                                 <Tooltip.Content>
                                   <p>Enter a data suffix (such as "%"), if applicable.</p>
@@ -1804,7 +2663,10 @@ const EditorPanel = () => {
                             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', display: 'inline-block', whiteSpace: 'nowrap' }}
+                                  />
                                 </Tooltip.Target>
                                 <Tooltip.Content>
                                   <p>{`This option abbreviates very large or very small numbers on the value axis`}</p>
@@ -1819,7 +2681,11 @@ const EditorPanel = () => {
                         <>
                           <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'>
+                            <a
+                              href='https://github.com/d3/d3-time-format#locale_format'
+                              target='_blank'
+                              rel='noreferrer'
+                            >
                               these guidelines
                             </a>
                             .
@@ -1828,10 +2694,16 @@ const EditorPanel = () => {
                             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', 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>
+                                  <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>
                             }
@@ -1846,10 +2718,16 @@ const EditorPanel = () => {
                             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', display: 'inline-block', whiteSpace: 'nowrap' }}
+                                  />
                                 </Tooltip.Target>
                                 <Tooltip.Content>
-                                  <p> Adjusts the date display format on the axis for clear, visual date representation.</p>
+                                  <p>
+                                    {' '}
+                                    Adjusts the date display format on the axis for clear, visual date representation.
+                                  </p>
                                 </Tooltip.Content>
                               </Tooltip>
                             }
@@ -1864,10 +2742,16 @@ const EditorPanel = () => {
                             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', 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>
+                                  <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>
                             }
@@ -1882,10 +2766,16 @@ const EditorPanel = () => {
                             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', 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>
+                                  <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>
                             }
@@ -1903,28 +2793,62 @@ const EditorPanel = () => {
                         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'}
+                        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' }} />
+                              <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>
+                              <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>
+                      {visHasBrushChart() && (
+                        <CheckBox
+                          value={config.brush?.active}
+                          section='brush'
+                          fieldName='active'
+                          label='Brush Slider '
+                          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>
+                                  Use the brush slider to narrow down your data view to specific values along the axis.
+                                  This tool is useful for examining detailed data segments within the larger dataset.{' '}
+                                </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 />
@@ -1948,102 +2872,312 @@ const EditorPanel = () => {
 
                           {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 || ''} />
+                              <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.padding} type='number' min={0} section='xAxis' fieldName='padding' 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' && (
+                      {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}
+                              tooltip={
+                                <Tooltip style={{ textTransform: 'none' }}>
+                                  <Tooltip.Target>
+                                    <Icon
+                                      display='question'
+                                      style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                                    />
+                                  </Tooltip.Target>
+                                  <Tooltip.Content>
+                                    <p>
+                                      Number of data points which are assigned a tick, starting from the right most data
+                                      point. Value of 1 will show a tick at every data point, value of 2 will show a
+                                      tick for every other, etc.
+                                    </p>
+                                  </Tooltip.Content>
+                                </Tooltip>
+                              }
+                            />
+                            <div className='viewport-overrides'>
+                              <label>
+                                <button
+                                  onClick={() => setDisplayViewportOverrides(!displayViewportOverrides)}
+                                  className='edit-label'
+                                >
+                                  Step Count: viewport overrides{' '}
+                                  <span style={{ transform: `rotate(${displayViewportOverrides ? '90deg' : '0deg'})` }}>
+                                    &gt;
+                                  </span>
+                                </button>
+                              </label>
+                              {displayViewportOverrides && (
+                                <div className='edit-block'>
+                                  {Object.keys(viewports).map(viewport => (
+                                    <TextField
+                                      key={`viewport-step-count-input-${viewport}`}
+                                      value={
+                                        config.xAxis.viewportStepCount
+                                          ? config.xAxis.viewportStepCount[viewport]
+                                          : undefined
+                                      }
+                                      placeholder='Auto'
+                                      type='number'
+                                      label={viewport}
+                                      className='number-narrow'
+                                      updateField={(section, fieldName, label, val) =>
+                                        updateViewportOverrides('viewportStepCount', viewport, val)
+                                      }
+                                    />
+                                  ))}
+                                </div>
+                              )}
+                            </div>
+                          </>
+                        )}
+                      {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}
+                              tooltip={
+                                <Tooltip style={{ textTransform: 'none' }}>
+                                  <Tooltip.Target>
+                                    <Icon
+                                      display='question'
+                                      style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                                    />
+                                  </Tooltip.Target>
+                                  <Tooltip.Content>
+                                    <p>
+                                      Apporoximate number of ticks. Other factors such as space available and data may
+                                      change the exact number of ticks used. To enforce an exact number of ticks, check
+                                      "Manual Ticks" above.
+                                    </p>
+                                  </Tooltip.Content>
+                                </Tooltip>
+                              }
+                            />
+                            <div className='viewport-overrides'>
+                              <label>
+                                <button
+                                  onClick={() => setDisplayViewportOverrides(!displayViewportOverrides)}
+                                  className='edit-label'
+                                >
+                                  Number of ticks: viewport overrides{' '}
+                                  <span style={{ transform: `rotate(${displayViewportOverrides ? '90deg' : '0deg'})` }}>
+                                    &gt;
+                                  </span>
+                                </button>
+                              </label>
+                              {displayViewportOverrides && (
+                                <div className='edit-block'>
+                                  {Object.keys(viewports).map(viewport => (
+                                    <TextField
+                                      key={`viewport-num-ticks-input-${viewport}`}
+                                      value={
+                                        config.xAxis.viewportNumTicks
+                                          ? config.xAxis.viewportNumTicks[viewport]
+                                          : undefined
+                                      }
+                                      placeholder='Auto'
+                                      type='number'
+                                      label={viewport}
+                                      className='number-narrow'
+                                      updateField={(section, fieldName, label, val) =>
+                                        updateViewportOverrides('viewportNumTicks', viewport, val)
+                                      }
+                                    />
+                                  ))}
+                                </div>
+                              )}
+                            </div>
+                          </>
+                        )}
+                      {visSupportsDateCategoryHeight() && (
                         <TextField
-                          value={config.xAxis.maxTickRotation}
+                          value={config.xAxis.size}
                           type='number'
                           min={0}
                           section='xAxis'
-                          fieldName='maxTickRotation'
-                          label='Max Tick Rotation'
+                          fieldName='size'
+                          label={config.orientation === 'horizontal' ? 'Size (Width)' : 'Size (Height)'}
                           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>
-                          }
                         />
                       )}
+                      <TextField
+                        value={config.xAxis.labelOffset}
+                        section='xAxis'
+                        fieldName='labelOffset'
+                        label='Label offset'
+                        type='number'
+                        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' }}>
+                                <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>
+                            }
+                          />
+                        )}
 
                       {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.yAxis.hideAxis}
+                              section='yAxis'
+                              fieldName='hideAxis'
+                              label='Hide Axis'
+                              updateField={updateField}
+                            />
+                          )}
+                          {visSupportsDateCategoryAxisLabel() && (
+                            <CheckBox
+                              value={config.yAxis.hideLabel}
+                              section='yAxis'
+                              fieldName='hideLabel'
+                              label='Hide Tick Labels'
+                              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} />}
+                          {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 Tick Labels'
+                              updateField={updateField}
+                            />
+                          )}
+                          {visSupportsDateCategoryAxisTicks() && (
+                            <CheckBox
+                              value={config.xAxis.hideTicks}
+                              section='xAxis'
+                              fieldName='hideTicks'
+                              label='Hide Ticks'
+                              updateField={updateField}
+                            />
+                          )}
                         </>
                       )}
-                      <CheckBox
-                        tooltip={
-                          <Tooltip style={{ textTransform: 'none' }}>
-                            <Tooltip.Target>
-                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                            </Tooltip.Target>
-                            <Tooltip.Content>
-                              <p>Selecting this option will display a "thin line" slightly above the Date/Category Axis to indicate "suppressed data" where "suppressed data" values are indicated in the Data Series.</p>
-                            </Tooltip.Content>
-                          </Tooltip>
-                        }
-                        value={config.xAxis.showSuppressedLine}
-                        section='xAxis'
-                        fieldName='showSuppressedLine'
-                        label='Display  suppressed data line'
-                        updateField={updateField}
-                      />
-                      <CheckBox
-                        tooltip={
-                          <Tooltip style={{ textTransform: 'none' }}>
-                            <Tooltip.Target>
-                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                            </Tooltip.Target>
-                            <Tooltip.Content>
-                              <p>Selecting this option will display "suppressed data symbol" on the Date/Category Axis where suppressed data values are indicated in the Data Series, unless a different symbol was chosen from the data series (e.g., suppression symbol) menu.</p>
-                            </Tooltip.Content>
-                          </Tooltip>
-                        }
-                        value={config.xAxis.showSuppressedSymbol}
-                        section='xAxis'
-                        fieldName='showSuppressedSymbol'
-                        label='Display  suppressed data symbol'
-                        updateField={updateField}
-                      />
 
                       {config.series?.length === 1 && config.visualizationType === 'Bar' && (
                         <>
@@ -2059,22 +3193,54 @@ const EditorPanel = () => {
                                   <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)}>
+                                    <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>)}
+                                      {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)} />
+                                    <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)} />
+                                    <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)} />
+                                    <input
+                                      type='text'
+                                      value={
+                                        config.highlightedBarValues[i].legendLabel
+                                          ? config.highlightedBarValues[i].legendLabel
+                                          : ''
+                                      }
+                                      onChange={e => handleHighlightedBarLegendLabel(e, i)}
+                                    />
                                   </label>
                                 </div>
                               </fieldset>
@@ -2098,10 +3264,15 @@ const EditorPanel = () => {
                         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', 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>
+                                When this option is checked, you can select values for exclusion from the pie segments.
+                              </p>
                             </Tooltip.Content>
                           </Tooltip>
                         }
@@ -2266,7 +3437,10 @@ const EditorPanel = () => {
                       <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}`}>
+                          <AccordionItem
+                            className='series-item series-item--chart'
+                            key={`accordion-yaxis-anchors-${index}`}
+                          >
                             <AccordionItemHeading className='series-item__title'>
                               <>
                                 <AccordionItemButton className={'accordion__button accordion__button'}>
@@ -2392,7 +3566,7 @@ const EditorPanel = () => {
             <Panels.Regions name='Regions' />
 
             {/* Columns */}
-            {config.visualizationType !== 'Box Plot' && (
+            {config.visualizationType !== 'Box Plot' && config.visualizationType !== 'Sankey' && (
               <AccordionItem>
                 <AccordionItemHeading>
                   <AccordionItemButton>Columns</AccordionItemButton>
@@ -2409,7 +3583,69 @@ const EditorPanel = () => {
                   <AccordionItemButton>Legend</AccordionItemButton>
                 </AccordionItemHeading>
                 <AccordionItemPanel>
-                  <CheckBox value={config.legend.reverseLabelOrder} section='legend' fieldName='reverseLabelOrder' label='Reverse Labels' updateField={updateField} />
+                  <Select
+                    value={config.legend?.position}
+                    section='legend'
+                    fieldName='position'
+                    label='Position'
+                    updateField={updateField}
+                    options={['right', 'left', 'bottom', 'top']}
+                  />
+                  {(config.legend.position === 'left' ||
+                    config.legend.position === 'right' ||
+                    !config.legend.position) &&
+                    config.legend.style === 'gradient' && (
+                      <span style={{ color: 'red', fontSize: '14px' }}>
+                        Position must be set to top or bottom to use gradient style.
+                      </span>
+                    )}
+
+                  <Select
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon
+                            display='question'
+                            style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                          />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>
+                            If using gradient style, limit the legend to five items for better mobile visibility, and
+                            position the legend at the top or bottom.
+                          </p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                    display={!config.legend.hide}
+                    value={config.legend.style}
+                    section='legend'
+                    fieldName='style'
+                    label='Legend Style'
+                    updateField={updateField}
+                    options={getLegendStyleOptions('style')}
+                  />
+
+                  <Select
+                    display={!config.legend.hide && config.legend.style === 'gradient'}
+                    value={config.legend.subStyle}
+                    section='legend'
+                    fieldName='subStyle'
+                    label='Gradient Style'
+                    updateField={updateField}
+                    options={getLegendStyleOptions('subStyle')}
+                  />
+                  <TextField
+                    display={config.legend.style === 'gradient' && !config.legend.hide}
+                    className='number-narrow'
+                    type='number'
+                    value={config.legend.tickRotation}
+                    section='legend'
+                    fieldName='tickRotation'
+                    label='Tick Rotation (Degrees)'
+                    updateField={updateField}
+                  />
+
                   {/* <fieldset className="checkbox-group">
                     <CheckBox value={config.legend.dynamicLegend} section="legend" fieldName="dynamicLegend" label="Dynamic Legend" updateField={updateField}/>
                     {config.legend.dynamicLegend && (
@@ -2421,6 +3657,7 @@ const EditorPanel = () => {
                       </>
                     )}
                   </fieldset> */}
+
                   <CheckBox
                     value={config.legend.hide ? true : false}
                     section='legend'
@@ -2430,7 +3667,10 @@ const EditorPanel = () => {
                     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', display: 'inline-block', whiteSpace: 'nowrap' }}
+                          />
                         </Tooltip.Target>
                         <Tooltip.Content>
                           <p>With a single-series chart, consider hiding the legend to reduce visual clutter.</p>
@@ -2439,6 +3679,7 @@ const EditorPanel = () => {
                     }
                   />
                   <CheckBox
+                    display={config.preliminaryData?.some(pd => pd.label && pd.type === 'suppression' && pd.value)}
                     value={config.legend.hideSuppressedLabels}
                     section='legend'
                     fieldName='hideSuppressedLabels'
@@ -2447,10 +3688,37 @@ const EditorPanel = () => {
                     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', display: 'inline-block', whiteSpace: 'nowrap' }}
+                          />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>
+                            Hiding suppressed labels will not override the 'Special Class' assigned to line chart
+                            indicating "suppressed" data in the Data Series Panel.
+                          </p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                  />
+                  <CheckBox
+                    display={config.preliminaryData?.some(pd => pd.label && pd.type === 'suppression' && pd.value)}
+                    value={config.legend.hideSuppressionLink}
+                    section='legend'
+                    fieldName='hideSuppressionLink'
+                    label='Hide Suppression Definition Link'
+                    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>Hiding suppressed labels will not override the 'Special Class' assigned to line chart indicating "suppressed" data in the Data Series Panel.</p>
+                          <p>Selecting this option will hide the suppression definition link from display.</p>
                         </Tooltip.Content>
                       </Tooltip>
                     }
@@ -2461,15 +3729,43 @@ const EditorPanel = () => {
                       <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
+                    display={config.series?.length > 1}
+                    value={config.legend.behavior}
+                    section='legend'
+                    fieldName='behavior'
+                    label='Legend Behavior (When clicked)'
+                    updateField={(...[section, , fieldName, value]) => updateBehavior(section, fieldName, value)}
+                    options={['highlight', 'isolate']}
+                  />
+                  <Select
+                    display={visHasLegendColorCategory()}
+                    value={config.legend.colorCode}
+                    section='legend'
+                    fieldName='colorCode'
+                    label='Color code by category'
+                    initial='Select'
+                    updateField={updateField}
+                    options={getDataValueOptions(data)}
+                  />
+                  {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}
+                    />
                   )}
-                  <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'}>
@@ -2481,7 +3777,10 @@ const EditorPanel = () => {
                               <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>
+                              <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>
@@ -2537,16 +3836,99 @@ const EditorPanel = () => {
                     </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' />
+                  <CheckBox
+                    display={!config.legend.hide && config.legend.style !== 'gradient'}
+                    value={config.legend.reverseLabelOrder}
+                    section='legend'
+                    fieldName='reverseLabelOrder'
+                    label='Reverse Labels'
+                    updateField={updateField}
+                  />
+                  <CheckBox
+                    display={!config.legend.hide}
+                    value={
+                      ['left', 'right'].includes(config.legend.position)
+                        ? config.legend.hideBorder.side
+                        : config.legend.hideBorder.topBottom
+                    }
+                    section='legend'
+                    subsection='hideBorder'
+                    fieldName={['left', 'right'].includes(config.legend.position) ? 'side' : 'topBottom'}
+                    label='Hide Legend Box'
+                    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>Default option for top and bottom legends is ‘No Box.’.</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                  />
+                  <CheckBox
+                    display={
+                      !config.legend.hide &&
+                      !['left', 'right'].includes(config.legend.position) &&
+                      config.legend.style !== 'gradient'
+                    }
+                    value={config.legend.singleRow}
+                    section='legend'
+                    fieldName='singleRow'
+                    label='Single Row Legend'
+                    updateField={updateField}
+                  />
+                  <CheckBox
+                    display={
+                      ['bottom', 'top'].includes(config.legend.position) &&
+                      !config.legend.hide &&
+                      config.legend.style !== 'gradient'
+                    }
+                    value={config.legend.verticalSorted}
+                    section='legend'
+                    fieldName='verticalSorted'
+                    label='Vertical sorted Legend'
+                    updateField={updateField}
+                  />
+                  <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>
+                    }
+                  />
+                  <TextField
+                    value={config.legend.label}
+                    section='legend'
+                    fieldName='label'
+                    label='Title'
+                    updateField={updateField}
+                  />
+                  <TextField
+                    type='textarea'
+                    value={config.legend.description}
+                    updateField={updateField}
+                    section='legend'
+                    fieldName='description'
+                    label='Legend Description'
+                  />
                 </AccordionItemPanel>
               </AccordionItem>
             )}
@@ -2568,13 +3950,22 @@ const EditorPanel = () => {
                   <AccordionItemButton>Data Table</AccordionItemButton>
                 </AccordionItemHeading>
                 <AccordionItemPanel>
-                  <DataTableEditor config={config} columns={Object.keys(data[0] || {})} updateField={updateField} isDashboard={isDashboard} isLoadedFromUrl={isLoadedFromUrl} />{' '}
+                  <DataTableEditor
+                    config={config}
+                    columns={Object.keys(data[0] || {})}
+                    updateField={updateField}
+                    isDashboard={isDashboard}
+                    isLoadedFromUrl={isLoadedFromUrl}
+                  />{' '}
                 </AccordionItemPanel>
               </AccordionItem>
             )}
+            <Panels.Annotate name='Text Annotations' />
             {/* {(config.visualizationType === 'Bar' || config.visualizationType === 'Line') && <Panels.DateHighlighting name='Date Highlighting' />} */}
           </Accordion>
-          {config.type !== 'Spark Line' && <AdvancedEditor loadConfig={updateConfig} state={config} convertStateToConfig={convertStateToConfig} />}
+          {config.type !== 'Spark Line' && (
+            <AdvancedEditor loadConfig={updateConfig} config={config} convertStateToConfig={convertStateToConfig} />
+          )}
         </Layout.Sidebar>
       </ErrorBoundary>
     </EditorPanelContext.Provider>