diff --git a/superset-frontend/src/components/DvtProfileMenu/dvtProfileMenuData.ts b/superset-frontend/src/components/DvtProfileMenu/dvtProfileMenuData.ts
index 5b785052eb86b..bbd95c189eb42 100644
--- a/superset-frontend/src/components/DvtProfileMenu/dvtProfileMenuData.ts
+++ b/superset-frontend/src/components/DvtProfileMenu/dvtProfileMenuData.ts
@@ -14,7 +14,7 @@ const DvtProfileMenuData: DvtProfileMenuDataProps[] = [
   {
     title: t('Security'),
     menu: [
-      { label: t('List Users'), link: '/users/list/' },
+      { label: t('List Users'), link: '/user/list/' },
       { label: t('List Roles'), link: '/role/list/' },
       {
         label: t('Row Level Security'),
diff --git a/superset-frontend/src/components/DvtRange/dvt-range.module.tsx b/superset-frontend/src/components/DvtRange/dvt-range.module.tsx
index 6155581ac1b49..d18121fe9d481 100644
--- a/superset-frontend/src/components/DvtRange/dvt-range.module.tsx
+++ b/superset-frontend/src/components/DvtRange/dvt-range.module.tsx
@@ -28,6 +28,7 @@ const StyledRange = styled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
+  padding: 0 10px;
 `;
 
 const StyledPopper = styled.div`
@@ -88,7 +89,7 @@ const StyledRangePopover = styled.div`
 
 const StyledRangeLabel = styled.label`
   font-weight: 600;
-  color: ${({ theme }) => theme.colors.dvt.text.label};
+  color: ${({ theme }) => theme.colors.grayscale.dark2};
 `;
 
 export {
diff --git a/superset-frontend/src/components/DvtSidebar/dvtSidebarData.ts b/superset-frontend/src/components/DvtSidebar/dvtSidebarData.ts
index 24193cee82d4d..e7b0c78f78dd6 100644
--- a/superset-frontend/src/components/DvtSidebar/dvtSidebarData.ts
+++ b/superset-frontend/src/components/DvtSidebar/dvtSidebarData.ts
@@ -353,6 +353,13 @@ const DvtSidebarData: SidebarDataProps[] = [
         label: t('LABEL COLUMN'),
         active: 'linear_regression',
       },
+      {
+        placeholder: t('Training Data Ratio'),
+        name: 'training_data_ratio',
+        label: t('TRAINING DATA RATIO'),
+        active: 'linear_regression',
+        status: 'range',
+      },
       {
         placeholder: t('EPSİLON'),
         name: 'epsilon',
diff --git a/superset-frontend/src/components/DvtSidebar/index.tsx b/superset-frontend/src/components/DvtSidebar/index.tsx
index 3036b599f9797..0d6f0f10db6f7 100644
--- a/superset-frontend/src/components/DvtSidebar/index.tsx
+++ b/superset-frontend/src/components/DvtSidebar/index.tsx
@@ -34,6 +34,7 @@ import DvtInputSelect from '../DvtInputSelect';
 import DvtDargCardList from '../DvtDragCardList';
 import DvtCollapse from '../DvtCollapse';
 import Icon from '../Icons/Icon';
+import DvtRange from '../DvtRange';
 import {
   StyledDvtSidebar,
   StyledDvtSidebarHeader,
@@ -474,6 +475,7 @@ const DvtSidebar: React.FC<DvtSidebarProps> = ({ pathName, minWidth }) => {
           'featureColumn',
           'groupColumn',
           'labelColumn',
+          'training_data_ratio',
         ],
       },
       {
@@ -891,6 +893,30 @@ const DvtSidebar: React.FC<DvtSidebarProps> = ({ pathName, minWidth }) => {
                         typeDesign="chartsForm"
                       />
                     )}
+                    {data.status === 'range' &&
+                      data.active ===
+                        newTrainedTableSelector.algorithm.value && (
+                        <DvtRange
+                          min={0}
+                          max={1}
+                          step={0.01}
+                          value={
+                            pathTitles(pathName) === 'newTrainedTable'
+                              ? newTrainedTableSelector[data.name]
+                              : undefined
+                          }
+                          setValue={value => {
+                            updateProperty(
+                              sidebarDataFindPathname.key,
+                              data.name,
+                              value,
+                            );
+                          }}
+                          label={data.label}
+                          important
+                          popoverDirection="top"
+                        />
+                      )}
                     {data.status === 'datepicker' && (
                       <DvtDatePicker
                         isOpen
diff --git a/superset-frontend/src/pages/DvtChart/dvtChartDataCustomize.ts b/superset-frontend/src/pages/DvtChart/dvtChartDataCustomize.ts
index 2d7f87080cdda..8d6853075a943 100644
--- a/superset-frontend/src/pages/DvtChart/dvtChartDataCustomize.ts
+++ b/superset-frontend/src/pages/DvtChart/dvtChartDataCustomize.ts
@@ -6,6 +6,12 @@ interface OptionsData {
   value: any;
 }
 
+interface OptionsDataColor {
+  id: string;
+  label: any;
+  colors: string[];
+}
+
 interface ActivesProps {
   [key: string]: string[];
 }
@@ -28,6 +34,7 @@ interface FormsProps {
     | 'input'
     | 'select'
     | 'multiple-select'
+    | 'color-select'
     | 'input-drop'
     | 'checkbox'
     | 'annotation-layer'
@@ -46,6 +53,7 @@ interface FormsProps {
   simpleType?: 'normal' | 'temporal';
   multiple?: boolean;
   options?: OptionsData[];
+  optionsColor?: OptionsDataColor[];
   number?: boolean;
   values?: ValuesProps[];
   rangeConfig?: RangeConfigProps;
@@ -66,293 +74,476 @@ interface DvtChartCustomizeProps {
   collapses: CollapsesProps[];
 }
 
-const formDimensions: FormsProps = {
-  label: t('DIMENSIONS'),
-  name: 'groupby',
+const sortSeriesBy: FormsProps = {
+  label: t('SORT SERIES BY'),
+  name: 'sort_series_type',
+  status: 'select',
+  popper: t('Based on what should series be ordered on the chart and legend'),
+  options: chartFormsOption.sort_series_type,
+};
+
+const sortSeriesAscending: FormsProps = {
+  label: t('SORT SERIES ASCENDING'),
+  name: 'sort_series_ascending',
+  status: 'checkbox',
+  popper: t('Sort series in ascending order'),
+};
+
+const colorScheme: FormsProps = {
+  label: t('COLOR SCHEME'),
+  popper: t('The color scheme for rendering chart'),
+  name: 'color_scheme',
+  status: 'color-select',
+  optionsColor: chartFormsOption.color_scheme,
+};
+
+const seriesStyle: FormsProps = {
+  label: t('SERIES STYLE'),
+  name: 'seriesType',
+  status: 'select',
+  popper: t('Series chart type (line, bar etc)'),
+  options: chartFormsOption.seriesType,
+};
+
+const showValue: FormsProps = {
+  label: t('SHOW VALUE'),
+  name: 'show_value',
+  status: 'checkbox',
+  popper: t('Show series values on the chart'),
+};
+
+const stackedStyle: FormsProps = {
+  label: t('STACKED STYLE'),
+  name: 'stack',
+  status: 'select',
+  popper: t('Stack series on top of each other'),
+  options: chartFormsOption.stack,
+};
+
+const areaChart: FormsProps = {
+  label: t('AREA CHART'),
+  name: 'area',
+  status: 'checkbox',
+  popper: t('Draw area under curves. Only applicable for line types.'),
+};
+
+const areaChartOpacity: FormsProps = {
+  label: t('AREA CHART OPACITY'),
+  name: 'opacity',
+  status: 'range',
+  popper: t('Opacity of Area Chart. Also applies to confidence band.'),
+  rangeConfig: {
+    min: 0,
+    max: 1,
+    step: 0.1,
+  },
+};
+
+const marker: FormsProps = {
+  label: t('MARKER'),
+  name: 'markerEnabled',
+  status: 'checkbox',
+  popper: t('Draw a marker on data points. Only applicable for line types.'),
+};
+
+const markerSize: FormsProps = {
+  label: t('MARKER SIZE'),
+  name: 'markerSize',
+  status: 'range',
+  popper: t('Size of marker. Also applies to forecast observations.'),
+  rangeConfig: {
+    min: 0,
+    max: 20,
+    step: 1,
+  },
+};
+
+const extraControls: FormsProps = {
+  label: t('EXTRA CONTROLS'),
+  name: 'show_extra_controls',
+  status: 'checkbox',
   popper: t(
-    'Dimensions contain qualitative values such as names, dates, or geographical data. Use dimensions to categorize, segment, and reveal the details in your data. Dimensions affect the level of detail in the view.',
+    'Whether to show extra controls or not. Extra controls include things like making mulitBar charts stacked or side by side.',
   ),
-  status: 'input-drop',
-  multiple: true,
-  type: 'normal',
-  savedType: 'expressions',
 };
 
-const formMetrics: FormsProps = {
-  label: t('METRICS'),
-  name: 'metrics',
+const dataZoom: FormsProps = {
+  label: t('DATA ZOOM'),
+  name: 'zoomable',
+  status: 'checkbox',
+  popper: t('Enable data zooming controls'),
+};
+
+const minorTicks: FormsProps = {
+  label: t('MINOR TICKS'),
+  name: 'minorTicks',
+  status: 'checkbox',
+  popper: t('Show minor ticks on axes.'),
+};
+
+const showLegend: FormsProps = {
+  label: t('SHOW LEGEND'),
+  name: 'show_legend',
+  status: 'checkbox',
+  popper: t('Whether to display a legend for the chart'),
+};
+
+const type: FormsProps = {
+  label: t('TYPE'),
+  name: 'legendType',
+  status: 'select',
+  popper: t('Legend type'),
+  options: chartFormsOption.legendType,
+};
+
+const orientation: FormsProps = {
+  label: t('ORIENTATION'),
+  name: 'legendOrientation',
+  status: 'select',
+  popper: t('Legend Orientation'),
+  options: chartFormsOption.legendOrientation,
+};
+
+const margin: FormsProps = {
+  label: t('MARGIN'),
+  name: 'legendMargin',
+  status: 'input',
+  number: true,
+  popper: t('Additional padding for legend.'),
+};
+
+const timeFormat: FormsProps = {
+  label: t('TIME FORMAT'),
+  name: 'x_axis_time_format',
+  status: 'select',
   popper: t(
-    'Select one or many metrics to display. You can use an aggregation function on a column or write custom SQL to create a metric.',
+    'D3 time format syntax: https://github.com/d3/d3-time-format. When using other than adaptive formatting, labels may overlap',
   ),
-  popperError: t('cannot be empty'),
-  status: 'input-drop',
-  multiple: true,
-  type: 'aggregates',
-  savedType: 'metric',
+  options: chartFormsOption.time_format,
+};
+
+const rotateXAxisLabel: FormsProps = {
+  label: t('ROTATE X AXIS LABEL'),
+  name: 'xAxisLabelRotation',
+  status: 'select',
+  popper: t('Input field supports custom rotation. e.g. 30 for 30°'),
+  options: chartFormsOption.xAxisLabelRotation,
 };
 
-const formMetric: FormsProps = {
-  label: t('METRIC'),
-  name: 'metric',
+const richTooltip: FormsProps = {
+  label: t('RICH TOOLTIP'),
+  name: 'rich_tooltip',
+  status: 'checkbox',
+  popper: t('Shows a list of all series available at that point in time'),
+};
+
+const tooltipSortByMetric: FormsProps = {
+  label: t('TOOLTIP SORT BY METRIC'),
+  name: 'tooltipSortByMetric',
+  status: 'checkbox',
   popper: t(
-    'Select a metric to display. You can use an aggregation function on a column or write custom SQL to create a metric.',
+    'Whether to sort tooltip by the selected metric in descending order.',
   ),
-  popperError: t('cannot be empty'),
-  status: 'input-drop',
-  multiple: false,
-  type: 'aggregates',
-  savedType: 'metric',
 };
 
-const formFilters: FormsProps = {
-  label: t('FILTERS'),
-  name: 'adhoc_filters',
-  status: 'input-drop',
-  multiple: true,
-  type: 'filters',
+const tooltipTimeFormat: FormsProps = {
+  label: t('TOOLTIP TIME FORMAT'),
+  name: 'tooltipTimeFormat',
+  status: 'select',
+  popper: t('D3 time format syntax: https://github.com/d3/d3-time-format'),
+  options: chartFormsOption.time_format,
 };
 
-const formSortBy: FormsProps = {
-  label: t('SORT BY'),
-  name: 'timeseries_limit_metric',
+const forceDateFormat: FormsProps = {
+  label: t('FORCE DATE FORMAT'),
+  name: 'force_timestamp_formatting',
+  status: 'checkbox',
+  popper: t('Use date formatting even when metric value is not a timestamp'),
+};
+
+const yAxisFormat: FormsProps = {
+  label: t('Y AXIS FORMAT'),
+  name: 'y_axis_format',
+  status: 'select',
+  popper: t('D3 format syntax: https://github.com/d3/d3-format'),
+  options: chartFormsOption.y_axis_format,
+};
+
+const currencyFormat: FormsProps = {
+  label: t('CURRENCY FORMAT'),
+  name: 'currency_format',
+  status: 'two-select',
+  values: [
+    {
+      name: 'symbolPosition',
+      placeholder: t('Prefix or suffix'),
+      options: chartFormsOption.currency_format.symbolPosition,
+    },
+    {
+      name: 'symbol',
+      placeholder: t('Currency'),
+      options: chartFormsOption.currency_format.symbol,
+    },
+  ],
+};
+
+const logarithmicYAxis: FormsProps = {
+  label: t('LOGARITHMIC Y-AXIS'),
+  name: 'logAxis',
+  status: 'checkbox',
+  popper: t('Logarithmic y-axis'),
+};
+
+const minorSplitLine: FormsProps = {
+  label: t('MINOR SPLIT LINE'),
+  name: 'minorSplitLine',
+  status: 'checkbox',
+  popper: t('Draw split lines for minor y-axis ticks'),
+};
+
+const bigNumberFontSize: FormsProps = {
+  label: t('BIG NUMBER FONT SIZE'),
+  name: 'header_font_size',
+  status: 'select',
+  popper: t('Changing this control takes effect instantly'),
+  options: chartFormsOption.header_font_size,
+};
+
+const subheaderFontSize: FormsProps = {
+  label: t('SUBHEADER FONT SIZE'),
+  name: 'subheader_font_size',
+  popper: t('Changing this control takes effect instantly'),
+  status: 'select',
+  options: chartFormsOption.header_font_size,
+};
+
+const truncateXAxis: FormsProps = {
+  label: t('TRUNCATE X AXIS'),
+  name: 'truncateXAxis',
+  status: 'checkbox',
+  popper: t(
+    'Truncate X Axis. Can be overridden by specifying a min or max bound. Only applicable for numercal X axis.',
+  ),
+};
+
+const xAxisBounds: FormsProps = {
+  label: t('X AXIS BOUNDS'),
+  name: 'xAxisBounds',
+  status: 'two-input',
   popper: t(
-    'This metric is used to define row selection criteria (how the rows are sorted) if a series or row limit is present. If not defined, it reverts to the first metric (where appropriate).',
+    "Bounds for numerical X axis. Not applicable for temporal or categorical axes. When left empty, the bounds are dynamically defined based on the min/max of the data. Note that this feature will only expand the axis range. It won't narrow the data's extent.",
   ),
-  status: 'input-drop',
-  multiple: false,
-  type: 'aggregates',
-  savedType: 'metric',
+  values: [
+    {
+      placeholder: t('MIN'),
+      number: true,
+      name: 'min',
+    },
+    {
+      placeholder: t('MAX'),
+      number: true,
+      name: 'max',
+    },
+  ],
 };
 
-const formRowLimit: FormsProps = {
-  label: t('ROW LIMIT'),
-  name: 'row_limit',
+const truncateYAxis: FormsProps = {
+  label: t('TRUNCATE Y AXIS'),
+  name: 'truncateYAxis',
+  status: 'checkbox',
   popper: t(
-    'Limits the number of the rows that are computed in the query that is the source of the data used for this chart.',
+    'Truncate Y Axis. Can be overridden by specifying a min or max bound.',
   ),
+};
+
+const yAxisBounds: FormsProps = {
+  label: t('Y AXIS BOUNDS'),
+  name: 'y_axis_bounds',
+  status: 'two-input',
+  popper: t(
+    "Bounds for the Y-axis. When left empty, the bounds are dynamically defined based on the min/max of the data. Note that this feature will only expand the axis range. It won't narrow the data's extent.",
+  ),
+  values: [
+    {
+      placeholder: t('MIN'),
+      number: true,
+      name: 'min',
+    },
+    {
+      placeholder: t('MAX'),
+      number: true,
+      name: 'max',
+    },
+  ],
+};
+
+const numberFormat: FormsProps = {
+  label: t('NUMBER FORMAT'),
+  name: 'number_format',
   status: 'select',
-  options: chartFormsOption.row_limit,
+  popper: t(
+    'D3 format syntax: https://github.com/d3/d3-format Only applies when "Label Type" is set to show values.',
+  ),
+  options: chartFormsOption.y_axis_format,
 };
 
-const sortDescending: FormsProps = {
-  label: t('SORT DESCENDING'),
-  name: 'order_desc',
+const dateFormat: FormsProps = {
+  label: t('DATE FORMAT'),
+  name: 'time_format',
+  status: 'select',
+  popper: t('D3 format syntax: https://github.com/d3/d3-format'),
+  options: chartFormsOption.time_format,
+};
+
+const showLabels: FormsProps = {
+  label: t('SHOW LABELS'),
+  name: 'show_labels',
   status: 'checkbox',
+  popper: t('Whether to display the labels.'),
 };
 
-const lineAndBarChart: CollapsesProps[] = [
-  {
-    collapse_label: t('Chart Title'),
-    collapse_active: 'chart_title',
-    forms: [
-      {
-        label: t('X-AXIS'),
-        name: 'x_axis',
-        popper: t('Dimension to use on x-axis.'),
-        status: 'input',
-      },
-      {
-        label: t('TIME GRAIN'),
-        name: 'time_grain_sqla',
-        popper: t(
-          'Select a time grain for the visualization. The grain is the time interval represented by a single point on the chart.',
-        ),
-        placeholder: t('None'),
-        status: 'select',
-        options: chartFormsOption.time_grain_sqla,
-      },
-      formMetrics,
-      formDimensions,
-      {
-        label: t('CONTRIBUTION MODE'),
-        name: 'contributionMode',
-        popper: t('Calculate contribution per series or row'),
-        placeholder: t('Select ...'),
-        status: 'select',
-        options: chartFormsOption.contributionMode,
-      },
-      formFilters,
-      {
-        label: t('SERIES LIMIT'),
-        name: 'limit',
-        popper: t(
-          'Limits the number of series that get displayed. A joined subquery (or an extra phase where subqueries are not supported) is applied to limit the number of series that get fetched and rendered. This feature is useful when grouping by high cardinality column(s) though does increase the query complexity and cost.',
-        ),
-        placeholder: t('None'),
-        status: 'select',
-        options: chartFormsOption.limit,
-      },
-      formSortBy,
-      sortDescending,
-      formRowLimit,
-      {
-        label: t('TRUNCATE METRIC'),
-        name: 'truncate_metric',
-        status: 'checkbox',
-      },
-      {
-        label: t('SHOW EMPTY COLUMNS'),
-        name: 'show_empty_columns',
-        status: 'checkbox',
-      },
-    ],
-  },
-  {
-    collapse_label: t('Advanced analytics'),
-    collapse_popper: t(
-      'This section contains options that allow for advanced analytical post processing of query results',
-    ),
-    collapse_active: 'advanced_analytics',
-    forms: [
-      {
-        label: t('ROLLING FUNCTION'),
-        name: 'rolling_type',
-        popper: t(
-          'Defines a rolling window function to apply, works along with the [Periods] text box',
-        ),
-        placeholder: t('Select ...'),
-        status: 'select',
-        options: chartFormsOption.rolling_type,
-      },
-      {
-        label: t('TIME SHIFT'),
-        name: 'time_compare',
-        popper: t(
-          'Overlay one or more timeseries from a relative time period. Expects relative time deltas in natural language (example: 24 hours, 7 days, 52 weeks, 365 days). Free text is supported.',
-        ),
-        placeholder: t('Select ...'),
-        status: 'multiple-select',
-        options: chartFormsOption.time_compare,
-      },
-      {
-        label: t('CALCULATION TYPE'),
-        name: 'comparison_type',
-        popper: t(
-          'How to display time shifts: as individual lines; as the difference between the main time series and each time shift; as the percentage change; or as the ratio between series and time shifts.',
-        ),
-        placeholder: t('Select ...'),
-        status: 'select',
-        options: chartFormsOption.comparison_type,
-      },
-      {
-        label: t('RULE'),
-        name: 'resample_rule',
-        popper: t('Pandas resample rule'),
-        placeholder: t('Select ...'),
-        status: 'select',
-        options: chartFormsOption.resample_rule,
-      },
-      {
-        label: t('FILL METHOD'),
-        name: 'resample_method',
-        popper: t('Pandas resample method'),
-        placeholder: t('Select ...'),
-        status: 'select',
-        options: chartFormsOption.resample_method,
-      },
-    ],
-  },
-  {
-    collapse_label: t('Annotations and Layers'),
-    collapse_active: 'annotations_and_layers',
-    forms: [
-      {
-        name: 'annotation_layers',
-        placeholder: t('Add annotation layer'),
-        status: 'annotation-layer',
-      },
-    ],
-  },
+const xTickLayout: FormsProps = {
+  label: t('X TICK LAYOUT'),
+  name: 'x_ticks_layout',
+  status: 'select',
+  popper: t('The way the ticks are laid out on the X-axis'),
+  options: [],
+};
+
+const legend: FormsProps = {
+  label: t('LEGEND'),
+  name: 'show_legend',
+  popper: t('Whether to display the legend (toggles)'),
+  status: 'checkbox',
+};
+
+const xAxisLabel: FormsProps = {
+  label: t('X AXIS LABEL'),
+  name: 'x_axis_label',
+  popper: t('Changing this control takes effect instantly.'),
+  status: 'input',
+};
+
+const yAxisLabel: FormsProps = {
+  label: t('Y AXIS LABEL'),
+  name: 'y_axis_label',
+  popper: t('Changing this control takes effect instantly.'),
+  status: 'input',
+};
+
+const xAxisTitle: FormsProps = {
+  label: t('X AXIS TITLE'),
+  name: 'x_axis_title',
+  status: 'input',
+  popper: t('Changing this control takes effect instantly'),
+};
+
+const xAxisTitleMargin: FormsProps = {
+  label: t('X AXIS TITLE BOTTOM MARGIN'),
+  name: 'x_axis_title_margin',
+  status: 'select',
+  popper: t('Changing this control takes effect instantly'),
+  options: chartFormsOption.x_axis_title_margin,
+};
+
+const yAxisTitle: FormsProps = {
+  label: t('Y AXIS TITLE'),
+  name: 'y_axis_title',
+  status: 'input',
+  popper: t('Changing this control takes effect instantly'),
+};
+
+const yAxisTitleMargin: FormsProps = {
+  label: t('Y AXIS TITLE MARGIN'),
+  name: 'y_axis_title_margin',
+  status: 'select',
+  popper: t('Changing this control takes effect instantly'),
+  options: chartFormsOption.y_axis_title_margin,
+};
+
+const collapseChartTitle: CollapsesProps = {
+  collapse_label: t('Chart Title'),
+  collapse_active: 'chart_title',
+  forms: [
+    xAxisTitle,
+    xAxisTitleMargin,
+    yAxisTitle,
+    yAxisTitleMargin,
+    {
+      label: t('Y AXIS TITLE POSITION'),
+      name: 'y_axis_title_position',
+      status: 'select',
+      popper: t('Changing this control takes effect instantly'),
+      options: chartFormsOption.y_axis_title_position,
+    },
+  ],
+};
+
+const DvtChartCustomize: DvtChartCustomizeProps[] = [
   {
-    collapse_label: t('Predictive Analytics'),
-    collapse_active: 'predictive_analytics',
-    forms: [
-      {
-        label: t('ENABLE FORECAST'),
-        name: 'forecastEnabled',
-        status: 'checkbox',
-      },
-      {
-        label: t('FORECAST PERIODS'),
-        name: 'forecastPeriods',
-        popper: t('How many periods into the future do we want to predict'),
-        status: 'input',
-        number: true,
-      },
-      {
-        label: t('CONFIDENCE INTERVAL'),
-        name: 'forecastInterval',
-        popper: t(
-          'Width of the confidence interval. Should be between 0 and 1',
-        ),
-        status: 'input',
-      },
-      {
-        label: t('YEARLY SEASONALITY'),
-        name: 'forecastSeasonalityYearly',
-        popper: t(
-          'Should yearly seasonality be applied. An integer value will specify Fourier order of seasonality.',
-        ),
-        placeholder: t('Select ...'),
-        status: 'select',
-        options: chartFormsOption.forecastSeasonalityYearly,
-      },
-      {
-        label: t('WEEKLY SEASONALITY'),
-        name: 'forecastSeasonalityWeekly',
-        popper: t(
-          'Should weekly seasonality be applied. An integer value will specify Fourier order of seasonality.',
-        ),
-        placeholder: t('Select ...'),
-        status: 'select',
-        options: chartFormsOption.forecastSeasonalityWeekly,
-      },
+    chart_name: 'echarts_timeseries_line',
+    collapses: [
+      collapseChartTitle,
       {
-        label: t('DAILY SEASONALITY'),
-        name: 'forecastSeasonalityDaily',
-        popper: t(
-          'Should daily seasonality be applied. An integer value will specify Fourier order of seasonality.',
-        ),
-        placeholder: t('Select ...'),
-        status: 'select',
-        options: chartFormsOption.forecastSeasonalityDaily,
+        collapse_label: t('Chart Options'),
+        collapse_active: 'chart_options',
+        forms: [
+          sortSeriesBy,
+          sortSeriesAscending,
+          colorScheme,
+          seriesStyle,
+          showValue,
+          stackedStyle,
+          areaChart,
+          areaChartOpacity,
+          marker,
+          markerSize,
+          dataZoom,
+          minorTicks,
+          showLegend,
+          type,
+          orientation,
+          margin,
+          timeFormat,
+          rotateXAxisLabel,
+          richTooltip,
+          tooltipSortByMetric,
+          tooltipTimeFormat,
+          yAxisFormat,
+          currencyFormat,
+          logarithmicYAxis,
+          minorSplitLine,
+          truncateXAxis,
+          xAxisBounds,
+          truncateYAxis,
+          yAxisBounds,
+        ],
       },
     ],
   },
-];
-
-const DvtChartCustomize: DvtChartCustomizeProps[] = [
-  // {
-  //   chart_name: 'echarts_timeseries_line',
-  //   collapses: lineAndBarChart,
-  // },
   {
     chart_name: 'echarts_timeseries_bar',
-    collapses: lineAndBarChart,
-  },
-  {
-    chart_name: 'echarts_area',
     collapses: [
       {
-        collapse_label: t('CHART ORIENTATION'),
+        collapse_label: t('Chart Orientation'),
         collapse_active: 'chart_orientation',
-        tabs_name: 'chart_orientation',
-        tabs_actives: {
-          vertical: [
-            'x_axis_title',
-            'x_axis_title_margin',
-            'y_axis_title',
-            'y_axis_title_margin',
-            'y_axis_title_position',
-          ],
-          horizontal: [
-            'y_axis_title',
-            'y_axis_title_margin',
-            'y_axis_title_position',
-            'x_axis_title',
-            'x_axis_title_margin',
-          ],
-        },
+        // tabs_name: 'chart_orientation',
+        // tabs_actives: {
+        //   vertical: [
+        //     'x_axis_title',
+        //     'x_axis_title_margin',
+        //     'y_axis_title',
+        //     'y_axis_title_margin',
+        //     'y_axis_title_position',
+        //   ],
+        //   horizontal: [
+        //     'y_axis_title',
+        //     'y_axis_title_margin',
+        //     'y_axis_title_position',
+        //     'x_axis_title',
+        //     'x_axis_title_margin',
+        //   ],
+        // },
         forms: [
           {
             label: t('BAR ORIENTATION'),
@@ -363,602 +554,81 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [
               { label: t('HORIZONTAL'), value: 'horizontal' },
             ],
           },
-          {
-            label: t('AXIS TITLE'),
-            name: 'x_axis_title',
-            status: 'input',
-          },
-          {
-            label: t('AXIS TITLE'),
-            name: 'y_axis_title',
-            status: 'input',
-          },
-          {
-            label: t('AXIS TITLE MARGIN'),
-            name: 'x_axis_title_margin',
-            status: 'select',
-            options: chartFormsOption.x_axis_title_margin,
-          },
-          {
-            label: t('AXIS TITLE MARGIN'),
-            name: 'y_axis_title_margin',
-            status: 'select',
-            options: chartFormsOption.y_axis_title_margin,
-          },
-          {
-            label: t('AXIS TITLE POSITION'), // for 'Vertical' Y Axis
-            name: 'legendOrientation',
-            status: 'select',
-            popper: t('Changing this control takes effect instantly'),
-            options: chartFormsOption.legendOrientation,
-          },
-          {
-            label: t('AXIS TITLE POSITION'), // for 'Horizontal' X Axis
-            name: 'legendOrientation',
-            status: 'select',
-            popper: t('Changing this control takes effect instantly'),
-            options: chartFormsOption.legendOrientation,
-          },
-        ],
-      },
-      {
-        collapse_label: t('Chart Options'),
-        collapse_active: 'chart_options',
-        forms: [
-          {
-            label: t('SORT SERIES BY'),
-            name: 'sort_series_type',
-            status: 'select',
-            popper: t(
-              'Based on what should series be ordered on the chart and legend',
-            ),
-            options: chartFormsOption.sort_series_type,
-          },
-          {
-            label: t('SORT SERIES ASCENDING'),
-            name: 'sort_series_ascending',
-            status: 'checkbox',
-            popper: t('Sort series in ascending order'),
-          },
-          {
-            label: t('COLOR SCHEME'),
-            name: 'color_scheme',
-            status: 'color',
-            popper: t('The color scheme for rendering chart'),
-          },
-          {
-            label: t('SHOW VALUE'),
-            name: 'show_value',
-            status: 'checkbox',
-            popper: t('Show series values on the chart'),
-          },
-          {
-            label: t('STACKED STYLE'),
-            name: 'stack',
-            status: 'select',
-            popper: t('Stack series on top of each other'),
-          },
-          {
-            label: t('DATA ZOOM'),
-            name: 'zoomable',
-            status: 'checkbox',
-            popper: t('Enable data zooming controls'),
-          },
-          {
-            label: t('MINOR TICKS'),
-            name: 'minorTicks',
-            status: 'checkbox',
-            popper: t('Show minor ticks on axes.'),
-          },
-          {
-            label: t('SHOW LEGEND'),
-            name: 'show_legend',
-            status: 'checkbox',
-            popper: t('Whether to display a legend for the chart'),
-          },
-          {
-            label: t('TYPE'),
-            name: 'legendType',
-            status: 'select',
-            popper: t('Legend type'),
-            options: chartFormsOption.legendType,
-          },
-          {
-            label: t('ORIENTATION'),
-            name: 'legendOrientation',
-            status: 'select',
-            popper: t('Legend Orientation'),
-            options: chartFormsOption.legendOrientation,
-          },
-          {
-            label: t('MARGIN'),
-            name: 'legendMargin',
-            status: 'input',
-            number: true,
-            popper: t('Additional padding for legend.'),
-          },
-          {
-            label: t('AXIS FORMAT'),
-            name: 'y_axis_format',
-            status: 'range',
-            popper: t('D3 format syntax: https://github.com/d3/d3-format'),
-          },
-          {
-            label: t('LOGARITHMIC AXIS'),
-            name: 'logAxis',
-            status: 'checkbox',
-            popper: t('Whether to display a legend for the chart'),
-          },
-          {
-            label: t('MINOR SPLIT LINE'),
-            name: 'show_extra_controls',
-            status: 'checkbox',
-            popper: t(
-              'Whether to show extra controls or not. Extra controls include things like making mulitBar charts stacked or side by side.',
-            ),
-          },
-          {
-            label: t('MARKER'),
-            name: 'markerEnabled',
-            status: 'checkbox',
-            popper: t(
-              'Draw a marker on data points. Only applicable for line types.',
-            ),
-          },
-          {
-            label: t('MARKER SIZE'),
-            name: 'markerSize',
-            status: 'range',
-            popper: t('Size of marker. Also applies to forecast observations.'),
-            rangeConfig: {
-              min: 0,
-              max: 20,
-              step: 1,
-            },
-          },
-          {
-            label: t('TIME FORMAT'),
-            name: 'x_axis_time_format',
-            status: 'select',
-            popper: t(
-              'D3 time format syntax: https://github.com/d3/d3-time-format. When using other than adaptive formatting, labels may overlap',
-            ),
-            options: [],
-          },
-          {
-            label: t('ROTATE X AXIS LABEL'),
-            name: 'xAxisLabelRotation',
-            status: 'select',
-            popper: t('Input field supports custom rotation. e.g. 30 for 30°'),
-            options: chartFormsOption.xAxisLabelRotation,
-          },
-          {
-            label: t('RICH TOOLTIP'),
-            name: 'rich_tooltip',
-            status: 'checkbox',
-            popper: t(
-              'Shows a list of all series available at that point in time',
-            ),
-          },
-          {
-            label: t('TOOLTIP SORT BY METRIC'),
-            name: 'tooltipSortByMetric',
-            status: 'checkbox',
-            popper: t(
-              'Whether to sort tooltip by the selected metric in descending order.',
-            ),
-          },
-          {
-            label: t('TOOLTIP TIME FORMAT'),
-            name: 'tooltipTimeFormat',
-            status: 'select',
-            popper: t(
-              'D3 time format syntax: https://github.com/d3/d3-time-format',
-            ),
-            options: [],
-          },
-          {
-            label: t('Y AXIS FORMAT'),
-            name: 'y_axis_format',
-            status: 'select',
-            popper: t('D3 format syntax: https://github.com/d3/d3-format'),
-            options: [],
-          },
-          {
-            label: t('CURRENCY FORMAT'),
-            name: 'currency_format',
-            status: 'two-select',
-            values: [
-              {
-                name: 'symbolPosition',
-                placeholder: t('Prefix or suffix'),
-                options: chartFormsOption.currency_format.symbolPosition,
-              },
-              {
-                name: 'symbol',
-                placeholder: t('Currency'),
-                options: chartFormsOption.currency_format.symbol,
-              },
-            ],
-          },
-          {
-            label: t('LOGARITHMIC Y-AXIS'),
-            name: 'logAxis',
-            status: 'checkbox',
-            popper: t('Logarithmic y-axis'),
-          },
-          {
-            label: t('MINOR SPLIT LINE'),
-            name: 'minorSplitLine',
-            status: 'checkbox',
-            popper: t('Draw split lines for minor y-axis ticks'),
-          },
-          {
-            label: t('TRUNCATE X AXIS'),
-            name: 'truncateXAxis',
-            status: 'checkbox',
-            popper: t(
-              'Truncate X Axis. Can be overridden by specifying a min or max bound. Only applicable for numercal X axis.',
-            ),
-          },
-          {
-            label: t('X AXIS BOUNDS'),
-            name: 'xAxisBounds',
-            status: 'two-input',
-            popper: t(
-              "Bounds for numerical X axis. Not applicable for temporal or categorical axes. When left empty, the bounds are dynamically defined based on the min/max of the data. Note that this feature will only expand the axis range. It won't narrow the data's extent.",
-            ),
-            values: [
-              {
-                placeholder: t('MIN'),
-                number: true,
-                name: 'min',
-              },
-              {
-                placeholder: t('MAX'),
-                number: true,
-                name: 'max',
-              },
-            ],
-          },
-          {
-            label: t('TRUNCATE Y AXIS'),
-            name: 'truncateYAxis',
-            status: 'checkbox',
-            popper: t(
-              'Truncate Y Axis. Can be overridden by specifying a min or max bound.',
-            ),
-          },
-          {
-            label: t('Y AXIS BOUNDS'),
-            name: 'y_axis_bounds',
-            status: 'two-input',
-            popper: t(
-              "Bounds for the Y-axis. When left empty, the bounds are dynamically defined based on the min/max of the data. Note that this feature will only expand the axis range. It won't narrow the data's extent.",
-            ),
-            values: [
-              {
-                placeholder: t('MIN'),
-                number: true,
-                name: 'min',
-              },
-              {
-                placeholder: t('MAX'),
-                number: true,
-                name: 'max',
-              },
-            ],
-          },
         ],
       },
-    ],
-  },
-  {
-    chart_name: 'echarts_area',
-    collapses: [
-      {
-        collapse_label: t('Chart Title'),
-        collapse_active: 'chart_title',
-        forms: [
-          {
-            label: t('X AXIS TITLE'),
-            name: 'x_axis_title',
-            status: 'input',
-            popper: t('Changing this control takes effect instantly'),
-          },
-          {
-            label: t('X AXIS TITLE BOTTOM MARGIN'),
-            name: 'x_axis_title_margin',
-            status: 'select',
-            popper: t('Changing this control takes effect instantly'),
-            options: chartFormsOption.x_axis_title_margin,
-          },
-          {
-            label: t('Y AXIS TITLE'),
-            name: 'y_axis_title',
-            status: 'input',
-            popper: t('Changing this control takes effect instantly'),
-          },
-          {
-            label: t('Y AXIS TITLE MARGIN'),
-            name: 'y_axis_title_margin',
-            status: 'select',
-            popper: t('Changing this control takes effect instantly'),
-            options: chartFormsOption.y_axis_title_margin,
-          },
-          {
-            label: t('Y AXIS TITLE POSITION'),
-            name: 'y_axis_title_position',
-            status: 'select',
-            popper: t('Changing this control takes effect instantly'),
-            options: chartFormsOption.y_axis_title_position,
-          },
-        ],
-      },
-      {
-        collapse_label: t('Chart Options'),
-        collapse_active: 'chart_options',
-        forms: [
-          {
-            label: t('SORT SERIES BY'),
-            name: 'sort_series_type',
-            status: 'select',
-            popper: t(
-              'Based on what should series be ordered on the chart and legend',
-            ),
-            options: chartFormsOption.sort_series_type,
-          },
-          {
-            label: t('SORT SERIES ASCENDING'),
-            name: 'sort_series_ascending',
-            status: 'checkbox',
-            popper: t('Sort series in ascending order'),
-          },
-          {
-            label: t('COLOR SCHEME'),
-            name: 'color_scheme',
-            status: 'color',
-            popper: t('The color scheme for rendering chart'),
-          },
-          {
-            label: t('SERIES STYLE'),
-            name: 'seriesType',
-            status: 'select',
-            popper: t('Series chart type (line, bar etc)'),
-            options: chartFormsOption.seriesType,
-          },
-          {
-            label: t('AREA CHART OPACITY'),
-            name: 'opacity',
-            status: 'range',
-            popper: t(
-              'Opacity of Area Chart. Also applies to confidence band.',
-            ),
-            rangeConfig: {
-              min: 0,
-              max: 1,
-              step: 0.1,
-            },
-          },
-          {
-            label: t('SHOW VALUE'),
-            name: 'show_value',
-            status: 'checkbox',
-            popper: t('Show series values on the chart'),
-          },
-          {
-            label: t('STACKED STYLE'),
-            name: 'stack',
-            status: 'select',
-            popper: t('Stack series on top of each other'),
-          },
-          {
-            label: t('ONLY TOTAL'),
-            name: 'only_total',
-            status: 'checkbox',
-            popper: t(
-              'Only show the total value on the stacked chart, and not show on the selected category',
-            ),
-          },
-          {
-            label: t('EXTRA CONTROLS'),
-            name: 'show_extra_controls',
-            status: 'checkbox',
-            popper: t(
-              'Whether to show extra controls or not. Extra controls include things like making mulitBar charts stacked or side by side.',
-            ),
-          },
-          {
-            label: t('MARKER'),
-            name: 'markerEnabled',
-            status: 'checkbox',
-            popper: t(
-              'Draw a marker on data points. Only applicable for line types.',
-            ),
-          },
-          {
-            label: t('MARKER SIZE'),
-            name: 'markerSize',
-            status: 'range',
-            popper: t('Size of marker. Also applies to forecast observations.'),
-            rangeConfig: {
-              min: 0,
-              max: 20,
-              step: 1,
-            },
-          },
-          {
-            label: t('DATA ZOOM'),
-            name: 'zoomable',
-            status: 'checkbox',
-            popper: t('Enable data zooming controls'),
-          },
-          {
-            label: t('MINOR TICKS'),
-            name: 'minorTicks',
-            status: 'checkbox',
-            popper: t('Show minor ticks on axes.'),
-          },
-          {
-            label: t('SHOW LEGEND'),
-            name: 'show_legend',
-            status: 'checkbox',
-            popper: t('Whether to display a legend for the chart'),
-          },
-          {
-            label: t('TYPE'),
-            name: 'legendType',
-            status: 'select',
-            popper: t('Legend type'),
-            options: chartFormsOption.legendType,
-          },
-          {
-            label: t('ORIENTATION'),
-            name: 'legendOrientation',
-            status: 'select',
-            popper: t('Legend Orientation'),
-            options: chartFormsOption.legendOrientation,
-          },
-          {
-            label: t('MARGIN'),
-            name: 'legendMargin',
-            status: 'input',
-            number: true,
-            popper: t('Additional padding for legend.'),
-          },
-          {
-            label: t('TIME FORMAT'),
-            name: 'x_axis_time_format',
-            status: 'select',
-            popper: t(
-              'D3 time format syntax: https://github.com/d3/d3-time-format. When using other than adaptive formatting, labels may overlap',
-            ),
-            options: [],
-          },
-          {
-            label: t('ROTATE X AXIS LABEL'),
-            name: 'xAxisLabelRotation',
-            status: 'select',
-            popper: t('Input field supports custom rotation. e.g. 30 for 30°'),
-            options: chartFormsOption.xAxisLabelRotation,
-          },
-          {
-            label: t('RICH TOOLTIP'),
-            name: 'rich_tooltip',
-            status: 'checkbox',
-            popper: t(
-              'Shows a list of all series available at that point in time',
-            ),
-          },
-          {
-            label: t('TOOLTIP SORT BY METRIC'),
-            name: 'tooltipSortByMetric',
-            status: 'checkbox',
-            popper: t(
-              'Whether to sort tooltip by the selected metric in descending order.',
-            ),
-          },
-          {
-            label: t('TOOLTIP TIME FORMAT'),
-            name: 'tooltipTimeFormat',
-            status: 'select',
-            popper: t(
-              'D3 time format syntax: https://github.com/d3/d3-time-format',
-            ),
-            options: [],
-          },
-          {
-            label: t('Y AXIS FORMAT'),
-            name: 'y_axis_format',
-            status: 'select',
-            popper: t('D3 format syntax: https://github.com/d3/d3-format'),
-            options: [],
-          },
-          {
-            label: t('CURRENCY FORMAT'),
-            name: 'currency_format',
-            status: 'two-select',
-            values: [
-              {
-                name: 'symbolPosition',
-                placeholder: t('Prefix or suffix'),
-                options: chartFormsOption.currency_format.symbolPosition,
-              },
-              {
-                name: 'symbol',
-                placeholder: t('Currency'),
-                options: chartFormsOption.currency_format.symbol,
-              },
-            ],
-          },
-          {
-            label: t('LOGARITHMIC Y-AXIS'),
-            name: 'logAxis',
-            status: 'checkbox',
-            popper: t('Logarithmic y-axis'),
-          },
-          {
-            label: t('MINOR SPLIT LINE'),
-            name: 'minorSplitLine',
-            status: 'checkbox',
-            popper: t('Draw split lines for minor y-axis ticks'),
-          },
-          {
-            label: t('TRUNCATE X AXIS'),
-            name: 'truncateXAxis',
-            status: 'checkbox',
-            popper: t(
-              'Truncate X Axis. Can be overridden by specifying a min or max bound. Only applicable for numercal X axis.',
-            ),
-          },
-          {
-            label: t('X AXIS BOUNDS'),
-            name: 'xAxisBounds',
-            status: 'two-input',
-            popper: t(
-              "Bounds for numerical X axis. Not applicable for temporal or categorical axes. When left empty, the bounds are dynamically defined based on the min/max of the data. Note that this feature will only expand the axis range. It won't narrow the data's extent.",
-            ),
-            values: [
-              {
-                placeholder: t('MIN'),
-                number: true,
-                name: 'min',
-              },
-              {
-                placeholder: t('MAX'),
-                number: true,
-                name: 'max',
-              },
-            ],
-          },
-          {
-            label: t('TRUNCATE Y AXIS'),
-            name: 'truncateYAxis',
-            status: 'checkbox',
-            popper: t(
-              'Truncate Y Axis. Can be overridden by specifying a min or max bound.',
-            ),
-          },
-          {
-            label: t('Y AXIS BOUNDS'),
-            name: 'y_axis_bounds',
-            status: 'two-input',
-            popper: t(
-              "Bounds for the Y-axis. When left empty, the bounds are dynamically defined based on the min/max of the data. Note that this feature will only expand the axis range. It won't narrow the data's extent.",
-            ),
-            values: [
-              {
-                placeholder: t('MIN'),
-                number: true,
-                name: 'min',
-              },
-              {
-                placeholder: t('MAX'),
-                number: true,
-                name: 'max',
-              },
-            ],
-          },
+      collapseChartTitle,
+      {
+        collapse_label: t('Chart Options'),
+        collapse_active: 'chart_options',
+        forms: [
+          sortSeriesBy,
+          sortSeriesAscending,
+          colorScheme,
+          showValue,
+          stackedStyle,
+          minorTicks,
+          dataZoom,
+          showLegend,
+          type,
+          orientation,
+          margin,
+          timeFormat,
+          rotateXAxisLabel,
+          currencyFormat,
+          truncateXAxis,
+          xAxisBounds,
+          richTooltip,
+          tooltipSortByMetric,
+          tooltipTimeFormat,
+          yAxisFormat,
+          currencyFormat,
+          logarithmicYAxis,
+          minorSplitLine,
+          truncateXAxis,
+          xAxisBounds,
+          truncateYAxis,
+          yAxisBounds,
+        ],
+      },
+    ],
+  },
+  {
+    chart_name: 'echarts_area',
+    collapses: [
+      collapseChartTitle,
+      {
+        collapse_label: t('Chart Options'),
+        collapse_active: 'chart_options',
+        forms: [
+          sortSeriesBy,
+          sortSeriesAscending,
+          colorScheme,
+          seriesStyle,
+          areaChartOpacity,
+          showValue,
+          stackedStyle,
+          extraControls,
+          marker,
+          markerSize,
+          minorTicks,
+          dataZoom,
+          showLegend,
+          type,
+          orientation,
+          margin,
+          timeFormat,
+          rotateXAxisLabel,
+          richTooltip,
+          tooltipSortByMetric,
+          tooltipTimeFormat,
+          yAxisFormat,
+          currencyFormat,
+          logarithmicYAxis,
+          minorSplitLine,
+          truncateXAxis,
+          xAxisBounds,
+          truncateYAxis,
+          yAxisBounds,
         ],
       },
     ],
@@ -975,7 +645,7 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [
             name: 'table_timestamp_format',
             status: 'select',
             popper: t('D3 time format for datetime columns'),
-            options: [],
+            options: chartFormsOption.time_format,
           },
           {
             label: t('PAGE LENGTH'),
@@ -986,7 +656,7 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [
           },
           {
             label: t('SEARCH BOX'),
-            name: '', // cannot find.
+            name: 'include_search',
             status: 'checkbox',
           },
           {
@@ -1025,310 +695,6 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [
       },
     ],
   },
-
-  {
-    chart_name: 'echarts_timeseries_line',
-    collapses: [
-      {
-        collapse_label: t('Chart Title'),
-        collapse_active: 'chart_title',
-        forms: [
-          {
-            label: t('X AXIS TITLE'),
-            name: 'x_axis_title',
-            status: 'input',
-            popper: t('Changing this control takes effect instantly'),
-          },
-          {
-            label: t('X AXIS TITLE BOTTOM MARGIN'),
-            name: 'x_axis_title_margin',
-            status: 'select',
-            popper: t('Changing this control takes effect instantly'),
-            options: chartFormsOption.x_axis_title_margin,
-          },
-          {
-            label: t('Y AXIS TITLE'),
-            name: 'y_axis_title',
-            status: 'input',
-            popper: t('Changing this control takes effect instantly'),
-          },
-          {
-            label: t('Y AXIS TITLE MARGIN'),
-            name: 'y_axis_title_margin',
-            status: 'select',
-            popper: t('Changing this control takes effect instantly'),
-            options: chartFormsOption.y_axis_title_margin,
-          },
-          {
-            label: t('Y AXIS TITLE POSITION'),
-            name: 'y_axis_title_position',
-            status: 'select',
-            popper: t('Changing this control takes effect instantly'),
-            options: chartFormsOption.y_axis_title_position,
-          },
-        ],
-      },
-      {
-        collapse_label: t('Chart Options'),
-        collapse_active: 'chart_options',
-        forms: [
-          {
-            label: t('SORT SERIES BY'),
-            name: 'sort_series_type',
-            status: 'select',
-            popper: t(
-              'Based on what should series be ordered on the chart and legend',
-            ),
-            options: chartFormsOption.sort_series_type,
-          },
-          {
-            label: t('SORT SERIES ASCENDING'),
-            name: 'sort_series_ascending',
-            status: 'checkbox',
-            popper: t('Sort series in ascending order'),
-          },
-          {
-            label: t('COLOR SCHEME'),
-            name: 'color_scheme',
-            status: 'color',
-            popper: t('The color scheme for rendering chart'),
-          },
-          {
-            label: t('SERIES STYLE'),
-            name: 'seriesType',
-            status: 'select',
-            popper: t('Series chart type (line, bar etc)'),
-            options: chartFormsOption.seriesType,
-          },
-          {
-            label: t('SHOW VALUE'),
-            name: 'show_value',
-            status: 'checkbox',
-            popper: t('Show series values on the chart'),
-          },
-          {
-            label: t('SERIES STYLE'),
-            name: 'seriesType',
-            status: 'select',
-            popper: t('Series chart type (line, bar etc)'),
-            options: chartFormsOption.seriesType,
-          },
-          {
-            label: t('AREA CHART'),
-            name: 'area',
-            status: 'checkbox',
-            popper: t(
-              'Draw area under curves. Only applicable for line types.',
-            ),
-          },
-          {
-            label: t('AREA CHART OPACITY'),
-            name: 'opacity',
-            status: 'range',
-            popper: t(
-              'Opacity of Area Chart. Also applies to confidence band.',
-            ),
-            rangeConfig: {
-              min: 0,
-              max: 1,
-              step: 0.1,
-            },
-          },
-          {
-            label: t('MARKER'),
-            name: 'markerEnabled',
-            status: 'checkbox',
-            popper: t(
-              'Draw a marker on data points. Only applicable for line types.',
-            ),
-          },
-          {
-            label: t('MARKER SIZE'),
-            name: 'markerSize',
-            status: 'range',
-            popper: t('Size of marker. Also applies to forecast observations.'),
-            rangeConfig: {
-              min: 0,
-              max: 20,
-              step: 1,
-            },
-          },
-          {
-            label: t('DATA ZOOM'),
-            name: 'zoomable',
-            status: 'checkbox',
-            popper: t('Enable data zooming controls'),
-          },
-          {
-            label: t('MINOR TICKS'),
-            name: 'minorTicks',
-            status: 'checkbox',
-            popper: t('Show minor ticks on axes.'),
-          },
-          {
-            label: t('SHOW LEGEND'),
-            name: 'show_legend',
-            status: 'checkbox',
-            popper: t('Whether to display a legend for the chart'),
-          },
-          {
-            label: t('TYPE'),
-            name: 'legendType',
-            status: 'select',
-            popper: t('Legend type'),
-            options: chartFormsOption.legendType,
-          },
-          {
-            label: t('ORIENTATION'),
-            name: 'legendOrientation',
-            status: 'select',
-            popper: t('Legend Orientation'),
-            options: chartFormsOption.legendOrientation,
-          },
-          {
-            label: t('MARGIN'),
-            name: 'legendMargin',
-            status: 'input',
-            number: true,
-            popper: t('Additional padding for legend.'),
-          },
-          {
-            label: t('TIME FORMAT'),
-            name: 'x_axis_time_format',
-            status: 'select',
-            popper: t(
-              'D3 time format syntax: https://github.com/d3/d3-time-format. When using other than adaptive formatting, labels may overlap',
-            ),
-            options: [],
-          },
-          {
-            label: t('ROTATE X AXIS LABEL'),
-            name: 'xAxisLabelRotation',
-            status: 'select',
-            popper: t('Input field supports custom rotation. e.g. 30 for 30°'),
-            options: chartFormsOption.xAxisLabelRotation,
-          },
-          {
-            label: t('RICH TOOLTIP'),
-            name: 'rich_tooltip',
-            status: 'checkbox',
-            popper: t(
-              'Shows a list of all series available at that point in time',
-            ),
-          },
-          {
-            label: t('TOOLTIP SORT BY METRIC'),
-            name: 'tooltipSortByMetric',
-            status: 'checkbox',
-            popper: t(
-              'Whether to sort tooltip by the selected metric in descending order.',
-            ),
-          },
-          {
-            label: t('TOOLTIP TIME FORMAT'),
-            name: 'tooltipTimeFormat',
-            status: 'select',
-            popper: t(
-              'D3 time format syntax: https://github.com/d3/d3-time-format',
-            ),
-            options: [],
-          },
-          {
-            label: t('Y AXIS FORMAT'),
-            name: 'y_axis_format',
-            status: 'select',
-            popper: t('D3 format syntax: https://github.com/d3/d3-format'),
-            options: [],
-          },
-          {
-            label: t('CURRENCY FORMAT'),
-            name: 'currency_format',
-            status: 'two-select',
-            values: [
-              {
-                name: 'symbolPosition',
-                placeholder: t('Prefix or suffix'),
-                options: chartFormsOption.currency_format.symbolPosition,
-              },
-              {
-                name: 'symbol',
-                placeholder: t('Currency'),
-                options: chartFormsOption.currency_format.symbol,
-              },
-            ],
-          },
-          {
-            label: t('LOGARITHMIC Y-AXIS'),
-            name: 'logAxis',
-            status: 'checkbox',
-            popper: t('Logarithmic y-axis'),
-          },
-          {
-            label: t('MINOR SPLIT LINE'),
-            name: 'minorSplitLine',
-            status: 'checkbox',
-            popper: t('Draw split lines for minor y-axis ticks'),
-          },
-          {
-            label: t('TRUNCATE X AXIS'),
-            name: 'truncateXAxis',
-            status: 'checkbox',
-            popper: t(
-              'Truncate X Axis. Can be overridden by specifying a min or max bound. Only applicable for numercal X axis.',
-            ),
-          },
-          {
-            label: t('X AXIS BOUNDS'),
-            name: 'xAxisBounds',
-            status: 'two-input',
-            popper: t(
-              "Bounds for numerical X axis. Not applicable for temporal or categorical axes. When left empty, the bounds are dynamically defined based on the min/max of the data. Note that this feature will only expand the axis range. It won't narrow the data's extent.",
-            ),
-            values: [
-              {
-                placeholder: t('MIN'),
-                number: true,
-                name: 'min',
-              },
-              {
-                placeholder: t('MAX'),
-                number: true,
-                name: 'max',
-              },
-            ],
-          },
-          {
-            label: t('TRUNCATE Y AXIS'),
-            name: 'truncateYAxis',
-            status: 'checkbox',
-            popper: t(
-              'Truncate Y Axis. Can be overridden by specifying a min or max bound.',
-            ),
-          },
-          {
-            label: t('Y AXIS BOUNDS'),
-            name: 'y_axis_bounds',
-            status: 'two-input',
-            popper: t(
-              "Bounds for the Y-axis. When left empty, the bounds are dynamically defined based on the min/max of the data. Note that this feature will only expand the axis range. It won't narrow the data's extent.",
-            ),
-            values: [
-              {
-                placeholder: t('MIN'),
-                number: true,
-                name: 'min',
-              },
-              {
-                placeholder: t('MAX'),
-                number: true,
-                name: 'max',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
   {
     chart_name: 'big_number_total',
     collapses: [
@@ -1336,60 +702,12 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [
         collapse_label: t('Chart Options'),
         collapse_active: 'chart_options',
         forms: [
-          {
-            label: t('BIG NUMBER FONT SIZE'),
-            name: 'header_font_size',
-            status: 'select',
-            popper: t('Changing this control takes effect instantly'),
-            options: chartFormsOption.header_font_size,
-          },
-          {
-            label: t('SUBHEADER FONT SIZE'),
-            name: 'subheader_font_size',
-            popper: t('Changing this control takes effect instantly'),
-            status: 'select',
-          },
-          {
-            label: t('NUMBER FORMAT'),
-            name: 'number_format',
-            status: 'select',
-            popper: t(
-              'D3 format syntax: https://github.com/d3/d3-format Only applies when "Label Type" is set to show values.',
-            ),
-            options: [],
-          },
-          {
-            label: t('DATE FORMAT'),
-            name: 'time_format',
-            status: 'select',
-            popper: t('D3 format syntax: https://github.com/d3/d3-format'),
-            options: [],
-          },
-          {
-            label: t('CURRENCY FORMAT'),
-            name: 'currency_format',
-            status: 'two-select',
-            values: [
-              {
-                name: 'symbolPosition',
-                placeholder: t('Prefix or suffix'),
-                options: chartFormsOption.currency_format.symbolPosition,
-              },
-              {
-                name: 'symbol',
-                placeholder: t('Currency'),
-                options: chartFormsOption.currency_format.symbol,
-              },
-            ],
-          },
-          {
-            label: t('FORCE DATE FORMAT'),
-            name: 'force_timestamp_formatting',
-            status: 'checkbox',
-            popper: t(
-              'Use date formatting even when metric value is not a timestamp',
-            ),
-          },
+          bigNumberFontSize,
+          subheaderFontSize,
+          numberFormat,
+          currencyFormat,
+          dateFormat,
+          forceDateFormat,
           // need to Conditional Formatting
         ],
       },
@@ -1403,12 +721,7 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [
         collapse_popper_error: t('This section contains validation errors'),
         collapse_active: 'chart_options',
         forms: [
-          {
-            label: t('COLOR SCHEME'),
-            name: 'color_scheme',
-            status: 'color',
-            popper: t('The color scheme for rendering chart'),
-          },
+          colorScheme,
           {
             label: t('PERCENTAGE THRESHOLD'),
             name: 'show_labels_threshold',
@@ -1418,12 +731,10 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [
               'Minimum threshold in percentage points for showing labels.',
             ),
           },
-          {
-            label: t('SHOW LEGEND'),
-            name: 'show_legend',
-            status: 'checkbox',
-            popper: t('Whether to display a legend for the chart'),
-          },
+          showLegend,
+          type,
+          orientation,
+          margin,
           {
             label: t('LABEL TYPE'),
             name: 'label_type',
@@ -1431,38 +742,10 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [
             popper: t('What should be shown on the label?'),
             options: chartFormsOption.label_type,
           },
-          {
-            label: t('NUMBER FORMAT'),
-            name: 'number_format',
-            status: 'select',
-            popper: t(
-              'D3 format syntax: https://github.com/d3/d3-format Only applies when "Label Type" is set to show values.',
-            ),
-            options: [],
-          },
-          {
-            label: t('CURRENCY FORMAT'),
-            name: 'currency_format',
-            status: 'two-select',
-            values: [
-              {
-                name: 'symbolPosition',
-                placeholder: t('Prefix or suffix'),
-                options: chartFormsOption.currency_format.symbolPosition,
-              },
-              {
-                name: 'symbol',
-                placeholder: t('Currency'),
-                options: chartFormsOption.currency_format.symbol,
-              },
-            ],
-          },
-          {
-            label: t('SHOW LABELS'),
-            name: 'show_labels',
-            status: 'checkbox',
-            popper: t('Whether to display the labels.'),
-          },
+          numberFormat,
+          currencyFormat,
+          dateFormat,
+          showLabels,
           {
             label: t('PUT LABELS OUTSIDE'),
             name: 'labels_outside',
@@ -1504,62 +787,38 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [
             rangeConfig: {
               min: 0,
               max: 100,
-              step: 1,
-            },
-          },
-        ],
-      },
-    ],
-  },
-  {
-    chart_name: 'bubble_v2',
-    collapses: [
-      {
-        collapse_label: t('Chart Options'),
-        collapse_active: 'chart_options',
-        forms: [
-          {
-            label: t('COLOR SCHEME'),
-            name: 'color_scheme',
-            popper: t('The color scheme for rendering chart.'),
-            status: 'color',
-          },
-          {
-            label: t('SHOW LEGEND'),
-            name: 'show_legend',
-            popper: t('Whether to display a legend for the chart'),
-            status: 'checkbox',
-          },
-          {
-            label: t('TYPE'),
-            name: 'legendType',
-            popper: t('Legent type'),
-            status: 'select',
-          },
-          {
-            label: t('ORIENTATION'),
-            name: 'legendOrientation',
-            popper: t('Legent orientation'),
-            status: 'select',
-          },
-          {
-            label: t('MARGIN'),
-            name: 'legendMargin',
-            popper: t('Additional padding for legend'),
-            status: 'input',
-            number: true,
+              step: 1,
+            },
           },
+        ],
+      },
+    ],
+  },
+  {
+    chart_name: 'bubble_v2',
+    collapses: [
+      {
+        collapse_label: t('Chart Options'),
+        collapse_active: 'chart_options',
+        forms: [
+          colorScheme,
+          showLegend,
+          type,
+          orientation,
+          margin,
           {
             label: t('MAX BUBBLE SIZE'),
             name: 'max_bubble_size',
             popper: t('Changing this control takes effect instantly'),
             status: 'select',
+            options: [],
           },
           {
             label: t('BUBBLE SIZE NUMBER FORMAT'),
             name: 'max_bubble_size',
             popper: t('D3 format syntax: https://github.com/d3/d3-format'),
             status: 'select',
+            options: [],
           },
           {
             label: t('BUBBLE OPACITY'),
@@ -1568,43 +827,47 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [
               'Opacity of bubbles, 0 means completely transparent, 1 means opaque',
             ),
             status: 'range',
+            rangeConfig: {
+              min: 0,
+              max: 1,
+              step: 0.1,
+            },
           },
-          {
-            label: t('X AXIS TITLE'),
-            name: 'x_axis_label',
-            popper: t('Changing this control takes effect instantly'),
-            status: 'input',
-          },
+        ],
+      },
+      {
+        collapse_label: t('X Axis'),
+        collapse_active: 'x_axis',
+        forms: [
+          xAxisTitle,
           {
             label: t('ROTATE X AXIS LABEL'),
             name: 'xAxisLabelRotation',
             popper: t('Input field supports custom rotation. e.g. 30 for 30°'),
             status: 'select',
+            options: [],
           },
-          {
-            label: t('X AXIS TITLE MARGIN'),
-            name: 'x_axis_title_margin',
-            popper: t('Changing this control takes effect instantly'),
-            status: 'select',
-          },
+          { ...xAxisTitleMargin, label: t('X AXIS TITLE MARGIN') },
           {
             label: t('X AXIS FORMAT'),
             name: 'xAxisFormat',
             popper: t('D3 format syntax: https://github.com/d3/d3-format'),
             status: 'select',
+            options: [],
           },
           {
             label: t('LOGARITHMIC X-AXIS'),
             name: 'logXAxis',
             popper: t('Logarithmic x-axis'),
-            status: 'select',
-          },
-          {
-            label: t('Y AXIS TITLE'),
-            name: 'y_axis_label',
-            popper: t('Changing this control takes effect instantly'),
-            status: 'input',
+            status: 'checkbox',
           },
+        ],
+      },
+      {
+        collapse_label: t('Y Axis'),
+        collapse_active: 'y_axis',
+        forms: [
+          yAxisTitle,
           {
             label: t('ROTATE Y AXIS LABEL'),
             name: 'yAxisLabelRotation',
@@ -1612,82 +875,13 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [
             status: 'select',
             options: chartFormsOption.yAxisLabelRotation,
           },
-          {
-            label: t('Y AXIS FORMAT'),
-            name: 'y_axis_format',
-            popper: t('Changing this control takes effect instantly'),
-            status: 'select',
-          },
-          {
-            label: t('LOGARITHMIC Y-AXIS'),
-            name: 'logYAxis',
-            popper: t('Logarithmic y-axis'),
-            status: 'checkbox',
-          },
-          {
-            label: t('TRUNCATE X AXIS'),
-            name: 'truncateXAxis',
-            popper: t(
-              'Truncate X Axis. Can be overridden by specifying a min or max bound. Only applicable for numercal X axis.',
-            ),
-            status: 'checkbox',
-          },
-          {
-            label: t('TRUNCATE X AXIS'),
-            name: 'truncateXAxis',
-            popper: t(
-              'Truncate X Axis. Can be overridden by specifying a min or max bound. Only applicable for numercal X axis.',
-            ),
-            status: 'checkbox',
-          },
-          {
-            label: t('X AXIS BOUNDS'),
-            name: 'xAxisBounds',
-            popper: t(
-              "Bounds for numerical X axis. Not applicable for temporal or categorical axes. When left empty, the bounds are dynamically defined based on the min/max of the data. Note that this feature will only expand the axis range. It won't narrow the data's extent.",
-            ),
-            status: 'two-input',
-            values: [
-              {
-                placeholder: t('MIN'),
-                number: true,
-                name: 'min',
-              },
-              {
-                placeholder: t('MAX'),
-                number: true,
-                name: 'max',
-              },
-            ],
-          },
-          {
-            label: t('TRUNCATE Y AXIS'),
-            name: 'truncateYAxis',
-            popper: t(
-              'Truncate Y Axis. Can be overridden by specifying a min or max bound.',
-            ),
-            status: 'checkbox',
-          },
-          {
-            label: t('Y AXIS BOUNDS'),
-            name: 'xAxisBounds',
-            popper: t(
-              "Bounds for the Y-axis. When left empty, the bounds are dynamically defined based on the min/max of the data. Note that this feature will only expand the axis range. It won't narrow the data's extent.",
-            ),
-            status: 'two-input',
-            values: [
-              {
-                placeholder: t('MIN'),
-                number: true,
-                name: 'min',
-              },
-              {
-                placeholder: t('MAX'),
-                number: true,
-                name: 'max',
-              },
-            ],
-          },
+          yAxisTitleMargin,
+          yAxisFormat,
+          logarithmicYAxis,
+          truncateXAxis,
+          xAxisBounds,
+          truncateYAxis,
+          yAxisBounds,
         ],
       },
     ],
@@ -1699,45 +893,29 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [
         collapse_label: t('Chart Options'),
         collapse_active: 'chart_options',
         forms: [
-          {
-            label: t('COLOR SCHEME'),
-            name: 'color_scheme',
-            popper: t('The color scheme for rendering chart'),
-            status: 'color',
-          },
+          colorScheme,
           {
             label: t('NO OF BINS'),
             name: 'link_length',
             popper: t('Select the number of bins for the histogram'),
             status: 'select',
+            options: [],
           },
-          {
-            label: t('X AXIS LABEL'),
-            name: 'x_axis_label',
-            popper: t('Changing this control takes effect instantly.'),
-            status: 'input',
-          },
-          {
-            label: t('Y AXIS LABEL'),
-            name: 'y_axis_label',
-            popper: t('Changing this control takes effect instantly.'),
-            status: 'input',
-          },
-          {
-            label: t('LEGEND'),
-            name: 'show_legend',
-            popper: t('Whether to display the legend (toggles)'),
-            status: 'checkbox',
-          },
+          xAxisLabel,
+          yAxisLabel,
+          legend,
           {
             label: t('NORMALIZED'),
             name: 'normalized',
             popper: t('Whether to normalize the histogram'),
             status: 'checkbox',
           },
-          formFilters,
-          formRowLimit,
-          formDimensions,
+          {
+            label: t('CUMULATIVE'),
+            name: 'cumulative',
+            popper: t('Whether to make the histogram cumulative'),
+            status: 'checkbox',
+          },
         ],
       },
     ],
@@ -1750,77 +928,27 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [
         collapse_active: 'chart_options',
         collapse_popper_error: t('This section contains validation errors'),
         forms: [
-          formDimensions,
-          formMetric,
-          formFilters,
-          formRowLimit,
-          {
-            label: t('COLOR SCHEME'),
-            name: 'color_scheme',
-            status: 'color',
-          },
-          {
-            label: t('SHOW LEGEND'),
-            name: 'show_legend',
-            status: 'checkbox',
-            popper: t('Whether to display a legend for the chart'),
-          },
-          {
-            label: t('ORIENTATION'),
-            name: 'legendOrientation',
-            status: 'select',
-            popper: t('Legend Orientation'),
-          },
+          colorScheme,
+          showLegend,
+          orientation,
+          margin,
           {
-            label: t('MARGIN'),
-            name: 'legendMargin',
-            status: 'input',
-            popper: t('Additional padding for legend.'),
-            popperError: t('is expected to be an integer'),
-          },
-          {
-            label: t('NUMBER FORMAT'),
-            name: 'number_format',
+            label: t('LABEL CONTENTS'),
+            name: 'label_type',
             status: 'select',
-            popper: t(
-              'D3 format syntax: https://github.com/d3/d3-format Only applies when "Label Type" is set to show values.',
-            ),
+            popper: t('What should be shown as the label'),
+            options: [],
           },
           {
             label: t('TOOLTIP CONTENTS'),
             name: 'tooltip_label_type',
             status: 'select',
             popper: t('What should be shown as the tooltip label'),
+            options: [],
           },
-          {
-            label: t('LABEL CONTENTS'),
-            name: 'label_type',
-            status: 'select',
-            popper: t('What should be shown as the label'),
-          },
-          {
-            label: t('CURRENCY FORMAT'),
-            name: 'currency_format',
-            status: 'two-select',
-            values: [
-              {
-                name: 'symbolPosition',
-                placeholder: t('Prefix or suffix'),
-                options: chartFormsOption.currency_format.symbolPosition,
-              },
-              {
-                name: 'symbol',
-                placeholder: t('Currency'),
-                options: chartFormsOption.currency_format.symbol,
-              },
-            ],
-          },
-          {
-            label: t('SHOW LABELS'),
-            name: 'show_labels',
-            status: 'checkbox',
-            popper: t('Whether to display the labels.'),
-          },
+          numberFormat,
+          currencyFormat,
+          showLabels,
           {
             label: t('SHOW TOOLTIP LABELS'),
             name: 'show_tooltip_labels',
@@ -1831,7 +959,6 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [
       },
     ],
   },
-
   {
     chart_name: 'gauge_chart',
     collapses: [
@@ -1865,12 +992,7 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [
             popper: t('Angle at which to end progress axis'),
             status: 'input',
           },
-          {
-            label: t('COLOR SCHEME'),
-            name: 'color_scheme',
-            popper: t('The color scheme for rendering chart'),
-            status: 'color',
-          },
+          colorScheme,
           {
             label: t('FONT SIZE'),
             name: 'font_size',
@@ -1878,32 +1000,14 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [
               'Font size for axis labels, detail value and other text elements',
             ),
             status: 'range',
+            rangeConfig: {
+              min: 10,
+              max: 20,
+              step: 1,
+            },
           },
-          {
-            label: t('NUMBER FORMAT'),
-            name: 'font_size',
-            popper: t(
-              'Font size for axis labels, detail value and other text elements',
-            ),
-            status: 'select',
-          },
-          {
-            label: t('CURRENCY FORMAT'),
-            name: 'currency_format',
-            status: 'two-select',
-            values: [
-              {
-                name: 'symbolPosition',
-                placeholder: t('Prefix or suffix'),
-                options: chartFormsOption.currency_format.symbolPosition,
-              },
-              {
-                name: 'symbol',
-                placeholder: t('Currency'),
-                options: chartFormsOption.currency_format.symbol,
-              },
-            ],
-          },
+          numberFormat,
+          currencyFormat,
           {
             label: t('VALUE FORMAT'),
             name: 'value_formatter',
@@ -1941,8 +1045,13 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [
           {
             label: t('SPLIT NUMBER'),
             name: 'split_number',
-            status: 'range',
             popper: t('Number of split segments on the axis'),
+            status: 'range',
+            rangeConfig: {
+              min: 3,
+              max: 30,
+              step: 1,
+            },
           },
           {
             label: t('SHOW PROGRESS'),
@@ -1991,18 +1100,8 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [
         collapse_label: t('Chart Options'),
         collapse_active: 'chart_options',
         forms: [
-          {
-            label: t('SHOW VALUE'),
-            name: 'show_value',
-            popper: t('Show series values on the chart'),
-            status: 'checkbox',
-          },
-          {
-            label: t('SHOW LEGEND'),
-            name: 'show_legend',
-            popper: t('Whether to display a legend for the chart'),
-            status: 'checkbox',
-          },
+          showValue,
+          showLegend,
           {
             label: t('INCREASE'),
             name: 'increase_color',
@@ -2021,63 +1120,204 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [
             status: 'color',
             popper: t('Changing this color takes effect instantly'),
           },
+          xAxisLabel,
+          timeFormat,
+          xTickLayout,
+          yAxisLabel,
+          yAxisFormat,
+          currencyFormat,
+        ],
+      },
+    ],
+  },
+  {
+    chart_name: 'big_number',
+    collapses: [
+      {
+        collapse_label: t('Chart Options'),
+        collapse_active: 'chart_options',
+        forms: [
           {
-            label: t('X AXIS LABEL'),
-            name: 'x_axis_label',
-            status: 'input',
-            popper: t('Changing this control takes effect instantly'),
+            label: t('FIXED COLOR'),
+            name: 'increase_color',
+            status: 'color',
+            popper: t('Use this to define a static color for all circles'),
+          },
+          bigNumberFontSize,
+          subheaderFontSize,
+          numberFormat,
+          currencyFormat,
+          dateFormat,
+          forceDateFormat,
+        ],
+      },
+    ],
+  },
+  {
+    chart_name: 'echarts_timeseries_scatter',
+    collapses: [
+      collapseChartTitle,
+      {
+        collapse_label: t('Chart Options'),
+        collapse_active: 'chart_options',
+        forms: [
+          sortSeriesBy,
+          sortSeriesAscending,
+          colorScheme,
+          showValue,
+          stackedStyle,
+          marker,
+          markerSize,
+          dataZoom,
+          minorTicks,
+          showLegend,
+          type,
+          orientation,
+          margin,
+          timeFormat,
+          rotateXAxisLabel,
+          richTooltip,
+          tooltipSortByMetric,
+          tooltipTimeFormat,
+          yAxisFormat,
+          currencyFormat,
+          logarithmicYAxis,
+          minorSplitLine,
+          truncateXAxis,
+          xAxisBounds,
+          truncateYAxis,
+          yAxisBounds,
+        ],
+      },
+    ],
+  },
+  {
+    chart_name: 'pivot_table_v2',
+    collapses: [
+      {
+        collapse_label: t('Options'),
+        collapse_active: 'options',
+        forms: [
+          {
+            label: t('VALUE FORMAT'),
+            name: 'valueFormat',
+            popper: t('D3 format syntax: https://github.com/d3/d3-format'),
+            status: 'select',
+            options: chartFormsOption.y_axis_format,
           },
+          currencyFormat,
+          dateFormat,
           {
-            label: t('TIME FORMAT'),
-            name: 'x_axis_time_format',
+            label: t('SORT ROWS BY'),
+            name: 'rowOrder',
             status: 'select',
-            popper: t('x_axis_time_format'),
+            options: chartFormsOption.rowOrder,
           },
           {
-            label: t('X TICK LAYOUT'),
-            name: 'x_ticks_layout',
+            label: t('SORT COLUMNS BY'),
+            name: 'colOrder',
             status: 'select',
-            popper: t('The way the ticks are laid out on the X-axis'),
+            options: chartFormsOption.rowOrder,
           },
-
           {
-            label: t('Y AXIS LABEL'),
-            name: 'y_axis_label',
+            label: t('ROWS SUBTOTAL POSITION'),
+            name: '',
+            status: 'select',
+            options: [],
+          },
+          {
+            label: t('COLUMNS SUBTOTAL POSITION'),
+            name: '',
+            status: 'select',
+            options: [],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    chart_name: 'dist_bar',
+    collapses: [
+      {
+        collapse_label: t('Chart Options'),
+        collapse_active: 'chart_options',
+        forms: [
+          colorScheme,
+          legend,
+          {
+            label: t('BAR VALUES'),
+            name: 'show_bar_value',
+            status: 'checkbox',
+            popper: t('Show the value on top of the bar'),
+          },
+          richTooltip,
+          {
+            label: t('STACKED BARS'),
+            name: 'bar_stacked',
+            status: 'checkbox',
+            popper: t('Show the value on top of the bar'),
+          },
+          {
+            label: t('SORT BARS'),
+            name: 'order_bars',
+            status: 'checkbox',
+            popper: t('Sort bars by x labels.'),
+          },
+          yAxisFormat,
+          yAxisLabel,
+          { ...extraControls, name: 'show_controls' },
+          {
+            label: t('Y BOUNDS'),
+            name: 'y_axis_showminmax',
+            status: 'checkbox',
+            popper: t(
+              'Whether to display the min and max values of the Y-axis',
+            ),
+          },
+          yAxisBounds,
+        ],
+      },
+      {
+        collapse_label: t('X Axis'),
+        collapse_active: 'x_axis',
+        forms: [
+          {
+            label: t('X AXIS LABEL'),
+            name: 'x_axis_label',
             status: 'input',
-            popper: t('Changing this control takes effect instantly'),
           },
           {
-            label: t('Y AXIS FORMAT'),
-            name: 'y_axis_format',
+            label: t('BOTTOM MARGIN'),
+            name: 'bottom_margin',
+            popper: t(
+              'Bottom margin, in pixels, allowing for more room for axis labels',
+            ),
             status: 'select',
-            popper: t('D3 format syntax: https://github.com/d3/d3-format'),
-            options: chartFormsOption.y_axis_format,
+            options: [],
           },
+          xTickLayout,
           {
-            label: t('CURRENCY FORMAT'),
-            name: 'currency_format',
-            status: 'two-select',
-            values: [
-              {
-                name: 'symbolPosition',
-                placeholder: t('Prefix or suffix'),
-                options: chartFormsOption.currency_format.symbolPosition,
-              },
-              {
-                name: 'symbol',
-                placeholder: t('Currency'),
-                options: chartFormsOption.currency_format.symbol,
-              },
-            ],
+            label: t('REDUCE X TICKS'),
+            name: 'reduce_x_ticks',
+            popper: t(
+              'Reduces the number of X-axis ticks to be rendered. If true, the x-axis will not overflow and labels may be missing. If false, a minimum width will be applied to columns and the width may overflow into an horizontal scroll.',
+            ),
+            status: 'checkbox',
           },
-
-          formMetric,
-          formFilters,
-          formRowLimit,
         ],
       },
     ],
   },
+  {
+    chart_name: 'world_map',
+    collapses: [
+      {
+        collapse_label: t('Chart Options'),
+        collapse_active: 'chart_options',
+        forms: [yAxisFormat, currencyFormat],
+      },
+    ],
+  },
 ];
 
 export default DvtChartCustomize;
diff --git a/superset-frontend/src/pages/DvtChart/dvtChartDataOptions.ts b/superset-frontend/src/pages/DvtChart/dvtChartDataOptions.ts
index bc2adca8dfdcb..a1aeb9c5c1479 100644
--- a/superset-frontend/src/pages/DvtChart/dvtChartDataOptions.ts
+++ b/superset-frontend/src/pages/DvtChart/dvtChartDataOptions.ts
@@ -14,6 +14,7 @@ import {
   D3_FORMAT_OPTIONS,
   D3_TIME_FORMAT_OPTIONS,
 } from 'src/explore/controls';
+import { DvtSchemeColorData } from 'src/components/DvtSelectColorScheme/dvtSchemeColorData';
 
 const forecastSeasonality = [
   {
@@ -867,14 +868,14 @@ const chartFormsOption = {
     },
   ],
   stack: [
-    {
-      label: t('Stack'),
-      value: 'stack',
-    },
     {
       label: t('None'),
       value: '',
     },
+    {
+      label: t('Stack'),
+      value: 'Stack',
+    },
     {
       label: t('Stream'),
       value: 'Stream',
@@ -990,6 +991,25 @@ const chartFormsOption = {
     ...CategoricalPreset,
     ...schemes,
   ],
+  color_scheme: DvtSchemeColorData,
+  rowOrder: [
+    {
+      label: t('key a-z'),
+      value: 'key_a_to_z',
+    },
+    {
+      label: t('key z-a'),
+      value: 'key_z_to_a',
+    },
+    {
+      label: t('value ascending'),
+      value: 'value_a_to_z',
+    },
+    {
+      label: t('value descending'),
+      value: 'value_z_to_a',
+    },
+  ],
 };
 
 export { forecastSeasonality, chartFormsOption };
diff --git a/superset-frontend/src/pages/DvtChart/dvtChartFormPayloads.ts b/superset-frontend/src/pages/DvtChart/dvtChartFormPayloads.ts
index 85c8be5261c37..2a23a0efc3130 100644
--- a/superset-frontend/src/pages/DvtChart/dvtChartFormPayloads.ts
+++ b/superset-frontend/src/pages/DvtChart/dvtChartFormPayloads.ts
@@ -43,6 +43,7 @@ const lineChartPayload = [
   'timeseries_limit_metric',
   'tooltipTimeFormat',
   'truncateXAxis',
+  'truncateYAxis',
   'truncate_metric',
   'url_params',
   'viz_type',
@@ -240,6 +241,7 @@ const DvtChartFormPayloads: DvtChartFormPayloadsProps[] = [
       'size',
       'tooltipSizeFormat',
       'truncateXAxis',
+      'truncateYAxis',
       'url_params',
       'viz_type',
       'x',
@@ -274,31 +276,14 @@ const DvtChartFormPayloads: DvtChartFormPayloadsProps[] = [
       'color_scheme',
       'datasource',
       'extra_form_data',
-      'force',
       'groupby',
-      'link_length',
-      'result_format',
-      'result_type',
       'row_limit',
+      'link_length',
       'show_legend',
       'url_params',
       'viz_type',
     ],
-    queries: [
-      'annotation_layers',
-      'applied_time_extras',
-      'columns',
-      'custom_form_data',
-      'custom_params',
-      'extras',
-      'filters',
-      'metrics',
-      'order_desc',
-      'orderby',
-      'row_limit',
-      'series_limit',
-      'url_params',
-    ],
+    queries: [],
   },
   {
     viz_name: 'funnel',
diff --git a/superset-frontend/src/pages/DvtChart/index.tsx b/superset-frontend/src/pages/DvtChart/index.tsx
index d084200959a3f..d03f34d3e9124 100644
--- a/superset-frontend/src/pages/DvtChart/index.tsx
+++ b/superset-frontend/src/pages/DvtChart/index.tsx
@@ -40,7 +40,7 @@ import {
 import { objectIsEmptyForArray } from 'src/dvt-utils/object-is-empty-for-array';
 import openSelectMenuData from 'src/components/DvtOpenSelectMenu/dvtOpenSelectMenuData';
 import DvtChartData from './dvtChartData';
-// import DvtChartCustomize from './dvtChartDataCustomize';
+import DvtChartCustomize from './dvtChartDataCustomize';
 import DvtChartFormPayloads from './dvtChartFormPayloads';
 import {
   ChartDefaultSelectBars,
@@ -249,6 +249,7 @@ const DvtChart = () => {
     max_bubble_size: { label: '25', value: '25' },
     color_picker: { r: 0, g: 122, b: 135, a: 1 },
     color_scheme: { label: 'Superset Colors', id: 'supersetColors' },
+    truncateYAxis: true,
   });
   const [chartApiUrl, setChartApiUrl] = useState('');
   // const [exploreJsonUrl, setExploreJsonUrl] = useState('');
@@ -272,7 +273,7 @@ const DvtChart = () => {
     direction: 'desc',
   });
 
-  const onlyExploreJson = ['heatmap', 'dist_bar', 'world_map'];
+  const onlyExploreJson = ['heatmap', 'dist_bar', 'world_map', 'histogram'];
 
   useEffect(() => {
     if (selectedVizType) {
@@ -898,6 +899,9 @@ const DvtChart = () => {
             label: getFormData.max_bubble_size,
             value: getFormData.max_bubble_size,
           },
+          truncateYAxis: getFormData?.truncateYAxis
+            ? getFormData.truncateYAxis
+            : false,
         });
 
         setChartStatus('loading');
@@ -1184,6 +1188,16 @@ const DvtChart = () => {
   const checkObjectOrNullArrayFormation = (value: any) =>
     Object.entries(value).map(i => (i[1] ? Number(i[1]) : null));
 
+  const yAxisBoundsOnValueCharts = [
+    'echarts_timeseries_line',
+    'echarts_timeseries_bar',
+    'echarts_area',
+    'echarts_timeseries_scatter',
+    'bubble_v2',
+    'heatmap',
+    'dist_bar',
+  ];
+
   const formDataObj = {
     datasource: {
       id: selectedChart?.form_data?.url_params?.datasource_id,
@@ -1281,10 +1295,10 @@ const DvtChart = () => {
       y_axis_format:
         active === 'heatmap' ? values.y_axis_format.value : 'SMART_NUMBER',
       truncateXAxis: true,
-      y_axis_bounds:
-        active === 'heatmap'
-          ? checkObjectOrNullArrayFormation(values.y_axis_bounds)
-          : [null, null],
+      truncateYAxis: values.truncateYAxis,
+      y_axis_bounds: yAxisBoundsOnValueCharts.includes(active)
+        ? checkObjectOrNullArrayFormation(values.y_axis_bounds)
+        : [null, null],
       extra_form_data: {},
       force: false,
       result_format: 'json',
@@ -1342,7 +1356,6 @@ const DvtChart = () => {
       time_compare: values.time_compare,
       time_compare_b: values.time_compare_b,
       tooltipSortByMetric: undefined,
-      truncateYAxis: active === 'echarts_timeseries_scatter' ? true : undefined,
       xAxisBounds: undefined,
       xAxisForceCategorical: undefined,
       xAxisLabelRotation: undefined,
@@ -1474,6 +1487,7 @@ const DvtChart = () => {
       secondary_metric: metricsFormation('secondary_metric')[0],
       y_axis_bounds_secondary: [null, null],
       y_axis_format_secondary: 'SMART_NUMBER',
+      link_length: 5,
     },
     queries: [
       {
@@ -1764,13 +1778,16 @@ const DvtChart = () => {
     }
     if (chartFullPromise.error) {
       setChartStatus('failed');
+      const errorOrMessage = onlyExploreJson.includes(active)
+        ? 'error'
+        : 'message';
       if (chartFullPromise.error?.errors) {
         setChartData(chartFullPromise.error.errors);
-      } else if (chartFullPromise.error?.message) {
+      } else if (chartFullPromise.error?.[errorOrMessage]) {
         setChartData([
           {
-            error: chartFullPromise.error.message,
-            message: chartFullPromise.error.message,
+            error: chartFullPromise.error[errorOrMessage],
+            message: chartFullPromise.error[errorOrMessage],
           },
         ]);
       }
@@ -1969,8 +1986,8 @@ const DvtChart = () => {
     );
   };
 
-  const DataOrCustomize = chartTabs.value === 'customize' ? [] : DvtChartData;
-  // chartTabs.value === 'customize' ? DvtChartCustomize : DvtChartData;
+  const DataOrCustomize =
+    chartTabs.value === 'customize' ? DvtChartCustomize : DvtChartData;
 
   useEffect(
     () => () => {
diff --git a/superset-frontend/src/pages/DvtDashboardEdit/index.tsx b/superset-frontend/src/pages/DvtDashboardEdit/index.tsx
index b9da70c4957d8..a992fe477a26e 100644
--- a/superset-frontend/src/pages/DvtDashboardEdit/index.tsx
+++ b/superset-frontend/src/pages/DvtDashboardEdit/index.tsx
@@ -242,6 +242,7 @@ function DvtDashboardList() {
     const firstOrThenAddPosition = newRow ? position : firstCreatePosition;
     const gridChildren = firstOrThenAddPosition.GRID_ID.children;
     const indexBefore = gridChildren.indexOf(rowBefore);
+    const indexDropMove = gridChildren.indexOf(jsonDropMoveId);
 
     if (jsonDropNew) {
       setPosition({
@@ -263,15 +264,22 @@ function DvtDashboardList() {
         (v: string) => v !== jsonDropMoveId,
       );
 
+      const minusIndexBefore =
+        indexBefore === -1
+          ? gridChildren.length
+          : indexDropMove < indexBefore
+          ? indexBefore - 1
+          : indexBefore;
+
       setPosition({
         ...firstOrThenAddPosition,
         GRID_ID: {
           ...firstOrThenAddPosition.GRID_ID,
           children: rowIdRemovedGridChildren
-            .slice(0, indexBefore)
+            .slice(0, minusIndexBefore)
             .concat(
               jsonDropMoveId,
-              rowIdRemovedGridChildren.slice(indexBefore),
+              rowIdRemovedGridChildren.slice(minusIndexBefore),
             ),
         },
       });
@@ -566,7 +574,7 @@ function DvtDashboardList() {
     [],
   );
 
-  console.log(position);
+  // console.log(position);
 
   return (
     <StyledDashboardEdit>
diff --git a/superset-frontend/src/pages/DvtNewTrainedTable/index.tsx b/superset-frontend/src/pages/DvtNewTrainedTable/index.tsx
index b73a702dc6f6e..cfca7bcfe9331 100644
--- a/superset-frontend/src/pages/DvtNewTrainedTable/index.tsx
+++ b/superset-frontend/src/pages/DvtNewTrainedTable/index.tsx
@@ -84,6 +84,9 @@ function DvtNewTainedTable() {
               label_column: newTainedTableAddSelector.labelColumn?.value
                 ? newTainedTableAddSelector.labelColumn?.value
                 : undefined,
+              training_data_ratio: newTainedTableAddSelector.training_data_ratio
+                ? newTainedTableAddSelector.training_data_ratio
+                : undefined,
             },
           }
         : {
@@ -154,6 +157,7 @@ function DvtNewTainedTable() {
     { key: 'featureColumn' },
     { key: 'groupColumn' },
     { key: 'labelColumn' },
+    { key: 'training_data_ratio' },
   ];
 
   useEffect(() => {