diff --git a/packages/graphic-walker/src/components/leafletRenderer/index.tsx b/packages/graphic-walker/src/components/leafletRenderer/index.tsx
index 5029dc6e..b9cb8097 100644
--- a/packages/graphic-walker/src/components/leafletRenderer/index.tsx
+++ b/packages/graphic-walker/src/components/leafletRenderer/index.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef, useMemo } from 'react';
-import type { DraggableFieldState, IChannelScales, IConfigScale, IRow, IVisualConfigNew, IVisualLayout, VegaGlobalConfig } from '../../interfaces';
+import type { DraggableFieldState, IChannelScales, IConfigScaleSet, IRow, IVisualConfigNew, IVisualLayout, VegaGlobalConfig } from '../../interfaces';
 import POIRenderer from './POIRenderer';
 import ChoroplethRenderer from './ChoroplethRenderer';
 
@@ -11,10 +11,7 @@ export interface ILeafletRendererProps {
     visualLayout: IVisualLayout;
     data: IRow[];
     scales?: IChannelScales;
-    scale?: {
-        opacity: IConfigScale;
-        size: IConfigScale;
-    };
+    scale?: IConfigScaleSet;
 }
 
 export interface ILeafletRendererRef {}
@@ -48,17 +45,13 @@ const LeafletRenderer = forwardRef<ILeafletRendererRef, ILeafletRendererProps>(f
     const longitude = useMemo(() => lng ?? lngField, [lng, lngField]);
     const scales = useMemo(() => {
         const cs = channelScaleRaw ?? {};
-        if (scale?.opacity) {
-            cs.opacity = {
-                ...(cs.opacity ?? {}),
-                ...scale.opacity,
-            };
-        }
-        if (scale?.size) {
-            cs.size = {
-                ...(cs.size ?? {}),
-                ...scale.size,
-            };
+        if (scale) {
+            for (const key of Object.keys(scale)) {
+                cs[key] = {
+                    ...(cs[key] ?? {}),
+                    ...scale[key],
+                };
+            }
         }
         return cs;
     }, [channelScaleRaw, scale]);
diff --git a/packages/graphic-walker/src/components/rangeslider.tsx b/packages/graphic-walker/src/components/rangeslider.tsx
index 325a0580..6758fa96 100644
--- a/packages/graphic-walker/src/components/rangeslider.tsx
+++ b/packages/graphic-walker/src/components/rangeslider.tsx
@@ -8,7 +8,7 @@ const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, R
         <SliderPrimitive.Root
             ref={ref}
             minStepsBetweenThumbs={1}
-            className={cn('relative flex w-full touch-none select-none items-center', className)}
+            className={cn('relative flex w-full touch-none select-none items-center data-[disabled]:opacity-50', className)}
             {...props}
         >
             <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
diff --git a/packages/graphic-walker/src/components/ui/dialog.tsx b/packages/graphic-walker/src/components/ui/dialog.tsx
index 02635a0f..50551929 100644
--- a/packages/graphic-walker/src/components/ui/dialog.tsx
+++ b/packages/graphic-walker/src/components/ui/dialog.tsx
@@ -28,29 +28,60 @@ const DialogOverlay = React.forwardRef<React.ElementRef<typeof DialogPrimitive.O
 );
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
-const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>>(
-    ({ className, children, ...props }, ref) => (
-        <DialogPortal container={React.useContext(portalContainerContext)}>
-            <DialogOverlay />
-            <DialogPrimitive.Content
-                ref={ref}
-                className={cn(
-                    'fixed left-[50%] top-[50%] z-50 grid w-[98%] sm:w-[80%] lg:w-[880px] translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg overflow-hidden',
-                    className
-                )}
-                {...props}
-            >
-                <ScrollArea className="overscroll-none max-h-[calc(min(800px,90vh))] w-full relative p-6">{children}</ScrollArea>
-                <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-                    <Cross2Icon className="h-4 w-4" />
-                    <span className="sr-only">Close</span>
-                </DialogPrimitive.Close>
-            </DialogPrimitive.Content>
-        </DialogPortal>
-    )
-);
+const DialogContent = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+        containerClassName?: string;
+    }
+>(({ className, containerClassName, children, ...props }, ref) => (
+    <DialogPortal container={React.useContext(portalContainerContext)}>
+        <DialogOverlay />
+        <DialogPrimitive.Content
+            ref={ref}
+            className={cn(
+                'fixed left-[50%] top-[50%] z-50 grid w-[98%] sm:w-[80%] lg:w-[880px] translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg overflow-hidden',
+                className
+            )}
+            {...props}
+        >
+            <ScrollArea className={cn('overscroll-none max-h-[calc(min(800px,90vh))] w-full relative p-6', containerClassName)}>{children}</ScrollArea>
+            <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+                <Cross2Icon className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+    </DialogPortal>
+));
+
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
+const DialogNormalContent = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+        containerClassName?: string;
+    }
+>(({ className, containerClassName, children, ...props }, ref) => (
+    <DialogPortal container={React.useContext(portalContainerContext)}>
+        <DialogOverlay />
+        <DialogPrimitive.Content
+            ref={ref}
+            className={cn(
+                'fixed left-[50%] top-[50%] z-50 grid w-[98%] sm:w-[80%] lg:w-[880px] translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg overflow-hidden',
+                className
+            )}
+            {...props}
+        >
+            {children}
+            <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+                <Cross2Icon className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+    </DialogPortal>
+));
+
+DialogNormalContent.displayName = DialogPrimitive.Content.displayName;
+
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
     <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
 );
@@ -74,4 +105,16 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => <DialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />);
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
-export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription };
+export {
+    Dialog,
+    DialogPortal,
+    DialogOverlay,
+    DialogTrigger,
+    DialogClose,
+    DialogContent,
+    DialogNormalContent,
+    DialogHeader,
+    DialogFooter,
+    DialogTitle,
+    DialogDescription,
+};
diff --git a/packages/graphic-walker/src/components/ui/number-input.tsx b/packages/graphic-walker/src/components/ui/number-input.tsx
new file mode 100644
index 00000000..0257c3fc
--- /dev/null
+++ b/packages/graphic-walker/src/components/ui/number-input.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+import { cn } from '@/utils';
+import { useRefControledState } from '@/hooks';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const NumberInput = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, value, onChange, ...props }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = useRefControledState(value);
+
+    return (
+        <input
+            type="number"
+            className={cn(
+                'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+                className
+            )}
+            ref={ref}
+            value={uncontrolledValue}
+            onChange={(e) => {
+                setUncontrolledValue(e.target.value);
+            }}
+            onBlur={(e) => {
+                onChange?.(e);
+            }}
+            {...props}
+        />
+    );
+});
+NumberInput.displayName = 'NumberInput';
+
+export { NumberInput };
diff --git a/packages/graphic-walker/src/components/visualConfig/index.tsx b/packages/graphic-walker/src/components/visualConfig/index.tsx
index 51ad1224..7543b6bc 100644
--- a/packages/graphic-walker/src/components/visualConfig/index.tsx
+++ b/packages/graphic-walker/src/components/visualConfig/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useMemo, useCallback } from 'react';
 import { observer } from 'mobx-react-lite';
-import { runInAction } from 'mobx';
+import { runInAction, set } from 'mobx';
 import { useTranslation } from 'react-i18next';
 
 import { useVizStore } from '../../store';
@@ -8,20 +8,63 @@ import { GLOBAL_CONFIG } from '../../config';
 import { IConfigScale, IVisualConfig, IVisualLayout } from '../../interfaces';
 import Toggle from '../toggle';
 import { ColorSchemes, extractRGBA } from './colorScheme';
-import { RangeScale } from './range-scale';
+import { DomainScale, RangeScale } from './range-scale';
 import { ConfigItemContainer, ConfigItemContent, ConfigItemHeader, ConfigItemTitle } from './config-item';
 import { KVTuple } from '../../models/utils';
 import { isNotEmpty } from '../../utils';
 import { timezones } from './timezone';
 import { Input } from '../ui/input';
 import { Button } from '../ui/button';
-import { Dialog, DialogContent, DialogFooter } from '../ui/dialog';
+import { Dialog, DialogContent, DialogFooter, DialogNormalContent } from '../ui/dialog';
 import Combobox from '../dropdownSelect/combobox';
 import { StyledPicker } from '../color-picker';
 import { ErrorBoundary } from 'react-error-boundary';
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger } from '../ui/dropdown-menu';
 
 const DEFAULT_COLOR_SCHEME = ['#5B8FF9', '#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF'];
 
+function useDomainScale() {
+    const [enableMinDomain, setEnableMinDomain] = useState(false);
+    const [enableMaxDomain, setEnableMaxDomain] = useState(false);
+    const [domainMin, setDomainMin] = useState(0);
+    const [domainMax, setDomainMax] = useState(100);
+    const [enableType, setEnableType] = useState(false);
+    const [type, setType] = useState<'linear' | 'log' | 'pow' | 'sqrt' | 'symlog'>('linear');
+    const setValue = useCallback((value: IConfigScale) => {
+        setEnableMaxDomain(isNotEmpty(value.domainMax));
+        setEnableMinDomain(isNotEmpty(value.domainMin));
+        setEnableType(isNotEmpty(value.type));
+        setDomainMin(value.domainMin ?? 0);
+        setDomainMax(value.domainMax ?? 100);
+        setType(value.type ?? 'linear');
+    }, []);
+
+    const value = useMemo(
+        () => ({
+            ...(enableType ? { type } : {}),
+            ...(enableMaxDomain ? { domainMax } : {}),
+            ...(enableMinDomain ? { domainMin } : {}),
+        }),
+        [enableMaxDomain && domainMax, enableMinDomain && domainMin, enableType && type]
+    );
+    return {
+        value,
+        setValue,
+        enableMaxDomain,
+        enableMinDomain,
+        domainMax,
+        domainMin,
+        setEnableMinDomain,
+        setEnableMaxDomain,
+        setDomainMin,
+        setDomainMax,
+        enableType,
+        type,
+        setType,
+        setEnableType,
+    };
+}
+
 function useScale(minRange: number, maxRange: number, defaultMinRange?: number, defaultMaxRange?: number) {
     const [enableMinDomain, setEnableMinDomain] = useState(false);
     const [enableMaxDomain, setEnableMaxDomain] = useState(false);
@@ -30,29 +73,39 @@ function useScale(minRange: number, maxRange: number, defaultMinRange?: number,
     const [domainMax, setDomainMax] = useState(100);
     const [rangeMin, setRangeMin] = useState(defaultMinRange ?? minRange);
     const [rangeMax, setRangeMax] = useState(defaultMaxRange ?? maxRange);
+    const [enableType, setEnableType] = useState(false);
+    const [type, setType] = useState<'linear' | 'log' | 'pow' | 'sqrt' | 'symlog'>('linear');
+
     const setValue = useCallback(
         (value: IConfigScale) => {
             setEnableMaxDomain(isNotEmpty(value.domainMax));
             setEnableMinDomain(isNotEmpty(value.domainMin));
             setEnableRange(isNotEmpty(value.rangeMax) || isNotEmpty(value.rangeMin));
+            setEnableType(isNotEmpty(value.type));
             setDomainMin(value.domainMin ?? 0);
             setDomainMax(value.domainMax ?? 100);
             setRangeMax(value.rangeMax ?? defaultMaxRange ?? maxRange);
             setRangeMin(value.rangeMin ?? defaultMinRange ?? minRange);
+            setType(value.type ?? 'linear');
         },
         [defaultMaxRange, defaultMinRange, maxRange, minRange]
     );
 
     const value = useMemo(
         () => ({
+            ...(enableType ? { type } : {}),
             ...(enableMaxDomain ? { domainMax } : {}),
             ...(enableMinDomain ? { domainMin } : {}),
             ...(enableRange ? { rangeMax, rangeMin } : {}),
         }),
-        [enableMaxDomain && domainMax, enableMinDomain && domainMin, enableRange && rangeMax, enableRange && rangeMin]
+        [enableMaxDomain && domainMax, enableMinDomain && domainMin, enableRange && rangeMax, enableRange && rangeMin, enableType && type]
     );
 
     return {
+        type,
+        setType,
+        enableType,
+        setEnableType,
         value,
         setValue,
         enableMaxDomain,
@@ -103,8 +156,15 @@ const VisualConfigPanel: React.FC = () => {
     const [displayOffset, setDisplayOffset] = useState<number | undefined>(undefined);
     const [displayOffsetEdited, setDisplayOffsetEdited] = useState(false);
 
+    const [enabledScales, setEnabledScales] = useState<string[]>([]);
+    const columnValue = useDomainScale();
+    const rowValue = useDomainScale();
+    const colorValue = useDomainScale();
+    const thetaValue = useDomainScale();
+    const radiusValue = useDomainScale();
     const opacityValue = useScale(0, 1, 0.3, 0.8);
     const sizeValue = useScale(0, 100);
+    const scalesSet = new Set(enabledScales);
 
     useEffect(() => {
         setZeroScale(layout.zeroScale);
@@ -120,6 +180,15 @@ const VisualConfigPanel: React.FC = () => {
             normalizedNumberFormat: layout.format.normalizedNumberFormat,
         });
         setColorPalette(layout.colorPalette ?? '');
+        const enabledScales = Object.entries(layout.scale ?? {})
+            .filter(([_k, scale]) => Object.entries(scale).filter(([_k, v]) => !!v).length > 0)
+            .map(([k]) => k);
+        setEnabledScales(enabledScales.length === 0 ? ['opacity', 'size'] : enabledScales);
+        columnValue.setValue(layout.scale?.column ?? {});
+        rowValue.setValue(layout.scale?.row ?? {});
+        colorValue.setValue(layout.scale?.color ?? {});
+        thetaValue.setValue(layout.scale?.theta ?? {});
+        radiusValue.setValue(layout.scale?.radius ?? {});
         opacityValue.setValue(layout.scale?.opacity ?? {});
         sizeValue.setValue(layout.scale?.size ?? {});
         setGeoMapTileUrl(layout.geoMapTileUrl);
@@ -134,296 +203,358 @@ const VisualConfigPanel: React.FC = () => {
                 vizStore.setShowVisualConfigPanel(false);
             }}
         >
-            <DialogContent>
-                <div
-                    onClick={() => {
-                        setDisplayColorPicker(false);
-                    }}
-                >
-                    <ConfigItemContainer>
-                        <ConfigItemHeader>
-                            <ConfigItemTitle>Colors</ConfigItemTitle>
-                        </ConfigItemHeader>
-                        <ConfigItemContent>
-                            <div className="flex space-x-6">
-                                <div>
-                                    <label className="block text-xs font-medium leading-6">{t('config.primary_color')}</label>
-                                    <ErrorBoundary
-                                        fallback={
-                                            <div className="flex space-x-2">
+            <DialogNormalContent
+                className="p-0"
+                onClick={() => {
+                    setDisplayColorPicker(false);
+                }}
+            >
+                <div className="flex flex-col max-h-[calc(min(800px,90vh))] py-6">
+                    <div className="overflow-y-auto flex-shrink-1 min-h-0 px-6">
+                        <ConfigItemContainer>
+                            <ConfigItemHeader>
+                                <ConfigItemTitle>Colors</ConfigItemTitle>
+                            </ConfigItemHeader>
+                            <ConfigItemContent>
+                                <div className="flex gap-6 flex-col md:flex-row">
+                                    <div>
+                                        <label className="block text-xs font-medium leading-6">{t('config.primary_color')}</label>
+                                        <ErrorBoundary
+                                            fallback={
+                                                <div className="flex space-x-2">
+                                                    <div
+                                                        className="w-4 h-4"
+                                                        style={{
+                                                            backgroundColor: `rgba(${defaultColor.r},${defaultColor.g},${defaultColor.b},${defaultColor.a})`,
+                                                        }}
+                                                    />
+                                                    <Input
+                                                        value={defaultColor.r}
+                                                        type="number"
+                                                        onChange={(e) => {
+                                                            setColorEdited(true);
+                                                            setDefaultColor((x) => ({ ...x, r: Number(e.target.value) }));
+                                                        }}
+                                                    />
+                                                    <Input
+                                                        value={defaultColor.g}
+                                                        type="number"
+                                                        onChange={(e) => {
+                                                            setColorEdited(true);
+                                                            setDefaultColor((x) => ({ ...x, g: Number(e.target.value) }));
+                                                        }}
+                                                    />
+                                                    <Input
+                                                        value={defaultColor.b}
+                                                        type="number"
+                                                        onChange={(e) => {
+                                                            setColorEdited(true);
+                                                            setDefaultColor((x) => ({ ...x, b: Number(e.target.value) }));
+                                                        }}
+                                                    />
+                                                </div>
+                                            }
+                                        >
+                                            <div
+                                                onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    e.preventDefault();
+                                                }}
+                                            >
                                                 <div
-                                                    className="w-4 h-4"
+                                                    className="w-8 h-5 border-2"
                                                     style={{ backgroundColor: `rgba(${defaultColor.r},${defaultColor.g},${defaultColor.b},${defaultColor.a})` }}
-                                                />
-                                                <Input
-                                                    value={defaultColor.r}
-                                                    type="number"
-                                                    onChange={(e) => {
-                                                        setColorEdited(true);
-                                                        setDefaultColor((x) => ({ ...x, r: Number(e.target.value) }));
+                                                    onClick={(e) => {
+                                                        e.stopPropagation();
+                                                        e.preventDefault();
+                                                        setDisplayColorPicker(true);
                                                     }}
-                                                />
-                                                <Input
-                                                    value={defaultColor.g}
-                                                    type="number"
-                                                    onChange={(e) => {
-                                                        setColorEdited(true);
-                                                        setDefaultColor((x) => ({ ...x, g: Number(e.target.value) }));
+                                                ></div>
+                                                <div className="absolute left-32 top-22 z-40 shadow-sm">
+                                                    {displayColorPicker && (
+                                                        <StyledPicker
+                                                            presetColors={DEFAULT_COLOR_SCHEME}
+                                                            color={defaultColor}
+                                                            onChange={(color) => {
+                                                                setColorEdited(true);
+                                                                setDefaultColor({
+                                                                    ...color.rgb,
+                                                                    a: color.rgb.a ?? 1,
+                                                                });
+                                                            }}
+                                                        />
+                                                    )}
+                                                </div>
+                                            </div>
+                                        </ErrorBoundary>
+                                    </div>
+                                    <div>
+                                        <label className="block text-xs font-medium leading-6">{t('config.color_palette')}</label>
+                                        <Combobox
+                                            className="w-48 h-fit"
+                                            popClassName="w-48"
+                                            selectedKey={colorPalette}
+                                            onSelect={setColorPalette}
+                                            placeholder={t('config.default_color_palette')}
+                                            options={ColorSchemes.map((scheme) => ({
+                                                value: scheme.name,
+                                                label: (
+                                                    <>
+                                                        <div key={scheme.name} className="flex flex-col justify-start items-center w-32">
+                                                            <div className="font-light">{scheme.name}</div>
+                                                            <div className="flex w-full">
+                                                                {scheme.value.map((c, index) => {
+                                                                    return <div key={index} className="h-4 flex-1" style={{ backgroundColor: `${c}` }}></div>;
+                                                                })}
+                                                            </div>
+                                                        </div>
+                                                    </>
+                                                ),
+                                            })).concat({
+                                                value: '_none',
+                                                label: <>{t('config.default_color_palette')}</>,
+                                            })}
+                                        />
+                                    </div>
+                                    <div>
+                                        <label className="block text-xs font-medium leading-6">
+                                            {t('config.background')} {t(`config.color`)}
+                                        </label>
+                                        <Input
+                                            type="text"
+                                            value={background ?? ''}
+                                            onChange={(e) => {
+                                                setBackground(e.target.value);
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            </ConfigItemContent>
+                        </ConfigItemContainer>
+                        <ConfigItemContainer>
+                            <ConfigItemHeader>
+                                <div className="flex justify-between items-center">
+                                    <ConfigItemTitle>Scale</ConfigItemTitle>
+                                    <DropdownMenu>
+                                        <DropdownMenuTrigger asChild>
+                                            <Button variant="outline">Select Scale</Button>
+                                        </DropdownMenuTrigger>
+                                        <DropdownMenuContent>
+                                            {['row', 'column', 'color', 'theta', 'radius', 'opacity', 'size'].map((scale) => (
+                                                <DropdownMenuCheckboxItem
+                                                    key={scale}
+                                                    checked={scalesSet.has(scale)}
+                                                    onCheckedChange={(e) => {
+                                                        if (e) {
+                                                            setEnabledScales((s) => [...s, scale]);
+                                                        } else {
+                                                            setEnabledScales((s) => s.filter((x) => x !== scale));
+                                                        }
                                                     }}
-                                                />
+                                                >
+                                                    {t(`config.${scale}`)}
+                                                </DropdownMenuCheckboxItem>
+                                            ))}
+                                        </DropdownMenuContent>
+                                    </DropdownMenu>
+                                </div>
+                            </ConfigItemHeader>
+                            <ConfigItemContent>
+                                {scalesSet.has('column') && (
+                                    <div>
+                                        <label className="block text-xs font-medium leading-6">{t('config.column')}</label>
+                                        <DomainScale {...columnValue} text="column" />
+                                    </div>
+                                )}
+                                {scalesSet.has('row') && (
+                                    <div>
+                                        <label className="block text-xs font-medium leading-6">{t('config.row')}</label>
+                                        <DomainScale {...rowValue} text="row" />
+                                    </div>
+                                )}
+                                {scalesSet.has('color') && (
+                                    <div>
+                                        <label className="block text-xs font-medium leading-6">{t('config.color')}</label>
+                                        <DomainScale {...colorValue} text="color" />
+                                    </div>
+                                )}
+                                {scalesSet.has('theta') && (
+                                    <div>
+                                        <label className="block text-xs font-medium leading-6">{t('config.theta')}</label>
+                                        <DomainScale {...thetaValue} text="theta" />
+                                    </div>
+                                )}
+                                {scalesSet.has('radius') && (
+                                    <div>
+                                        <label className="block text-xs font-medium leading-6">{t('config.radius')}</label>
+                                        <DomainScale {...radiusValue} text="radius" />
+                                    </div>
+                                )}
+                                {scalesSet.has('opacity') && (
+                                    <div>
+                                        <label className="block text-xs font-medium leading-6">{t('config.opacity')}</label>
+                                        <RangeScale {...opacityValue} text="opacity" maxRange={1} minRange={0} />
+                                    </div>
+                                )}
+                                {scalesSet.has('size') && (
+                                    <div>
+                                        <label className="block text-xs font-medium leading-6">{t('config.size')}</label>
+                                        <RangeScale {...sizeValue} text="size" maxRange={100} minRange={0} />
+                                    </div>
+                                )}
+                            </ConfigItemContent>
+                        </ConfigItemContainer>
+                        <ConfigItemContainer>
+                            <ConfigItemHeader>
+                                <ConfigItemTitle>{t('config.format')}</ConfigItemTitle>
+                                <p className="text-xs">
+                                    {t(`config.formatGuidesDocs`)}:{' '}
+                                    <a target="_blank" className="hover:underline text-primary" href="https://github.com/d3/d3-format#locale_format">
+                                        {t(`config.readHere`)}
+                                    </a>
+                                </p>
+                            </ConfigItemHeader>
+                            <ConfigItemContent>
+                                <div className="flex gap-4">
+                                    {formatConfigList.map((fc) => (
+                                        <div className="my-2" key={fc}>
+                                            <label className="block text-xs font-medium leading-6">{t(`config.${fc}`)}</label>
+                                            <div className="mt-1">
                                                 <Input
-                                                    value={defaultColor.b}
-                                                    type="number"
+                                                    type="text"
+                                                    value={format[fc] ?? ''}
                                                     onChange={(e) => {
-                                                        setColorEdited(true);
-                                                        setDefaultColor((x) => ({ ...x, b: Number(e.target.value) }));
+                                                        setFormat((f) => ({
+                                                            ...f,
+                                                            [fc]: e.target.value,
+                                                        }));
                                                     }}
                                                 />
                                             </div>
-                                        }
-                                    >
-                                        <div
-                                            onClick={(e) => {
-                                                e.stopPropagation();
-                                                e.preventDefault();
-                                            }}
-                                        >
-                                            <div
-                                                className="w-8 h-5 border-2"
-                                                style={{ backgroundColor: `rgba(${defaultColor.r},${defaultColor.g},${defaultColor.b},${defaultColor.a})` }}
-                                                onClick={(e) => {
-                                                    e.stopPropagation();
-                                                    e.preventDefault();
-                                                    setDisplayColorPicker(true);
-                                                }}
-                                            ></div>
-                                            <div className="absolute left-32 top-22 z-40 shadow-sm">
-                                                {displayColorPicker && (
-                                                    <StyledPicker
-                                                        presetColors={DEFAULT_COLOR_SCHEME}
-                                                        color={defaultColor}
-                                                        onChange={(color) => {
-                                                            setColorEdited(true);
-                                                            setDefaultColor({
-                                                                ...color.rgb,
-                                                                a: color.rgb.a ?? 1,
-                                                            });
-                                                        }}
-                                                    />
-                                                )}
-                                            </div>
                                         </div>
-                                    </ErrorBoundary>
-                                </div>
-                                <div>
-                                    <label className="block text-xs font-medium leading-6">{t('config.color_palette')}</label>
-                                    <Combobox
-                                        className="w-48 h-fit"
-                                        popClassName="w-48"
-                                        selectedKey={colorPalette}
-                                        onSelect={setColorPalette}
-                                        placeholder={t('config.default_color_palette')}
-                                        options={ColorSchemes.map((scheme) => ({
-                                            value: scheme.name,
-                                            label: (
-                                                <>
-                                                    <div key={scheme.name} className="flex flex-col justify-start items-center w-32">
-                                                        <div className="font-light">{scheme.name}</div>
-                                                        <div className="flex w-full">
-                                                            {scheme.value.map((c, index) => {
-                                                                return <div key={index} className="h-4 flex-1" style={{ backgroundColor: `${c}` }}></div>;
-                                                            })}
-                                                        </div>
-                                                    </div>
-                                                </>
-                                            ),
-                                        })).concat({
-                                            value: '_none',
-                                            label: <>{t('config.default_color_palette')}</>,
-                                        })}
-                                    />
+                                    ))}
                                 </div>
-                                <div>
-                                    <label className="block text-xs font-medium leading-6">
-                                        {t('config.background')} {t(`config.color`)}
-                                    </label>
-                                    <Input
-                                        type="text"
-                                        value={background ?? ''}
-                                        onChange={(e) => {
-                                            setBackground(e.target.value);
-                                        }}
-                                    />
+                            </ConfigItemContent>
+                        </ConfigItemContainer>
+                        <ConfigItemContainer>
+                            <ConfigItemHeader>
+                                <ConfigItemTitle>{t('config.independence')}</ConfigItemTitle>
+                            </ConfigItemHeader>
+                            <ConfigItemContent>
+                                <div className="flex gap-x-6 gap-y-2 flex-wrap">
+                                    {GLOBAL_CONFIG.POSITION_CHANNEL_CONFIG_LIST.map((pc) => (
+                                        <Toggle
+                                            label={t(`config.${pc}`)}
+                                            key={pc}
+                                            enabled={resolve[pc] ?? false}
+                                            onChange={(e) => {
+                                                setResolve((r) => ({
+                                                    ...r,
+                                                    [pc]: e,
+                                                }));
+                                            }}
+                                        />
+                                    ))}
+                                    {GLOBAL_CONFIG.NON_POSITION_CHANNEL_CONFIG_LIST.map((npc) => (
+                                        <Toggle
+                                            label={t(`constant.draggable_key.${npc}`)}
+                                            key={npc}
+                                            enabled={resolve[npc] ?? false}
+                                            onChange={(e) => {
+                                                setResolve((r) => ({
+                                                    ...r,
+                                                    [npc]: e,
+                                                }));
+                                            }}
+                                        />
+                                    ))}
                                 </div>
-                            </div>
-                        </ConfigItemContent>
-                    </ConfigItemContainer>
-                    <ConfigItemContainer>
-                        <ConfigItemHeader>
-                            <ConfigItemTitle>Scale</ConfigItemTitle>
-                        </ConfigItemHeader>
-                        <ConfigItemContent>
-                            <div>
-                                <label className="block text-xs font-medium leading-6">{t('config.opacity')}</label>
-                                <RangeScale {...opacityValue} text="opacity" maxRange={1} minRange={0} />
-                            </div>
-                            <div>
-                                <label className="block text-xs font-medium leading-6">{t('config.size')}</label>
-                                <RangeScale {...sizeValue} text="size" maxRange={100} minRange={0} />
-                            </div>
-                        </ConfigItemContent>
-                    </ConfigItemContainer>
-                    <ConfigItemContainer>
-                        <ConfigItemHeader>
-                            <ConfigItemTitle>{t('config.format')}</ConfigItemTitle>
-                            <p className="text-xs">
-                                {t(`config.formatGuidesDocs`)}:{' '}
-                                <a target="_blank" className="hover:underline text-primary" href="https://github.com/d3/d3-format#locale_format">
-                                    {t(`config.readHere`)}
-                                </a>
-                            </p>
-                        </ConfigItemHeader>
-                        <ConfigItemContent>
-                            <div className="flex gap-4">
-                                {formatConfigList.map((fc) => (
-                                    <div className="my-2" key={fc}>
-                                        <label className="block text-xs font-medium leading-6">{t(`config.${fc}`)}</label>
-                                        <div className="mt-1">
+                            </ConfigItemContent>
+                        </ConfigItemContainer>
+                        <ConfigItemContainer>
+                            <ConfigItemHeader>
+                                <ConfigItemTitle>{t('config.misc')}</ConfigItemTitle>
+                            </ConfigItemHeader>
+                            <ConfigItemContent>
+                                <div className="flex flex-col space-y-2">
+                                    <div className="flex flex-col space-y-2">
+                                        <Toggle
+                                            label={t(`config.customTile`)}
+                                            enabled={isNotEmpty(geoMapTileUrl)}
+                                            onChange={(e) => {
+                                                setGeoMapTileUrl(e ? 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' : undefined);
+                                            }}
+                                        />
+                                        {isNotEmpty(geoMapTileUrl) && (
                                             <Input
                                                 type="text"
-                                                value={format[fc] ?? ''}
+                                                value={geoMapTileUrl}
                                                 onChange={(e) => {
-                                                    setFormat((f) => ({
-                                                        ...f,
-                                                        [fc]: e.target.value,
-                                                    }));
+                                                    setGeoMapTileUrl(e.target.value);
                                                 }}
                                             />
-                                        </div>
+                                        )}
                                     </div>
-                                ))}
-                            </div>
-                        </ConfigItemContent>
-                    </ConfigItemContainer>
-                    <ConfigItemContainer>
-                        <ConfigItemHeader>
-                            <ConfigItemTitle>{t('config.independence')}</ConfigItemTitle>
-                        </ConfigItemHeader>
-                        <ConfigItemContent>
-                            <div className="flex gap-x-6 gap-y-2 flex-wrap">
-                                {GLOBAL_CONFIG.POSITION_CHANNEL_CONFIG_LIST.map((pc) => (
-                                    <Toggle
-                                        label={t(`config.${pc}`)}
-                                        key={pc}
-                                        enabled={resolve[pc] ?? false}
-                                        onChange={(e) => {
-                                            setResolve((r) => ({
-                                                ...r,
-                                                [pc]: e,
-                                            }));
-                                        }}
-                                    />
-                                ))}
-                                {GLOBAL_CONFIG.NON_POSITION_CHANNEL_CONFIG_LIST.map((npc) => (
-                                    <Toggle
-                                        label={t(`constant.draggable_key.${npc}`)}
-                                        key={npc}
-                                        enabled={resolve[npc] ?? false}
-                                        onChange={(e) => {
-                                            setResolve((r) => ({
-                                                ...r,
-                                                [npc]: e,
-                                            }));
-                                        }}
-                                    />
-                                ))}
-                            </div>
-                        </ConfigItemContent>
-                    </ConfigItemContainer>
-                    <ConfigItemContainer>
-                        <ConfigItemHeader>
-                            <ConfigItemTitle>{t('config.misc')}</ConfigItemTitle>
-                        </ConfigItemHeader>
-                        <ConfigItemContent>
-                            <div className="flex flex-col space-y-2">
-                                <div className="flex flex-col space-y-2">
-                                    <Toggle
-                                        label={t(`config.customTile`)}
-                                        enabled={isNotEmpty(geoMapTileUrl)}
-                                        onChange={(e) => {
-                                            setGeoMapTileUrl(e ? 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' : undefined);
-                                        }}
-                                    />
-                                    {isNotEmpty(geoMapTileUrl) && (
-                                        <Input
-                                            type="text"
-                                            value={geoMapTileUrl}
-                                            onChange={(e) => {
-                                                setGeoMapTileUrl(e.target.value);
+                                    <div className="flex gap-x-6 gap-y-2 flex-wrap">
+                                        <Toggle
+                                            label={t(`config.zeroScale`)}
+                                            enabled={zeroScale}
+                                            onChange={(en) => {
+                                                setZeroScale(en);
                                             }}
                                         />
-                                    )}
-                                </div>
-                                <div className="flex gap-x-6 gap-y-2 flex-wrap">
-                                    <Toggle
-                                        label={t(`config.zeroScale`)}
-                                        enabled={zeroScale}
-                                        onChange={(en) => {
-                                            setZeroScale(en);
-                                        }}
-                                    />
-                                    <Toggle
-                                        label={t(`config.svg`)}
-                                        enabled={svg}
-                                        onChange={(en) => {
-                                            setSvg(en);
-                                        }}
-                                    />
-                                    <Toggle
-                                        label="include unmatched choropleth in scale"
-                                        enabled={scaleIncludeUnmatchedChoropleth}
-                                        onChange={(en) => {
-                                            setScaleIncludeUnmatchedChoropleth(en);
-                                        }}
-                                    />
-                                    <Toggle
-                                        label="include shapes without data"
-                                        enabled={showAllGeoshapeInChoropleth}
-                                        onChange={(en) => {
-                                            setShowAllGeoshapeInChoropleth(en);
-                                        }}
-                                    />
-                                </div>
-                                <div className="flex flex-col space-y-2">
-                                    <Toggle
-                                        label={t(`config.customOffset`)}
-                                        enabled={isNotEmpty(displayOffset)}
-                                        onChange={(e) => {
-                                            setDisplayOffsetEdited(true);
-                                            setDisplayOffset(e ? new Date().getTimezoneOffset() : undefined);
-                                        }}
-                                    />
-                                    {isNotEmpty(displayOffset) && (
-                                        <Combobox
-                                            className="w-full"
-                                            popClassName="w-[400px]"
-                                            selectedKey={`${displayOffset}`}
-                                            onSelect={(e) => {
+                                        <Toggle
+                                            label={t(`config.svg`)}
+                                            enabled={svg}
+                                            onChange={(en) => {
+                                                setSvg(en);
+                                            }}
+                                        />
+                                        <Toggle
+                                            label="include unmatched choropleth in scale"
+                                            enabled={scaleIncludeUnmatchedChoropleth}
+                                            onChange={(en) => {
+                                                setScaleIncludeUnmatchedChoropleth(en);
+                                            }}
+                                        />
+                                        <Toggle
+                                            label="include shapes without data"
+                                            enabled={showAllGeoshapeInChoropleth}
+                                            onChange={(en) => {
+                                                setShowAllGeoshapeInChoropleth(en);
+                                            }}
+                                        />
+                                    </div>
+                                    <div className="flex flex-col space-y-2">
+                                        <Toggle
+                                            label={t(`config.customOffset`)}
+                                            enabled={isNotEmpty(displayOffset)}
+                                            onChange={(e) => {
                                                 setDisplayOffsetEdited(true);
-                                                setDisplayOffset(parseInt(e));
+                                                setDisplayOffset(e ? new Date().getTimezoneOffset() : undefined);
                                             }}
-                                            options={timezones.map((tz) => ({
-                                                value: `${tz.value}`,
-                                                label: <span title={tz.name}>{tz.name}</span>,
-                                            }))}
                                         />
-                                    )}
+                                        {isNotEmpty(displayOffset) && (
+                                            <Combobox
+                                                className="w-full"
+                                                popClassName="w-[400px]"
+                                                selectedKey={`${displayOffset}`}
+                                                onSelect={(e) => {
+                                                    setDisplayOffsetEdited(true);
+                                                    setDisplayOffset(parseInt(e));
+                                                }}
+                                                options={timezones.map((tz) => ({
+                                                    value: `${tz.value}`,
+                                                    label: <span title={tz.name}>{tz.name}</span>,
+                                                }))}
+                                            />
+                                        )}
+                                    </div>
                                 </div>
-                            </div>
-                        </ConfigItemContent>
-                    </ConfigItemContainer>
-
-                    <DialogFooter className="gap-2">
+                            </ConfigItemContent>
+                        </ConfigItemContainer>
+                    </div>
+                    <DialogFooter className="gap-2 mt-4 px-6">
                         <Button
                             variant="outline"
                             onClick={() => {
@@ -444,7 +575,18 @@ const VisualConfigPanel: React.FC = () => {
                                         ['resolve', resolve],
                                         ['colorPalette', colorPalette],
                                         ['useSvg', svg],
-                                        ['scale', { opacity: opacityValue.value, size: sizeValue.value }],
+                                        [
+                                            'scale',
+                                            {
+                                                opacity: opacityValue.value,
+                                                size: sizeValue.value,
+                                                column: columnValue.value,
+                                                row: rowValue.value,
+                                                color: colorValue.value,
+                                                theta: thetaValue.value,
+                                                radius: radiusValue.value,
+                                            },
+                                        ],
                                         ...(colorEdited
                                             ? [
                                                   [
@@ -464,7 +606,7 @@ const VisualConfigPanel: React.FC = () => {
                         </Button>
                     </DialogFooter>
                 </div>
-            </DialogContent>
+            </DialogNormalContent>
         </Dialog>
     );
 };
diff --git a/packages/graphic-walker/src/components/visualConfig/range-scale.tsx b/packages/graphic-walker/src/components/visualConfig/range-scale.tsx
index 420aefec..3fd2ab42 100644
--- a/packages/graphic-walker/src/components/visualConfig/range-scale.tsx
+++ b/packages/graphic-walker/src/components/visualConfig/range-scale.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Slider } from '../../components/rangeslider';
 import { Checkbox } from '../ui/checkbox';
-import { Input } from '../ui/input';
 import { Label } from '../ui/label';
+import { NumberInput } from '../ui/number-input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
 
 export function RangeScale(props: {
     text: string;
@@ -12,28 +13,52 @@ export function RangeScale(props: {
     enableMaxDomain: boolean;
     enableMinDomain: boolean;
     enableRange: boolean;
+    enableType: boolean;
     rangeMax: number;
     rangeMin: number;
     domainMax: number;
     domainMin: number;
+    type: 'linear' | 'log' | 'pow' | 'sqrt' | 'symlog';
     setEnableMinDomain: (v: boolean) => void;
     setEnableMaxDomain: (v: boolean) => void;
     setEnableRange: (v: boolean) => void;
+    setEnableType: (v: boolean) => void;
     setDomainMin: (v: number) => void;
     setDomainMax: (v: number) => void;
     setRangeMin: (v: number) => void;
     setRangeMax: (v: number) => void;
+    setType: (v: 'linear' | 'log' | 'pow' | 'sqrt' | 'symlog') => void;
 }) {
     const { t } = useTranslation();
 
     return (
-        <div className="flex space-x-6 my-2">
+        <div className="flex md:flex-row flex-col gap-6 my-2">
+            <div className="flex flex-col space-y-2 items-start">
+                <div className="flex items-center space-x-2">
+                    <Checkbox id={`type_${props.text}`} checked={props.enableType} onCheckedChange={props.setEnableType} />
+                    <Label htmlFor={`type_${props.text}`}>{t('config.type')}</Label>
+                </div>
+                <Select value={props.type} disabled={!props.enableType} onValueChange={props.setType}>
+                    <SelectTrigger>
+                        <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="linear">Linear</SelectItem>
+                        <SelectItem value="log">Log</SelectItem>
+                        <SelectItem value="pow">Pow</SelectItem>
+                        <SelectItem value="sqrt">Sqrt</SelectItem>
+                        <SelectItem value="symlog">Symlog</SelectItem>
+                    </SelectContent>
+                </Select>
+            </div>
+
             <div className="flex flex-col space-y-2 items-start">
                 <div className="flex items-center space-x-2">
                     <Checkbox id={`min_domain_${props.text}`} checked={props.enableMinDomain} onCheckedChange={props.setEnableMinDomain} />
                     <Label htmlFor={`min_domain_${props.text}`}>{t('config.min_domain')}</Label>
                 </div>
-                <Input
+                <NumberInput
+                    className="w-32"
                     value={props.domainMin}
                     onChange={(e) => {
                         const v = Number(e.target.value);
@@ -50,7 +75,8 @@ export function RangeScale(props: {
                     <Checkbox id={`max_domain_${props.text}`} checked={props.enableMaxDomain} onCheckedChange={props.setEnableMaxDomain} />
                     <Label htmlFor={`max_domain_${props.text}`}>{t('config.max_domain')}</Label>
                 </div>
-                <Input
+                <NumberInput
+                    className="w-32"
                     value={props.domainMax}
                     onChange={(e) => {
                         const v = Number(e.target.value);
@@ -69,6 +95,7 @@ export function RangeScale(props: {
                 </div>
                 <div className="flex w-full flex-col space-y-2 pt-2">
                     <Slider
+                        disabled={!props.enableRange}
                         max={props.maxRange}
                         min={props.minRange}
                         value={[props.rangeMin, props.rangeMax]}
@@ -87,3 +114,81 @@ export function RangeScale(props: {
         </div>
     );
 }
+
+export function DomainScale(props: {
+    text: string;
+    enableMaxDomain: boolean;
+    enableMinDomain: boolean;
+    enableType: boolean;
+    domainMax: number;
+    domainMin: number;
+    type: 'linear' | 'log' | 'pow' | 'sqrt' | 'symlog';
+    setEnableMinDomain: (v: boolean) => void;
+    setEnableMaxDomain: (v: boolean) => void;
+    setEnableType: (v: boolean) => void;
+    setDomainMin: (v: number) => void;
+    setDomainMax: (v: number) => void;
+    setType: (v: 'linear' | 'log' | 'pow' | 'sqrt' | 'symlog') => void;
+}) {
+    const { t } = useTranslation();
+
+    return (
+        <div className="flex md:flex-row flex-col gap-6 my-2">
+            <div className="flex flex-col space-y-2 items-start">
+                <div className="flex items-center space-x-2">
+                    <Checkbox id={`type_${props.text}`} checked={props.enableType} onCheckedChange={props.setEnableType} />
+                    <Label htmlFor={`type_${props.text}`}>{t('config.type')}</Label>
+                </div>
+                <Select value={props.type} disabled={!props.enableType} onValueChange={props.setType}>
+                    <SelectTrigger>
+                        <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="linear">Linear</SelectItem>
+                        <SelectItem value="log">Log</SelectItem>
+                        <SelectItem value="pow">Pow</SelectItem>
+                        <SelectItem value="sqrt">Sqrt</SelectItem>
+                        <SelectItem value="symlog">Symlog</SelectItem>
+                    </SelectContent>
+                </Select>
+            </div>
+
+            <div className="flex flex-col space-y-2 items-start">
+                <div className="flex items-center space-x-2">
+                    <Checkbox id={`min_domain_${props.text}`} checked={props.enableMinDomain} onCheckedChange={props.setEnableMinDomain} />
+                    <Label htmlFor={`min_domain_${props.text}`}>{t('config.min_domain')}</Label>
+                </div>
+                <NumberInput
+                    className="w-32"
+                    value={props.domainMin}
+                    onChange={(e) => {
+                        const v = Number(e.target.value);
+                        if (!isNaN(v)) {
+                            props.setDomainMin(v);
+                        }
+                    }}
+                    type="number"
+                    disabled={!props.enableMinDomain}
+                />
+            </div>
+            <div className="flex flex-col space-y-2 items-start">
+                <div className="flex items-center space-x-2">
+                    <Checkbox id={`max_domain_${props.text}`} checked={props.enableMaxDomain} onCheckedChange={props.setEnableMaxDomain} />
+                    <Label htmlFor={`max_domain_${props.text}`}>{t('config.max_domain')}</Label>
+                </div>
+                <NumberInput
+                    className="w-32"
+                    value={props.domainMax}
+                    onChange={(e) => {
+                        const v = Number(e.target.value);
+                        if (!isNaN(v)) {
+                            props.setDomainMax(v);
+                        }
+                    }}
+                    type="number"
+                    disabled={!props.enableMaxDomain}
+                />
+            </div>
+        </div>
+    );
+}
diff --git a/packages/graphic-walker/src/interfaces.ts b/packages/graphic-walker/src/interfaces.ts
index 1d28d77a..5f49d1e2 100644
--- a/packages/graphic-walker/src/interfaces.ts
+++ b/packages/graphic-walker/src/interfaces.ts
@@ -350,6 +350,7 @@ export type IConfigScale = {
     rangeMin?: number;
     domainMin?: number;
     domainMax?: number;
+    type?: 'linear' | 'log' | 'pow' | 'sqrt' | 'symlog';
 };
 
 export interface IVisualConfig {
@@ -374,10 +375,7 @@ export interface IVisualConfig {
     };
     primaryColor?: string;
     colorPalette?: string;
-    scale?: {
-        opacity: IConfigScale;
-        size: IConfigScale;
-    };
+    scale?: IConfigScaleSet;
     resolve: {
         x?: boolean;
         y?: boolean;
@@ -398,6 +396,16 @@ export interface IVisualConfig {
     folds?: string[];
 }
 
+export interface IConfigScaleSet {
+    row?: IConfigScale;
+    column?: IConfigScale;
+    color?: IConfigScale;
+    opacity?: IConfigScale;
+    size?: IConfigScale;
+    radius?: IConfigScale;
+    theta?: IConfigScale;
+}
+
 export interface IVisualLayout {
     showTableSummary: boolean;
     format: {
@@ -407,10 +415,7 @@ export interface IVisualLayout {
     };
     primaryColor?: string;
     colorPalette?: string;
-    scale?: {
-        opacity: IConfigScale;
-        size: IConfigScale;
-    };
+    scale?: IConfigScaleSet;
     resolve: {
         x?: boolean;
         y?: boolean;
@@ -853,6 +858,8 @@ export type IFieldInfos = {
 };
 
 export interface IChannelScales {
+    row?: IScale | ((info: IFieldInfos) => IScale);
+    column?: IScale | ((info: IFieldInfos) => IScale);
     color?: IColorScale | ((info: IFieldInfos) => IColorScale);
     opacity?: IScale | ((info: IFieldInfos) => IScale);
     size?: IScale | ((info: IFieldInfos) => IScale);
diff --git a/packages/graphic-walker/src/locales/en-US.json b/packages/graphic-walker/src/locales/en-US.json
index cd47d91e..6efaeaf2 100644
--- a/packages/graphic-walker/src/locales/en-US.json
+++ b/packages/graphic-walker/src/locales/en-US.json
@@ -3,9 +3,14 @@
         "scheme": "Scheme",
         "primary_color": "Primary Color",
         "color_palette": "Color Palette",
+        "row": "Row",
+        "column": "Column",
+        "radius": "Radius",
+        "theta": "Theta",
         "opacity": "Opacity",
         "default_color_palette": "Default",
         "size": "Size",
+        "type": "Scale Type",
         "min_domain": "Domain Min",
         "max_domain": "Domain Max",
         "range": "Range",
diff --git a/packages/graphic-walker/src/store/visualSpecStore.ts b/packages/graphic-walker/src/store/visualSpecStore.ts
index d1e1be7f..52e6368b 100644
--- a/packages/graphic-walker/src/store/visualSpecStore.ts
+++ b/packages/graphic-walker/src/store/visualSpecStore.ts
@@ -302,7 +302,7 @@ export class VizSpecStore {
     get paintInfo() {
         const existPaintField = this.currentEncodings.dimensions.find((x) => x.fid === PAINT_FIELD_ID);
         if (existPaintField) {
-            const param: IPaintMap = existPaintField.expression?.params.find((x) => x.type === 'map')?.value;
+            const param = existPaintField.expression?.params.find((x) => x.type === 'map')?.value;
             if (param) {
                 return {
                     type: 'exist',
@@ -310,7 +310,7 @@ export class VizSpecStore {
                     new: this.paintFields,
                 } as const;
             }
-            const paramV2: IPaintMapV2 = existPaintField.expression?.params.find((x) => x.type === 'newmap')?.value;
+            const paramV2 = existPaintField.expression?.params.find((x) => x.type === 'newmap')?.value;
             if (paramV2) {
                 return {
                     type: 'exist',
diff --git a/packages/graphic-walker/src/vis/react-vega.tsx b/packages/graphic-walker/src/vis/react-vega.tsx
index 6a1a1adf..4c772d78 100644
--- a/packages/graphic-walker/src/vis/react-vega.tsx
+++ b/packages/graphic-walker/src/vis/react-vega.tsx
@@ -5,7 +5,7 @@ import * as op from 'rxjs/operators';
 import { expressionFunction, type ScenegraphEvent } from 'vega';
 import styled from 'styled-components';
 import { useVegaExportApi } from '../utils/vegaApiExport';
-import { IViewField, IRow, IStackMode, VegaGlobalConfig, IVegaChartRef, IChannelScales, IDarkMode, IConfigScale } from '../interfaces';
+import { IViewField, IRow, IStackMode, VegaGlobalConfig, IVegaChartRef, IChannelScales, IDarkMode, IConfigScaleSet } from '../interfaces';
 import { getVegaTimeFormatRules } from './temporalFormat';
 import canvasSize from 'canvas-size';
 import { Errors, useReporter } from '../utils/reportError';
@@ -91,10 +91,7 @@ interface ReactVegaProps {
     useSvg?: boolean;
     dark?: IDarkMode;
     scales?: IChannelScales;
-    scale?: {
-        opacity: IConfigScale;
-        size: IConfigScale;
-    };
+    scale?: IConfigScaleSet;
     onReportSpec?: (spec: string) => void;
     displayOffset?: number;
 }
@@ -159,17 +156,13 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
     const mediaTheme = useContext(themeContext);
     const scales = useMemo(() => {
         const cs = channelScaleRaw ?? {};
-        if (scale?.opacity) {
-            cs.opacity = {
-                ...(cs.opacity ?? {}),
-                ...scale.opacity,
-            };
-        }
-        if (scale?.size) {
-            cs.size = {
-                ...(cs.size ?? {}),
-                ...scale.size,
-            };
+        if (scale) {
+            for (const key of Object.keys(scale)) {
+                cs[key] = {
+                    ...(cs[key] ?? {}),
+                    ...scale[key],
+                };
+            }
         }
         return cs;
     }, [channelScaleRaw, scale]);
@@ -382,7 +375,10 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
             for (let i = 0; i < leastOne(rowRepeatFields.length); i++) {
                 for (let j = 0; j < leastOne(colRepeatFields.length); j++, index++) {
                     const sourceId = index;
-                    const node = i * leastOne(colRepeatFields.length) + j < viewPlaceholders.length ? viewPlaceholders[i * leastOne(colRepeatFields.length) + j].current : null;
+                    const node =
+                        i * leastOne(colRepeatFields.length) + j < viewPlaceholders.length
+                            ? viewPlaceholders[i * leastOne(colRepeatFields.length) + j].current
+                            : null;
                     const ans = specs[index];
                     if (node) {
                         const id = index;
diff --git a/packages/graphic-walker/src/vis/spec/view.ts b/packages/graphic-walker/src/vis/spec/view.ts
index ac3f6d6d..ccf85c76 100644
--- a/packages/graphic-walker/src/vis/spec/view.ts
+++ b/packages/graphic-walker/src/vis/spec/view.ts
@@ -162,21 +162,24 @@ export function resolveScale<T extends Object>(
 
 export function resolveScales(scale: IChannelScales, view: any, data: readonly IRow[], theme: 'dark' | 'light') {
     const newEncoding = { ...view.encoding };
-    function addScale(c: string) {
-        if (scale[c] && newEncoding[c]) {
+    function addScale(c: string, encodingName?: string) {
+        encodingName = encodingName ?? c;
+        if (scale[c] && newEncoding[encodingName]) {
             if (typeof scale[c] === 'function') {
-                const field = newEncoding[c].field;
+                const field = newEncoding[encodingName].field;
                 const values = data.map((x) => x[field]);
-                newEncoding[c].scale = scale[c]({
-                    semanticType: newEncoding[c].type,
+                newEncoding[encodingName].scale = scale[c]({
+                    semanticType: newEncoding[encodingName].type,
                     theme,
                     values,
                 });
             } else {
-                newEncoding[c].scale = scale[c];
+                newEncoding[encodingName].scale = scale[c];
             }
         }
     }
+    addScale('row', 'y');
+    addScale('column', 'x');
     addScale('color');
     addScale('opacity');
     addScale('size');