diff --git a/__tests__/plots/static/gauge-default.ts b/__tests__/plots/static/gauge-default.ts
index 15fd6bfba2..54ee2f995c 100644
--- a/__tests__/plots/static/gauge-default.ts
+++ b/__tests__/plots/static/gauge-default.ts
@@ -2,7 +2,7 @@ import { G2Spec } from '../../../src';
 
 export function gaugeDefault(): G2Spec {
   return {
-    type: 'gauge',
+    type: 'view',
     data: {
       value: {
         target: 120,
@@ -10,5 +10,6 @@ export function gaugeDefault(): G2Spec {
         name: 'score',
       },
     },
+    children: [{ type: 'gauge' }],
   };
 }
diff --git a/src/composition/view.ts b/src/composition/view.ts
index eeca7ed19c..cf4802ff9f 100644
--- a/src/composition/view.ts
+++ b/src/composition/view.ts
@@ -5,6 +5,14 @@ import { mergeData } from './utils';
 
 export type ViewOptions = Omit<ViewComposition, 'type'>;
 
+function fallback(markValue, viewValue) {
+  if (markValue === false || markValue === null) return false;
+  if (markValue === undefined) return viewValue;
+  const object = typeof markValue === 'boolean' ? {} : markValue;
+  if (typeof viewValue === 'object') return deepMix({}, viewValue, object);
+  return object;
+}
+
 /**
  * @todo Propagate more options to children.(e.g. filter)
  * @todo Propagate encode options to children. This is useful for Matrix composition.
@@ -18,8 +26,8 @@ export const View: CC<ViewOptions> = () => {
       data: viewData,
       scale: viewScale = {},
       axis: viewAxis = {},
-      legend: viewLegend = {},
-      encode: viewEncode = {},
+      legend: viewLegend,
+      encode: viewEncode,
       transform: viewTransform = [],
       ...rest
     } = restOptions;
@@ -27,8 +35,8 @@ export const View: CC<ViewOptions> = () => {
       ({
         data,
         scale = {},
-        axis = {},
-        legend = {},
+        axis,
+        legend,
         encode = {},
         transform = [],
         ...rest
@@ -37,8 +45,8 @@ export const View: CC<ViewOptions> = () => {
         scale: deepMix({}, viewScale, scale),
         encode: deepMix({}, viewEncode, encode),
         transform: [...viewTransform, ...transform],
-        axis: axis && viewAxis ? deepMix({}, viewAxis, axis) : false,
-        legend: legend && viewLegend ? deepMix({}, viewLegend, legend) : false,
+        axis: fallback(axis, viewAxis),
+        legend: fallback(legend, viewLegend),
         ...rest,
       }),
     );
diff --git a/src/mark/gauge.ts b/src/mark/gauge.ts
index 3a3c1d758f..d84579fd2c 100644
--- a/src/mark/gauge.ts
+++ b/src/mark/gauge.ts
@@ -194,6 +194,7 @@ export const Gauge: CC<GaugeOptions> = (options) => {
   // pointer + pin
   const indicatorStyle = filterPrefixObject(style, ['pointer', 'pin']);
 
+  console.log(resOptions);
   return [
     deepMix({}, DEFAULT_OPTIONS, {
       type: 'interval',
diff --git a/src/runtime/plot.ts b/src/runtime/plot.ts
index eda2538967..f3f0f21997 100644
--- a/src/runtime/plot.ts
+++ b/src/runtime/plot.ts
@@ -500,8 +500,16 @@ async function transformMarks(
       const { composite = true } = props;
       if (!composite) flattenMarks.push(mark);
       else {
+        // Unwrap data from { value: data } to data,
+        // then the composite mark can process the normalized data.
+        const { data } = mark;
+        const newMark = {
+          ...mark,
+          data: data ? (Array.isArray(data) ? data : data.value) : data,
+        };
+
         // Convert composite mark to marks.
-        const marks = await useMark(mark, context);
+        const marks = await useMark(newMark, context);
         const M = Array.isArray(marks) ? marks : [marks];
         discovered.unshift(...M.map((d, i) => ({ ...d, key: `${key}-${i}` })));
       }
diff --git a/src/runtime/transform.ts b/src/runtime/transform.ts
index f7b94394e1..9b16e1a2e5 100644
--- a/src/runtime/transform.ts
+++ b/src/runtime/transform.ts
@@ -42,9 +42,20 @@ export async function applyDataTransform(
   const transform = [connector, ...T];
   const transformFunctions = transform.map(useData);
   const transformedData = await composeAsync(transformFunctions)(data);
+
+  // Maintain the consistency of shape between input and output data.
+  // If the shape of raw data is like { value: any }
+  // and the returned transformedData is Object,
+  // returns the wrapped data: { value: transformedData },
+  // otherwise returns the processed tabular data.
+  const newData =
+    data && !Array.isArray(data) && !Array.isArray(transformedData)
+      ? { value: transformedData }
+      : transformedData;
+
   return [
     Array.isArray(transformedData) ? indexOf(transformedData) : [],
-    { ...mark, data: transformedData },
+    { ...mark, data: newData },
   ];
 }