@cdc/chart 4.26.3 → 4.26.5

package/src/components/EditorPanel/EditorPanel.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback, memo, useContext, useMemo } from 'react'
-import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
+import { Draggable } from '@hello-pangea/dnd'
 import chroma from 'chroma-js'
-import { isDateScale } from '@cdc/core/helpers/cove/date'
+import { getAutoDetectedDateParseFormat, isDateScale } from '@cdc/core/helpers/cove/date'
 import {
   Accordion,
   AccordionItem,
@@ -16,10 +16,12 @@ import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
 import Icon from '@cdc/core/components/ui/Icon'
 import ColumnsEditor from '@cdc/core/components/EditorPanel/ColumnsEditor'
 import DataTableEditor from '@cdc/core/components/EditorPanel/DataTableEditor'
+import GroupedList from '@cdc/core/components/EditorPanel/GroupedList'
 import VizFilterEditor from '@cdc/core/components/EditorPanel/VizFilterEditor'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import { Select, TextField, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
 import MultiSelect from '@cdc/core/components/MultiSelect'
+import Button from '@cdc/core/components/elements/Button'
 import { viewports } from '@cdc/core/helpers/getViewport'
 import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 import PanelMarkup from '@cdc/core/components/EditorPanel/components/PanelMarkup'
@@ -59,6 +61,11 @@ import { paletteMigrationMap, twoColorPaletteMigrationMap } from '@cdc/core/help
 import { isV1Palette, migratePaletteWithMap } from '@cdc/core/helpers/palettes/utils'
 import { USE_V2_MIGRATION } from '@cdc/core/helpers/constants'
 import { getSeriesOwnedColumnNames } from '../../helpers/seriesColumnSettings'
+import {
+  HEATMAP_CONFIG_DEFAULTS,
+  MAX_HEATMAP_COLOR_BUCKETS,
+  MIN_HEATMAP_COLOR_BUCKETS
+} from '../HeatMap/heatmap.constants'
 
 interface PreliminaryProps {
   config: ChartConfig
@@ -158,324 +165,363 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
     updateConfig({ ...config, preliminaryData })
   }
 
+  const moveColumn = (sourceIndex, destinationIndex) => {
+    const preliminaryData = config.preliminaryData ? [...config.preliminaryData] : []
+    const [movedItem] = preliminaryData.splice(sourceIndex, 1)
+    preliminaryData.splice(destinationIndex, 0, movedItem)
+    updateConfig({ ...config, preliminaryData })
+  }
+
   return (
     <>
-      {config.preliminaryData &&
-        config.preliminaryData?.map(
-          (
-            {
-              displayGray,
-              circleSize,
-              column,
-              displayLegend,
-              displayTable,
-              displayTooltip,
-              label,
-              seriesKeys,
-              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='btn btn-danger'
-                  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>
-                              {' '}
-                              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={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') && (
-                      <>
-                        <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') && (
-                      <>
-                        <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)}
-                        />
-                      </>
-                    )}
+      <GroupedList
+        items={config.preliminaryData}
+        label='Suppressed Data'
+        droppableId='chart-preliminary-data-order'
+        onDragEnd={({ source, destination }) => {
+          if (!destination || source.index === destination.index) return
+          moveColumn(source.index, destination.index)
+        }}
+        renderItem={(
+          {
+            displayGray,
+            circleSize,
+            column,
+            displayLegend,
+            displayTable,
+            displayTooltip,
+            label,
+            seriesKeys,
+            style,
+            symbol,
+            type,
+            value,
+            hideBarSymbol,
+            hideLineStyle
+          },
+          i
+        ) => (
+          <Draggable key={`preliminaryData-${i}`} draggableId={`preliminaryData-${i}`} index={i}>
+            {(provided, snapshot) => (
+              <div
+                className={snapshot.isDragging ? 'currently-dragging' : ''}
+                style={provided.draggableProps.style}
+                ref={provided.innerRef}
+                {...provided.draggableProps}
+                {...provided.dragHandleProps}
+              >
+                <Accordion allowZeroExpanded>
+                  <AccordionItem className='series-item series-item--chart'>
+                    <AccordionItemHeading className='series-item__title'>
+                      <AccordionItemButton className='accordion__button'>
+                        <Icon display='move' size={15} style={{ cursor: 'default' }} />
+                        {type === 'suppression' ? 'Suppressed Data' : `Effect Data ${i + 1}`}
+                      </AccordionItemButton>
+                    </AccordionItemHeading>
+                    <AccordionItemPanel>
+                      <div className='series-item__panel-actions'>
+                        <Button
+                          type='button'
+                          variant='danger'
+                          size='sm'
+                          className='grouped-list__remove'
+                          onClick={event => {
+                            event.preventDefault()
+                            removeColumn(i)
+                          }}
+                        >
+                          Remove
+                        </Button>
+                      </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
-                      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)}
-                    />
-                  </>
-                ) : (
-                  <>
-                    <label>
-                      <span className='edit-label'>ASSOCIATE TO THESE SERIES</span>
-                      <MultiSelect
-                        fieldName='seriesKeys'
-                        updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
-                        options={(config.runtime.lineSeriesKeys ?? config.runtime?.seriesKeys).map(c => ({
-                          label: c,
-                          value: c
-                        }))}
-                        selected={seriesKeys}
-                      />
-                    </label>
-                    <Select
-                      value={column}
-                      initial='Select'
-                      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>
-                              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={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)}
-                    />
-                    {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=''
+                      <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>
+                                    {' '}
+                                    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={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') && (
+                            <>
+                              <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') && (
+                            <>
+                              <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)}
+                          />
+                        </>
+                      ) : (
+                        <>
+                          <label>
+                            <span className='edit-label'>ASSOCIATE TO THESE SERIES</span>
+                            <MultiSelect
+                              fieldName='seriesKeys'
+                              updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                              options={(config.runtime.lineSeriesKeys ?? config.runtime?.seriesKeys).map(c => ({
+                                label: c,
+                                value: c
+                              }))}
+                              selected={seriesKeys}
+                            />
+                          </label>
+                          <Select
+                            value={column}
+                            initial='Select'
+                            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>
+                                    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={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)}
+                          />
+                          {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)}
+                            />
+                          )}
+                        </>
+                      )}
+                    </AccordionItemPanel>
+                  </AccordionItem>
+                </Accordion>
               </div>
-            )
-          }
+            )}
+          </Draggable>
         )}
-
-      <button type='button' onClick={addColumn} className='btn btn-primary full-width'>
+      />
+      <Button type='button' variant='editor-primary' onClick={addColumn}>
         {config.visualizationType === 'Line'
           ? 'Add Special Line'
           : config.visualizationType === 'Bar'
           ? ' Add Special Bar'
           : 'Add Special Bar/Line'}
-      </button>
+      </Button>
     </>
   )
 }
@@ -486,6 +532,158 @@ interface CategoricalAxisProps {
   display: boolean
 }
 
+type AxisAnchorEditorProps = {
+  axisKey: 'xAxis' | 'yAxis'
+  config: ChartConfig
+  lineOptions: { value: string; label?: string }[]
+  updateConfig: Function
+}
+
+const AxisAnchorEditor: React.FC<AxisAnchorEditorProps> = ({ axisKey, config, lineOptions, updateConfig }) => {
+  const anchors = config[axisKey]?.anchors || []
+
+  const updateAnchors = (nextAnchors: Anchor[]) => {
+    updateConfig({
+      ...config,
+      [axisKey]: {
+        ...config[axisKey],
+        anchors: nextAnchors
+      }
+    })
+  }
+
+  const updateAnchorField = (index: number, field: keyof Anchor, value: string) => {
+    const copiedAnchors = [...anchors]
+    copiedAnchors[index] = {
+      ...copiedAnchors[index],
+      [field]: value
+    }
+    updateAnchors(copiedAnchors)
+  }
+
+  const removeAnchor = (index: number) => {
+    const copiedAnchors = [...anchors]
+    copiedAnchors.splice(index, 1)
+    updateAnchors(copiedAnchors)
+  }
+
+  const addAnchor = () => {
+    updateAnchors([...anchors, {} as Anchor])
+  }
+
+  const reorderAnchors = (sourceIndex: number, destinationIndex: number) => {
+    const copiedAnchors = [...anchors]
+    const [movedAnchor] = copiedAnchors.splice(sourceIndex, 1)
+    copiedAnchors.splice(destinationIndex, 0, movedAnchor)
+    updateAnchors(copiedAnchors)
+  }
+
+  return (
+    <>
+      <GroupedList
+        items={anchors}
+        label='Anchors'
+        droppableId={`${axisKey}-anchors-order`}
+        onDragEnd={({ source, destination }) => {
+          if (!destination || source.index === destination.index) return
+          reorderAnchors(source.index, destination.index)
+        }}
+        renderItem={(anchor, index) => (
+          <Draggable key={`${axisKey}-anchor-${index}`} draggableId={`${axisKey}-anchor-${index}`} index={index}>
+            {(provided, snapshot) => (
+              <div
+                ref={provided.innerRef}
+                {...provided.draggableProps}
+                {...provided.dragHandleProps}
+                className={snapshot.isDragging ? 'currently-dragging' : ''}
+                style={provided.draggableProps.style}
+              >
+                <Accordion allowZeroExpanded>
+                  <AccordionItem className='series-item series-item--chart'>
+                    <AccordionItemHeading className='series-item__title'>
+                      <AccordionItemButton className='accordion__button'>
+                        <Icon display='move' size={15} style={{ cursor: 'default' }} />
+                        {`Anchor ${index + 1}`}
+                      </AccordionItemButton>
+                    </AccordionItemHeading>
+                    <AccordionItemPanel>
+                      <div className='series-item__panel-actions'>
+                        <Button
+                          type='button'
+                          variant='danger'
+                          size='sm'
+                          className='grouped-list__remove'
+                          onClick={e => {
+                            e.preventDefault()
+                            removeAnchor(index)
+                          }}
+                        >
+                          Remove
+                        </Button>
+                      </div>
+                      <label>
+                        <span>Anchor Value</span>
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>Enter the value as its shown in the data column</p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                        <input
+                          type='text'
+                          value={anchor?.value || ''}
+                          onChange={e => {
+                            e.preventDefault()
+                            updateAnchorField(index, 'value', e.target.value)
+                          }}
+                        />
+                      </label>
+
+                      <label>
+                        <span>Anchor Color</span>
+                        <input
+                          type='text'
+                          value={anchor?.color || ''}
+                          onChange={e => {
+                            e.preventDefault()
+                            updateAnchorField(index, 'color', e.target.value)
+                          }}
+                        />
+                      </label>
+
+                      <Select
+                        value={anchor?.lineStyle || ''}
+                        label='Anchor Line Style'
+                        onChange={e => updateAnchorField(index, 'lineStyle', e.target.value)}
+                        options={[
+                          { value: '', label: 'Select' },
+                          ...lineOptions.map(line => ({ value: line.value, label: line.value }))
+                        ]}
+                      />
+                    </AccordionItemPanel>
+                  </AccordionItem>
+                </Accordion>
+              </div>
+            )}
+          </Draggable>
+        )}
+      />
+
+      <Button
+        variant='editor-primary'
+        onClick={e => {
+          e.preventDefault()
+          addAnchor()
+        }}
+      >
+        Add Anchor
+      </Button>
+    </>
+  )
+}
+
 const CategoricalAxis: React.FC<CategoricalAxisProps> = ({ config, updateConfig, display }) => {
   const maxHeight = config?.yAxis?.maxValue
 
@@ -547,7 +745,7 @@ const CategoricalAxis: React.FC<CategoricalAxisProps> = ({ config, updateConfig,
           return (
             <div key={`preliminaryData-${i}`} className='edit-block'>
               <p>Axis Category {i + 1}</p>
-              <button
+              <Button
                 type='button'
                 className='btn btn-danger'
                 onClick={event => {
@@ -556,7 +754,7 @@ const CategoricalAxis: React.FC<CategoricalAxisProps> = ({ config, updateConfig,
                 }}
               >
                 Remove
-              </button>
+              </Button>
               <TextField
                 tooltip={
                   <Tooltip style={{ textTransform: 'none' }}>
@@ -602,9 +800,9 @@ const CategoricalAxis: React.FC<CategoricalAxisProps> = ({ config, updateConfig,
           )
         })}
 
-      <button type='button' onClick={addColumn} className='btn btn-primary full-width'>
+      <Button type='button' variant='editor-primary' onClick={addColumn}>
         Add Axis Category
-      </button>
+      </Button>
     </>
   )
 }
@@ -725,7 +923,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
     }
   }, [config.visualizationType])
 
-  const { hasRightAxis } = useRightAxis({ config: config, yMax: config.yAxis.size, data: config.data, updateConfig })
+  const { hasRightAxis } = useRightAxis({ config: config, yMax: 0, data: config.data, updateConfig })
 
   const getItemStyle = (isDragging, draggableStyle) => ({
     ...draggableStyle
@@ -774,6 +972,17 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
   }
 
   const updateField = updateFieldFactory(config, updateConfig)
+  const getAutoDetectedXAxisDateParseFormat = (dataKey = config.xAxis.dataKey, axisType = config.xAxis.type) => {
+    const hasExistingDateParseFormat =
+      typeof config.xAxis.dateParseFormat === 'string' && config.xAxis.dateParseFormat.trim() !== ''
+
+    if (hasExistingDateParseFormat || !['date', 'date-time'].includes(axisType)) {
+      return undefined
+    }
+
+    return getAutoDetectedDateParseFormat(config.data, dataKey)
+  }
+
   const updateFieldDeprecated = (section, subsection, fieldName, newValue) => {
     if (isDebug)
       console.error(
@@ -816,6 +1025,23 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
       })
       return
     }
+
+    if (section === 'xAxis' && !truthy(subsection) && fieldName === 'dataKey') {
+      const autoDetectedDateParseFormat = getAutoDetectedXAxisDateParseFormat(newValue)
+      const updatedConfig = {
+        ...config,
+        xAxis: {
+          ...config.xAxis,
+          dataKey: newValue,
+          ...(autoDetectedDateParseFormat ? { dateParseFormat: autoDetectedDateParseFormat } : {})
+        }
+      }
+
+      enforceRestrictions(updatedConfig)
+      updateConfig(updatedConfig)
+      return
+    }
+
     if (null === section && null === subsection) {
       // special case that allows for updating the config object directly
       if (!truthy(fieldName)) console.error('fieldName is required')
@@ -968,12 +1194,23 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
     return filter ? filteredColumns : allColumns
   }
 
+  const isHeatMap = config.visualizationType === 'HeatMap'
+  const heatMapOwnedColumnNames = useMemo(
+    () => [config.xAxis?.dataKey, ...(config.series || []).map(series => series.dataKey)].filter(Boolean),
+    [config.xAxis?.dataKey, config.series]
+  )
+
   const getLegendStyleOptions = (option: 'style' | 'subStyle' | 'shapes' | 'groupBy'): string[] => {
     const options: string[] = []
 
     switch (option) {
       case 'style':
         options.push('circles', 'boxes')
+        if (config.visualizationType === 'HeatMap') {
+          if (!['right', 'left'].includes(config.legend.position) && config.legend.position) {
+            options.push('gradient')
+          }
+        }
         if (
           config.visualizationType === 'Bar' &&
           (!['right', 'left'].includes(config.legend.position) || !config.legend.position)
@@ -1024,7 +1261,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
   // prettier-ignore
   const {
     highlightedBarValues,
-    highlightedSeriesValues,
+    getHighlightedSeriesValues,
     handleUpdateHighlightedBar,
     handleAddNewHighlightedBar,
     handleRemoveHighlightedBar,
@@ -1117,6 +1354,15 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
   if (config.isLollipopChart && config?.series?.length === 0) {
     config.runtime.editorErrorMessage = 'Add a data series'
   }
+  if (config.visualizationType === 'HeatMap') {
+    const missingMappings = [
+      !config.xAxis?.dataKey && 'Date/Category Axis',
+      (!config.series || config.series.length === 0) && 'Data Series'
+    ].filter(Boolean)
+
+    config.runtime.editorErrorMessage =
+      missingMappings.length > 0 ? `${missingMappings.join(', ')} must be set for heatmaps.` : ''
+  }
 
   const section = config.orientation === 'horizontal' ? 'xAxis' : 'yAxis'
   const [warningMsg, setWarningMsg] = useState({ maxMsg: '', minMsg: '', rightMaxMessage: '', minMsgRight: '' })
@@ -1516,6 +1762,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
     'Bump Chart',
     'Area Chart',
     'Combo',
+    'HeatMap',
     'Line',
     'Bar',
     'Forecasting',
@@ -1634,6 +1881,27 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
   const hasDynamicCategory = ![undefined, '- Select - '].includes(config.series?.[0]?.dynamicCategory)
   const hasMultipleSeries = config.series?.length > 1
 
+  const highlightedSeriesOptions = useMemo(() => {
+    if (
+      !(
+        config.visualizationType === 'Bar' &&
+        config.series?.length === 1 &&
+        config.highlightedBarValues?.length > 0 &&
+        getHighlightedSeriesValues
+      )
+    ) {
+      return []
+    }
+
+    return [...new Set(getHighlightedSeriesValues())].sort().map(option => ({ value: option, label: option }))
+  }, [
+    config.visualizationType,
+    config.series?.length,
+    config.highlightedBarValues?.length,
+    config.data,
+    config.xAxis.dataKey
+  ])
+
   const editorContextValues = {
     addNewExclusion,
     data,
@@ -1652,7 +1920,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
     handleUpdateHighlightedBar,
     handleRemoveHighlightedBar,
     isPaletteReversed: config.general?.palette?.isReversed,
-    highlightedSeriesValues,
+    getHighlightedSeriesValues,
     handleUpdateHighlightedBorderWidth,
     handleUpdateHighlightedBarColor,
     setLollipopShape,
@@ -1678,6 +1946,76 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
     return strippedState
   }
 
+  const renderHeatMapSettingsAccordion = () => {
+    if (config.visualizationType !== 'HeatMap') return null
+
+    return (
+      <AccordionItem>
+        <AccordionItemHeading>
+          <AccordionItemButton>HeatMap Settings</AccordionItemButton>
+        </AccordionItemHeading>
+        <AccordionItemPanel>
+          <p className='helper-text'>Selected data series columns provide the heatmap cell values.</p>
+          <CheckBox
+            value={Boolean(config.heatmap?.showCellValues ?? HEATMAP_CONFIG_DEFAULTS.showCellValues)}
+            section='heatmap'
+            fieldName='showCellValues'
+            label='Show Cell Values'
+            updateField={updateFieldDeprecated}
+          />
+          <TextField
+            value={config.heatmap?.cellPadding ?? HEATMAP_CONFIG_DEFAULTS.cellPadding}
+            type='number'
+            min={0}
+            section='heatmap'
+            fieldName='cellPadding'
+            label='Cell Padding'
+            updateField={updateFieldDeprecated}
+          />
+          <TextField
+            value={config.heatmap?.rowLabelGap ?? HEATMAP_CONFIG_DEFAULTS.rowLabelGap}
+            type='number'
+            min={0}
+            section='heatmap'
+            fieldName='rowLabelGap'
+            label='Row Label Gap'
+            updateField={updateFieldDeprecated}
+          />
+          <TextField
+            value={config.heatmap?.columnLabelGap ?? HEATMAP_CONFIG_DEFAULTS.columnLabelGap}
+            type='number'
+            min={0}
+            section='heatmap'
+            fieldName='columnLabelGap'
+            label='Column Label Gap'
+            updateField={updateFieldDeprecated}
+          />
+          <TextField
+            value={config.heatmap?.colorBucketCount ?? HEATMAP_CONFIG_DEFAULTS.colorBucketCount}
+            type='number'
+            min={MIN_HEATMAP_COLOR_BUCKETS}
+            max={MAX_HEATMAP_COLOR_BUCKETS}
+            step={1}
+            section='heatmap'
+            fieldName='colorBucketCount'
+            label='Data Grouping'
+            updateField={updateFieldDeprecated}
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  Choose the number of value groups used to color the heatmap. Values are limited to 1-9.
+                </Tooltip.Content>
+              </Tooltip>
+            }
+          />
+        </AccordionItemPanel>
+      </AccordionItem>
+    )
+  }
+
   return (
     <EditorPanelContext.Provider value={editorContextValues}>
       <BaseEditorPanel
@@ -1708,7 +2046,10 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                           {(!config.series ||
                             config.series.length === 0 ||
                             (config.visualizationType === 'Paired Bar' && config.series.length < 2)) &&
-                            !config.dynamicSeries && <WarningImage width='25' className='warning-icon' />}
+                            !config.dynamicSeries &&
+                            config.visualizationType !== 'HeatMap' && (
+                              <WarningImage width='25' className='warning-icon' />
+                            )}
                         </AccordionItemButton>
                       </AccordionItemHeading>
                       <AccordionItemPanel>
@@ -1745,9 +2086,21 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                           )}
                         {(!visSupportsDynamicSeries() || !config.dynamicSeries) && (
                           <>
+                            {config.visualizationType === 'HeatMap' && (
+                              <p className='helper-text'>
+                                Add one or more data series to create heatmap rows. Each selected series becomes a row
+                                in the heatmap, while the Date/Category Axis provides the columns.
+                              </p>
+                            )}
+                            {(!config.series || config.series.length === 0) &&
+                              !config.dynamicSeries &&
+                              config.visualizationType !== 'Paired Bar' &&
+                              config.visualizationType !== 'HeatMap' && (
+                                <p className='warning'>At least one series is required</p>
+                              )}
                             {(!config.series || config.series.length === 0) &&
                               !config.dynamicSeries &&
-                              config.visualizationType !== 'Paired Bar' && (
+                              config.visualizationType === 'HeatMap' && (
                                 <p className='warning'>At least one series is required</p>
                               )}
                             {(!config.series || config.series.length === 0 || config.series.length < 2) &&
@@ -1768,56 +2121,54 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                   }
                                   e.target.value = ''
                                 }}
-                                options={getColumns()}
+                                options={getColumns().filter(column => column !== config.xAxis?.dataKey)}
                               />
                               {config.series && config.series.length !== 0 && (
                                 <Panels.Series.Wrapper
                                   getColumns={getColumns}
                                   handleForecastPaletteSelection={handleForecastPaletteSelection}
                                 >
-                                  <fieldset>
-                                    <legend className='edit-label d-flex align-items-center'>
-                                      Displaying
-                                      <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>
-                                    </legend>
-                                  </fieldset>
-
-                                  <DragDropContext
-                                    onDragEnd={({ source, destination }) =>
-                                      handleSeriesChange(source.index, destination.index)
+                                  <GroupedList
+                                    items={config.series}
+                                    droppableId='chart-series-order'
+                                    label={
+                                      <>
+                                        {config.visualizationType === 'HeatMap' ? 'Displaying Rows' : 'Displaying'}
+                                        <Tooltip style={{ textTransform: 'none' }}>
+                                          <Tooltip.Target>
+                                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                          </Tooltip.Target>
+                                          <Tooltip.Content>
+                                            {config.visualizationType === 'HeatMap' ? (
+                                              <p>
+                                                Each selected data series becomes a row in the heatmap. Reorder these
+                                                entries to change the row order shown in the visualization.
+                                              </p>
+                                            ) : (
+                                              <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>
+                                      </>
                                     }
-                                  >
-                                    <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>
+                                    onDragEnd={({ source, destination }) => {
+                                      if (!destination || source.index === destination.index) return
+                                      handleSeriesChange(source.index, destination.index)
+                                    }}
+                                    renderItem={(series, index) => (
+                                      <Panels.Series.Item
+                                        getItemStyle={getItemStyle}
+                                        sortableItemStyles={sortableItemStyles}
+                                        chartsWithOptions={chartsWithOptions}
+                                        series={series}
+                                        index={index}
+                                        key={`series-list-${index}`}
+                                      />
+                                    )}
+                                  />
                                 </Panels.Series.Wrapper>
                               )}
                             </>
@@ -1875,9 +2226,9 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                           : config.orientation === 'vertical'
                           ? 'Left Value Axis'
                           : 'Value Axis'}
-                        {config.visualizationType === 'Pie' && !config.yAxis.dataKey && (
+                        {config.visualizationType === 'Pie' && !config.yAxis.dataKey ? (
                           <WarningImage width='25' className='warning-icon' />
-                        )}
+                        ) : null}
                       </AccordionItemButton>
                     </AccordionItemHeading>
                     <AccordionItemPanel>
@@ -1904,28 +2255,107 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                             }
                           />
                           <TextField
-                            value={config.yAxis.label}
+                            value={config.yAxis.label}
+                            section='yAxis'
+                            fieldName='label'
+                            label='Data Label'
+                            updateField={updateFieldDeprecated}
+                            maxLength={35}
+                            tooltip={
+                              <Tooltip style={{ textTransform: 'none' }}>
+                                <Tooltip.Target>
+                                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                </Tooltip.Target>
+                                <Tooltip.Content>
+                                  <p>
+                                    Override the data column name shown in tooltips and data table (35 character limit)
+                                  </p>
+                                </Tooltip.Content>
+                              </Tooltip>
+                            }
+                          />
+                        </>
+                      )}
+                      {config.visualizationType === 'HeatMap' && (
+                        <>
+                          <TextField
+                            value={config.yAxis.label}
+                            section='yAxis'
+                            fieldName='label'
+                            label='Label'
+                            updateField={updateFieldDeprecated}
+                            maxLength={35}
+                            tooltip={
+                              <Tooltip style={{ textTransform: 'none' }}>
+                                <Tooltip.Target>
+                                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                </Tooltip.Target>
+                                <Tooltip.Content>
+                                  <p>35 character limit</p>
+                                </Tooltip.Content>
+                              </Tooltip>
+                            }
+                          />
+                          <Select
+                            value={config.yAxis.titlePlacement || 'side'}
+                            section='yAxis'
+                            fieldName='titlePlacement'
+                            label='Label Placement'
+                            updateField={updateFieldDeprecated}
+                            options={[
+                              { value: 'side', label: 'Side' },
+                              { value: 'top', label: 'Top' }
+                            ]}
+                          />
+                          <TextField
+                            value={config.yAxis.size}
+                            type='number'
                             section='yAxis'
-                            fieldName='label'
-                            label='Data Label'
+                            fieldName='size'
+                            label='Size (Width)'
+                            className='number-narrow'
                             updateField={updateFieldDeprecated}
-                            maxLength={35}
                             tooltip={
                               <Tooltip style={{ textTransform: 'none' }}>
                                 <Tooltip.Target>
-                                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                  <Icon
+                                    display='question'
+                                    style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                                  />
                                 </Tooltip.Target>
                                 <Tooltip.Content>
-                                  <p>
-                                    Override the data column name shown in tooltips and data table (35 character limit)
-                                  </p>
+                                  <p>Increase the size if month labels are crowded or overlap the chart area.</p>
                                 </Tooltip.Content>
                               </Tooltip>
                             }
                           />
+                          <CheckBox
+                            value={config.yAxis.hideAxis}
+                            section='yAxis'
+                            fieldName='hideAxis'
+                            label='Hide Axis'
+                            updateField={updateFieldDeprecated}
+                          />
+                          <CheckBox
+                            value={config.yAxis.hideTicks}
+                            section='yAxis'
+                            fieldName='hideTicks'
+                            label='Hide Ticks'
+                            updateField={updateFieldDeprecated}
+                          />
+                          <TextField
+                            value={config.yAxis.tickRotation || 0}
+                            type='number'
+                            min={0}
+                            section='yAxis'
+                            fieldName='tickRotation'
+                            label='Tick rotation (Degrees)'
+                            className='number-narrow'
+                            updateField={updateFieldDeprecated}
+                          />
                         </>
                       )}
-                      {config.visualizationType !== 'Pie' && (
+                      {config.visualizationType !== 'Pie' && config.visualizationType !== 'HeatMap' && (
                         <>
                           <Select
                             label='Axis Type'
@@ -1976,18 +2406,30 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                             fieldName='label'
                             label='Label'
                             updateField={updateFieldDeprecated}
-                            maxLength={35}
+                            maxLength={config.yAxis.titlePlacement === 'side' ? 35 : undefined}
                             tooltip={
                               <Tooltip style={{ textTransform: 'none' }}>
                                 <Tooltip.Target>
                                   <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                                 </Tooltip.Target>
                                 <Tooltip.Content>
-                                  <p>35 character limit</p>
+                                  <p>35 character limit when Label Placement is Side</p>
                                 </Tooltip.Content>
                               </Tooltip>
                             }
                           />
+                          <Select
+                            display={!visHasCategoricalAxis()}
+                            value={config.yAxis.titlePlacement}
+                            section='yAxis'
+                            fieldName='titlePlacement'
+                            label='Label Placement'
+                            updateField={updateField}
+                            options={[
+                              { value: 'side', label: 'Side' },
+                              { value: 'top', label: 'Top' }
+                            ]}
+                          />
                           <TextField
                             display={!visHasCategoricalAxis()}
                             value={config.yAxis.inlineLabel}
@@ -2045,38 +2487,6 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                             }
                             updateField={updateFieldDeprecated}
                           />
-                          <TextField
-                            value={config.yAxis.size}
-                            type='number'
-                            section='yAxis'
-                            fieldName='size'
-                            label={config.orientation === 'horizontal' ? 'Size (Height)' : 'Size (Width)'}
-                            className='number-narrow'
-                            updateField={updateFieldDeprecated}
-                            tooltip={
-                              <Tooltip style={{ textTransform: 'none' }}>
-                                <Tooltip.Target>
-                                  <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>
-                                </Tooltip.Content>
-                              </Tooltip>
-                            }
-                          />
-                          <TextField
-                            display={!visHasCategoricalAxis()}
-                            value={config.yAxis.labelOffset}
-                            section='yAxis'
-                            fieldName='labelOffset'
-                            label='Label offset'
-                            type='number'
-                            className='number-narrow'
-                            updateField={updateFieldDeprecated}
-                          />
                           {config.orientation === 'horizontal' && (
                             <CheckBox
                               value={config.isResponsiveTicks}
@@ -2403,7 +2813,8 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                           )}
                         </>
                       ) : (
-                        config.visualizationType !== 'Pie' && (
+                        config.visualizationType !== 'Pie' &&
+                        config.visualizationType !== 'HeatMap' && (
                           <>
                             <CheckBox
                               display={!visHasCategoricalAxis()}
@@ -2481,251 +2892,20 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                       )}
                       {/* start: anchors */}
                       {visHasAnchors() && config.orientation !== 'horizontal' && (
-                        <div className='edit-block'>
-                          <span className='edit-label column-heading'>Anchors</span>
-                          <Accordion allowZeroExpanded>
-                            {config.yAxis?.anchors?.map((anchor, index) => (
-                              <AccordionItem
-                                className='series-item series-item--chart'
-                                key={`yaxis-anchors-2-${index}`}
-                              >
-                                <AccordionItemHeading className='series-item__title'>
-                                  <>
-                                    <AccordionItemButton className={'accordion__button accordion__button'}>
-                                      Anchor {index + 1}
-                                      <button
-                                        className='series-list__remove'
-                                        onClick={e => {
-                                          e.preventDefault()
-                                          const copiedAnchorGroups = [...config.yAxis.anchors]
-                                          copiedAnchorGroups.splice(index, 1)
-                                          updateConfig({
-                                            ...config,
-                                            yAxis: {
-                                              ...config.yAxis,
-                                              anchors: copiedAnchorGroups
-                                            }
-                                          })
-                                        }}
-                                      >
-                                        Remove
-                                      </button>
-                                    </AccordionItemButton>
-                                  </>
-                                </AccordionItemHeading>
-                                <AccordionItemPanel>
-                                  <label>
-                                    <span>Anchor Value</span>
-                                    <Tooltip style={{ textTransform: 'none' }}>
-                                      <Tooltip.Target>
-                                        <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                                      </Tooltip.Target>
-                                      <Tooltip.Content>
-                                        <p>Enter the value as its shown in the data column</p>
-                                      </Tooltip.Content>
-                                    </Tooltip>
-                                    <input
-                                      type='text'
-                                      value={config.yAxis.anchors[index].value ? config.yAxis.anchors[index].value : ''}
-                                      onChange={e => {
-                                        e.preventDefault()
-                                        const copiedAnchors = [...config.yAxis.anchors]
-                                        copiedAnchors[index].value = e.target.value
-                                        updateConfig({
-                                          ...config,
-                                          yAxis: {
-                                            ...config.yAxis,
-                                            anchors: copiedAnchors
-                                          }
-                                        })
-                                      }}
-                                    />
-                                  </label>
-
-                                  <label>
-                                    <span>Anchor Color</span>
-                                    <input
-                                      type='text'
-                                      value={config.yAxis.anchors[index].color ? config.yAxis.anchors[index].color : ''}
-                                      onChange={e => {
-                                        e.preventDefault()
-                                        const copiedAnchors = [...config.yAxis.anchors]
-                                        copiedAnchors[index].color = e.target.value
-                                        updateConfig({
-                                          ...config,
-                                          yAxis: {
-                                            ...config.yAxis,
-                                            anchors: copiedAnchors
-                                          }
-                                        })
-                                      }}
-                                    />
-                                  </label>
-
-                                  <Select
-                                    value={config.yAxis.anchors[index].lineStyle || ''}
-                                    label='Anchor Line Style'
-                                    onChange={e => {
-                                      const copiedAnchors = [...config.yAxis.anchors]
-                                      copiedAnchors[index].lineStyle = e.target.value
-                                      updateConfig({
-                                        ...config,
-                                        yAxis: {
-                                          ...config.yAxis,
-                                          anchors: copiedAnchors
-                                        }
-                                      })
-                                    }}
-                                    options={[
-                                      { value: '', label: 'Select' },
-                                      ...lineOptions.map(line => ({ value: line.value, label: line.value }))
-                                    ]}
-                                  />
-                                </AccordionItemPanel>
-                              </AccordionItem>
-                            ))}
-                          </Accordion>
-
-                          <button
-                            className='btn btn-primary full-width'
-                            onClick={e => {
-                              e.preventDefault()
-                              const anchors = [...config.yAxis.anchors]
-                              anchors.push({} as Anchor)
-                              updateConfig({
-                                ...config,
-                                yAxis: {
-                                  ...config.yAxis,
-                                  anchors
-                                }
-                              })
-                            }}
-                          >
-                            Add Anchor
-                          </button>
-                        </div>
+                        <AxisAnchorEditor
+                          axisKey='yAxis'
+                          config={config}
+                          lineOptions={lineOptions}
+                          updateConfig={updateConfig}
+                        />
                       )}
                       {visHasAnchors() && config.orientation === 'horizontal' && (
-                        <div className='edit-block'>
-                          <span className='edit-label column-heading'>Anchors</span>
-                          <Accordion allowZeroExpanded>
-                            {config.xAxis?.anchors?.map((anchor, index) => (
-                              <AccordionItem className='series-item series-item--chart' key={`xaxis-anchors-${index}`}>
-                                <AccordionItemHeading className='series-item__title'>
-                                  <>
-                                    <AccordionItemButton className={'accordion__button accordion__button'}>
-                                      Anchor {index + 1}
-                                      <button
-                                        className='series-list__remove'
-                                        onClick={e => {
-                                          e.preventDefault()
-                                          const copiedAnchorGroups = [...config.xAxis.anchors]
-                                          copiedAnchorGroups.splice(index, 1)
-                                          updateConfig({
-                                            ...config,
-                                            xAxis: {
-                                              ...config.xAxis,
-                                              anchors: copiedAnchorGroups
-                                            }
-                                          })
-                                        }}
-                                      >
-                                        Remove
-                                      </button>
-                                    </AccordionItemButton>
-                                  </>
-                                </AccordionItemHeading>
-                                <AccordionItemPanel>
-                                  <label>
-                                    <span>Anchor Value</span>
-                                    <Tooltip style={{ textTransform: 'none' }}>
-                                      <Tooltip.Target>
-                                        <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                                      </Tooltip.Target>
-                                      <Tooltip.Content>
-                                        <p>Enter the value as its shown in the data column</p>
-                                      </Tooltip.Content>
-                                    </Tooltip>
-                                    <input
-                                      type='text'
-                                      value={config.xAxis.anchors[index].value ? config.xAxis.anchors[index].value : ''}
-                                      onChange={e => {
-                                        e.preventDefault()
-                                        const copiedAnchors = [...config.xAxis.anchors]
-                                        copiedAnchors[index].value = e.target.value
-                                        updateConfig({
-                                          ...config,
-                                          xAxis: {
-                                            ...config.xAxis,
-                                            anchors: copiedAnchors
-                                          }
-                                        })
-                                      }}
-                                    />
-                                  </label>
-
-                                  <label>
-                                    <span>Anchor Color</span>
-                                    <input
-                                      type='text'
-                                      value={config.xAxis.anchors[index].color ? config.xAxis.anchors[index].color : ''}
-                                      onChange={e => {
-                                        e.preventDefault()
-                                        const copiedAnchors = [...config.xAxis.anchors]
-                                        copiedAnchors[index].color = e.target.value
-                                        updateConfig({
-                                          ...config,
-                                          xAxis: {
-                                            ...config.xAxis,
-                                            anchors: copiedAnchors
-                                          }
-                                        })
-                                      }}
-                                    />
-                                  </label>
-
-                                  <Select
-                                    value={config.xAxis.anchors[index].lineStyle || ''}
-                                    label='Anchor Line Style'
-                                    onChange={e => {
-                                      const copiedAnchors = [...config.xAxis.anchors]
-                                      copiedAnchors[index].lineStyle = e.target.value
-                                      updateConfig({
-                                        ...config,
-                                        xAxis: {
-                                          ...config.xAxis,
-                                          anchors: copiedAnchors
-                                        }
-                                      })
-                                    }}
-                                    options={[
-                                      { value: '', label: 'Select' },
-                                      ...lineOptions.map(line => ({ value: line.value, label: line.value }))
-                                    ]}
-                                  />
-                                </AccordionItemPanel>
-                              </AccordionItem>
-                            ))}
-                          </Accordion>
-
-                          <button
-                            className='btn btn-primary full-width'
-                            onClick={e => {
-                              e.preventDefault()
-                              const anchors = [...config.xAxis.anchors]
-                              anchors.push({} as Anchor)
-                              updateConfig({
-                                ...config,
-                                xAxis: {
-                                  ...config.xAxis,
-                                  anchors
-                                }
-                              })
-                            }}
-                          >
-                            Add Anchor
-                          </button>
-                        </div>
+                        <AxisAnchorEditor
+                          axisKey='xAxis'
+                          config={config}
+                          lineOptions={lineOptions}
+                          updateConfig={updateConfig}
+                        />
                       )}
                       {/* end: anchors */}
                     </AccordionItemPanel>
@@ -2961,11 +3141,19 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                 section='xAxis'
                                 fieldName='type'
                                 updateField={(_section, _subsection, _fieldName, value) => {
+                                  const autoDetectedDateParseFormat = getAutoDetectedXAxisDateParseFormat(
+                                    config.xAxis.dataKey,
+                                    value
+                                  )
+
                                   updateConfig({
                                     ...config,
                                     xAxis: {
                                       ...config.xAxis,
-                                      type: value
+                                      type: value,
+                                      ...(autoDetectedDateParseFormat
+                                        ? { dateParseFormat: autoDetectedDateParseFormat }
+                                        : {})
                                     }
                                   })
                                 }}
@@ -3082,6 +3270,16 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                               </Tooltip>
                             }
                           />
+                          {config.visualizationType === 'HeatMap' && (
+                            <Select
+                              value={config.heatmap?.xAxisPosition ?? HEATMAP_CONFIG_DEFAULTS.xAxisPosition}
+                              section='heatmap'
+                              fieldName='xAxisPosition'
+                              label='X-Axis Position'
+                              updateField={updateFieldDeprecated}
+                              options={['top', 'bottom']}
+                            />
+                          )}
 
                           {config.xAxis.type === 'continuous' && (
                             <>
@@ -3341,38 +3539,71 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                 }
                               />
                               {config.xAxis.brushActive && (
-                                <TextField
-                                  value={config.xAxis.brushDefaultRecentDateCount ?? ''}
-                                  placeholder='Default (35%)'
-                                  type='number'
-                                  min={1}
-                                  section='xAxis'
-                                  fieldName='brushDefaultRecentDateCount'
-                                  label='Show Last X Dates by Default'
-                                  className='number-narrow'
-                                  updateField={updateFieldDeprecated}
-                                  tooltip={
-                                    <Tooltip style={{ textTransform: 'none' }}>
-                                      <Tooltip.Target>
-                                        <Icon
-                                          display='question'
-                                          style={{
-                                            marginLeft: '0.5rem',
-                                            display: 'inline-block',
-                                            whiteSpace: 'nowrap'
-                                          }}
-                                        />
-                                      </Tooltip.Target>
-                                      <Tooltip.Content>
-                                        <p>
-                                          When set, the brush slider will initially select this many recent data points
-                                          instead of the default 35%. Leave empty to use the default percentage-based
-                                          selection.
-                                        </p>
-                                      </Tooltip.Content>
-                                    </Tooltip>
-                                  }
-                                />
+                                <>
+                                  <CheckBox
+                                    value={!!config.xAxis.brushDynamicYAxis}
+                                    section='xAxis'
+                                    fieldName='brushDynamicYAxis'
+                                    label='Dynamic Y-Axis'
+                                    className='ms-4'
+                                    updateField={updateFieldDeprecated}
+                                    tooltip={
+                                      <Tooltip style={{ textTransform: 'none' }}>
+                                        <Tooltip.Target>
+                                          <Icon
+                                            display='question'
+                                            style={{
+                                              marginLeft: '0.5rem',
+                                              display: 'inline-block',
+                                              whiteSpace: 'nowrap'
+                                            }}
+                                          />
+                                        </Tooltip.Target>
+                                        <Tooltip.Content>
+                                          <p>
+                                            When enabled, the Y-axis rescales to fit only the data visible in the
+                                            current brush selection. When disabled, the Y-axis shows the full data
+                                            range.
+                                          </p>
+                                        </Tooltip.Content>
+                                      </Tooltip>
+                                    }
+                                  />
+                                  <div className='ms-4 mt-2'>
+                                    <TextField
+                                      value={config.xAxis.brushDefaultRecentDateCount ?? ''}
+                                      placeholder='Default (35%)'
+                                      type='number'
+                                      min={1}
+                                      section='xAxis'
+                                      fieldName='brushDefaultRecentDateCount'
+                                      label='Show Last X Dates by Default'
+                                      className='number-narrow'
+                                      updateField={updateFieldDeprecated}
+                                      tooltip={
+                                        <Tooltip style={{ textTransform: 'none' }}>
+                                          <Tooltip.Target>
+                                            <Icon
+                                              display='question'
+                                              style={{
+                                                marginLeft: '0.5rem',
+                                                display: 'inline-block',
+                                                whiteSpace: 'nowrap'
+                                              }}
+                                            />
+                                          </Tooltip.Target>
+                                          <Tooltip.Content>
+                                            <p>
+                                              When set, the brush slider will initially select this many recent data
+                                              points instead of the default 35%. Leave empty to use the default
+                                              percentage-based selection.
+                                            </p>
+                                          </Tooltip.Content>
+                                        </Tooltip>
+                                      }
+                                    />
+                                  </div>
+                                </>
                               )}
                             </>
                           )}
@@ -3587,18 +3818,6 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                               updateField={updateFieldDeprecated}
                             />
                           )}
-                          {config.orientation === 'horizontal' && (
-                            <TextField
-                              value={config.xAxis.labelOffset}
-                              section='xAxis'
-                              fieldName='labelOffset'
-                              label='Label offset'
-                              type='number'
-                              className='number-narrow'
-                              updateField={updateFieldDeprecated}
-                            />
-                          )}
-
                           {/* 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={updateFieldDeprecated} /> */}
                           {(config.xAxis.type === 'continuous' || config.forestPlot.type === 'Logarithmic') && (
@@ -3737,12 +3956,12 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                 highlightedBarValues.map((highlightedBarValue, i) => (
                                   <fieldset>
                                     <div className='edit-block' key={`highlighted-bar-${i}`}>
-                                      <button
+                                      <Button
                                         className='btn btn-danger'
                                         onClick={e => handleRemoveHighlightedBar(e, i)}
                                       >
                                         Remove
-                                      </button>
+                                      </Button>
                                       <p>Highlighted Bar {i + 1}</p>
                                       <Select
                                         value={config.highlightedBarValues[i].value}
@@ -3750,11 +3969,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                         onChange={e => handleUpdateHighlightedBar(e, i)}
                                         options={[
                                           { value: '', label: '- Select Value -' },
-                                          ...(highlightedSeriesValues
-                                            ? [...new Set(highlightedSeriesValues)]
-                                                .sort()
-                                                .map(option => ({ value: option, label: option }))
-                                            : [])
+                                          ...highlightedSeriesOptions
                                         ]}
                                       />
                                       <label>
@@ -3798,12 +4013,9 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                     </div>
                                   </fieldset>
                                 ))}
-                              <button
-                                className='btn btn-primary full-width'
-                                onClick={e => handleAddNewHighlightedBar(e)}
-                              >
+                              <Button variant='editor-primary' onClick={e => handleAddNewHighlightedBar(e)}>
                                 Add Highlighted Bar
-                              </button>
+                              </Button>
                             </>
                           )}
                         </>
@@ -3888,259 +4100,26 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
 
                       {/* anchors */}
                       {visHasAnchors() && config.orientation !== 'horizontal' && (
-                        <div className='edit-block'>
-                          <span className='edit-label column-heading'>Anchors</span>
-                          <Accordion allowZeroExpanded>
-                            {config.xAxis?.anchors?.map((anchor, index) => (
-                              <AccordionItem
-                                className='series-item series-item--chart'
-                                key={`xaxis-anchors-2-${index}`}
-                              >
-                                <AccordionItemHeading className='series-item__title'>
-                                  <>
-                                    <AccordionItemButton className={'accordion__button accordion__button'}>
-                                      Anchor {index + 1}
-                                      <button
-                                        className='series-list__remove'
-                                        onClick={e => {
-                                          e.preventDefault()
-                                          const copiedAnchorGroups = [...config.xAxis.anchors]
-                                          copiedAnchorGroups.splice(index, 1)
-                                          updateConfig({
-                                            ...config,
-                                            xAxis: {
-                                              ...config.xAxis,
-                                              anchors: copiedAnchorGroups
-                                            }
-                                          })
-                                        }}
-                                      >
-                                        Remove
-                                      </button>
-                                    </AccordionItemButton>
-                                  </>
-                                </AccordionItemHeading>
-                                <AccordionItemPanel>
-                                  <label>
-                                    <span>Anchor Value</span>
-                                    <Tooltip style={{ textTransform: 'none' }}>
-                                      <Tooltip.Target>
-                                        <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                                      </Tooltip.Target>
-                                      <Tooltip.Content>
-                                        <p>Enter the value as its shown in the data column</p>
-                                      </Tooltip.Content>
-                                    </Tooltip>
-                                    <input
-                                      type='text'
-                                      value={config.xAxis.anchors[index].value ? config.xAxis.anchors[index].value : ''}
-                                      onChange={e => {
-                                        e.preventDefault()
-                                        const copiedAnchors = [...config.xAxis.anchors]
-                                        copiedAnchors[index].value = e.target.value
-                                        updateConfig({
-                                          ...config,
-                                          xAxis: {
-                                            ...config.xAxis,
-                                            anchors: copiedAnchors
-                                          }
-                                        })
-                                      }}
-                                    />
-                                  </label>
-
-                                  <label>
-                                    <span>Anchor Color</span>
-                                    <input
-                                      type='text'
-                                      value={config.xAxis.anchors[index].color ? config.xAxis.anchors[index].color : ''}
-                                      onChange={e => {
-                                        e.preventDefault()
-                                        const copiedAnchors = [...config.xAxis.anchors]
-                                        copiedAnchors[index].color = e.target.value
-                                        updateConfig({
-                                          ...config,
-                                          xAxis: {
-                                            ...config.xAxis,
-                                            anchors: copiedAnchors
-                                          }
-                                        })
-                                      }}
-                                    />
-                                  </label>
-
-                                  <Select
-                                    value={config.xAxis.anchors[index].lineStyle || ''}
-                                    label='Anchor Line Style'
-                                    onChange={e => {
-                                      const copiedAnchors = [...config.xAxis.anchors]
-                                      copiedAnchors[index].lineStyle = e.target.value
-                                      updateConfig({
-                                        ...config,
-                                        xAxis: {
-                                          ...config.xAxis,
-                                          anchors: copiedAnchors
-                                        }
-                                      })
-                                    }}
-                                    options={[
-                                      { value: '', label: 'Select' },
-                                      ...lineOptions.map(line => ({ value: line.value, label: line.value }))
-                                    ]}
-                                  />
-                                </AccordionItemPanel>
-                              </AccordionItem>
-                            ))}
-                          </Accordion>
-
-                          <button
-                            className='btn btn-primary full-width'
-                            onClick={e => {
-                              e.preventDefault()
-                              const anchors = [...config.xAxis.anchors]
-                              anchors.push({} as Anchor)
-                              updateConfig({
-                                ...config,
-                                xAxis: {
-                                  ...config.xAxis,
-                                  anchors
-                                }
-                              })
-                            }}
-                          >
-                            Add Anchor
-                          </button>
-                        </div>
+                        <AxisAnchorEditor
+                          axisKey='xAxis'
+                          config={config}
+                          lineOptions={lineOptions}
+                          updateConfig={updateConfig}
+                        />
                       )}
 
                       {visHasAnchors() && config.orientation === 'horizontal' && (
-                        <div className='edit-block'>
-                          <span className='edit-label column-heading'>Anchors</span>
-                          <Accordion allowZeroExpanded>
-                            {config.yAxis?.anchors?.map((anchor, index) => (
-                              <AccordionItem
-                                className='series-item series-item--chart'
-                                key={`accordion-yaxis-anchors-${index}`}
-                              >
-                                <AccordionItemHeading className='series-item__title'>
-                                  <>
-                                    <AccordionItemButton className={'accordion__button accordion__button'}>
-                                      Anchor {index + 1}
-                                      <button
-                                        className='series-list__remove'
-                                        onClick={e => {
-                                          e.preventDefault()
-                                          const copiedAnchorGroups = [...config.yAxis.anchors]
-                                          copiedAnchorGroups.splice(index, 1)
-                                          updateConfig({
-                                            ...config,
-                                            yAxis: {
-                                              ...config.yAxis,
-                                              anchors: copiedAnchorGroups
-                                            }
-                                          })
-                                        }}
-                                      >
-                                        Remove
-                                      </button>
-                                    </AccordionItemButton>
-                                  </>
-                                </AccordionItemHeading>
-                                <AccordionItemPanel>
-                                  <label>
-                                    <span>Anchor Value</span>
-                                    <Tooltip style={{ textTransform: 'none' }}>
-                                      <Tooltip.Target>
-                                        <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                                      </Tooltip.Target>
-                                      <Tooltip.Content>
-                                        <p>Enter the value as its shown in the data column</p>
-                                      </Tooltip.Content>
-                                    </Tooltip>
-                                    <input
-                                      type='text'
-                                      value={config.yAxis.anchors[index].value ? config.yAxis.anchors[index].value : ''}
-                                      onChange={e => {
-                                        e.preventDefault()
-                                        const copiedAnchors = [...config.yAxis.anchors]
-                                        copiedAnchors[index].value = e.target.value
-                                        updateConfig({
-                                          ...config,
-                                          yAxis: {
-                                            ...config.yAxis,
-                                            anchors: copiedAnchors
-                                          }
-                                        })
-                                      }}
-                                    />
-                                  </label>
-
-                                  <label>
-                                    <span>Anchor Color</span>
-                                    <input
-                                      type='text'
-                                      value={config.yAxis.anchors[index].color ? config.yAxis.anchors[index].color : ''}
-                                      onChange={e => {
-                                        e.preventDefault()
-                                        const copiedAnchors = [...config.yAxis.anchors]
-                                        copiedAnchors[index].color = e.target.value
-                                        updateConfig({
-                                          ...config,
-                                          yAxis: {
-                                            ...config.yAxis,
-                                            anchors: copiedAnchors
-                                          }
-                                        })
-                                      }}
-                                    />
-                                  </label>
-
-                                  <Select
-                                    value={config.yAxis.anchors[index].lineStyle || ''}
-                                    label='Anchor Line Style'
-                                    onChange={e => {
-                                      const copiedAnchors = [...config.yAxis.anchors]
-                                      copiedAnchors[index].lineStyle = e.target.value
-                                      updateConfig({
-                                        ...config,
-                                        yAxis: {
-                                          ...config.yAxis,
-                                          anchors: copiedAnchors
-                                        }
-                                      })
-                                    }}
-                                    options={[
-                                      { value: '', label: 'Select' },
-                                      ...lineOptions.map(line => ({ value: line.value, label: line.value }))
-                                    ]}
-                                  />
-                                </AccordionItemPanel>
-                              </AccordionItem>
-                            ))}
-                          </Accordion>
-
-                          <button
-                            className='btn btn-primary full-width'
-                            onClick={e => {
-                              e.preventDefault()
-                              const anchors = [...config.yAxis.anchors]
-                              anchors.push({} as Anchor)
-                              updateConfig({
-                                ...config,
-                                yAxis: {
-                                  ...config.yAxis,
-                                  anchors
-                                }
-                              })
-                            }}
-                          >
-                            Add Anchor
-                          </button>
-                        </div>
+                        <AxisAnchorEditor
+                          axisKey='yAxis'
+                          config={config}
+                          lineOptions={lineOptions}
+                          updateConfig={updateConfig}
+                        />
                       )}
                     </AccordionItemPanel>
                   </AccordionItem>
                 )}
+                {renderHeatMapSettingsAccordion()}
                 <Panels.Regions name='Regions' />
 
                 {/* Columns */}
@@ -4154,7 +4133,9 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                         config={config}
                         updateField={updateFieldDeprecated}
                         deleteColumn={removeAdditionalColumn}
-                        hiddenColumnNames={seriesOwnedColumnNames}
+                        hiddenColumnNames={
+                          isHeatMap ? [...seriesOwnedColumnNames, ...heatMapOwnedColumnNames] : seriesOwnedColumnNames
+                        }
                       />{' '}
                     </AccordionItemPanel>
                   </AccordionItem>
@@ -4173,7 +4154,11 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                         label='Position'
                         updateField={updateFieldDeprecated}
                         options={
-                          config.visualizationType === 'Warming Stripes'
+                          config.visualizationType === 'HeatMap'
+                            ? config.legend.style === 'gradient'
+                              ? ['bottom', 'top']
+                              : ['right', 'left', 'bottom', 'top']
+                            : config.visualizationType === 'Warming Stripes'
                             ? ['bottom']
                             : ['right', 'left', 'bottom', 'top']
                         }
@@ -4213,7 +4198,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                         options={getLegendStyleOptions('style')}
                       />
 
-                      {config.visualizationType !== 'Warming Stripes' && (
+                      {config.visualizationType !== 'Warming Stripes' && config.visualizationType !== 'HeatMap' && (
                         <Select
                           value={config.legend.groupBy}
                           section='legend'
@@ -4379,7 +4364,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                           {config.legend.seriesHighlight &&
                             config.legend.seriesHighlight.map((val, i) => (
                               <fieldset className='edit-block' key={`${val}-${i}`}>
-                                <button
+                                <Button
                                   className='btn btn-danger'
                                   onClick={event => {
                                     event.preventDefault()
@@ -4392,7 +4377,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                   }}
                                 >
                                   Remove
-                                </button>
+                                </Button>
                                 <Select
                                   value={config.legend.seriesHighlight[i]}
                                   fieldName='seriesHighlight'
@@ -4408,8 +4393,8 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                 />
                               </fieldset>
                             ))}
-                          <button
-                            className={'btn btn-primary full-width'}
+                          <Button
+                            variant='editor-primary'
                             onClick={event => {
                               event.preventDefault()
                               const legendColumns = getLegendColumns()
@@ -4425,7 +4410,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                             }}
                           >
                             Add Isolate Value
-                          </button>
+                          </Button>
                         </fieldset>
                       )}
                       {/* end: isolated values */}
@@ -4622,6 +4607,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                   loadConfig={updateConfig}
                   config={config}
                   convertStateToConfig={chartConvertStateToConfig}
+                  defaultExpanded={config.visualizationType === 'HeatMap'}
                 />
               )}
             </>