ChartSettingsPanel: Add UI for legend position (#1904)

Author: labkey-alan

packages/components/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.2.0",
+  "version": "7.3.0",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

packages/components/package.json

@@ -1,6 +1,10 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages
 
+### version 7.3.0
+*Released*: 10 December 2025
+- CharBuilderModal: add UI for legend position
+
 ###  version 7.2.0
 *Released*: 9 December 2025
 - Chart builder updates for series color scale options

packages/components/releaseNotes/components.md

@@ -21,6 +21,7 @@ import { useEnterEscape } from '../../../public/useEnterEscape';
 import { ChartLabelInput } from './ChartLabelInput';
 import { ChartColorInputs } from './ChartColorInputs';
 import { Alert } from '../base/Alert';
+import { RadioGroupInput } from '../forms/input/RadioGroupInput';
 
 function changedIntValue(strVal: string, currentVal: number): [value: number, changed: boolean] {
     strVal = strVal.trim();
@@ -279,6 +280,7 @@ export const ChartSettingsPanel: FC<Props> = memo(props => {
         setChartConfig,
         setChartModel,
     } = props;
+    const legendPos = chartConfig.legendPos;
     const showTrendline = hasTrendline(chartType);
     const fields = chartType.fields.filter(f => f.name !== 'trendline');
 
@@ -326,6 +328,20 @@ export const ChartSettingsPanel: FC<Props> = memo(props => {
         [setChartConfig]
     );
 
+    const legendOptions = useMemo(() => {
+        return [
+            { label: 'Right', selected: !legendPos || legendPos === 'right', value: 'right' },
+            { label: 'Bottom', selected: legendPos === 'bottom', value: 'bottom' },
+        ];
+    }, [legendPos]);
+
+    const onLegendPosChange = useCallback(
+        value => setChartConfig(current => ({ ...current, legendPos: value })),
+        [setChartConfig]
+    );
+
+    const showLegendPos = chartType.name !== 'pie_chart';
+
     return (
         <div className="chart-settings">
             {error && <Alert>{error}</Alert>}
@@ -392,6 +408,22 @@ export const ChartSettingsPanel: FC<Props> = memo(props => {
                 value={chartConfig?.labels?.subtitle}
             />
             <SizeInputs height={chartConfig.height} setChartConfig={setChartConfig} width={chartConfig.width} />
+
+            {showLegendPos && (
+                <div className="chart-settings__legend-pos">
+                    <label>Legend Position</label>
+
+                    <div className="chart-settings__legend-pos-values">
+                        <RadioGroupInput
+                            formsy={false}
+                            name="legendPos"
+                            onValueChange={onLegendPosChange}
+                            options={legendOptions}
+                        />
+                    </div>
+                </div>
+            )}
+
             <ChartColorInputs chartConfig={chartConfig} model={model} setChartConfig={setChartConfig} />
         </div>
     );

packages/components/src/internal/components/chart/ChartBuilderModal.test.tsx

@@ -18,6 +18,7 @@ export interface ChartConfig {
     gridLinesVisible: string;
     height?: number;
     labels: ChartLabels;
+    legendPos?: 'bottom' | 'right';
     measures: Record<string, Record<string, any>>; // TODO: we can probably do better than any
     measuresOptions?: Record<string, Record<string, MeasureOption>>; // map from measures to the options for the distinct values of that measure
     pointType: string;

packages/components/src/internal/components/chart/ChartSettingsPanel.tsx

@@ -224,6 +224,19 @@
     margin: 0 0 8px;
 }
 
+.chart-settings__legend-pos-values {
+    display: flex;
+    gap: 8px;
+}
+
+.chart-settings__legend-pos-values .radio-input-wrapper input {
+    margin-right: 4px;
+}
+
+.chart-settings__legend-pos-values .radioinput-label {
+    cursor: pointer;
+}
+
 .chart-builder-modal__chart-preview {
     flex: 3;
     overflow: auto;