diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index 9f6382cb40..3597e92b54 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "6.65.2",
+  "version": "6.66.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "6.65.2",
+      "version": "6.66.0",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index 2e5513e213..ffb2ec821f 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "6.65.2",
+  "version": "6.66.0",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [
diff --git a/packages/components/releaseNotes/components.md b/packages/components/releaseNotes/components.md
index c3afb8d245..32ae27edd9 100644
--- a/packages/components/releaseNotes/components.md
+++ b/packages/components/releaseNotes/components.md
@@ -1,8 +1,17 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages
 
-### version TBD
-*Released*: TBD
+### version 6.66.0
+*Released*: 23 October 2025
+- ChartBuilderModal support for bar/line chart aggregate method and error bar options
+  - useOverlayTriggerState update to not close popover on document click that is a select option target
+  - Factor ChartFieldRangeScaleOptions.tsx out of ChartFieldOption.tsx
+  - Create ChartFieldAggregateOptions.tsx and move y-axis bar chart aggregate method dropdown into tooltip
+    - support for error bar radio options as separate overlay or to be included in axis options overlay
+  - Update ChartBuilderModal to pass down aggregate and error bar options to ChartConfig
+
+### version 6.65.2
+*Released*: 22 October 2025
 - Various minor fixes for exception reports
 
 ### version 6.65.1
diff --git a/packages/components/src/internal/OverlayTrigger.tsx b/packages/components/src/internal/OverlayTrigger.tsx
index 31b6e633ec..e5d11057a2 100644
--- a/packages/components/src/internal/OverlayTrigger.tsx
+++ b/packages/components/src/internal/OverlayTrigger.tsx
@@ -1,16 +1,16 @@
 import React, {
-    cloneElement,
     Children,
+    cloneElement,
+    CSSProperties,
     FC,
-    useRef,
-    ReactElement,
-    useState,
-    useCallback,
     MutableRefObject,
-    CSSProperties,
-    useMemo,
     PropsWithChildren,
+    ReactElement,
+    useCallback,
     useEffect,
+    useMemo,
+    useRef,
+    useState,
 } from 'react';
 import { createPortal } from 'react-dom';
 
@@ -86,7 +86,9 @@ export function useOverlayTriggerState<T extends Element = HTMLDivElement>(
         event => {
             const isToggle = event.target === targetRef.current;
             const insideToggle = portalEl?.contains(event.target);
-            if (!isToggle && !insideToggle) {
+            const isSelectOption =
+                event.target instanceof HTMLElement && event.target.classList.contains('select-input__option');
+            if (!isToggle && !insideToggle && !isSelectOption) {
                 setShow(false);
             }
         },
@@ -168,9 +170,9 @@ export const OverlayTrigger: FC<Props> = ({
     return (
         <div
             className={className_}
+            onClick={onClick}
             onMouseEnter={onMouseEnter}
             onMouseLeave={onMouseLeave}
-            onClick={onClick}
             style={style}
         >
             {clonedChild}
diff --git a/packages/components/src/internal/components/chart/ChartBuilderModal.test.tsx b/packages/components/src/internal/components/chart/ChartBuilderModal.test.tsx
index 2c6816ec73..24d3b8e15a 100644
--- a/packages/components/src/internal/components/chart/ChartBuilderModal.test.tsx
+++ b/packages/components/src/internal/components/chart/ChartBuilderModal.test.tsx
@@ -19,15 +19,13 @@ import {
 
 import {
     ChartBuilderModal,
-    ChartTypeInfo,
     getChartBuilderChartConfig,
     getChartBuilderQueryConfig,
     getChartRenderMsg,
     getDefaultBarChartAxisLabel,
-    MAX_POINT_DISPLAY,
-    MAX_ROWS_PREVIEW,
 } from './ChartBuilderModal';
-import { ChartConfig, ChartQueryConfig, GenericChartModel } from './models';
+import { MAX_POINT_DISPLAY, MAX_ROWS_PREVIEW } from './constants';
+import { ChartConfig, ChartQueryConfig, ChartTypeInfo, GenericChartModel } from './models';
 
 const BAR_CHART_TYPE = {
     name: 'bar_chart',
@@ -319,7 +317,7 @@ describe('ChartBuilderModal', () => {
         validate(false, true, true);
     });
 
-    test('init from bar chart with y axis value and default aggregate method', () => {
+    test('init from bar chart with y axis value and default aggregate method', async () => {
         const savedChartModel = {
             canShare: true,
             canDelete: true,
@@ -348,12 +346,20 @@ describe('ChartBuilderModal', () => {
         );
 
         validate(false, true, true);
-        expect(document.querySelectorAll('input')).toHaveLength(8);
+        expect(document.querySelectorAll('input')).toHaveLength(6);
         expect(document.querySelector('input[name=y]').getAttribute('value')).toBe('field2');
+        expect(document.querySelectorAll('.fa-gear')).toHaveLength(1); // gear icon for y-axis
+        await userEvent.click(document.querySelector('.fa-gear'));
+        expect(document.querySelectorAll('input')).toHaveLength(13);
+        expect(document.querySelector('input[value=automatic]').hasAttribute('checked')).toBe(true);
+        expect(document.querySelector('input[value=manual]').hasAttribute('checked')).toBe(false);
         expect(document.querySelector('input[name=aggregate-method]').getAttribute('value')).toBe('SUM');
+        expect(document.querySelectorAll('input[name=error-bar-method]')).toHaveLength(3);
+        expect(document.querySelector('input[value=SD]').hasAttribute('checked')).toBe(false);
+        expect(document.querySelector('input[value=SEM]').hasAttribute('checked')).toBe(false);
     });
 
-    test('init from bar chart with y axis value and aggregate method', () => {
+    test('init from bar chart with y axis value and aggregate method', async () => {
         const savedChartModel = {
             canShare: true,
             canDelete: true,
@@ -363,7 +369,10 @@ describe('ChartBuilderModal', () => {
             visualizationConfig: {
                 chartConfig: {
                     renderType: 'bar_chart',
-                    measures: { x: { name: 'field1' }, y: { name: 'field2', aggregate: { value: 'MEAN' } } },
+                    measures: {
+                        x: { name: 'field1' },
+                        y: { name: 'field2', aggregate: { value: 'MEAN' }, errorBars: 'SEM' },
+                    },
                     labels: { x: 'Field 1', y: 'Field 2' },
                 },
                 queryConfig: {
@@ -382,9 +391,17 @@ describe('ChartBuilderModal', () => {
         );
 
         validate(false, true, true);
-        expect(document.querySelectorAll('input')).toHaveLength(8);
+        expect(document.querySelectorAll('input')).toHaveLength(6);
         expect(document.querySelector('input[name=y]').getAttribute('value')).toBe('field2');
+        expect(document.querySelectorAll('.fa-gear')).toHaveLength(1); // gear icon for y-axis
+        await userEvent.click(document.querySelector('.fa-gear'));
+        expect(document.querySelectorAll('input')).toHaveLength(13);
+        expect(document.querySelector('input[value=automatic]').hasAttribute('checked')).toBe(true);
+        expect(document.querySelector('input[value=manual]').hasAttribute('checked')).toBe(false);
         expect(document.querySelector('input[name=aggregate-method]').getAttribute('value')).toBe('MEAN');
+        expect(document.querySelectorAll('input[name=error-bar-method]')).toHaveLength(3);
+        expect(document.querySelector('input[value=SD]').hasAttribute('checked')).toBe(false);
+        expect(document.querySelector('input[value=SEM]').hasAttribute('checked')).toBe(true);
         expect(document.querySelectorAll('input[name=trendlineType]')).toHaveLength(0);
     });
 
@@ -490,10 +507,12 @@ describe('ChartBuilderModal', () => {
 
         await userEvent.click(document.querySelectorAll('.fa-gear')[0]); // x-axis options icon, click to close
         await userEvent.click(document.querySelectorAll('.fa-gear')[1]); // y-axis options icon
-        expect(document.querySelectorAll('.radioinput-label.selected')[0].textContent).toBe('Log');
+        expect(document.querySelectorAll('.radioinput-label.selected')).toHaveLength(3); // error bar, scale, range
+        expect(document.querySelectorAll('.radioinput-label.selected')[0].textContent).toBe('None');
+        expect(document.querySelectorAll('.radioinput-label.selected')[1].textContent).toBe('Log');
+        expect(document.querySelectorAll('.radioinput-label.selected')[2].textContent).toBe('Automatic');
         expect(document.querySelectorAll('input[name=scaleTrans]')[0].hasAttribute('checked')).toBe(false); // linear
         expect(document.querySelectorAll('input[name=scaleTrans]')[1].hasAttribute('checked')).toBe(true); // log
-        expect(document.querySelectorAll('.radioinput-label.selected')[1].textContent).toBe('Automatic');
     });
 
     test('canDelete and canShare false', () => {
diff --git a/packages/components/src/internal/components/chart/ChartBuilderModal.tsx b/packages/components/src/internal/components/chart/ChartBuilderModal.tsx
index 1201d2dba7..d39e674ae5 100644
--- a/packages/components/src/internal/components/chart/ChartBuilderModal.tsx
+++ b/packages/components/src/internal/components/chart/ChartBuilderModal.tsx
@@ -7,7 +7,7 @@ import { generateId } from '../../util/utils';
 import { LABKEY_VIS } from '../../constants';
 import { Modal } from '../../Modal';
 
-import { SelectInput, SelectInputOption } from '../forms/input/SelectInput';
+import { SelectInputOption } from '../forms/input/SelectInput';
 
 import { LoadingSpinner } from '../base/LoadingSpinner';
 
@@ -24,66 +24,24 @@ import { getContainerFilterForFolder } from '../../query/api';
 
 import { SVGIcon } from '../base/SVGIcon';
 
-import { LabelOverlay } from '../forms/LabelOverlay';
-
 import { isAppHomeFolder } from '../../app/utils';
-
 import { deleteChart, saveChart, SaveReportConfig } from './actions';
-
-import { ChartConfig, ChartQueryConfig, GenericChartModel, TrendlineType } from './models';
+import {
+    BAR_CHART_AGGREGATE_NAME,
+    BAR_CHART_ERROR_BAR_NAME,
+    BLUE_HEX_COLOR,
+    HIDDEN_CHART_TYPES,
+    ICONS,
+    MAX_POINT_DISPLAY,
+    MAX_ROWS_PREVIEW,
+    RIGHT_COL_FIELDS,
+} from './constants';
+
+import { ChartConfig, ChartQueryConfig, ChartTypeInfo, GenericChartModel, TrendlineType } from './models';
 import { TrendlineOption } from './TrendlineOption';
 import { ChartFieldOption } from './ChartFieldOption';
 import { getFieldDataType } from './utils';
 
-interface AggregateFieldInfo {
-    name: string;
-    value: string;
-}
-
-export interface ChartFieldInfo {
-    aggregate?: AggregateFieldInfo;
-    altSelectionOnly?: boolean;
-    // allowMultiple?: boolean; // not yet supported, will be part of a future dev story
-    label: string;
-    name: string;
-    nonNumericOnly?: boolean;
-    numericOnly?: boolean;
-    numericOrDateOnly?: boolean;
-    required: boolean;
-}
-
-export interface ChartTypeInfo {
-    fields: ChartFieldInfo[];
-    hidden?: boolean;
-    imgUrl: string;
-    name: string;
-    title: string;
-}
-
-const HIDDEN_CHART_TYPES = ['time_chart'];
-const RIGHT_COL_FIELDS = ['color', 'shape', 'series', 'trendline'];
-export const MAX_ROWS_PREVIEW = 10000;
-export const MAX_POINT_DISPLAY = 10000;
-const BLUE_HEX_COLOR = '3366FF';
-const BAR_CHART_AGGREGATE_NAME = 'aggregate-method';
-const BAR_CHART_AGGREGATE_METHODS = [
-    { label: 'Count (non-blank)', value: 'COUNT' },
-    { label: 'Sum', value: 'SUM' },
-    { label: 'Min', value: 'MIN' },
-    { label: 'Max', value: 'MAX' },
-    { label: 'Mean', value: 'MEAN' },
-    { label: 'Median', value: 'MEDIAN' },
-];
-const BAR_CHART_AGGREGATE_METHOD_TIP =
-    'The aggregate method that will be used to determine the bar height for a given x-axis category / dimension. Field values that are blank are not included in calculated aggregate values.';
-const ICONS = {
-    bar_chart: 'bar_chart',
-    box_plot: 'box_plot',
-    pie_chart: 'pie_chart',
-    scatter_plot: 'xy_scatter',
-    line_plot: 'xy_line',
-};
-
 export const getChartRenderMsg = (chartConfig: ChartConfig, rowCount: number, isPreview: boolean): string => {
     const msg = [];
     if (isPreview && rowCount === MAX_ROWS_PREVIEW) {
@@ -198,9 +156,12 @@ export const getChartBuilderChartConfig = (
                 type: getFieldDataType(fieldConfig.data),
             };
 
-            // check if the field has an aggregate method (bar chart y-axis only)
+            // check if the field has an aggregate method and error bar method (bar chart y-axis only)
             if (fieldValues[BAR_CHART_AGGREGATE_NAME] && field.name === 'y') {
                 config.measures[field.name].aggregate = { ...fieldValues[BAR_CHART_AGGREGATE_NAME] };
+                if (fieldValues[BAR_CHART_ERROR_BAR_NAME]) {
+                    config.measures[field.name].errorBars = fieldValues[BAR_CHART_ERROR_BAR_NAME]?.value;
+                }
             }
 
             // update axis label if it is a new report or if the saved report that didn't have this measure or was using the default field label for the axis label
@@ -257,9 +218,9 @@ const ChartTypeSideBar: FC<ChartTypeSideBarProps> = memo(props => {
 
                 return (
                     <div
-                        key={type.name}
                         className={classNames('chart-builder-type', { selected, selectable })}
                         data-name={type.name}
+                        key={type.name}
                         onClick={onChange}
                     >
                         <SVGIcon height={null} iconSrc={!selected ? ICONS[type.name] + '_gray' : ICONS[type.name]} />
@@ -322,6 +283,13 @@ const ChartTypeQueryForm: FC<ChartTypeQueryFormProps> = memo(props => {
         [selectedType]
     );
 
+    const onErrorBarChange = useCallback(
+        (name: string, value: string) => {
+            onFieldChange(name, { value });
+        },
+        [onFieldChange]
+    );
+
     const onSelectFieldChange = useCallback(
         (key: string, _: never, selectedOption: SelectInputOption) => {
             // clear / reset trendline option here if x change
@@ -335,7 +303,7 @@ const ChartTypeQueryForm: FC<ChartTypeQueryFormProps> = memo(props => {
     );
 
     const onFieldScaleChange = useCallback(
-        (field: string, key: string, value: string | number, reset = false) => {
+        (field: string, key: string, value: number | string, reset = false) => {
             const scales = fieldValues.scales?.value ?? {};
             if (!scales[field] || reset) scales[field] = { type: 'automatic', trans: 'linear' };
             if (key) scales[field][key] = value;
@@ -352,24 +320,24 @@ const ChartTypeQueryForm: FC<ChartTypeQueryFormProps> = memo(props => {
                     <input
                         className="form-control"
                         name="name"
+                        onChange={onNameChange}
                         placeholder="Enter a name"
                         type="text"
-                        onChange={onNameChange}
                         value={name}
                     />
                     {canShare && (
                         <div className="checkbox-input">
-                            <input name="shared" type="checkbox" checked={shared} onChange={onToggleShared} />
+                            <input checked={shared} name="shared" onChange={onToggleShared} type="checkbox" />
                             <span onClick={onToggleShared}>Make this chart available to all users</span>
                         </div>
                     )}
                     {allowInherit && (
                         <div className="checkbox-input">
                             <input
-                                name="inheritable"
-                                type="checkbox"
                                 checked={inheritable}
+                                name="inheritable"
                                 onChange={onToggleInheritable}
+                                type="checkbox"
                             />
                             <span onClick={onToggleInheritable}>Make this chart available in child folders</span>
                         </div>
@@ -378,14 +346,15 @@ const ChartTypeQueryForm: FC<ChartTypeQueryFormProps> = memo(props => {
                 <div className="col-xs-4 fields-col">
                     {leftColFields.map(field => (
                         <ChartFieldOption
-                            key={field.name}
                             field={field}
+                            fieldValues={fieldValues}
+                            key={field.name}
                             model={model}
-                            onSelectFieldChange={onSelectFieldChange}
+                            onErrorBarChange={onErrorBarChange}
                             onScaleChange={onFieldScaleChange}
-                            selectedType={selectedType}
-                            fieldValue={fieldValues[field.name]}
+                            onSelectFieldChange={onSelectFieldChange}
                             scaleValues={fieldValues.scales?.value[field.name]}
+                            selectedType={selectedType}
                         />
                     ))}
                 </div>
@@ -393,33 +362,16 @@ const ChartTypeQueryForm: FC<ChartTypeQueryFormProps> = memo(props => {
                     {rightColFields.map(field => (
                         <Fragment key={field.name}>
                             <ChartFieldOption
-                                key={field.name}
                                 field={field}
+                                fieldValues={fieldValues}
+                                key={field.name}
                                 model={model}
-                                onSelectFieldChange={onSelectFieldChange}
+                                onErrorBarChange={onErrorBarChange}
                                 onScaleChange={onFieldScaleChange}
-                                selectedType={selectedType}
-                                fieldValue={fieldValues[field.name]}
+                                onSelectFieldChange={onSelectFieldChange}
                                 scaleValues={fieldValues.scales?.value[field.name]}
+                                selectedType={selectedType}
                             />
-                            {selectedType.name === 'bar_chart' && fieldValues.y?.value && (
-                                <div>
-                                    <label>
-                                        Y Axis Aggregate Method{' '}
-                                        <LabelOverlay placement="bottom">{BAR_CHART_AGGREGATE_METHOD_TIP}</LabelOverlay>
-                                    </label>
-                                    <SelectInput
-                                        showLabel={false}
-                                        clearable={false}
-                                        inputClass="col-xs-12"
-                                        placeholder="Select aggregate method"
-                                        name={BAR_CHART_AGGREGATE_NAME}
-                                        options={BAR_CHART_AGGREGATE_METHODS}
-                                        onChange={onSelectFieldChange}
-                                        value={fieldValues[BAR_CHART_AGGREGATE_NAME]?.value ?? 'SUM'}
-                                    />
-                                </div>
-                            )}
                         </Fragment>
                     ))}
                     {hasTrendlineOption && (
@@ -459,8 +411,6 @@ const ChartPreview: FC<ChartPreviewProps> = memo(props => {
 
         if (!hasRequiredValues) return;
 
-        const width = ref?.current.getBoundingClientRect().width || 750;
-
         const chartConfig = getChartBuilderChartConfig(
             selectedType,
             fieldValues,
@@ -520,6 +470,7 @@ const ChartPreview: FC<ChartPreviewProps> = memo(props => {
                 }
 
                 // adjust height, width, and marginTop for the chart config for the preview, but not to save with the chart
+                const width = ref?.current.getBoundingClientRect().width || 750;
                 const chartConfig_ = {
                     ...chartConfig,
                     height: 350,
@@ -548,7 +499,7 @@ const ChartPreview: FC<ChartPreviewProps> = memo(props => {
                     {loadingData && (
                         <div className="chart-loading-mask">
                             <div className="chart-loading-mask__background" />
-                            <LoadingSpinner wrapperClassName="loading-spinner" msg="Loading Preview..." />
+                            <LoadingSpinner msg="Loading Preview..." wrapperClassName="loading-spinner" />
                         </div>
                     )}
                     <div className="svg-chart__chart" id={divId} ref={ref} />
@@ -606,10 +557,10 @@ const ChartBuilderFooter: FC<ChartBuilderFooterProps> = memo(props => {
                 <div className="form-buttons__left" />
                 <div className="form-buttons__right">
                     Are you sure you want to permanently delete this chart?
-                    <button className="btn btn-default" onClick={onCancelDelete} type="button" disabled={deleting}>
+                    <button className="btn btn-default" disabled={deleting} onClick={onCancelDelete} type="button">
                         Cancel
                     </button>
-                    <button className="btn btn-danger" onClick={onConfirmDelete} type="button" disabled={deleting}>
+                    <button className="btn btn-danger" disabled={deleting} onClick={onConfirmDelete} type="button">
                         {deleting ? 'Deleting...' : 'Delete'}
                     </button>
                 </div>
@@ -627,7 +578,7 @@ const ChartBuilderFooter: FC<ChartBuilderFooterProps> = memo(props => {
                     Delete Chart
                 </button>
             )}
-            <button className="btn btn-success" onClick={onSaveChart} type="button" disabled={saving || disabled}>
+            <button className="btn btn-success" disabled={saving || disabled} onClick={onSaveChart} type="button">
                 {saving
                     ? savedChartModel
                         ? 'Saving Chart...'
@@ -647,8 +598,11 @@ interface ChartBuilderModalProps extends RequiresModelAndActions {
 }
 
 export const ChartBuilderModal: FC<ChartBuilderModalProps> = memo(({ actions, model, onHide, savedChartModel }) => {
-    const CHART_TYPES = LABKEY_VIS?.GenericChartHelper.getRenderTypes();
-    const TRENDLINE_OPTIONS: TrendlineType[] = Object.values(LABKEY_VIS.GenericChartHelper.TRENDLINE_OPTIONS);
+    const CHART_TYPES = useMemo(() => LABKEY_VIS?.GenericChartHelper.getRenderTypes(), []);
+    const TRENDLINE_OPTIONS: TrendlineType[] = useMemo(
+        () => Object.values(LABKEY_VIS.GenericChartHelper.TRENDLINE_OPTIONS),
+        []
+    );
 
     const { user, container, moduleContext } = useServerContext();
     const canShare = useMemo(
@@ -664,69 +618,69 @@ export const ChartBuilderModal: FC<ChartBuilderModalProps> = memo(({ actions, mo
         () => CHART_TYPES.filter(type => !type.hidden && !HIDDEN_CHART_TYPES.includes(type.name)),
         [CHART_TYPES]
     );
+    const chartConfig = useMemo(() => savedChartModel?.visualizationConfig?.chartConfig, [savedChartModel]);
     const [saving, setSaving] = useState<boolean>(false);
     const [error, setError] = useState<string>();
     const [reportConfig, setReportConfig] = useState<SaveReportConfig>();
-    const [selectedType, setSelectedChartType] = useState<ChartTypeInfo>(chartTypes[0]);
-    const [name, setName] = useState<string>('');
-    const [shared, setShared] = useState<boolean>(canShare);
-    const [inheritable, setInheritable] = useState<boolean>(false);
-    const [fieldValues, setFieldValues] = useState<Record<string, SelectInputOption>>({});
-
-    useEffect(
-        () => {
-            if (savedChartModel) {
-                const chartConfig = savedChartModel.visualizationConfig?.chartConfig;
-                setSelectedChartType(chartTypes.find(c => chartConfig?.renderType === c.name));
-                setName(savedChartModel.name);
-                setShared(savedChartModel.shared);
-                setInheritable(savedChartModel.inheritable);
-
-                const measures = chartConfig?.measures || {};
-                const fieldValues_ = Object.keys(measures).reduce((result, key) => {
-                    let measure = measures[key];
-                    if (measure) {
-                        // Currently only supporting a single measure per axis (i.e. not supporting y-axis left/right)
-                        if (Utils.isArray(measure)) measure = measure[0];
-                        result[key] = { label: measure.label, value: measure.name, data: measure };
-                    }
-                    return result;
-                }, {});
-
-                // handle scales
-                if (chartConfig?.scales) {
-                    fieldValues_['scales'] = { value: { ...chartConfig.scales } };
+    const [selectedType, setSelectedChartType] = useState<ChartTypeInfo>(
+        chartTypes.find(c => chartConfig?.renderType === c.name) ?? chartTypes[0]
+    );
+    const [name, setName] = useState<string>(savedChartModel?.name ?? '');
+    const [shared, setShared] = useState<boolean>(savedChartModel?.shared ?? canShare);
+    const [inheritable, setInheritable] = useState<boolean>(savedChartModel?.inheritable ?? false);
+
+    const initFieldValues = useMemo(() => {
+        if (savedChartModel) {
+            const measures = chartConfig?.measures || {};
+            const fieldValues_ = Object.keys(measures).reduce((result, key) => {
+                let measure = measures[key];
+                if (measure) {
+                    // Currently only supporting a single measure per axis (i.e. not supporting y-axis left/right)
+                    if (Utils.isArray(measure)) measure = measure[0];
+                    result[key] = { label: measure.label, value: measure.name, data: measure };
                 }
+                return result;
+            }, {});
 
-                // handle bar chart aggregate method
-                if (measures.y?.aggregate) {
-                    fieldValues_[BAR_CHART_AGGREGATE_NAME] = { ...measures.y.aggregate };
-                }
+            // handle scales
+            if (chartConfig?.scales) {
+                fieldValues_['scales'] = { value: { ...chartConfig.scales } };
+            }
 
-                // handle trendline options
-                if (chartConfig?.geomOptions?.trendlineType) {
-                    fieldValues_['trendlineType'] = TRENDLINE_OPTIONS.find(
-                        option => option.value === chartConfig.geomOptions.trendlineType
-                    );
-                    if (chartConfig.geomOptions.trendlineAsymptoteMin) {
-                        fieldValues_['trendlineAsymptoteMin'] = {
-                            value: chartConfig.geomOptions.trendlineAsymptoteMin,
-                        };
-                    }
-                    if (chartConfig.geomOptions.trendlineAsymptoteMax) {
-                        fieldValues_['trendlineAsymptoteMax'] = {
-                            value: chartConfig.geomOptions.trendlineAsymptoteMax,
-                        };
-                    }
+            // handle bar chart aggregate method and error bars
+            const y = Utils.isArray(measures.y) ? measures.y[0] : measures.y;
+            if (y?.aggregate) {
+                fieldValues_[BAR_CHART_AGGREGATE_NAME] = Utils.isObject(y.aggregate)
+                    ? { ...y.aggregate }
+                    : { value: y.aggregate };
+                if (y.errorBars) {
+                    fieldValues_[BAR_CHART_ERROR_BAR_NAME] = { value: y.errorBars };
                 }
+            }
 
-                setFieldValues(fieldValues_);
+            // handle trendline options
+            if (chartConfig?.geomOptions?.trendlineType) {
+                fieldValues_['trendlineType'] = TRENDLINE_OPTIONS.find(
+                    option => option.value === chartConfig.geomOptions.trendlineType
+                );
+                if (chartConfig.geomOptions.trendlineAsymptoteMin) {
+                    fieldValues_['trendlineAsymptoteMin'] = {
+                        value: chartConfig.geomOptions.trendlineAsymptoteMin,
+                    };
+                }
+                if (chartConfig.geomOptions.trendlineAsymptoteMax) {
+                    fieldValues_['trendlineAsymptoteMax'] = {
+                        value: chartConfig.geomOptions.trendlineAsymptoteMax,
+                    };
+                }
             }
-        },
-        [
-            /* on mount only */
-        ]
-    );
+
+            return fieldValues_;
+        }
+
+        return {};
+    }, [savedChartModel, chartConfig, TRENDLINE_OPTIONS]);
+    const [fieldValues, setFieldValues] = useState<Record<string, SelectInputOption>>(initFieldValues);
 
     const hasName = useMemo(() => name?.trim().length > 0, [name]);
     const hasRequiredValues = useMemo(() => {
@@ -810,9 +764,9 @@ export const ChartBuilderModal: FC<ChartBuilderModalProps> = memo(({ actions, mo
     return (
         <Modal
             className="chart-builder-modal"
+            footer={footer}
             onCancel={onCancel}
             title={savedChartModel ? 'Edit Chart' : 'Create Chart'}
-            footer={footer}
         >
             {error && <Alert>{error}</Alert>}
             <div className="row">
@@ -820,8 +774,8 @@ export const ChartBuilderModal: FC<ChartBuilderModalProps> = memo(({ actions, mo
                     <ChartTypeSideBar
                         chartTypes={chartTypes}
                         onChange={onChartTypeChange}
-                        selectedType={selectedType}
                         savedChartModel={savedChartModel}
+                        selectedType={selectedType}
                     />
                 </div>
                 <div className="col-xs-11 col-right">
@@ -832,21 +786,21 @@ export const ChartBuilderModal: FC<ChartBuilderModalProps> = memo(({ actions, mo
                         inheritable={inheritable}
                         model={model}
                         name={name}
-                        onNameChange={onNameChange}
                         onFieldChange={onFieldChange}
+                        onNameChange={onNameChange}
                         onToggleInheritable={onToggleInheritable}
                         onToggleShared={onToggleShared}
                         savedChartModel={savedChartModel}
-                        shared={shared}
                         selectedType={selectedType}
+                        shared={shared}
                     />
                     <div className="row margin-top">
                         <div className="col-xs-12">
                             <ChartPreview
-                                savedChartModel={savedChartModel}
                                 fieldValues={fieldValues}
-                                model={model}
                                 hasRequiredValues={hasRequiredValues}
+                                model={model}
+                                savedChartModel={savedChartModel}
                                 selectedType={selectedType}
                                 setReportConfig={setReportConfig}
                             />
diff --git a/packages/components/src/internal/components/chart/ChartFieldAggregateOptions.test.tsx b/packages/components/src/internal/components/chart/ChartFieldAggregateOptions.test.tsx
new file mode 100644
index 0000000000..6b64cfdfe2
--- /dev/null
+++ b/packages/components/src/internal/components/chart/ChartFieldAggregateOptions.test.tsx
@@ -0,0 +1,121 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { ChartFieldAggregateOptions } from './ChartFieldAggregateOptions';
+import { BAR_CHART_AGGREGATE_NAME, BAR_CHART_ERROR_BAR_NAME } from './constants';
+import { ChartTypeInfo } from './models';
+
+const field = { name: 'testField', label: 'Test Label', required: false };
+const fieldValues = {
+    testField: { value: 'ABC' },
+    [BAR_CHART_AGGREGATE_NAME]: { value: 'SUM' },
+    [BAR_CHART_ERROR_BAR_NAME]: undefined,
+};
+
+function renderComponent(props = {}) {
+    return render(
+        <ChartFieldAggregateOptions
+            field={field}
+            fieldValues={fieldValues}
+            onErrorBarChange={jest.fn}
+            onSelectFieldChange={jest.fn}
+            selectedType={{ name: 'bar_chart' } as ChartTypeInfo}
+            {...props}
+        />
+    );
+}
+
+describe('ChartFieldAggregateOptions', () => {
+    test('renders gear icon and overlay', async () => {
+        renderComponent();
+        expect(document.querySelectorAll('.field-option-icon')).toHaveLength(1);
+        expect(document.querySelectorAll('.fa-gear')).toHaveLength(1);
+        expect(document.querySelectorAll('.lk-popover')).toHaveLength(0);
+
+        await userEvent.click(document.querySelector('.fa-gear'));
+        expect(document.querySelectorAll('.lk-popover')).toHaveLength(1);
+    });
+
+    test('shows aggregate method select and error bar radio group in overlay', async () => {
+        renderComponent();
+        await userEvent.click(document.querySelector('.fa-gear'));
+        expect(document.querySelectorAll('label')[0].textContent).toContain('Aggregate Method');
+        expect(document.querySelectorAll('label')[1].textContent).toContain('Error Bars');
+        expect(document.querySelectorAll('.field-option-radio-group')).toHaveLength(1);
+        expect(document.querySelectorAll('.select-input-container')).toHaveLength(1);
+        expect(document.querySelectorAll('input[type="radio"]')).toHaveLength(3); // None, SD, SEM
+        expect(
+            document.querySelector('input[name="error-bar-method"][value=""]').hasAttribute('disabled')
+        ).toBeTruthy();
+        expect(
+            document.querySelector('input[name="error-bar-method"][value="SD"]').hasAttribute('disabled')
+        ).toBeTruthy();
+        expect(
+            document.querySelector('input[name="error-bar-method"][value="SEM"]').hasAttribute('disabled')
+        ).toBeTruthy();
+        expect(document.querySelectorAll('.radioinput-label.selected')[0].textContent).toBe('None');
+    });
+
+    test('error bar radios are enabled for aggregate MEAN', async () => {
+        const fieldValuesMean = {
+            ...fieldValues,
+            [BAR_CHART_AGGREGATE_NAME]: { value: 'MEAN' },
+        };
+        renderComponent({ fieldValues: fieldValuesMean });
+        await userEvent.click(document.querySelector('.fa-gear'));
+        expect(document.querySelector('input[name="error-bar-method"][value=""]').hasAttribute('disabled')).toBeFalsy();
+        expect(
+            document.querySelector('input[name="error-bar-method"][value="SD"]').hasAttribute('disabled')
+        ).toBeFalsy();
+        expect(
+            document.querySelector('input[name="error-bar-method"][value="SEM"]').hasAttribute('disabled')
+        ).toBeFalsy();
+        expect(document.querySelectorAll('.radioinput-label.selected')[0].textContent).toBe('None');
+    });
+
+    test('error bar radio value selected when fieldValues set', async () => {
+        const fieldValuesSEM = {
+            ...fieldValues,
+            [BAR_CHART_AGGREGATE_NAME]: { value: 'MEAN' },
+            [BAR_CHART_ERROR_BAR_NAME]: { value: 'SEM' },
+        };
+        renderComponent({ fieldValues: fieldValuesSEM });
+        await userEvent.click(document.querySelector('.fa-gear'));
+        expect(document.querySelector('input[name="error-bar-method"][value=""]').hasAttribute('disabled')).toBeFalsy();
+        expect(
+            document.querySelector('input[name="error-bar-method"][value="SD"]').hasAttribute('disabled')
+        ).toBeFalsy();
+        expect(
+            document.querySelector('input[name="error-bar-method"][value="SEM"]').hasAttribute('disabled')
+        ).toBeFalsy();
+        expect(document.querySelectorAll('.radioinput-label.selected')[0].textContent).toBe(
+            'Standard Error of the Mean'
+        );
+    });
+
+    test('does not render if no field is selected', async () => {
+        const emptyFieldValues = {
+            testField: undefined,
+            [BAR_CHART_AGGREGATE_NAME]: { value: 'MEAN' },
+            [BAR_CHART_ERROR_BAR_NAME]: { value: 'SEM' },
+        };
+        renderComponent({ fieldValues: emptyFieldValues });
+        await userEvent.click(document.querySelector('.fa-gear'));
+        expect(document.querySelectorAll('label')).toHaveLength(0);
+        expect(document.querySelectorAll('input[type="radio"]')).toHaveLength(0);
+    });
+
+    test('renders inline inputs when asOverlay is false', () => {
+        const fieldValuesSEM = {
+            ...fieldValues,
+            [BAR_CHART_AGGREGATE_NAME]: { value: 'MEAN' },
+            [BAR_CHART_ERROR_BAR_NAME]: { value: 'SEM' },
+        };
+        renderComponent({ fieldValues: fieldValuesSEM, asOverlay: false });
+        expect(document.querySelectorAll('.field-option-icon')).toHaveLength(0);
+        expect(document.querySelectorAll('.fa-gear')).toHaveLength(0);
+        expect(document.querySelectorAll('.lk-popover')).toHaveLength(0);
+        expect(document.querySelectorAll('.select-input-container')).toHaveLength(1);
+        expect(document.querySelectorAll('.field-option-radio-group')).toHaveLength(1);
+    });
+});
diff --git a/packages/components/src/internal/components/chart/ChartFieldAggregateOptions.tsx b/packages/components/src/internal/components/chart/ChartFieldAggregateOptions.tsx
new file mode 100644
index 0000000000..bc61847f5c
--- /dev/null
+++ b/packages/components/src/internal/components/chart/ChartFieldAggregateOptions.tsx
@@ -0,0 +1,138 @@
+import React, { FC, memo, useCallback, useMemo } from 'react';
+import { OverlayTrigger } from '../../OverlayTrigger';
+import { Popover } from '../../Popover';
+import { RadioGroupInput } from '../forms/input/RadioGroupInput';
+
+import { BAR_CHART_AGGREGATE_NAME, BAR_CHART_ERROR_BAR_NAME } from './constants';
+import { ChartFieldInfo, ChartTypeInfo } from './models';
+import { LabelOverlay } from '../forms/LabelOverlay';
+import { SelectInput, SelectInputOption } from '../forms/input/SelectInput';
+
+const BAR_CHART_AGGREGATE_METHODS = [
+    { label: 'None', value: '' },
+    { label: 'Count (non-blank)', value: 'COUNT' },
+    { label: 'Sum', value: 'SUM' },
+    { label: 'Min', value: 'MIN' },
+    { label: 'Max', value: 'MAX' },
+    { label: 'Mean', value: 'MEAN' },
+    { label: 'Median', value: 'MEDIAN' },
+];
+const BAR_CHART_AGGREGATE_METHOD_TIP =
+    'The aggregate method that will be used to determine the bar height for a given x-axis category / dimension. Field values that are blank are not included in calculated aggregate values.';
+const BAR_CHART_ERROR_BAR_TIP =
+    "Show error bars on each bar representing Standard Deviation or Standard Error of the Mean. Only applicable for 'Mean' aggregate method.";
+
+const ERROR_BAR_TYPES = [
+    { value: undefined, label: 'None' },
+    { value: 'SD', label: 'Standard Deviation' },
+    { value: 'SEM', label: 'Standard Error of the Mean' },
+];
+
+interface OwnProps {
+    asOverlay?: boolean;
+    field: ChartFieldInfo;
+    fieldValues: Record<string, SelectInputOption>;
+    onErrorBarChange: (name: string, value: string) => void;
+    onSelectFieldChange: (name: string, value: string, selectedOption: SelectInputOption) => void;
+    selectedType: ChartTypeInfo;
+}
+
+export const ChartFieldAggregateOptions: FC<OwnProps> = memo(props => {
+    const { field, fieldValues, onSelectFieldChange, onErrorBarChange, asOverlay = true, selectedType } = props;
+    const fieldValue = fieldValues?.[field.name];
+    const aggregateValue = fieldValues?.[BAR_CHART_AGGREGATE_NAME]?.value;
+    const errorBarValue = fieldValues?.[BAR_CHART_ERROR_BAR_NAME]?.value;
+    const includeNone = selectedType.name === 'line_plot';
+    const includeCount = selectedType.name === 'bar_chart';
+    const defaultAggregateValue = useMemo(() => (includeNone ? '' : 'SUM'), [includeNone]);
+    const errorBarRadioEnabled = useMemo(() => aggregateValue === 'MEAN', [aggregateValue]);
+
+    const aggregateOptions = useMemo(() => {
+        const options = BAR_CHART_AGGREGATE_METHODS.filter(option => {
+            if (option.value === 'COUNT' && !includeCount) {
+                return false;
+            }
+            return !(option.value === '' && !includeNone);
+        });
+
+        return options.map(option => ({ ...option, selected: aggregateValue === option.value }));
+    }, [aggregateValue, includeCount, includeNone]);
+
+    const errorBarOptions = useMemo(() => {
+        return ERROR_BAR_TYPES.map(option => ({
+            ...option,
+            disabled: !errorBarRadioEnabled,
+            selected: errorBarValue === option.value,
+        }));
+    }, [errorBarRadioEnabled, errorBarValue]);
+
+    const onAggregateChange = useCallback(
+        (name: string, value: string, selectedOption: SelectInputOption) => {
+            onSelectFieldChange(name, value, selectedOption);
+        },
+        [onSelectFieldChange]
+    );
+
+    const onErrorBarValueChange = useCallback(
+        (value: string) => {
+            onErrorBarChange(BAR_CHART_ERROR_BAR_NAME, value);
+        },
+        [onErrorBarChange]
+    );
+
+    // Only show the aggregate options if there is a field selected
+    if (!fieldValue?.value) {
+        return null;
+    }
+
+    const inputs = (
+        <>
+            <div>
+                <label>
+                    Aggregate Method <LabelOverlay placement="bottom">{BAR_CHART_AGGREGATE_METHOD_TIP}</LabelOverlay>
+                </label>
+                <SelectInput
+                    clearable={false}
+                    inputClass="col-xs-12"
+                    name={BAR_CHART_AGGREGATE_NAME}
+                    onChange={onAggregateChange}
+                    options={aggregateOptions}
+                    placeholder="Select aggregate method"
+                    showLabel={false}
+                    value={aggregateValue ?? defaultAggregateValue}
+                />
+            </div>
+            <div className="field-option-radio-group field-option-radio-group-block">
+                <label>
+                    Error Bars <LabelOverlay placement="bottom">{BAR_CHART_ERROR_BAR_TIP}</LabelOverlay>
+                </label>
+                <RadioGroupInput
+                    formsy={false}
+                    name={BAR_CHART_ERROR_BAR_NAME}
+                    onValueChange={onErrorBarValueChange}
+                    options={errorBarOptions}
+                />
+            </div>
+        </>
+    );
+
+    if (!asOverlay) {
+        return inputs;
+    }
+
+    return (
+        <div className="field-option-icon">
+            <OverlayTrigger
+                overlay={
+                    <Popover id="chart-field-option-popover" placement="left">
+                        {inputs}
+                    </Popover>
+                }
+                triggerType="click"
+            >
+                <span className="fa fa-gear" />
+            </OverlayTrigger>
+        </div>
+    );
+});
+ChartFieldAggregateOptions.displayName = 'ChartFieldAggregateOptions';
diff --git a/packages/components/src/internal/components/chart/ChartFieldOption.test.tsx b/packages/components/src/internal/components/chart/ChartFieldOption.test.tsx
index 33aaceac27..7cc9917dd7 100644
--- a/packages/components/src/internal/components/chart/ChartFieldOption.test.tsx
+++ b/packages/components/src/internal/components/chart/ChartFieldOption.test.tsx
@@ -13,8 +13,8 @@ import { SchemaQuery } from '../../../public/SchemaQuery';
 import { QueryInfo } from '../../../public/QueryInfo';
 import { ViewInfo } from '../../ViewInfo';
 
-import { ChartFieldOption, getSelectOptions, shouldShowFieldOptions } from './ChartFieldOption';
-import { ChartFieldInfo, ChartTypeInfo } from './ChartBuilderModal';
+import { ChartFieldOption, getSelectOptions } from './ChartFieldOption';
+import { ChartFieldInfo, ChartTypeInfo } from './models';
 
 LABKEY_VIS = {
     GenericChartHelper: {
@@ -82,35 +82,12 @@ describe('getSelectOptions', () => {
     });
 });
 
-describe('shouldShowFieldOptions', () => {
-    const xField = { name: 'x' } as ChartFieldInfo;
-    const yField = { name: 'y' } as ChartFieldInfo;
-
-    test('based on chart type', () => {
-        expect(shouldShowFieldOptions(xField, BAR_CHART_TYPE)).toBe(false);
-        expect(shouldShowFieldOptions(yField, BAR_CHART_TYPE)).toBe(false);
-        expect(shouldShowFieldOptions(xField, BOX_PLOT_TYPE)).toBe(false);
-        expect(shouldShowFieldOptions(yField, BOX_PLOT_TYPE)).toBe(true);
-        expect(shouldShowFieldOptions(xField, SCATTER_PLOT_TYPE)).toBe(true);
-        expect(shouldShowFieldOptions(yField, SCATTER_PLOT_TYPE)).toBe(true);
-        expect(shouldShowFieldOptions(xField, LINE_PLOT_TYPE)).toBe(true);
-        expect(shouldShowFieldOptions(yField, LINE_PLOT_TYPE)).toBe(true);
-    });
-
-    test('based on field name', () => {
-        expect(shouldShowFieldOptions({ name: 'series' } as ChartFieldInfo, BAR_CHART_TYPE)).toBe(false);
-        expect(shouldShowFieldOptions({ name: 'series' } as ChartFieldInfo, BOX_PLOT_TYPE)).toBe(false);
-        expect(shouldShowFieldOptions({ name: 'series' } as ChartFieldInfo, SCATTER_PLOT_TYPE)).toBe(false);
-        expect(shouldShowFieldOptions({ name: 'series' } as ChartFieldInfo, LINE_PLOT_TYPE)).toBe(false);
-    });
-});
-
 describe('ChartFieldOption', () => {
     test('line chart for x, showFieldOptions for int', async () => {
         render(
             <ChartFieldOption
                 field={{ name: 'x', label: 'X Axis', required: true } as ChartFieldInfo}
-                fieldValue={{ value: 'field1', data: { type: 'int' } }}
+                fieldValues={{ x: { value: 'field1', data: { type: 'int' } } }}
                 model={model}
                 onScaleChange={jest.fn()}
                 onSelectFieldChange={jest.fn()}
@@ -129,7 +106,7 @@ describe('ChartFieldOption', () => {
         render(
             <ChartFieldOption
                 field={{ name: 'x', label: 'X Axis', required: true } as ChartFieldInfo}
-                fieldValue={{ value: 'field1', data: { type: 'date' } }}
+                fieldValues={{ x: { value: 'field1', data: { type: 'date' } } }}
                 model={model}
                 onScaleChange={jest.fn()}
                 onSelectFieldChange={jest.fn()}
@@ -148,7 +125,7 @@ describe('ChartFieldOption', () => {
         render(
             <ChartFieldOption
                 field={{ name: 'x', label: 'X Axis', required: true } as ChartFieldInfo}
-                fieldValue={{ value: 'field1', data: { type: 'int' } }}
+                fieldValues={{ x: { value: 'field1', data: { type: 'int' } } }}
                 model={model}
                 onScaleChange={jest.fn()}
                 onSelectFieldChange={jest.fn()}
@@ -167,7 +144,7 @@ describe('ChartFieldOption', () => {
         render(
             <ChartFieldOption
                 field={{ name: 'x', label: 'X Axis', required: false } as ChartFieldInfo}
-                fieldValue={{ value: 'field1', data: { type: 'date' } }}
+                fieldValues={{ x: { value: 'field1', data: { type: 'date' } } }}
                 model={model}
                 onScaleChange={jest.fn()}
                 onSelectFieldChange={jest.fn()}
@@ -184,7 +161,7 @@ describe('ChartFieldOption', () => {
         render(
             <ChartFieldOption
                 field={{ name: 'x', label: 'X Axis', required: true } as ChartFieldInfo}
-                fieldValue={{ value: 'field1', data: { type: 'int' } }}
+                fieldValues={{ x: { value: 'field1', data: { type: 'int' } } }}
                 model={model}
                 onScaleChange={jest.fn()}
                 onSelectFieldChange={jest.fn()}
@@ -215,11 +192,11 @@ describe('ChartFieldOption', () => {
         render(
             <ChartFieldOption
                 field={{ name: 'x', label: 'X Axis', required: true } as ChartFieldInfo}
-                fieldValue={{ value: 'field1', data: { type: 'int' } }}
-                scaleValues={{ trans: 'log', type: 'manual', min: '3', max: '20' }}
+                fieldValues={{ x: { value: 'field1', data: { type: 'int' } } }}
                 model={model}
                 onScaleChange={jest.fn()}
                 onSelectFieldChange={jest.fn()}
+                scaleValues={{ trans: 'log', type: 'manual', min: '3', max: '20' }}
                 selectedType={LINE_PLOT_TYPE}
             />
         );
@@ -252,11 +229,11 @@ describe('ChartFieldOption', () => {
         render(
             <ChartFieldOption
                 field={{ name: 'x', label: 'X Axis', required: true } as ChartFieldInfo}
-                fieldValue={{ value: 'field1', data: { type: 'int' } }}
-                scaleValues={{ trans: 'log', type: 'manual', min: '1', max: '0' }}
+                fieldValues={{ x: { value: 'field1', data: { type: 'int' } } }}
                 model={model}
                 onScaleChange={jest.fn()}
                 onSelectFieldChange={jest.fn()}
+                scaleValues={{ trans: 'log', type: 'manual', min: '1', max: '0' }}
                 selectedType={LINE_PLOT_TYPE}
             />
         );
diff --git a/packages/components/src/internal/components/chart/ChartFieldOption.tsx b/packages/components/src/internal/components/chart/ChartFieldOption.tsx
index fbe1bce17c..cc716ee5a6 100644
--- a/packages/components/src/internal/components/chart/ChartFieldOption.tsx
+++ b/packages/components/src/internal/components/chart/ChartFieldOption.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, FC, memo, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { FC, memo, useCallback, useMemo, useState } from 'react';
 
 import { SelectInput, SelectInputOption } from '../forms/input/SelectInput';
 
@@ -7,12 +7,10 @@ import { QueryModel } from '../../../public/QueryModel/QueryModel';
 import { LABKEY_VIS } from '../../constants';
 import { naturalSortByProperty } from '../../../public/sort';
 
-import { OverlayTrigger } from '../../OverlayTrigger';
-import { Popover } from '../../Popover';
-import { RadioGroupInput, RadioGroupOption } from '../forms/input/RadioGroupInput';
-
-import { ChartFieldInfo, ChartTypeInfo } from './ChartBuilderModal';
-import { getFieldDataType } from './utils';
+import { ChartFieldRangeScaleOptions } from './ChartFieldRangeScaleOptions';
+import { ChartFieldInfo, ChartTypeInfo, ScaleType } from './models';
+import { getFieldDataType, shouldShowAggregateOptions, shouldShowRangeScaleOptions } from './utils';
+import { ChartFieldAggregateOptions } from './ChartFieldAggregateOptions';
 
 export const getSelectOptions = (
     model: QueryModel,
@@ -38,71 +36,44 @@ export const getSelectOptions = (
         .map(col => ({ label: col.caption, value: col.fieldKey, data: col }));
 };
 
-export const shouldShowFieldOptions = (field: ChartFieldInfo, selectedType: ChartTypeInfo): boolean => {
-    const showForX = field.name === 'x' && (selectedType.name === 'scatter_plot' || selectedType.name === 'line_plot');
-    const showForY =
-        field.name === 'y' &&
-        (selectedType.name === 'scatter_plot' || selectedType.name === 'line_plot' || selectedType.name === 'box_plot');
-    return showForX || showForY;
-};
-
-const SCALE_TRANS_TYPES = [
-    { value: 'linear', label: 'Linear' },
-    { value: 'log', label: 'Log' },
-];
-
-const SCALE_RANGE_TYPES = [
-    { value: 'automatic', label: 'Automatic' },
-    { value: 'manual', label: 'Manual' },
-];
-
 const DEFAULT_SCALE_VALUES = { type: 'automatic', trans: 'linear' };
 
-interface ChartFieldOptionProps {
+interface OwnProps {
     field: ChartFieldInfo;
-    fieldValue?: SelectInputOption;
+    fieldValues: Record<string, SelectInputOption>;
     model: QueryModel;
-    onScaleChange: (field: string, key: string, value: string | number, reset?: boolean) => void;
+    onErrorBarChange: (name: string, value: string) => void;
+    onScaleChange: (field: string, key: string, value: number | string, reset?: boolean) => void;
     onSelectFieldChange: (name: string, value: string, selectedOption: SelectInputOption) => void;
-    scaleValues?: Record<string, string | number>;
+    scaleValues: ScaleType;
     selectedType: ChartTypeInfo;
 }
 
-export const ChartFieldOption: FC<ChartFieldOptionProps> = memo(props => {
-    const { field, model, selectedType, onSelectFieldChange, scaleValues, fieldValue, onScaleChange } = props;
+export const ChartFieldOption: FC<OwnProps> = memo(props => {
+    const {
+        field,
+        model,
+        selectedType,
+        onSelectFieldChange,
+        scaleValues,
+        fieldValues,
+        onScaleChange,
+        onErrorBarChange,
+    } = props;
+    const fieldValue = fieldValues?.[field.name];
+    const [scale, setScale] = useState<ScaleType>(scaleValues?.type ? scaleValues : DEFAULT_SCALE_VALUES);
+
     const options = useMemo(() => getSelectOptions(model, selectedType, field), [model, selectedType, field]);
     const isNumericType = useMemo(
         () => LABKEY_VIS.GenericChartHelper.isNumericType(getFieldDataType(fieldValue?.data)),
         [fieldValue?.data]
     );
-    const showFieldOptions = isNumericType && shouldShowFieldOptions(field, selectedType);
-    const [scale, setScale] = useState<Record<string, string | number>>(scaleValues ?? {});
-    const invalidRange = useMemo(
-        () =>
-            scale.min !== undefined &&
-            scale.min !== null &&
-            scale.max !== undefined &&
-            scale.max !== null &&
-            parseFloat(scale.max.toString()) <= parseFloat(scale.min.toString()),
-        [scale]
-    );
+    const showRangeScaleOptions = isNumericType && shouldShowRangeScaleOptions(field, selectedType);
+    const showAggregateOptions = isNumericType && shouldShowAggregateOptions(field, selectedType);
+
     // Issue 52050: use fieldKey for special characters
     const selectInputValue = useMemo(() => fieldValue?.data.fieldKey ?? fieldValue?.value, [fieldValue]);
 
-    useEffect(() => {
-        if (showFieldOptions && !scale.type) {
-            setScale(scaleValues?.type ? scaleValues : DEFAULT_SCALE_VALUES);
-        }
-    }, [showFieldOptions, scale.type, scaleValues]);
-
-    const onScaleTransChange = useCallback(
-        (selected: string) => {
-            onScaleChange(field.name, 'trans', selected);
-            setScale(prev => ({ ...prev, trans: selected }));
-        },
-        [field.name, onScaleChange]
-    );
-
     const onSelectFieldChange_ = useCallback(
         (name: string, value: string, selectedOption: SelectInputOption) => {
             onScaleChange(field.name, undefined, undefined, true);
@@ -112,54 +83,6 @@ export const ChartFieldOption: FC<ChartFieldOptionProps> = memo(props => {
         [field.name, onScaleChange, onSelectFieldChange]
     );
 
-    const onScaleTypeChange = useCallback(
-        (selected: string) => {
-            let scale_: Record<string, string | number> = { ...scale, type: selected };
-            onScaleChange(field.name, 'type', selected);
-            if (selected === 'automatic') {
-                onScaleChange(field.name, 'min', undefined);
-                onScaleChange(field.name, 'max', undefined);
-                scale_ = { ...scale_, min: undefined, max: undefined };
-            }
-            setScale(scale_);
-        },
-        [field.name, onScaleChange, scale]
-    );
-
-    const onScaleMinChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
-        setScale(prev => ({ ...prev, min: event.target.value }));
-    }, []);
-
-    const onScaleMaxChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
-        setScale(prev => ({ ...prev, max: event.target.value }));
-    }, []);
-
-    const onScaleRangeBlur = useCallback(() => {
-        if (invalidRange) return;
-        onScaleChange(field.name, 'min', parseFloat(scale.min?.toString()));
-        onScaleChange(field.name, 'max', parseFloat(scale.max?.toString()));
-    }, [field.name, onScaleChange, scale.max, scale.min, invalidRange]);
-
-    const scaleTransOptions = useMemo(() => {
-        return SCALE_TRANS_TYPES.map(
-            option =>
-                ({
-                    ...option,
-                    selected: scale.trans === option.value,
-                }) as RadioGroupOption
-        );
-    }, [scale.trans]);
-
-    const scaleTypeOptions = useMemo(() => {
-        return SCALE_RANGE_TYPES.map(
-            option =>
-                ({
-                    ...option,
-                    selected: scale.type === option.value,
-                }) as RadioGroupOption
-        );
-    }, [scale.type]);
-
     return (
         <div>
             <label>
@@ -168,71 +91,34 @@ export const ChartFieldOption: FC<ChartFieldOptionProps> = memo(props => {
             </label>
             <div className="form-group row">
                 <SelectInput
-                    showLabel={false}
                     containerClass=""
-                    inputClass={showFieldOptions ? 'col-xs-11' : 'col-xs-12'}
-                    placeholder="Select a field"
+                    inputClass={showRangeScaleOptions || showAggregateOptions ? 'col-xs-11' : 'col-xs-12'}
                     name={field.name}
-                    options={options}
                     onChange={onSelectFieldChange_}
+                    options={options}
+                    placeholder="Select a field"
+                    showLabel={false}
                     value={selectInputValue}
                 />
-                {showFieldOptions && (
-                    <div className="field-option-icon">
-                        <OverlayTrigger
-                            triggerType="click"
-                            overlay={
-                                <Popover id="chart-field-option-popover" placement="bottom">
-                                    <div className="field-option-radio-group">
-                                        <label>Scale</label>
-                                        <RadioGroupInput
-                                            name="scaleTrans"
-                                            options={scaleTransOptions}
-                                            onValueChange={onScaleTransChange}
-                                            formsy={false}
-                                        />
-                                    </div>
-                                    <div className="field-option-radio-group">
-                                        <label>Range</label>
-                                        <RadioGroupInput
-                                            name="scaleType"
-                                            options={scaleTypeOptions}
-                                            onValueChange={onScaleTypeChange}
-                                            formsy={false}
-                                        />
-                                    </div>
-                                    {scale.type === 'manual' && (
-                                        <div className="chart-builder-scale-range-inputs">
-                                            <input
-                                                name="scaleMin"
-                                                type="number"
-                                                className="chart-builder-field-footer-input"
-                                                placeholder="Min"
-                                                onBlur={onScaleRangeBlur}
-                                                onChange={onScaleMinChange}
-                                                value={scale.min ?? ''}
-                                            />
-                                            <span>&nbsp;&nbsp;-&nbsp;</span>
-                                            <input
-                                                name="scaleMax"
-                                                type="number"
-                                                className="chart-builder-field-footer-input"
-                                                placeholder="Max"
-                                                onBlur={onScaleRangeBlur}
-                                                onChange={onScaleMaxChange}
-                                                value={scale.max ?? ''}
-                                            />
-                                            {invalidRange && (
-                                                <div className="text-danger">Invalid range (Max &lt;= Min)</div>
-                                            )}
-                                        </div>
-                                    )}
-                                </Popover>
-                            }
-                        >
-                            <span className="fa fa-gear" />
-                        </OverlayTrigger>
-                    </div>
+                {showRangeScaleOptions && (
+                    <ChartFieldRangeScaleOptions
+                        field={field}
+                        onScaleChange={onScaleChange}
+                        scale={scale}
+                        setScale={setScale}
+                        showScaleTrans={selectedType.name !== 'bar_chart'}
+                    >
+                        {showAggregateOptions && (
+                            <ChartFieldAggregateOptions
+                                asOverlay={false}
+                                field={field}
+                                fieldValues={fieldValues}
+                                onErrorBarChange={onErrorBarChange}
+                                onSelectFieldChange={onSelectFieldChange}
+                                selectedType={selectedType}
+                            />
+                        )}
+                    </ChartFieldRangeScaleOptions>
                 )}
             </div>
         </div>
diff --git a/packages/components/src/internal/components/chart/ChartFieldRangeScaleOptions.test.tsx b/packages/components/src/internal/components/chart/ChartFieldRangeScaleOptions.test.tsx
new file mode 100644
index 0000000000..6bde631519
--- /dev/null
+++ b/packages/components/src/internal/components/chart/ChartFieldRangeScaleOptions.test.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { ChartFieldRangeScaleOptions } from './ChartFieldRangeScaleOptions';
+import { ScaleType } from './models';
+
+const field = { name: 'testField', label: 'Test Label', required: false };
+
+function renderComponent(scale = {} as ScaleType) {
+    return render(
+        <ChartFieldRangeScaleOptions
+            field={field}
+            onScaleChange={jest.fn}
+            scale={scale}
+            setScale={jest.fn}
+            showScaleTrans
+        >
+            <div className="child-content">Children Content</div>
+        </ChartFieldRangeScaleOptions>
+    );
+}
+
+describe('ChartFieldRangeScaleOptions', () => {
+    test('renders gear icon and children in overlay', async () => {
+        renderComponent();
+        expect(document.querySelectorAll('.field-option-icon')).toHaveLength(1);
+        expect(document.querySelectorAll('.fa-gear')).toHaveLength(1);
+        expect(document.querySelectorAll('.lk-popover')).toHaveLength(0);
+        expect(document.querySelectorAll('.child-content')).toHaveLength(0);
+
+        // Simulate click to show overlay
+        await userEvent.click(document.querySelector('.fa-gear'));
+        expect(document.querySelectorAll('.lk-popover')).toHaveLength(1);
+        expect(document.querySelectorAll('.child-content')).toHaveLength(1);
+    });
+
+    test('shows scale and range radio groups', async () => {
+        renderComponent({ trans: 'linear', type: 'automatic' });
+        await userEvent.click(document.querySelector('.fa-gear'));
+        expect(document.querySelectorAll('label')[0].textContent).toBe('Scale');
+        expect(document.querySelectorAll('label')[1].textContent).toBe('Range');
+        expect(document.querySelectorAll('.select-input-container')).toHaveLength(0);
+        expect(document.querySelectorAll('input[type="radio"]')).toHaveLength(4); // 2 for scale, 2 for range
+        expect(document.querySelectorAll('input[name="scaleTrans"]')).toHaveLength(2);
+        expect(document.querySelectorAll('input[name="scaleType"]')).toHaveLength(2);
+        expect(document.querySelectorAll('.radioinput-label.selected')[0].textContent).toBe('Linear');
+        expect(document.querySelectorAll('.radioinput-label.selected')[1].textContent).toBe('Automatic');
+        expect(document.querySelectorAll('input[type="number"]')).toHaveLength(0); // manual range inputs hidden by default
+    });
+
+    test('shows manual range inputs when scale.type is manual', async () => {
+        renderComponent({ trans: 'log', type: 'manual', min: '1', max: '2' });
+        await userEvent.click(document.querySelector('.fa-gear'));
+        expect(document.querySelectorAll('.select-input-container')).toHaveLength(0);
+        expect(document.querySelectorAll('input[type="radio"]')).toHaveLength(4); // 2 for scale, 2 for range
+        expect(document.querySelectorAll('.radioinput-label.selected')[0].textContent).toBe('Log');
+        expect(document.querySelectorAll('.radioinput-label.selected')[1].textContent).toBe('Manual');
+        expect(document.querySelectorAll('input[type="number"]')).toHaveLength(2);
+        expect(document.querySelector('input[name="scaleMin"]').getAttribute('value')).toBe('1');
+        expect(document.querySelector('input[name="scaleMax"]').getAttribute('value')).toBe('2');
+        expect(document.querySelectorAll('.text-danger')).toHaveLength(0);
+    });
+
+    test('shows invalid range warning when max <= min', async () => {
+        renderComponent({ trans: 'linear', type: 'manual', min: 10, max: 5 });
+        await userEvent.click(document.querySelector('.fa-gear'));
+        expect(document.querySelectorAll('.text-danger')).toHaveLength(1);
+        expect(document.querySelector('.text-danger').textContent).toBe('Invalid range (Max <= Min)');
+    });
+
+    test('does not show invalid range warning when min is undefined', async () => {
+        renderComponent({ type: 'manual', min: undefined, max: 10 } as ScaleType);
+        await userEvent.click(document.querySelector('.fa-gear'));
+        expect(document.querySelectorAll('.text-danger')).toHaveLength(0);
+    });
+    test('does not show invalid range warning when max is undefined', async () => {
+        renderComponent({ type: 'manual', min: 5, max: undefined } as ScaleType);
+        await userEvent.click(document.querySelector('.fa-gear'));
+        expect(document.querySelectorAll('.text-danger')).toHaveLength(0);
+    });
+});
diff --git a/packages/components/src/internal/components/chart/ChartFieldRangeScaleOptions.tsx b/packages/components/src/internal/components/chart/ChartFieldRangeScaleOptions.tsx
new file mode 100644
index 0000000000..b3d63663fd
--- /dev/null
+++ b/packages/components/src/internal/components/chart/ChartFieldRangeScaleOptions.tsx
@@ -0,0 +1,149 @@
+import React, { ChangeEvent, FC, memo, PropsWithChildren, useCallback, useMemo } from 'react';
+import { OverlayTrigger } from '../../OverlayTrigger';
+import { Popover } from '../../Popover';
+import { RadioGroupInput, RadioGroupOption } from '../forms/input/RadioGroupInput';
+
+import { ChartFieldInfo, ScaleType } from './models';
+
+const SCALE_TRANS_TYPES = [
+    { value: 'linear', label: 'Linear' },
+    { value: 'log', label: 'Log' },
+];
+
+const SCALE_RANGE_TYPES = [
+    { value: 'automatic', label: 'Automatic' },
+    { value: 'manual', label: 'Manual' },
+];
+
+interface OwnProps extends PropsWithChildren {
+    field: ChartFieldInfo;
+    onScaleChange: (field: string, key: string, value: number | string, reset?: boolean) => void;
+    scale: ScaleType;
+    setScale: (scale: ScaleType) => void;
+    showScaleTrans: boolean;
+}
+
+export const ChartFieldRangeScaleOptions: FC<OwnProps> = memo(props => {
+    const { field, scale, setScale, onScaleChange, showScaleTrans, children } = props;
+    const placement = useMemo(() => (!showScaleTrans && children ? 'left' : 'bottom'), [showScaleTrans, children]);
+
+    const scaleTransOptions = useMemo(() => {
+        return SCALE_TRANS_TYPES.map(option => ({ ...option, selected: scale.trans === option.value }));
+    }, [scale.trans]);
+
+    const scaleTypeOptions = useMemo(() => {
+        return SCALE_RANGE_TYPES.map(option => ({ ...option, selected: scale.type === option.value }));
+    }, [scale.type]);
+
+    const invalidRange = useMemo(
+        () =>
+            scale.min !== undefined &&
+            scale.min !== null &&
+            scale.max !== undefined &&
+            scale.max !== null &&
+            parseFloat(scale.max.toString()) <= parseFloat(scale.min.toString()),
+        [scale]
+    );
+
+    const onScaleTransChange = useCallback(
+        (selected: string) => {
+            onScaleChange(field.name, 'trans', selected);
+            setScale({ ...scale, trans: selected });
+        },
+        [field.name, onScaleChange, setScale, scale]
+    );
+
+    const onScaleTypeChange = useCallback(
+        (selected: string) => {
+            let scale_ = { ...scale, type: selected };
+            onScaleChange(field.name, 'type', selected);
+            if (selected === 'automatic') {
+                onScaleChange(field.name, 'min', undefined);
+                onScaleChange(field.name, 'max', undefined);
+                scale_ = { ...scale_, min: undefined, max: undefined };
+            }
+            setScale(scale_);
+        },
+        [field.name, onScaleChange, scale, setScale]
+    );
+
+    const onScaleMinChange = useCallback(
+        (event: ChangeEvent<HTMLInputElement>) => {
+            setScale({ ...scale, min: event.target.value });
+        },
+        [setScale, scale]
+    );
+
+    const onScaleMaxChange = useCallback(
+        (event: ChangeEvent<HTMLInputElement>) => {
+            setScale({ ...scale, max: event.target.value });
+        },
+        [setScale, scale]
+    );
+
+    const onScaleRangeBlur = useCallback(() => {
+        if (invalidRange) return;
+        onScaleChange(field.name, 'min', parseFloat(scale.min?.toString()));
+        onScaleChange(field.name, 'max', parseFloat(scale.max?.toString()));
+    }, [field.name, onScaleChange, scale.max, scale.min, invalidRange]);
+
+    return (
+        <div className="field-option-icon">
+            <OverlayTrigger
+                overlay={
+                    <Popover id="chart-field-option-popover" placement={placement}>
+                        {children}
+                        {showScaleTrans && (
+                            <div className="field-option-radio-group">
+                                <label>Scale</label>
+                                <RadioGroupInput
+                                    formsy={false}
+                                    name="scaleTrans"
+                                    onValueChange={onScaleTransChange}
+                                    options={scaleTransOptions}
+                                />
+                            </div>
+                        )}
+                        <div className="field-option-radio-group">
+                            <label>Range</label>
+                            <RadioGroupInput
+                                formsy={false}
+                                name="scaleType"
+                                onValueChange={onScaleTypeChange}
+                                options={scaleTypeOptions}
+                            />
+                        </div>
+                        {scale.type === 'manual' && (
+                            <div className="chart-builder-scale-range-inputs">
+                                <input
+                                    className="chart-builder-field-footer-input"
+                                    name="scaleMin"
+                                    onBlur={onScaleRangeBlur}
+                                    onChange={onScaleMinChange}
+                                    placeholder="Min"
+                                    type="number"
+                                    value={scale.min ?? ''}
+                                />
+                                <span className="chart-builder-field-footer-input">-</span>
+                                <input
+                                    className="chart-builder-field-footer-input"
+                                    name="scaleMax"
+                                    onBlur={onScaleRangeBlur}
+                                    onChange={onScaleMaxChange}
+                                    placeholder="Max"
+                                    type="number"
+                                    value={scale.max ?? ''}
+                                />
+                                {invalidRange && <div className="text-danger">Invalid range (Max &lt;= Min)</div>}
+                            </div>
+                        )}
+                    </Popover>
+                }
+                triggerType="click"
+            >
+                <span className="fa fa-gear" />
+            </OverlayTrigger>
+        </div>
+    );
+});
+ChartFieldRangeScaleOptions.displayName = 'ChartFieldRangeScaleOptions';
diff --git a/packages/components/src/internal/components/chart/constants.ts b/packages/components/src/internal/components/chart/constants.ts
new file mode 100644
index 0000000000..2b71cd4f97
--- /dev/null
+++ b/packages/components/src/internal/components/chart/constants.ts
@@ -0,0 +1,14 @@
+export const HIDDEN_CHART_TYPES = ['time_chart'];
+export const RIGHT_COL_FIELDS = ['color', 'shape', 'series', 'trendline'];
+export const MAX_ROWS_PREVIEW = 10000;
+export const MAX_POINT_DISPLAY = 10000;
+export const BLUE_HEX_COLOR = '3366FF';
+export const BAR_CHART_AGGREGATE_NAME = 'aggregate-method';
+export const BAR_CHART_ERROR_BAR_NAME = 'error-bar-method';
+export const ICONS = {
+    bar_chart: 'bar_chart',
+    box_plot: 'box_plot',
+    pie_chart: 'pie_chart',
+    scatter_plot: 'xy_scatter',
+    line_plot: 'xy_line',
+};
diff --git a/packages/components/src/internal/components/chart/models.ts b/packages/components/src/internal/components/chart/models.ts
index dbcb415cae..999f8dfcb0 100644
--- a/packages/components/src/internal/components/chart/models.ts
+++ b/packages/components/src/internal/components/chart/models.ts
@@ -46,3 +46,35 @@ export interface TrendlineType {
     showMin?: boolean;
     value: string;
 }
+
+interface AggregateFieldInfo {
+    name: string;
+    value: string;
+}
+
+export interface ChartFieldInfo {
+    aggregate?: AggregateFieldInfo;
+    altSelectionOnly?: boolean;
+    // allowMultiple?: boolean; // not yet supported, will be part of a future dev story
+    label: string;
+    name: string;
+    nonNumericOnly?: boolean;
+    numericOnly?: boolean;
+    numericOrDateOnly?: boolean;
+    required: boolean;
+}
+
+export interface ChartTypeInfo {
+    fields: ChartFieldInfo[];
+    hidden?: boolean;
+    imgUrl: string;
+    name: string;
+    title: string;
+}
+
+export interface ScaleType {
+    max?: number | string;
+    min?: number | string;
+    trans: string;
+    type: string;
+}
diff --git a/packages/components/src/internal/components/chart/utils.test.ts b/packages/components/src/internal/components/chart/utils.test.ts
index 643f243efa..b424cf42da 100644
--- a/packages/components/src/internal/components/chart/utils.test.ts
+++ b/packages/components/src/internal/components/chart/utils.test.ts
@@ -1,6 +1,13 @@
 import { Map } from 'immutable';
 
-import { createHorizontalBarLegendData, createHorizontalBarCountLegendData, getFieldDataType } from './utils';
+import {
+    createHorizontalBarCountLegendData,
+    createHorizontalBarLegendData,
+    getFieldDataType,
+    shouldShowAggregateOptions,
+    shouldShowRangeScaleOptions,
+} from './utils';
+import { ChartFieldInfo, ChartTypeInfo } from './models';
 
 describe('createHorizontalBarLegendData', () => {
     test('all different', () => {
@@ -301,3 +308,52 @@ describe('getFieldDataType', () => {
         expect(getFieldDataType({ displayFieldJsonType: undefined, jsonType: undefined, type: 'date' })).toBe('date');
     });
 });
+
+const BAR_CHART_TYPE = {
+    name: 'bar_chart',
+} as ChartTypeInfo;
+const BOX_PLOT_TYPE = {
+    name: 'box_plot',
+} as ChartTypeInfo;
+const SCATTER_PLOT_TYPE = {
+    name: 'scatter_plot',
+} as ChartTypeInfo;
+const LINE_PLOT_TYPE = {
+    name: 'line_plot',
+} as ChartTypeInfo;
+
+const xField = { name: 'x' } as ChartFieldInfo;
+const yField = { name: 'y' } as ChartFieldInfo;
+
+describe('shouldShowRangeScaleOptions', () => {
+    test('based on chart type', () => {
+        expect(shouldShowRangeScaleOptions(xField, BAR_CHART_TYPE)).toBe(false);
+        expect(shouldShowRangeScaleOptions(yField, BAR_CHART_TYPE)).toBe(true);
+        expect(shouldShowRangeScaleOptions(xField, BOX_PLOT_TYPE)).toBe(false);
+        expect(shouldShowRangeScaleOptions(yField, BOX_PLOT_TYPE)).toBe(true);
+        expect(shouldShowRangeScaleOptions(xField, SCATTER_PLOT_TYPE)).toBe(true);
+        expect(shouldShowRangeScaleOptions(yField, SCATTER_PLOT_TYPE)).toBe(true);
+        expect(shouldShowRangeScaleOptions(xField, LINE_PLOT_TYPE)).toBe(true);
+        expect(shouldShowRangeScaleOptions(yField, LINE_PLOT_TYPE)).toBe(true);
+    });
+
+    test('based on field name', () => {
+        expect(shouldShowRangeScaleOptions({ name: 'series' } as ChartFieldInfo, BAR_CHART_TYPE)).toBe(false);
+        expect(shouldShowRangeScaleOptions({ name: 'series' } as ChartFieldInfo, BOX_PLOT_TYPE)).toBe(false);
+        expect(shouldShowRangeScaleOptions({ name: 'series' } as ChartFieldInfo, SCATTER_PLOT_TYPE)).toBe(false);
+        expect(shouldShowRangeScaleOptions({ name: 'series' } as ChartFieldInfo, LINE_PLOT_TYPE)).toBe(false);
+    });
+});
+
+describe('shouldShowAggregateOptions', () => {
+    test('based on chart type', () => {
+        expect(shouldShowAggregateOptions(xField, BAR_CHART_TYPE)).toBe(false);
+        expect(shouldShowAggregateOptions(yField, BAR_CHART_TYPE)).toBe(true);
+        expect(shouldShowAggregateOptions(xField, BOX_PLOT_TYPE)).toBe(false);
+        expect(shouldShowAggregateOptions(yField, BOX_PLOT_TYPE)).toBe(false);
+        expect(shouldShowAggregateOptions(xField, SCATTER_PLOT_TYPE)).toBe(false);
+        expect(shouldShowAggregateOptions(yField, SCATTER_PLOT_TYPE)).toBe(false);
+        expect(shouldShowAggregateOptions(xField, LINE_PLOT_TYPE)).toBe(false);
+        expect(shouldShowAggregateOptions(yField, LINE_PLOT_TYPE)).toBe(true);
+    });
+});
diff --git a/packages/components/src/internal/components/chart/utils.ts b/packages/components/src/internal/components/chart/utils.ts
index cc560032a3..14baf1acf0 100644
--- a/packages/components/src/internal/components/chart/utils.ts
+++ b/packages/components/src/internal/components/chart/utils.ts
@@ -1,4 +1,5 @@
 import { Map } from 'immutable';
+import { ChartFieldInfo, ChartTypeInfo } from './models';
 
 export interface HorizontalBarData {
     backgroundColor?: string;
@@ -74,3 +75,19 @@ export const getFieldDataType = (fieldData: Record<string, any>): string => {
     if (!fieldData) return undefined;
     return fieldData.displayFieldJsonType || fieldData.jsonType || fieldData.type;
 };
+
+export const shouldShowRangeScaleOptions = (field: ChartFieldInfo, selectedType: ChartTypeInfo): boolean => {
+    const isScatter = selectedType.name === 'scatter_plot';
+    const isLine = selectedType.name === 'line_plot';
+    const isBox = selectedType.name === 'box_plot';
+    const isBar = selectedType.name === 'bar_chart';
+    const showForX = field.name === 'x' && (isScatter || isLine);
+    const showForY = field.name === 'y' && (isScatter || isLine || isBox || isBar);
+    return showForX || showForY;
+};
+
+export const shouldShowAggregateOptions = (field: ChartFieldInfo, selectedType: ChartTypeInfo): boolean => {
+    const isBar = selectedType.name === 'bar_chart';
+    const isLine = selectedType.name === 'line_plot';
+    return field.name === 'y' && (isBar || isLine);
+};
diff --git a/packages/components/src/internal/components/forms/input/RadioGroupInput.tsx b/packages/components/src/internal/components/forms/input/RadioGroupInput.tsx
index 8a07ba9558..78870a88de 100644
--- a/packages/components/src/internal/components/forms/input/RadioGroupInput.tsx
+++ b/packages/components/src/internal/components/forms/input/RadioGroupInput.tsx
@@ -25,28 +25,31 @@ const RadioGroupOption: FC<RadioGroupOptionImplProps> = memo(props => {
     const { isSelected, name, option, showDescriptions, onSetValue } = props;
 
     const onLabelClick = useCallback(() => {
-        onSetValue(option.value);
-    }, [onSetValue, option.value]);
+        if (!option.disabled) onSetValue(option.value);
+    }, [onSetValue, option.value, option.disabled]);
 
     const onRadioChange = useCallback(
         (evt: ChangeEvent<HTMLInputElement>) => {
-            onSetValue(evt.target.value);
+            if (!option.disabled) onSetValue(evt.target.value);
         },
-        [onSetValue]
+        [onSetValue, option.disabled]
     );
 
     return (
         <div className="radio-input-wrapper">
             <input
-                className="radioinput-input"
                 checked={isSelected && !option.disabled}
-                type="radio"
+                className="radioinput-input"
+                disabled={option.disabled}
                 name={name}
-                value={option.value}
                 onChange={onRadioChange}
-                disabled={option.disabled}
+                type="radio"
+                value={option.value}
             />
-            <span className={classNames('radioinput-label', { selected: isSelected })} onClick={onLabelClick}>
+            <span
+                className={classNames('radioinput-label', { selected: isSelected, disabled: option.disabled })}
+                onClick={onLabelClick}
+            >
                 {option.label}
             </span>
             {showDescriptions && option.description && (
@@ -67,7 +70,7 @@ interface OwnProps {
     showDescriptions?: boolean;
 }
 
-type RadioGroupInputProps = OwnProps & FormsyInjectedProps<any>;
+type RadioGroupInputProps = FormsyInjectedProps<any> & OwnProps;
 
 const RadioGroupInputImpl: FC<RadioGroupInputProps> = memo(props => {
     const { options, name, showDescriptions, formsy, setValue, onValueChange } = props;
@@ -97,7 +100,7 @@ const RadioGroupInputImpl: FC<RadioGroupInputProps> = memo(props => {
 
     if (options?.length === 1) {
         return (
-            <div key={options[0].value} className="radio-input-wrapper">
+            <div className="radio-input-wrapper" key={options[0].value}>
                 <input checked hidden name={name} onChange={onValueChange_} type="radio" value={options[0].value} />
             </div>
         );
@@ -107,11 +110,11 @@ const RadioGroupInputImpl: FC<RadioGroupInputProps> = memo(props => {
         <>
             {options?.map(option => (
                 <RadioGroupOption
-                    key={option.value}
+                    isSelected={selectedValue === option.value}
+                    key={option.value ?? `radio-${option.label}`}
                     name={name}
                     onSetValue={onSetValue}
                     option={option}
-                    isSelected={selectedValue === option.value}
                     showDescriptions={showDescriptions}
                 />
             ))}
diff --git a/packages/components/src/theme/charts.scss b/packages/components/src/theme/charts.scss
index e9a4965ac7..e66756ee49 100644
--- a/packages/components/src/theme/charts.scss
+++ b/packages/components/src/theme/charts.scss
@@ -293,6 +293,17 @@
         padding-left: 5px;
         cursor: default;
     }
+
+    .radioinput-label.disabled {
+        color: $text-muted;
+    }
+}
+.field-option-radio-group-block {
+    padding-bottom: 10px;
+
+    .radio-input-wrapper {
+        display: block;
+    }
 }
 
 .chart-builder-preview-body {