diff --git a/__tests__/main.ts b/__tests__/main.ts
index 58080fe7b8..a80e831a65 100644
--- a/__tests__/main.ts
+++ b/__tests__/main.ts
@@ -166,11 +166,7 @@ function createSpecRender(object) {
       window.__g_instances__ = [canvas];
       const renderChart = mounted ? renderToMountedElement : render;
       before?.();
-      const node = renderChart(
-        { theme: 'classic', ...options },
-        { canvas },
-        () => after?.(),
-      );
+      const node = renderChart(options, { canvas }, () => after?.());
 
       // Append nodes.
       if (node instanceof HTMLElement) container.append(node);
diff --git a/__tests__/plots/animation/events-interval-encode.ts b/__tests__/plots/animation/events-interval-encode.ts
index 636595366e..051dc01ec9 100644
--- a/__tests__/plots/animation/events-interval-encode.ts
+++ b/__tests__/plots/animation/events-interval-encode.ts
@@ -8,8 +8,6 @@ export function eventsIntervalEncode(): G2Spec {
   return {
     type: 'interval',
     width: 720,
-    paddingTop: 60,
-    paddingLeft: 100,
     data: events,
     coordinate: { transform: [{ type: 'transpose' }] },
     scale: {
diff --git a/__tests__/plots/animation/stocks-keyframe.ts b/__tests__/plots/animation/stocks-keyframe.ts
index 64a6083647..a00211aa3c 100644
--- a/__tests__/plots/animation/stocks-keyframe.ts
+++ b/__tests__/plots/animation/stocks-keyframe.ts
@@ -4,6 +4,7 @@ import { G2Spec } from '../../../src';
 
 const facetLine = (data) => ({
   type: 'facetRect',
+  paddingLeft: 60,
   data,
   encode: {
     y: 'symbol',
@@ -29,6 +30,7 @@ const facetLine = (data) => ({
 
 const facetArea = (data) => ({
   type: 'facetRect',
+  paddingLeft: 60,
   data,
   encode: {
     y: 'symbol',
@@ -141,7 +143,7 @@ const groupBar = (data) => ({
     key: (_, i) => i,
   },
   axis: {
-    x: { tickFilter: (d) => false },
+    x: { tickFilter: (_) => false },
   },
 });
 
@@ -157,7 +159,7 @@ const stackBar = (data) => ({
     key: (_, i) => i,
   },
   axis: {
-    x: { tickFilter: (d) => false },
+    x: { tickFilter: (_) => false },
   },
 });
 
@@ -186,6 +188,9 @@ const pie = (data) => ({
     color: 'symbol',
     key: 'symbol',
   },
+  legend: {
+    color: { layout: { justifyContent: 'center' } },
+  },
   style: {
     radius: 10,
   },
@@ -204,9 +209,10 @@ const rose = (data) => ({
   },
   scale: { x: { padding: 0 } },
   style: { radius: 10 },
-  axis: {
-    y: false,
+  legend: {
+    color: { layout: { justifyContent: 'center' } },
   },
+  axis: { y: false },
 });
 
 const keyframes = [
@@ -228,18 +234,12 @@ const keyframes = [
  */
 export async function stocksKeyframe(): Promise<G2Spec> {
   const data = await csv('data/stocks2.csv', autoType);
-  const paddingLeft = 50;
-  const paddingRight = 60;
-
+  // @ts-ignore
   return {
     type: 'timingKeyframe',
     width: 800,
     // @ts-ignore
-    children: keyframes.map((plot) => ({
-      ...plot(data),
-      paddingLeft,
-      paddingRight,
-    })),
+    children: keyframes.map((plot) => plot(data)),
   };
 }
 
diff --git a/__tests__/plots/api/chart-auto-fit.ts b/__tests__/plots/api/chart-auto-fit.ts
index ff6c583354..a14db49b8e 100644
--- a/__tests__/plots/api/chart-auto-fit.ts
+++ b/__tests__/plots/api/chart-auto-fit.ts
@@ -15,7 +15,6 @@ export function chartAutoFit(context) {
   container.appendChild(wrapperDiv);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
     autoFit: true,
     canvas,
diff --git a/__tests__/plots/api/chart-axis-label-formatter.ts b/__tests__/plots/api/chart-axis-label-formatter.ts
index 739603517f..f39dd693c0 100644
--- a/__tests__/plots/api/chart-axis-label-formatter.ts
+++ b/__tests__/plots/api/chart-axis-label-formatter.ts
@@ -3,7 +3,7 @@ import { Chart } from '../../../src';
 export function chartAxisLabelFormatter(context) {
   const { container, canvas } = context;
 
-  const chart = new Chart({ theme: 'classic', container, canvas });
+  const chart = new Chart({ container, canvas });
 
   chart.data([
     {
diff --git a/__tests__/plots/api/chart-change-data-empty.ts b/__tests__/plots/api/chart-change-data-empty.ts
index 6ec6141c86..6b014c62bc 100644
--- a/__tests__/plots/api/chart-change-data-empty.ts
+++ b/__tests__/plots/api/chart-change-data-empty.ts
@@ -4,13 +4,11 @@ export function chartChangeDataEmpty(context) {
   const { container, canvas } = context;
 
   const chart = new Chart({
-    theme: 'classic',
     container,
     canvas,
   });
 
   chart.options({
-    theme: 'classic',
     type: 'line',
     clip: true,
     data: {
diff --git a/__tests__/plots/api/chart-change-data-facet.ts b/__tests__/plots/api/chart-change-data-facet.ts
index 16e0b069bd..4d7b57381c 100644
--- a/__tests__/plots/api/chart-change-data-facet.ts
+++ b/__tests__/plots/api/chart-change-data-facet.ts
@@ -11,7 +11,7 @@ export function chartChangeDataFacet(context) {
   const div = document.createElement('div');
   container.appendChild(div);
 
-  const chart = new Chart({ theme: 'classic', container: div, canvas });
+  const chart = new Chart({ container: div, canvas });
 
   const view = chart
     .facetRect()
diff --git a/__tests__/plots/api/chart-change-data-legend.ts b/__tests__/plots/api/chart-change-data-legend.ts
index 7aab3d65fe..1727767e8e 100644
--- a/__tests__/plots/api/chart-change-data-legend.ts
+++ b/__tests__/plots/api/chart-change-data-legend.ts
@@ -4,7 +4,6 @@ export function chartChangeDataLegend(context) {
   const { container, canvas } = context;
 
   const chart = new Chart({
-    theme: 'classic',
     container,
     canvas,
   });
@@ -21,7 +20,6 @@ export function chartChangeDataLegend(context) {
   ];
 
   chart.options({
-    theme: 'classic',
     type: 'interval',
     data,
     encode: {
diff --git a/__tests__/plots/api/chart-change-size-polar.ts b/__tests__/plots/api/chart-change-size-polar.ts
index b35d6e1b9e..ad0e2dbf11 100644
--- a/__tests__/plots/api/chart-change-size-polar.ts
+++ b/__tests__/plots/api/chart-change-size-polar.ts
@@ -12,7 +12,7 @@ export function chartChangeSizePolar(context) {
   const div = document.createElement('div');
   container.appendChild(div);
 
-  const chart = new Chart({ theme: 'classic', container: div, canvas });
+  const chart = new Chart({ container: div, canvas });
 
   chart.options({
     type: 'view',
diff --git a/__tests__/plots/api/chart-change-size.ts b/__tests__/plots/api/chart-change-size.ts
index 47adb2efd2..7c8dd71042 100644
--- a/__tests__/plots/api/chart-change-size.ts
+++ b/__tests__/plots/api/chart-change-size.ts
@@ -12,10 +12,8 @@ export function chartChangeSize(context) {
   container.appendChild(div);
 
   const chart = new Chart({
-    theme: 'classic',
     container: div,
     canvas,
-    padding: 'auto',
   });
 
   chart.data([
diff --git a/__tests__/plots/api/chart-emit-brush-highlight-axis-cross.ts b/__tests__/plots/api/chart-emit-brush-highlight-axis-cross.ts
index 0de09773c3..15760b5cc4 100644
--- a/__tests__/plots/api/chart-emit-brush-highlight-axis-cross.ts
+++ b/__tests__/plots/api/chart-emit-brush-highlight-axis-cross.ts
@@ -17,7 +17,6 @@ export function chartEmitBrushHighlightAxisCross(context) {
   container.appendChild(wrapperDiv);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
     canvas,
   });
diff --git a/__tests__/plots/api/chart-emit-brush-highlight-x.ts b/__tests__/plots/api/chart-emit-brush-highlight-x.ts
index b67c45a3b3..c0b4a5baa3 100644
--- a/__tests__/plots/api/chart-emit-brush-highlight-x.ts
+++ b/__tests__/plots/api/chart-emit-brush-highlight-x.ts
@@ -17,9 +17,7 @@ export function chartEmitBrushHighlightX(context) {
   container.appendChild(wrapperDiv);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
-    paddingBottom: 120,
     width: 1000,
     canvas,
   });
diff --git a/__tests__/plots/api/chart-emit-click-tooltip.ts b/__tests__/plots/api/chart-emit-click-tooltip.ts
index 21fda88f4f..c11c483697 100644
--- a/__tests__/plots/api/chart-emit-click-tooltip.ts
+++ b/__tests__/plots/api/chart-emit-click-tooltip.ts
@@ -4,7 +4,6 @@ export function chartEmitClickTooltip(context) {
   const { container, canvas } = context;
 
   const chart = new Chart({
-    theme: 'classic',
     container: container,
     canvas,
   });
diff --git a/__tests__/plots/api/chart-emit-element-highlight.ts b/__tests__/plots/api/chart-emit-element-highlight.ts
index 9cba667afd..c92e622a5f 100644
--- a/__tests__/plots/api/chart-emit-element-highlight.ts
+++ b/__tests__/plots/api/chart-emit-element-highlight.ts
@@ -17,9 +17,7 @@ export function chartEmitElementHighlight(context) {
   container.appendChild(wrapperDiv);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
-    padding: 'auto',
     canvas,
   });
 
diff --git a/__tests__/plots/api/chart-emit-element-select-single.ts b/__tests__/plots/api/chart-emit-element-select-single.ts
index a395d613ff..ad59a497c2 100644
--- a/__tests__/plots/api/chart-emit-element-select-single.ts
+++ b/__tests__/plots/api/chart-emit-element-select-single.ts
@@ -17,9 +17,7 @@ export function chartEmitElementSelectSingle(context) {
   container.appendChild(wrapperDiv);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
-    padding: 'auto',
     canvas,
   });
 
diff --git a/__tests__/plots/api/chart-emit-element-select.ts b/__tests__/plots/api/chart-emit-element-select.ts
index 2e285a2a55..7670037010 100644
--- a/__tests__/plots/api/chart-emit-element-select.ts
+++ b/__tests__/plots/api/chart-emit-element-select.ts
@@ -17,9 +17,7 @@ export function chartEmitElementSelect(context) {
   container.appendChild(wrapperDiv);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
-    padding: 'auto',
     canvas,
   });
 
diff --git a/__tests__/plots/api/chart-emit-item-tooltip-hide-content.ts b/__tests__/plots/api/chart-emit-item-tooltip-hide-content.ts
index 54fd43b161..cb02b6e795 100644
--- a/__tests__/plots/api/chart-emit-item-tooltip-hide-content.ts
+++ b/__tests__/plots/api/chart-emit-item-tooltip-hide-content.ts
@@ -18,7 +18,6 @@ export function chartEmitItemTooltipHideContent(context) {
   container.appendChild(p);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
     canvas,
   });
diff --git a/__tests__/plots/api/chart-emit-item-tooltip.ts b/__tests__/plots/api/chart-emit-item-tooltip.ts
index 486ff03b21..f25de5b51e 100644
--- a/__tests__/plots/api/chart-emit-item-tooltip.ts
+++ b/__tests__/plots/api/chart-emit-item-tooltip.ts
@@ -18,7 +18,6 @@ export function chartEmitItemTooltip(context) {
   container.appendChild(p);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
     canvas,
   });
diff --git a/__tests__/plots/api/chart-emit-legend-filter.ts b/__tests__/plots/api/chart-emit-legend-filter.ts
index 4a9f80f6a3..0d1e5d0587 100644
--- a/__tests__/plots/api/chart-emit-legend-filter.ts
+++ b/__tests__/plots/api/chart-emit-legend-filter.ts
@@ -17,7 +17,6 @@ export function chartEmitLegendFilter(context) {
   container.appendChild(wrapperDiv);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
     canvas,
   });
diff --git a/__tests__/plots/api/chart-emit-legend-highlight.ts b/__tests__/plots/api/chart-emit-legend-highlight.ts
index adb6dcaba8..800a20636e 100644
--- a/__tests__/plots/api/chart-emit-legend-highlight.ts
+++ b/__tests__/plots/api/chart-emit-legend-highlight.ts
@@ -18,13 +18,11 @@ export function chartEmitLegendHighlight(context) {
   container.appendChild(wrapperDiv);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
     canvas,
   });
 
   chart.options({
-    paddingLeft: 60,
     type: 'interval',
     data: profit,
     axis: { y: { labelFormatter: '~s' } },
diff --git a/__tests__/plots/api/chart-emit-pie-tooltip.ts b/__tests__/plots/api/chart-emit-pie-tooltip.ts
index fb887aec3f..e430a57219 100644
--- a/__tests__/plots/api/chart-emit-pie-tooltip.ts
+++ b/__tests__/plots/api/chart-emit-pie-tooltip.ts
@@ -18,7 +18,6 @@ export function chartEmitPieTooltip(context) {
   container.appendChild(p);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
     canvas,
   });
diff --git a/__tests__/plots/api/chart-emit-scrollbar-filter.ts b/__tests__/plots/api/chart-emit-scrollbar-filter.ts
index 93685208d2..1fcba68caf 100644
--- a/__tests__/plots/api/chart-emit-scrollbar-filter.ts
+++ b/__tests__/plots/api/chart-emit-scrollbar-filter.ts
@@ -17,9 +17,7 @@ export function chartEmitScrollbarFilter(context) {
   container.appendChild(wrapperDiv);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
-    paddingBottom: 120,
     width: 400,
     canvas,
     clip: true,
diff --git a/__tests__/plots/api/chart-emit-series-tooltip.ts b/__tests__/plots/api/chart-emit-series-tooltip.ts
index 7aa4b13b34..33c4c68d94 100644
--- a/__tests__/plots/api/chart-emit-series-tooltip.ts
+++ b/__tests__/plots/api/chart-emit-series-tooltip.ts
@@ -18,7 +18,6 @@ export function chartEmitSeriesTooltip(context) {
   container.appendChild(p);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
     canvas,
   });
diff --git a/__tests__/plots/api/chart-emit-slider-filter.ts b/__tests__/plots/api/chart-emit-slider-filter.ts
index aa4c78a8af..8308e54b5f 100644
--- a/__tests__/plots/api/chart-emit-slider-filter.ts
+++ b/__tests__/plots/api/chart-emit-slider-filter.ts
@@ -17,10 +17,7 @@ export function chartEmitSliderFilter(context) {
   container.appendChild(wrapperDiv);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
-    paddingLeft: 80,
-    paddingBottom: 120,
     canvas,
   });
 
diff --git a/__tests__/plots/api/chart-hom-mark.ts b/__tests__/plots/api/chart-hom-mark.ts
index 2f2e897867..c80810f20d 100644
--- a/__tests__/plots/api/chart-hom-mark.ts
+++ b/__tests__/plots/api/chart-hom-mark.ts
@@ -25,7 +25,7 @@ function HOMMark(options) {
 export function chartHOMMark(context) {
   const { container, canvas } = context;
 
-  const chart = new Chart({ theme: 'classic', container, canvas });
+  const chart = new Chart({ container, canvas });
 
   chart.data([
     { genre: 'Sports', sold: 275 },
diff --git a/__tests__/plots/api/chart-on-brush-filter.ts b/__tests__/plots/api/chart-on-brush-filter.ts
index 368d0a6bd6..2db9256805 100644
--- a/__tests__/plots/api/chart-on-brush-filter.ts
+++ b/__tests__/plots/api/chart-on-brush-filter.ts
@@ -4,7 +4,6 @@ export function chartOnBrushFilter(context) {
   const { container, canvas } = context;
 
   const chart = new Chart({
-    theme: 'classic',
     container,
     canvas,
   });
diff --git a/__tests__/plots/api/chart-on-focus-context.ts b/__tests__/plots/api/chart-on-focus-context.ts
index 60875a7eb0..d538a1feb9 100644
--- a/__tests__/plots/api/chart-on-focus-context.ts
+++ b/__tests__/plots/api/chart-on-focus-context.ts
@@ -8,7 +8,6 @@ export function chartOnFocusContext(context) {
   container.appendChild(focusContainer);
 
   const focusView = new Chart({
-    theme: 'classic',
     container: focusContainer,
     canvas: canvas1,
   });
@@ -30,7 +29,6 @@ export function chartOnFocusContext(context) {
   container.appendChild(contextContainer);
 
   const contextView = new Chart({
-    theme: 'classic',
     container: contextContainer,
     canvas: canvas2,
   });
diff --git a/__tests__/plots/api/chart-on-item-element.ts b/__tests__/plots/api/chart-on-item-element.ts
index 4bc4d73ad5..c9b1c5403d 100644
--- a/__tests__/plots/api/chart-on-item-element.ts
+++ b/__tests__/plots/api/chart-on-item-element.ts
@@ -3,7 +3,7 @@ import { Chart } from '../../../src';
 export function chartOnItemElement(context) {
   const { container, canvas } = context;
 
-  const chart = new Chart({ theme: 'classic', container, canvas });
+  const chart = new Chart({ container, canvas });
 
   chart.data([
     { genre: 'Sports', sold: 275 },
diff --git a/__tests__/plots/api/chart-on-series-element.ts b/__tests__/plots/api/chart-on-series-element.ts
index 0fa72b12ba..56ba4b60d3 100644
--- a/__tests__/plots/api/chart-on-series-element.ts
+++ b/__tests__/plots/api/chart-on-series-element.ts
@@ -4,7 +4,7 @@ import { temperatures } from '../../data/temperatures';
 export function chartOnSeriesElement(context) {
   const { container, canvas } = context;
 
-  const chart = new Chart({ theme: 'classic', container, canvas });
+  const chart = new Chart({ container, canvas });
 
   chart.data(temperatures);
 
diff --git a/__tests__/plots/api/chart-on-text-click.ts b/__tests__/plots/api/chart-on-text-click.ts
index e999ffb8d8..cce4a0551b 100644
--- a/__tests__/plots/api/chart-on-text-click.ts
+++ b/__tests__/plots/api/chart-on-text-click.ts
@@ -3,7 +3,7 @@ import { Chart } from '../../../src';
 export function chartOnTextClick(context) {
   const { container, canvas } = context;
 
-  const chart = new Chart({ theme: 'classic', container, canvas });
+  const chart = new Chart({ container, canvas });
 
   chart.text().style({
     x: 290, // 像素坐标
diff --git a/__tests__/plots/api/chart-options-change-data.ts b/__tests__/plots/api/chart-options-change-data.ts
index bb3638b7d5..5159090a34 100644
--- a/__tests__/plots/api/chart-options-change-data.ts
+++ b/__tests__/plots/api/chart-options-change-data.ts
@@ -12,7 +12,6 @@ export function chartOptionsChangeData(context) {
   container.appendChild(div);
 
   const chart = new Chart({
-    theme: 'classic',
     container,
     canvas,
   });
diff --git a/__tests__/plots/api/chart-options-composite-mark.ts b/__tests__/plots/api/chart-options-composite-mark.ts
index 6c8cc0f0fe..b0dcbbf40a 100644
--- a/__tests__/plots/api/chart-options-composite-mark.ts
+++ b/__tests__/plots/api/chart-options-composite-mark.ts
@@ -18,7 +18,7 @@ function Pie(options, context) {
 export function chartOptionsCompositeMark(context) {
   const { container, canvas } = context;
 
-  const chart = new Chart({ theme: 'classic', container, canvas });
+  const chart = new Chart({ container, canvas });
 
   chart.options({
     type: Pie,
diff --git a/__tests__/plots/api/chart-options.ts b/__tests__/plots/api/chart-options.ts
index 60f09b13cf..61d10d481b 100644
--- a/__tests__/plots/api/chart-options.ts
+++ b/__tests__/plots/api/chart-options.ts
@@ -9,7 +9,6 @@ export function chartOptions(context) {
   });
 
   chart.options({
-    theme: 'classic',
     type: 'line',
     clip: true,
     title: '标题',
diff --git a/__tests__/plots/api/chart-render-brush-end.ts b/__tests__/plots/api/chart-render-brush-end.ts
index 41ec2d20bb..af913cb6c9 100644
--- a/__tests__/plots/api/chart-render-brush-end.ts
+++ b/__tests__/plots/api/chart-render-brush-end.ts
@@ -13,9 +13,7 @@ export function chartRenderBrushEnd(context) {
   container.appendChild(wrapperDiv);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
-    paddingBottom: 120,
     width: 1000,
     canvas,
   });
diff --git a/__tests__/plots/api/chart-render-clear-animation.ts b/__tests__/plots/api/chart-render-clear-animation.ts
index 651fe15ea9..2d9a069088 100644
--- a/__tests__/plots/api/chart-render-clear-animation.ts
+++ b/__tests__/plots/api/chart-render-clear-animation.ts
@@ -11,7 +11,7 @@ export function chartRenderClearAnimation(context) {
   const div = document.createElement('div');
   container.appendChild(div);
 
-  const chart = new Chart({ theme: 'classic', container: div, canvas });
+  const chart = new Chart({ container: div, canvas });
 
   chart.data([
     { genre: 'Sports', sold: 275 },
diff --git a/__tests__/plots/api/chart-render-event.ts b/__tests__/plots/api/chart-render-event.ts
index feea4cf7d6..5b65e68896 100644
--- a/__tests__/plots/api/chart-render-event.ts
+++ b/__tests__/plots/api/chart-render-event.ts
@@ -3,7 +3,7 @@ import { Chart } from '../../../src';
 export function chartRenderEvent(context) {
   const { container, canvas } = context;
 
-  const chart = new Chart({ theme: 'classic', container, canvas });
+  const chart = new Chart({ container, canvas });
 
   chart.data([
     { genre: 'Sports', sold: 275 },
diff --git a/__tests__/plots/api/chart-render-update-attributes.ts b/__tests__/plots/api/chart-render-update-attributes.ts
index 31041c7418..9bf3155362 100644
--- a/__tests__/plots/api/chart-render-update-attributes.ts
+++ b/__tests__/plots/api/chart-render-update-attributes.ts
@@ -13,7 +13,6 @@ export function chartRenderUpdateAttributes(context) {
   container.appendChild(wrapperDiv);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
     canvas,
   });
diff --git a/__tests__/plots/api/chart-render-update-non-animation.ts b/__tests__/plots/api/chart-render-update-non-animation.ts
index 7f86c7df68..fb8eeea13e 100644
--- a/__tests__/plots/api/chart-render-update-non-animation.ts
+++ b/__tests__/plots/api/chart-render-update-non-animation.ts
@@ -13,7 +13,6 @@ export function chartRenderUpdateNonAnimation(context) {
   container.appendChild(wrapperDiv);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
     canvas,
   });
diff --git a/__tests__/plots/api/chart-tooltip-multi-chart.ts b/__tests__/plots/api/chart-tooltip-multi-chart.ts
index 8376b9f47b..ac8bbd1cc4 100644
--- a/__tests__/plots/api/chart-tooltip-multi-chart.ts
+++ b/__tests__/plots/api/chart-tooltip-multi-chart.ts
@@ -24,7 +24,6 @@ export function chartTooltipMultiChart(context) {
   container.appendChild(view0Container);
 
   const view0 = new Chart({
-    theme: 'classic',
     container: view0Container,
     canvas: canvas1,
   });
@@ -38,7 +37,6 @@ export function chartTooltipMultiChart(context) {
   container.appendChild(view1Container);
 
   const view1 = new Chart({
-    theme: 'classic',
     container: view1Container,
     canvas: canvas2,
   });
diff --git a/__tests__/plots/api/mark-change-data-tooltip.ts b/__tests__/plots/api/mark-change-data-tooltip.ts
index 38049717b0..ebfa3e86d8 100644
--- a/__tests__/plots/api/mark-change-data-tooltip.ts
+++ b/__tests__/plots/api/mark-change-data-tooltip.ts
@@ -10,7 +10,7 @@ export function markChangeDataTooltip(context) {
   const div = document.createElement('div');
   container.appendChild(div);
 
-  const chart = new Chart({ theme: 'classic', container: div, canvas });
+  const chart = new Chart({ container: div, canvas });
 
   const line = chart
     .line()
diff --git a/__tests__/plots/api/mark-change-data.ts b/__tests__/plots/api/mark-change-data.ts
index 1a64ed2b36..cacfe16525 100644
--- a/__tests__/plots/api/mark-change-data.ts
+++ b/__tests__/plots/api/mark-change-data.ts
@@ -10,7 +10,7 @@ export function markChangeData(context) {
   const div = document.createElement('div');
   container.appendChild(div);
 
-  const chart = new Chart({ theme: 'classic', container: div, canvas });
+  const chart = new Chart({ container: div, canvas });
 
   chart.data([
     { genre: 'Sports', sold: 275 },
diff --git a/__tests__/plots/api/register-data-transform.ts b/__tests__/plots/api/register-data-transform.ts
index 3ae9bb1c03..b546d9463e 100644
--- a/__tests__/plots/api/register-data-transform.ts
+++ b/__tests__/plots/api/register-data-transform.ts
@@ -12,7 +12,7 @@ export function registerDataTransform(context) {
       }));
   });
 
-  const chart = new Chart({ theme: 'classic', container, canvas });
+  const chart = new Chart({ container, canvas });
 
   chart.data({
     value: [
diff --git a/__tests__/plots/api/register-shape.ts b/__tests__/plots/api/register-shape.ts
index a62282b234..d6b72a97e0 100644
--- a/__tests__/plots/api/register-shape.ts
+++ b/__tests__/plots/api/register-shape.ts
@@ -19,7 +19,7 @@ export function registerShape(context) {
     };
   });
 
-  const chart = new Chart({ theme: 'classic', container, canvas });
+  const chart = new Chart({ container, canvas });
 
   chart.data([
     { genre: 'Sports', sold: 275 },
diff --git a/__tests__/plots/api/view-facetCircle.ts b/__tests__/plots/api/view-facetCircle.ts
index 09d01cc454..347cb8e0b7 100644
--- a/__tests__/plots/api/view-facetCircle.ts
+++ b/__tests__/plots/api/view-facetCircle.ts
@@ -28,7 +28,6 @@ export function viewFacetCircle(context) {
 
   const chart = new Chart({
     container: container,
-    theme: 'classic',
     canvas,
   });
 
diff --git a/__tests__/plots/interaction/cars3-line-brush-axis.ts b/__tests__/plots/interaction/cars3-line-brush-axis.ts
index 30bf699165..bbbb3d1cbe 100644
--- a/__tests__/plots/interaction/cars3-line-brush-axis.ts
+++ b/__tests__/plots/interaction/cars3-line-brush-axis.ts
@@ -63,6 +63,7 @@ export function cars3LineBrushAxis(): G2Spec {
     ],
     interaction: {
       brushAxisHighlight: true,
+      tooltip: { series: false },
     },
   };
 }
diff --git a/__tests__/plots/interaction/countries-annotation-slider-filter.ts b/__tests__/plots/interaction/countries-annotation-slider-filter.ts
index fae6aacfc7..d4eb346e19 100644
--- a/__tests__/plots/interaction/countries-annotation-slider-filter.ts
+++ b/__tests__/plots/interaction/countries-annotation-slider-filter.ts
@@ -6,7 +6,6 @@ export function countriesAnnotationSliderFilter(): G2Spec {
   return {
     type: 'view',
     theme: 'classic',
-    padding: 'auto',
     data: {
       type: 'fetch',
       value: 'data/countries.json',
diff --git a/__tests__/plots/interaction/indices-line-chart-index-series.ts b/__tests__/plots/interaction/indices-line-chart-index-series.ts
index 923294f57b..c0a3407e1c 100644
--- a/__tests__/plots/interaction/indices-line-chart-index-series.ts
+++ b/__tests__/plots/interaction/indices-line-chart-index-series.ts
@@ -8,14 +8,9 @@ export async function indicesLineChartIndexSeries(): Promise<G2Spec> {
   return {
     type: 'line',
     width: 800,
-    paddingLeft: 50,
     data,
-    scale: {
-      y: { type: 'log' },
-    },
-    axis: {
-      y: { labelAutoRotate: false },
-    },
+    scale: { y: { type: 'log' } },
+    axis: { y: { labelAutoRotate: false } },
     legend: false,
     encode: {
       x: 'Date',
diff --git a/__tests__/plots/interaction/mock-area-slider-filter-label.ts b/__tests__/plots/interaction/mock-area-slider-filter-label.ts
index e150638ea5..674eb191df 100644
--- a/__tests__/plots/interaction/mock-area-slider-filter-label.ts
+++ b/__tests__/plots/interaction/mock-area-slider-filter-label.ts
@@ -5,7 +5,6 @@ import { SLIDER_CLASS_NAME } from '../../../src/interaction/sliderFilter';
 export function mockAreaSliderFilterLabel(): G2Spec {
   return {
     type: 'area',
-    padding: 'auto',
     data: [
       { year: '1991', value: 15468 },
       { year: '1992', value: 16100 },
diff --git a/__tests__/plots/interaction/profit-interval-slider-filter.ts b/__tests__/plots/interaction/profit-interval-slider-filter.ts
index 0b30591d8e..8756454d22 100644
--- a/__tests__/plots/interaction/profit-interval-slider-filter.ts
+++ b/__tests__/plots/interaction/profit-interval-slider-filter.ts
@@ -7,7 +7,6 @@ export function profitIntervalSliderFilter(): G2Spec {
   return {
     type: 'interval',
     data: profit,
-    paddingLeft: 100,
     encode: {
       x: 'month',
       y: ['end', 'start'],
diff --git a/__tests__/plots/interaction/stateages-interval-normalized.ts b/__tests__/plots/interaction/stateages-interval-normalized.ts
index fc564a354a..da0b33748e 100644
--- a/__tests__/plots/interaction/stateages-interval-normalized.ts
+++ b/__tests__/plots/interaction/stateages-interval-normalized.ts
@@ -5,7 +5,6 @@ import { step } from './utils';
 export function stateAgesIntervalNormalized(): G2Spec {
   return {
     type: 'interval',
-    paddingLeft: 50,
     width: 800,
     height: 1000,
     data: {
diff --git a/__tests__/plots/interaction/unemployment-area-legend-filter-pages.ts b/__tests__/plots/interaction/unemployment-area-legend-filter-pages.ts
index 54b48c9ed8..11b395fd14 100644
--- a/__tests__/plots/interaction/unemployment-area-legend-filter-pages.ts
+++ b/__tests__/plots/interaction/unemployment-area-legend-filter-pages.ts
@@ -16,6 +16,7 @@ export function unemploymentAreaLegendFilterPages(): G2Spec {
       y: 'unemployed',
       color: 'industry',
     },
+    legend: { color: { maxRows: 1 } },
     interaction: { tooltip: false },
   };
 }
diff --git a/__tests__/plots/static/aapl-interval-date-encode-x.ts b/__tests__/plots/static/aapl-interval-date-encode-x.ts
index 7bf0b2bd42..a4a5ed2bc9 100644
--- a/__tests__/plots/static/aapl-interval-date-encode-x.ts
+++ b/__tests__/plots/static/aapl-interval-date-encode-x.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function aaplIntervalDateEncodeX(): G2Spec {
   return {
     type: 'interval',
-    padding: 'auto',
     height: 720,
     data: {
       type: 'fetch',
diff --git a/__tests__/plots/static/aapl-line-axis-y-hide.ts b/__tests__/plots/static/aapl-line-axis-y-hide.ts
index 2b9f46a3fc..1dcb3f874b 100644
--- a/__tests__/plots/static/aapl-line-axis-y-hide.ts
+++ b/__tests__/plots/static/aapl-line-axis-y-hide.ts
@@ -4,7 +4,6 @@ export function aaplLineAxisYHide(): G2Spec {
   return {
     type: 'line',
     height: 200,
-    paddingLeft: 80,
     data: {
       type: 'fetch',
       value: 'data/aapl.csv',
diff --git a/__tests__/plots/static/aapl-line-basic-sample-label-filter.ts b/__tests__/plots/static/aapl-line-basic-sample-label-filter.ts
index 026c5703cd..d86fd7f885 100644
--- a/__tests__/plots/static/aapl-line-basic-sample-label-filter.ts
+++ b/__tests__/plots/static/aapl-line-basic-sample-label-filter.ts
@@ -27,7 +27,7 @@ export function aaplLineBasicSampleLabelFilter(): G2Spec {
         },
       },
       y: {
-        labelFilter: (d) => {
+        tickFilter: (d) => {
           return d % 100 === 0;
         },
       },
diff --git a/__tests__/plots/static/aapl-line-basic-transpose.ts b/__tests__/plots/static/aapl-line-basic-transpose.ts
index bb7903005d..6c509522e7 100644
--- a/__tests__/plots/static/aapl-line-basic-transpose.ts
+++ b/__tests__/plots/static/aapl-line-basic-transpose.ts
@@ -5,7 +5,6 @@ export function aaplLineBasicTranspose(): G2Spec {
     type: 'line',
     height: 640,
     width: 480,
-    paddingLeft: 50,
     data: {
       type: 'fetch',
       value: 'data/aapl.csv',
diff --git a/__tests__/plots/static/aapl-line-scrollbar.ts b/__tests__/plots/static/aapl-line-scrollbar.ts
index f3e1a54e7d..88ae541258 100644
--- a/__tests__/plots/static/aapl-line-scrollbar.ts
+++ b/__tests__/plots/static/aapl-line-scrollbar.ts
@@ -3,7 +3,7 @@ import { G2Spec } from '../../../src';
 export function aaplLineScrollbar(): G2Spec {
   return {
     type: 'line',
-    paddingLeft: 80,
+    clip: true,
     data: {
       type: 'fetch',
       value: 'data/aapl.csv',
diff --git a/__tests__/plots/static/aapl-line-slider-transposed.ts b/__tests__/plots/static/aapl-line-slider-transposed.ts
index c27c84ce76..36a45bcd7f 100644
--- a/__tests__/plots/static/aapl-line-slider-transposed.ts
+++ b/__tests__/plots/static/aapl-line-slider-transposed.ts
@@ -4,7 +4,6 @@ import { G2Spec } from '../../../src';
 export function aaplLineSliderTransposed(): G2Spec {
   return {
     type: 'line',
-    paddingLeft: 80,
     data: {
       type: 'fetch',
       value: 'data/aapl.csv',
@@ -15,8 +14,8 @@ export function aaplLineSliderTransposed(): G2Spec {
       y: 'close',
     },
     axis: {
-      x: { title: false, size: 28 },
-      y: { title: false, size: 36 },
+      x: { title: false },
+      y: { title: false },
     },
     slider: {
       x: {
diff --git a/__tests__/plots/static/aapl-line-slider.ts b/__tests__/plots/static/aapl-line-slider.ts
index 3dbb383046..04ef4e2f25 100644
--- a/__tests__/plots/static/aapl-line-slider.ts
+++ b/__tests__/plots/static/aapl-line-slider.ts
@@ -14,8 +14,8 @@ export function aaplLineSlider(): G2Spec {
       y: 'close',
     },
     axis: {
-      x: { title: false, size: 28 },
-      y: { title: false, size: 36 },
+      x: { title: false },
+      y: { title: false },
     },
     slider: {
       x: {
diff --git a/__tests__/plots/static/acme-crop-income-interval-connector.ts b/__tests__/plots/static/acme-crop-income-interval-connector.ts
index 8bc91d800c..71a57b576e 100644
--- a/__tests__/plots/static/acme-crop-income-interval-connector.ts
+++ b/__tests__/plots/static/acme-crop-income-interval-connector.ts
@@ -23,12 +23,10 @@ export function acmeCropIncomeIntervalConnector() {
 
   return {
     type: 'view',
-    paddingBottom: 100,
-    paddingLeft: 60,
     paddingTop: 40,
     data: acmeCropIncome,
     axis: {
-      x: { title: false, labelTransform: 'rotate(-90)' },
+      x: { labelTransform: 'rotate(-90)' },
       y: { labelFormatter: '~s' },
     },
     legend: false,
diff --git a/__tests__/plots/static/alphabet-interval-auto-padding-custom.ts b/__tests__/plots/static/alphabet-interval-auto-padding-custom.ts
index 46eb6be325..152adf41e7 100644
--- a/__tests__/plots/static/alphabet-interval-auto-padding-custom.ts
+++ b/__tests__/plots/static/alphabet-interval-auto-padding-custom.ts
@@ -4,7 +4,6 @@ import { G2Spec } from '../../../src';
 export function alphabetIntervalAutoPaddingCustom(): G2Spec {
   return {
     type: 'interval',
-    padding: 'auto',
     transform: [{ type: 'sortX', by: 'y', reverse: true }],
     data: {
       type: 'fetch',
diff --git a/__tests__/plots/static/alphabet-interval-auto-padding-d3-format.ts b/__tests__/plots/static/alphabet-interval-auto-padding-d3-format.ts
index e80411e733..85694db2f7 100644
--- a/__tests__/plots/static/alphabet-interval-auto-padding-d3-format.ts
+++ b/__tests__/plots/static/alphabet-interval-auto-padding-d3-format.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function alphabetIntervalAutoPaddingD3Format(): G2Spec {
   return {
     type: 'interval',
-    padding: 'auto',
     transform: [{ type: 'sortX', by: 'y', reverse: true }],
     data: {
       type: 'fetch',
diff --git a/__tests__/plots/static/alphabet-interval-auto-padding-label-hide.ts b/__tests__/plots/static/alphabet-interval-auto-padding-label-hide.ts
index f6915e8f15..961f4bc277 100644
--- a/__tests__/plots/static/alphabet-interval-auto-padding-label-hide.ts
+++ b/__tests__/plots/static/alphabet-interval-auto-padding-label-hide.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function alphabetIntervalAutoPaddingLabelHide(): G2Spec {
   return {
     type: 'interval',
-    padding: 'auto',
     transform: [{ type: 'sortX', by: 'y', reverse: true }],
     data: {
       type: 'fetch',
diff --git a/__tests__/plots/static/alphabet-interval-auto-padding-max-ratio.ts b/__tests__/plots/static/alphabet-interval-auto-padding-max-ratio.ts
index 99af1ed74b..72b46ef469 100644
--- a/__tests__/plots/static/alphabet-interval-auto-padding-max-ratio.ts
+++ b/__tests__/plots/static/alphabet-interval-auto-padding-max-ratio.ts
@@ -7,7 +7,6 @@ function appendZero(count) {
 export function alphabetIntervalAutoPaddingMaxRatio(): G2Spec {
   return {
     type: 'interval',
-    padding: 'auto',
     margin: 50,
     inset: 10,
     transform: [{ type: 'sortX', by: 'y', reverse: true }],
diff --git a/__tests__/plots/static/alphabet-interval-auto-padding-no-title.ts b/__tests__/plots/static/alphabet-interval-auto-padding-no-title.ts
index 4b035bf10f..822d9ba7ef 100644
--- a/__tests__/plots/static/alphabet-interval-auto-padding-no-title.ts
+++ b/__tests__/plots/static/alphabet-interval-auto-padding-no-title.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function alphabetIntervalAutoPaddingNoTitle(): G2Spec {
   return {
     type: 'interval',
-    padding: 'auto',
     transform: [{ type: 'sortX', by: 'y', reverse: true }],
     data: {
       type: 'fetch',
diff --git a/__tests__/plots/static/alphabet-interval-auto-padding-position.ts b/__tests__/plots/static/alphabet-interval-auto-padding-position.ts
index 5c2cf64111..3b6e3797a4 100644
--- a/__tests__/plots/static/alphabet-interval-auto-padding-position.ts
+++ b/__tests__/plots/static/alphabet-interval-auto-padding-position.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function alphabetIntervalAutoPaddingPosition(): G2Spec {
   return {
     type: 'interval',
-    padding: 'auto',
     transform: [{ type: 'sortX', by: 'y', reverse: true }],
     data: {
       type: 'fetch',
diff --git a/__tests__/plots/static/alphabet-interval-auto-padding-rotate.ts b/__tests__/plots/static/alphabet-interval-auto-padding-rotate.ts
index 20524963e2..c294de1cb6 100644
--- a/__tests__/plots/static/alphabet-interval-auto-padding-rotate.ts
+++ b/__tests__/plots/static/alphabet-interval-auto-padding-rotate.ts
@@ -4,7 +4,6 @@ export function alphabetIntervalAutoRotate(): G2Spec {
   return {
     type: 'interval',
     width: 800,
-    padding: 'auto',
     transform: [{ type: 'sortX', by: 'y', reverse: true }],
     data: {
       type: 'fetch',
diff --git a/__tests__/plots/static/alphabet-interval-auto-padding-slider.ts b/__tests__/plots/static/alphabet-interval-auto-padding-slider.ts
index 16082eb652..ce9bc46373 100644
--- a/__tests__/plots/static/alphabet-interval-auto-padding-slider.ts
+++ b/__tests__/plots/static/alphabet-interval-auto-padding-slider.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function alphabetIntervalAutoPaddingSlider(): G2Spec {
   return {
     type: 'interval',
-    padding: 'auto',
     transform: [{ type: 'sortX', by: 'y', reverse: true }],
     data: {
       type: 'fetch',
diff --git a/__tests__/plots/static/alphabet-interval-auto-padding-style.ts b/__tests__/plots/static/alphabet-interval-auto-padding-style.ts
index 75f70f16d0..141ba7596b 100644
--- a/__tests__/plots/static/alphabet-interval-auto-padding-style.ts
+++ b/__tests__/plots/static/alphabet-interval-auto-padding-style.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function alphabetIntervalAutoPaddingStyle(): G2Spec {
   return {
     type: 'interval',
-    padding: 'auto',
     transform: [{ type: 'sortX', by: 'y', reverse: true }],
     data: {
       type: 'fetch',
diff --git a/__tests__/plots/static/alphabet-interval-auto-padding.ts b/__tests__/plots/static/alphabet-interval-auto-padding.ts
index 10d90c4fe4..f68a0b98c7 100644
--- a/__tests__/plots/static/alphabet-interval-auto-padding.ts
+++ b/__tests__/plots/static/alphabet-interval-auto-padding.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function alphabetIntervalAutoPadding(): G2Spec {
   return {
     type: 'interval',
-    padding: 'auto',
     transform: [{ type: 'sortX', by: 'y', reverse: true }],
     data: {
       type: 'fetch',
diff --git a/__tests__/plots/static/alphabet-interval-axis.ts b/__tests__/plots/static/alphabet-interval-axis.ts
index 6f8a25951f..e1fafd9fba 100644
--- a/__tests__/plots/static/alphabet-interval-axis.ts
+++ b/__tests__/plots/static/alphabet-interval-axis.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function alphabetIntervalAxis(): G2Spec {
   return {
     type: 'view',
-    padding: 'auto',
     children: [
       {
         type: 'interval',
diff --git a/__tests__/plots/static/alphabet-interval-render-to-mounted-element.ts b/__tests__/plots/static/alphabet-interval-render-to-mounted-element.ts
index 7b4c096f1b..97a0c8e6c3 100644
--- a/__tests__/plots/static/alphabet-interval-render-to-mounted-element.ts
+++ b/__tests__/plots/static/alphabet-interval-render-to-mounted-element.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function alphabetIntervalRenderToMountedGroup(): G2Spec {
   return {
     type: 'interval',
-    paddingLeft: 60,
     data: {
       type: 'fetch',
       value: 'data/alphabet.csv',
diff --git a/__tests__/plots/static/alphabet-interval-space-layer.ts b/__tests__/plots/static/alphabet-interval-space-layer.ts
index db01d13723..07fefa98e3 100644
--- a/__tests__/plots/static/alphabet-interval-space-layer.ts
+++ b/__tests__/plots/static/alphabet-interval-space-layer.ts
@@ -10,7 +10,6 @@ export function alphabetIntervalSpaceLayer(): G2Spec {
     children: [
       {
         type: 'interval',
-        paddingLeft: 50,
         transform: [{ type: 'sortX', by: 'y', reverse: true }],
         axis: {
           y: { labelFormatter: '.0%' },
diff --git a/__tests__/plots/static/alphabet-interval-title-auto.ts b/__tests__/plots/static/alphabet-interval-title-auto.ts
index b45cde2dad..5140f7b5f3 100644
--- a/__tests__/plots/static/alphabet-interval-title-auto.ts
+++ b/__tests__/plots/static/alphabet-interval-title-auto.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function alphabetIntervalTitleAuto(): G2Spec {
   return {
     type: 'interval',
-    padding: 'auto',
     title: {
       title: 'Use frequency of keyboard keys',
       subtitle: 'The mostest frequency letter are E, T, A.',
diff --git a/__tests__/plots/static/alphabet-interval-view-style.ts b/__tests__/plots/static/alphabet-interval-view-style.ts
index 40ec03ed2e..c2be8ff447 100644
--- a/__tests__/plots/static/alphabet-interval-view-style.ts
+++ b/__tests__/plots/static/alphabet-interval-view-style.ts
@@ -16,6 +16,7 @@ export function alphabetIntervalViewStyle(): G2Spec {
         },
         axis: {
           y: { labelFormatter: '.0%' },
+          x: false,
         },
         encode: {
           x: 'letter',
diff --git a/__tests__/plots/static/alphabet-interval.ts b/__tests__/plots/static/alphabet-interval.ts
index d092fa9a51..36de8ac009 100644
--- a/__tests__/plots/static/alphabet-interval.ts
+++ b/__tests__/plots/static/alphabet-interval.ts
@@ -14,7 +14,6 @@ export function alphabetInterval(): G2Spec {
     encode: {
       x: 'letter',
       y: 'frequency',
-      color: 'steelblue',
     },
   };
 }
diff --git a/__tests__/plots/static/anscombe-point-facet-rect-row.ts b/__tests__/plots/static/anscombe-point-facet-rect-row.ts
index 5b8b93896d..36104c70a2 100644
--- a/__tests__/plots/static/anscombe-point-facet-rect-row.ts
+++ b/__tests__/plots/static/anscombe-point-facet-rect-row.ts
@@ -5,7 +5,8 @@ export function anscombePointFacetRectRow(): G2Spec {
     type: 'facetRect',
     width: 928,
     height: 270,
-    paddingBottom: 50,
+    paddingLeft: 60,
+    paddingBottom: 60,
     data: {
       type: 'fetch',
       value: 'data/anscombe.csv',
diff --git a/__tests__/plots/static/athletes-rect-bin-legend-style.ts b/__tests__/plots/static/athletes-rect-bin-legend-style.ts
index 82d21b8239..3dff6630de 100644
--- a/__tests__/plots/static/athletes-rect-bin-legend-style.ts
+++ b/__tests__/plots/static/athletes-rect-bin-legend-style.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function athletesRectBinLegendStyle(): G2Spec {
   return {
     type: 'rect',
-    padding: 'auto',
     data: {
       type: 'fetch',
       value: 'data/athletes.csv',
diff --git a/__tests__/plots/static/barley-line-trail.ts b/__tests__/plots/static/barley-line-trail.ts
index e092e464ab..e963c4958d 100644
--- a/__tests__/plots/static/barley-line-trail.ts
+++ b/__tests__/plots/static/barley-line-trail.ts
@@ -17,8 +17,8 @@ export async function barleyLineTrail(): Promise<G2Spec> {
   return {
     type: 'facetRect',
     data,
-    paddingLeft: 120,
-    paddingBottom: 100,
+    paddingLeft: 140,
+    paddingBottom: 40,
     encode: { x: 'site' },
     children: [
       {
diff --git a/__tests__/plots/static/barley-point-facet-rect-col-z-index.ts b/__tests__/plots/static/barley-point-facet-rect-col-z-index.ts
index a3828eab83..85d969ce38 100644
--- a/__tests__/plots/static/barley-point-facet-rect-col-z-index.ts
+++ b/__tests__/plots/static/barley-point-facet-rect-col-z-index.ts
@@ -12,8 +12,8 @@ export async function barleyPointFacetRectColZIndex(): Promise<G2Spec> {
     encode: {
       y: 'site',
     },
-    paddingLeft: 130,
-    paddingRight: 120,
+    paddingLeft: 140,
+    paddingRight: 130,
     paddingBottom: 60,
     scale: {
       y: {
diff --git a/__tests__/plots/static/barley-point-facet-rect-col.ts b/__tests__/plots/static/barley-point-facet-rect-col.ts
index b8f35b1ab0..cb478abb59 100644
--- a/__tests__/plots/static/barley-point-facet-rect-col.ts
+++ b/__tests__/plots/static/barley-point-facet-rect-col.ts
@@ -12,8 +12,8 @@ export async function barleyPointFacetRectCol(): Promise<G2Spec> {
     encode: {
       y: 'site',
     },
-    paddingLeft: 130,
-    paddingRight: 120,
+    paddingLeft: 140,
+    paddingRight: 130,
     paddingBottom: 60,
     scale: {
       y: {
diff --git a/__tests__/plots/static/blockchain-line-badge-annotation.ts b/__tests__/plots/static/blockchain-line-badge-annotation.ts
index ae7712fd16..ac7a439bc0 100644
--- a/__tests__/plots/static/blockchain-line-badge-annotation.ts
+++ b/__tests__/plots/static/blockchain-line-badge-annotation.ts
@@ -5,6 +5,7 @@ export function blockChainLineBadgeAnnotation(): G2Spec {
     type: 'view',
     height: 300,
     width: 640,
+    insetTop: 30,
     data: {
       type: 'fetch',
       value: 'data/blockchain.json',
diff --git a/__tests__/plots/static/body-point-scatter-plot-opacity.ts b/__tests__/plots/static/body-point-scatter-plot-opacity.ts
index 7eae448b8e..50f750fe5a 100644
--- a/__tests__/plots/static/body-point-scatter-plot-opacity.ts
+++ b/__tests__/plots/static/body-point-scatter-plot-opacity.ts
@@ -13,9 +13,7 @@ export function bodyPointScatterPlotOpacity(): G2Spec {
       opacity: 'weight',
     },
     legend: {
-      opacity: {
-        size: 100,
-      },
+      opacity: {},
     },
   };
 }
diff --git a/__tests__/plots/static/body-point-scatter-plot-size-opacity.ts b/__tests__/plots/static/body-point-scatter-plot-size-opacity.ts
index 1d9bf49ab3..5cf9e50395 100644
--- a/__tests__/plots/static/body-point-scatter-plot-size-opacity.ts
+++ b/__tests__/plots/static/body-point-scatter-plot-size-opacity.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function bodyPointScatterPlotSizeOpacity(): G2Spec {
   return {
     type: 'point',
-    padding: 'auto',
     data: {
       type: 'fetch',
       value: 'data/body.json',
diff --git a/__tests__/plots/static/body-point-scatter-plot.ts b/__tests__/plots/static/body-point-scatter-plot.ts
index 0d9c103c28..2cb5721205 100644
--- a/__tests__/plots/static/body-point-scatter-plot.ts
+++ b/__tests__/plots/static/body-point-scatter-plot.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function bodyPointScatterPlot(): G2Spec {
   return {
     type: 'point',
-    padding: 'auto',
     data: {
       type: 'fetch',
       value: 'data/body.json',
@@ -14,11 +13,6 @@ export function bodyPointScatterPlot(): G2Spec {
       size: 'weight',
       color: 'red',
     },
-    legend: {
-      color: {
-        size: 40,
-      },
-    },
   };
 }
 
diff --git a/__tests__/plots/static/browser-line-area-trending-auto-padding.ts b/__tests__/plots/static/browser-line-area-trending-auto-padding.ts
index 371f3cb405..235d03b5ff 100644
--- a/__tests__/plots/static/browser-line-area-trending-auto-padding.ts
+++ b/__tests__/plots/static/browser-line-area-trending-auto-padding.ts
@@ -5,7 +5,6 @@ export function browserLineAreaTrendingAutoPadding(): G2Spec {
   return {
     type: 'view',
     data: browser,
-    padding: 'auto',
     style: {
       viewFill: '#4e79a7',
       plotFill: '#f28e2c',
diff --git a/__tests__/plots/static/cars2-point-constant-color-size.ts b/__tests__/plots/static/cars2-point-constant-color-size.ts
index 316e8a35f7..0e5bfd6f43 100644
--- a/__tests__/plots/static/cars2-point-constant-color-size.ts
+++ b/__tests__/plots/static/cars2-point-constant-color-size.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function cars2PointConstantColorSize(): G2Spec {
   return {
     type: 'point',
-    padding: 'auto',
     data: {
       type: 'fetch',
       value: 'data/cars2.csv',
diff --git a/__tests__/plots/static/cars2-point-ordinal-size.ts b/__tests__/plots/static/cars2-point-ordinal-size.ts
index 37d4b9a640..1275f601c3 100644
--- a/__tests__/plots/static/cars2-point-ordinal-size.ts
+++ b/__tests__/plots/static/cars2-point-ordinal-size.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function cars2PointOrdinalSize(): G2Spec {
   return {
     type: 'point',
-    padding: 'auto',
     data: {
       type: 'fetch',
       value: 'data/cars2.csv',
diff --git a/__tests__/plots/static/cars3-line-parallel-horizontal.ts b/__tests__/plots/static/cars3-line-parallel-horizontal.ts
index 96053f903a..b5cb8c59b6 100644
--- a/__tests__/plots/static/cars3-line-parallel-horizontal.ts
+++ b/__tests__/plots/static/cars3-line-parallel-horizontal.ts
@@ -13,6 +13,8 @@ export function cars3LineParallelHorizontal(): G2Spec {
   return {
     type: 'line',
     width: 800,
+    paddingLeft: 30,
+    paddingRight: 30,
     data: {
       type: 'fetch',
       value: 'data/cars3.csv',
diff --git a/__tests__/plots/static/cars3-line-parallel-vertical.ts b/__tests__/plots/static/cars3-line-parallel-vertical.ts
index 9e36f81260..61e8755ae0 100644
--- a/__tests__/plots/static/cars3-line-parallel-vertical.ts
+++ b/__tests__/plots/static/cars3-line-parallel-vertical.ts
@@ -13,6 +13,7 @@ export function cars3LineParallelVertical(): G2Spec {
   return {
     type: 'line',
     height: 800,
+    paddingBottom: 30,
     data: {
       type: 'fetch',
       value: 'data/cars3.csv',
@@ -41,6 +42,7 @@ export function cars3LineParallelVertical(): G2Spec {
         size: 50,
         length: 300,
         labelSpacing: 0,
+        crossPadding: 20,
       },
     },
     axis: Object.fromEntries(
diff --git a/__tests__/plots/static/commits-point-grouped-layout.ts b/__tests__/plots/static/commits-point-grouped-layout.ts
index 245540e4e4..9663b36088 100644
--- a/__tests__/plots/static/commits-point-grouped-layout.ts
+++ b/__tests__/plots/static/commits-point-grouped-layout.ts
@@ -5,7 +5,7 @@ export function commitsPointGroupedLayout(): G2Spec {
     type: 'view',
     height: 300,
     paddingLeft: 50,
-    paddingBottom: 40,
+    paddingBottom: 60,
     paddingRight: 30,
     paddingTop: 20,
     marginLeft: 40,
diff --git a/__tests__/plots/static/commits-point-grouped-legend-flex-center.ts b/__tests__/plots/static/commits-point-grouped-legend-flex-center.ts
index ed6cb996dc..dc525a38b3 100644
--- a/__tests__/plots/static/commits-point-grouped-legend-flex-center.ts
+++ b/__tests__/plots/static/commits-point-grouped-legend-flex-center.ts
@@ -5,7 +5,6 @@ export function commitsPointGroupedLegendFlexCenter(): G2Spec {
     type: 'point',
     height: 300,
     inset: 10,
-    padding: 'auto',
     frame: true,
     data: {
       type: 'fetch',
diff --git a/__tests__/plots/static/commits-point-grouped-legend-flex-right.ts b/__tests__/plots/static/commits-point-grouped-legend-flex-right.ts
index ae0072eeba..1dec045953 100644
--- a/__tests__/plots/static/commits-point-grouped-legend-flex-right.ts
+++ b/__tests__/plots/static/commits-point-grouped-legend-flex-right.ts
@@ -5,7 +5,6 @@ export function commitsPointGroupedLegendFlexRight(): G2Spec {
     type: 'point',
     height: 300,
     inset: 10,
-    padding: 'auto',
     frame: true,
     data: {
       type: 'fetch',
diff --git a/__tests__/plots/static/commits-point-grouped-legend-independent.ts b/__tests__/plots/static/commits-point-grouped-legend-independent.ts
index 65cc9ea127..7cd0feca80 100644
--- a/__tests__/plots/static/commits-point-grouped-legend-independent.ts
+++ b/__tests__/plots/static/commits-point-grouped-legend-independent.ts
@@ -5,7 +5,6 @@ export function commitsPointGroupedLegendIndependent(): G2Spec {
     type: 'point',
     height: 300,
     inset: 10,
-    padding: 'auto',
     frame: true,
     data: {
       type: 'fetch',
diff --git a/__tests__/plots/static/commits-point-grouped-legend-position-bottom.ts b/__tests__/plots/static/commits-point-grouped-legend-position-bottom.ts
index 94e03b031b..fe345f70bf 100644
--- a/__tests__/plots/static/commits-point-grouped-legend-position-bottom.ts
+++ b/__tests__/plots/static/commits-point-grouped-legend-position-bottom.ts
@@ -5,7 +5,6 @@ export function commitsPointGroupedLegendPositionBottom(): G2Spec {
     type: 'point',
     height: 300,
     inset: 10,
-    padding: 'auto',
     frame: true,
     data: {
       type: 'fetch',
diff --git a/__tests__/plots/static/commits-point-grouped-legend-position-left.ts b/__tests__/plots/static/commits-point-grouped-legend-position-left.ts
index aa0a256a9b..983e73c7da 100644
--- a/__tests__/plots/static/commits-point-grouped-legend-position-left.ts
+++ b/__tests__/plots/static/commits-point-grouped-legend-position-left.ts
@@ -5,7 +5,6 @@ export function commitsPointGroupedLegendPositionLeft(): G2Spec {
     type: 'point',
     height: 300,
     inset: 10,
-    padding: 'auto',
     frame: true,
     data: {
       type: 'fetch',
diff --git a/__tests__/plots/static/commits-point-grouped-legend-position-right-length.ts b/__tests__/plots/static/commits-point-grouped-legend-position-right-length.ts
index efb98e8fc5..392637cdc6 100644
--- a/__tests__/plots/static/commits-point-grouped-legend-position-right-length.ts
+++ b/__tests__/plots/static/commits-point-grouped-legend-position-right-length.ts
@@ -5,7 +5,6 @@ export function commitsPointGroupedLegendPositionRightLength(): G2Spec {
     type: 'point',
     height: 300,
     inset: 10,
-    padding: 'auto',
     frame: true,
     data: {
       type: 'fetch',
diff --git a/__tests__/plots/static/commits-point-grouped-legend-position-right.ts b/__tests__/plots/static/commits-point-grouped-legend-position-right.ts
index 68f5c571ec..04cfc8c6cc 100644
--- a/__tests__/plots/static/commits-point-grouped-legend-position-right.ts
+++ b/__tests__/plots/static/commits-point-grouped-legend-position-right.ts
@@ -5,7 +5,6 @@ export function commitsPointGroupedLegendPositionRight(): G2Spec {
     type: 'point',
     height: 300,
     inset: 10,
-    padding: 'auto',
     frame: true,
     data: {
       type: 'fetch',
diff --git a/__tests__/plots/static/commits-point-grouped.ts b/__tests__/plots/static/commits-point-grouped.ts
index 5d74787d04..7077af5f10 100644
--- a/__tests__/plots/static/commits-point-grouped.ts
+++ b/__tests__/plots/static/commits-point-grouped.ts
@@ -5,7 +5,6 @@ export function commitsPointGrouped(): G2Spec {
     type: 'point',
     height: 300,
     inset: 10,
-    padding: 'auto',
     frame: true,
     data: {
       type: 'fetch',
@@ -28,11 +27,5 @@ export function commitsPointGrouped(): G2Spec {
       x: { title: 'time (hours)' },
       y: { title: 'time (day)', grid: true },
     },
-    // viewStyle: {
-    //   viewFill: '#4e79a7',
-    //   plotFill: '#f28e2c',
-    //   mainFill: '#e15759',
-    //   contentFill: '#76b7b2',
-    // },
   };
 }
diff --git a/__tests__/plots/static/diamond-point-jitter-polar.ts b/__tests__/plots/static/diamond-point-jitter-polar.ts
index 7783c24b37..e1f199360b 100644
--- a/__tests__/plots/static/diamond-point-jitter-polar.ts
+++ b/__tests__/plots/static/diamond-point-jitter-polar.ts
@@ -5,7 +5,6 @@ export function diamondPointJitterPolar(): G2Spec {
   const random = d3.randomUniform.source(d3.randomLcg(42))(0, 1);
   return {
     type: 'point',
-    padding: 10,
     data: {
       type: 'fetch',
       value: 'data/diamond.csv',
diff --git a/__tests__/plots/static/disasters-point-bubble-legend-right.ts b/__tests__/plots/static/disasters-point-bubble-legend-right.ts
index 9cd0598d69..f2c0a0762c 100644
--- a/__tests__/plots/static/disasters-point-bubble-legend-right.ts
+++ b/__tests__/plots/static/disasters-point-bubble-legend-right.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function disastersPointBubbleLegendRight(): G2Spec {
   return {
     type: 'point',
-    padding: 'auto',
     insetTop: 30,
     insetLeft: 30,
     data: {
diff --git a/__tests__/plots/static/disasters-point-bubble.ts b/__tests__/plots/static/disasters-point-bubble.ts
index e1d77a3264..01a1612b8f 100644
--- a/__tests__/plots/static/disasters-point-bubble.ts
+++ b/__tests__/plots/static/disasters-point-bubble.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function disastersPointBubble(): G2Spec {
   return {
     type: 'point',
-    padding: 'auto',
     insetTop: 30,
     insetLeft: 30,
     data: {
diff --git a/__tests__/plots/static/flare-point-circle-pack-custom-auto-padding.ts b/__tests__/plots/static/flare-point-circle-pack-custom-auto-padding.ts
index 7d185aeda8..d98ca0747e 100644
--- a/__tests__/plots/static/flare-point-circle-pack-custom-auto-padding.ts
+++ b/__tests__/plots/static/flare-point-circle-pack-custom-auto-padding.ts
@@ -4,9 +4,9 @@ import { G2Spec } from '../../../src';
 export async function flarePointCirclePackCustomAutoPadding(): Promise<G2Spec> {
   return {
     type: 'view',
-    padding: 'auto',
     width: 1000,
     height: 1000,
+    padding: 20,
     style: {
       viewFill: '#4e79a7',
       plotFill: '#f28e2c',
diff --git a/__tests__/plots/static/flare-tree-custom.ts b/__tests__/plots/static/flare-tree-custom.ts
index ac5ce12071..7a7218bb8d 100644
--- a/__tests__/plots/static/flare-tree-custom.ts
+++ b/__tests__/plots/static/flare-tree-custom.ts
@@ -5,6 +5,7 @@ export async function flareTreeCustom(): Promise<G2Spec> {
     type: 'view',
     width: 800,
     height: 1500,
+    paddingLeft: 40,
     coordinate: { transform: [{ type: 'transpose' }] },
     children: [
       {
diff --git a/__tests__/plots/static/gdp-interval-flex-auto-padding-rotate.ts b/__tests__/plots/static/gdp-interval-flex-auto-padding-rotate.ts
index 7b7d815ba1..b536d8a9d9 100644
--- a/__tests__/plots/static/gdp-interval-flex-auto-padding-rotate.ts
+++ b/__tests__/plots/static/gdp-interval-flex-auto-padding-rotate.ts
@@ -4,7 +4,6 @@ export function gdpIntervalFlexAutoPaddingRotate(): G2Spec {
   return {
     type: 'interval',
     width: 1000,
-    padding: 'auto',
     data: {
       type: 'fetch',
       value: 'data/gdp.csv',
diff --git a/__tests__/plots/static/gdp-interval-flex.ts b/__tests__/plots/static/gdp-interval-flex.ts
index 3aba029304..8026d00749 100644
--- a/__tests__/plots/static/gdp-interval-flex.ts
+++ b/__tests__/plots/static/gdp-interval-flex.ts
@@ -4,7 +4,6 @@ export function gdpIntervalFlex(): G2Spec {
   return {
     type: 'interval',
     width: 1000,
-    paddingBottom: 100,
     data: {
       type: 'fetch',
       value: 'data/gdp.csv',
@@ -16,10 +15,6 @@ export function gdpIntervalFlex(): G2Spec {
       y: 'value',
       color: 'country',
     },
-    axis: {
-      x: {
-        labelTransform: 'rotate(90)',
-      },
-    },
+    axis: { x: { labelTransform: 'rotate(90)' } },
   };
 }
diff --git a/__tests__/plots/static/gdp-interval-var-size.ts b/__tests__/plots/static/gdp-interval-var-size.ts
index aea2c802d3..2f9e5e9553 100644
--- a/__tests__/plots/static/gdp-interval-var-size.ts
+++ b/__tests__/plots/static/gdp-interval-var-size.ts
@@ -4,7 +4,6 @@ export function gdpIntervalVarSize(): G2Spec {
   return {
     type: 'interval',
     width: 1000,
-    paddingBottom: 100,
     data: {
       type: 'fetch',
       value: 'data/gdp.csv',
diff --git a/__tests__/plots/static/gdp2-boxplot-log.ts b/__tests__/plots/static/gdp2-boxplot-log.ts
index 1693f6699f..90a82eb93f 100644
--- a/__tests__/plots/static/gdp2-boxplot-log.ts
+++ b/__tests__/plots/static/gdp2-boxplot-log.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function gdp2BoxplotLog(): G2Spec {
   return {
     type: 'boxplot',
-    paddingLeft: 60,
     data: {
       type: 'fetch',
       value: 'data/gdp2.csv',
diff --git a/__tests__/plots/static/github-star-interval-palette.ts b/__tests__/plots/static/github-star-interval-palette.ts
index d30af1d015..6d8fdab594 100644
--- a/__tests__/plots/static/github-star-interval-palette.ts
+++ b/__tests__/plots/static/github-star-interval-palette.ts
@@ -5,7 +5,6 @@ export function githubStarIntervalPalette(): G2Spec {
   return {
     type: 'interval',
     width: 1000,
-    paddingBottom: 100,
     data: {
       value: githubStar,
       transform: [{ type: 'sortBy', fields: [['star', true]] }],
diff --git a/__tests__/plots/static/house-price-point-shapes.ts b/__tests__/plots/static/house-price-point-shapes.ts
index d0c9c089ec..d7b7b66f28 100644
--- a/__tests__/plots/static/house-price-point-shapes.ts
+++ b/__tests__/plots/static/house-price-point-shapes.ts
@@ -25,7 +25,6 @@ const Shapes = [
 export function housePricePointShapes(): G2Spec {
   return {
     type: 'point',
-    padding: 'auto',
     data: {
       type: 'fetch',
       value: 'data/house-price-area.json',
diff --git a/__tests__/plots/static/income-link-annotation.ts b/__tests__/plots/static/income-link-annotation.ts
index fa497add56..dc8cdfd554 100644
--- a/__tests__/plots/static/income-link-annotation.ts
+++ b/__tests__/plots/static/income-link-annotation.ts
@@ -15,6 +15,7 @@ const incdomain = (() => {
 export function incomeLinkAnnotation(): G2Spec {
   return {
     type: 'view',
+    insetRight: 20,
     children: [
       {
         type: 'link',
diff --git a/__tests__/plots/static/index.ts b/__tests__/plots/static/index.ts
index e649b8b175..00ea5b07fc 100644
--- a/__tests__/plots/static/index.ts
+++ b/__tests__/plots/static/index.ts
@@ -230,7 +230,6 @@ export { ordersLineMissingFieldAutoPaddingUndefined } from './orders-line-missin
 export { peoplePointStackedAutoPaddingNumberLabel } from './people-point-stacked-auto-padding-number-label';
 export { populationIntervalDivergingAutoPaddingUndefinedTitle } from './population-interval-diverging-auto-padding-undefined-title';
 export { tranLineMultiAxesAutoPaddingTickMethod } from './train-line-multi-axes-auto-padding-tick-method';
-export { vaccinesCellScaleRelationAutoPaddingTickFilter } from './vaccines-cell-scale-relation-auto-padding-tick-filter';
 export { marketIntervalMarimekkoAutoPaddingFlex } from './market-interval-marimekko-auto-padding-flex';
 export { aaplIntervalDateEncodeX } from './aapl-interval-date-encode-x';
 export { athletesRectBinLegendStyle } from './athletes-rect-bin-legend-style';
diff --git a/__tests__/plots/static/indices-line-chart-scale-relations-auto-padding-round.ts b/__tests__/plots/static/indices-line-chart-scale-relations-auto-padding-round.ts
index b5bd924b7d..88a2770d4b 100644
--- a/__tests__/plots/static/indices-line-chart-scale-relations-auto-padding-round.ts
+++ b/__tests__/plots/static/indices-line-chart-scale-relations-auto-padding-round.ts
@@ -3,7 +3,7 @@ import { G2Spec } from '../../../src';
 export function indicesLineChartScaleRelationsAutoPaddingRound(): G2Spec {
   return {
     type: 'line',
-    padding: 'auto',
+    insetRight: 20,
     data: {
       type: 'fetch',
       value: 'data/indices.csv',
diff --git a/__tests__/plots/static/indices-line-chart-scale-relations.ts b/__tests__/plots/static/indices-line-chart-scale-relations.ts
index 1467a8a061..3b9743cf58 100644
--- a/__tests__/plots/static/indices-line-chart-scale-relations.ts
+++ b/__tests__/plots/static/indices-line-chart-scale-relations.ts
@@ -3,6 +3,7 @@ import { G2Spec } from '../../../src';
 export function indicesLineChartScaleRelations(): G2Spec {
   return {
     type: 'line',
+    insetRight: 20,
     data: {
       type: 'fetch',
       value: 'data/indices.csv',
diff --git a/__tests__/plots/static/market-interval-marimekko-auto-padding-flex.ts b/__tests__/plots/static/market-interval-marimekko-auto-padding-flex.ts
index 85993301cd..0d35edc9c5 100644
--- a/__tests__/plots/static/market-interval-marimekko-auto-padding-flex.ts
+++ b/__tests__/plots/static/market-interval-marimekko-auto-padding-flex.ts
@@ -5,7 +5,6 @@ export function marketIntervalMarimekkoAutoPaddingFlex(): G2Spec {
     type: 'interval',
     width: 900,
     height: 800,
-    padding: 'auto',
     viewStyle: {
       viewFill: '#4e79a7',
       plotFill: '#f28e2c',
diff --git a/__tests__/plots/static/mock-area-missing-data.ts b/__tests__/plots/static/mock-area-missing-data.ts
index 244918e7b8..d3bc31df5f 100644
--- a/__tests__/plots/static/mock-area-missing-data.ts
+++ b/__tests__/plots/static/mock-area-missing-data.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function mockAreaMissingData(): G2Spec {
   return {
     type: 'area',
-    padding: 'auto',
     data: [
       { province: 'A', city: 'a', categories: 'Q1', gross: null },
       { province: 'B', city: 'b', categories: 'Q2', gross: 2610.5 },
diff --git a/__tests__/plots/static/mock-axisX.ts b/__tests__/plots/static/mock-axisX.ts
index e8c71353df..3564fe0c1c 100644
--- a/__tests__/plots/static/mock-axisX.ts
+++ b/__tests__/plots/static/mock-axisX.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function mockAxisX(): G2Spec {
   return {
     type: 'axisX',
-    padding: 'auto',
     height: 80,
     scale: {
       x: {
diff --git a/__tests__/plots/static/mock-axisXY.ts b/__tests__/plots/static/mock-axisXY.ts
index 9a37eac402..8571911908 100644
--- a/__tests__/plots/static/mock-axisXY.ts
+++ b/__tests__/plots/static/mock-axisXY.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function mockAxisXY(): G2Spec {
   return {
     type: 'view',
-    padding: 'auto',
     scale: {
       x: {
         type: 'linear',
diff --git a/__tests__/plots/static/mock-legend-color-size.ts b/__tests__/plots/static/mock-legend-color-size.ts
index 0ee657fd11..94bef51866 100644
--- a/__tests__/plots/static/mock-legend-color-size.ts
+++ b/__tests__/plots/static/mock-legend-color-size.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function mockLegendColorSize(): G2Spec {
   return {
     type: 'legends',
-    padding: 'auto',
     height: 100,
     scale: {
       color: {
diff --git a/__tests__/plots/static/mock-legend-color.ts b/__tests__/plots/static/mock-legend-color.ts
index 1f50ca4cdd..dcdca3a286 100644
--- a/__tests__/plots/static/mock-legend-color.ts
+++ b/__tests__/plots/static/mock-legend-color.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function mockLegendColor(): G2Spec {
   return {
     type: 'legends',
-    padding: 'auto',
     height: 100,
     scale: {
       color: {
diff --git a/__tests__/plots/static/mock-line-small-interval.ts b/__tests__/plots/static/mock-line-small-interval.ts
index 3801c36cac..dd74808b8d 100644
--- a/__tests__/plots/static/mock-line-small-interval.ts
+++ b/__tests__/plots/static/mock-line-small-interval.ts
@@ -4,7 +4,6 @@ export function mockLineSmallInterval(): G2Spec {
   const floatTimestamp = (s) => +new Date(s) + +`0.${s.slice(s.length - 3)}`;
   return {
     type: 'interval',
-    padding: 'auto',
     data: [
       {
         task: 'task0',
diff --git a/__tests__/plots/static/mock-point-log-ticks-auto-padding-tick-count.ts b/__tests__/plots/static/mock-point-log-ticks-auto-padding-tick-count.ts
index cc6a49b635..d71bbf1317 100644
--- a/__tests__/plots/static/mock-point-log-ticks-auto-padding-tick-count.ts
+++ b/__tests__/plots/static/mock-point-log-ticks-auto-padding-tick-count.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function mockPointLogTicksAutoPaddingTickCount(): G2Spec {
   return {
     type: 'point',
-    padding: 'auto',
     data: [
       [5, 0.09459459],
       [10, 0.22972973],
diff --git a/__tests__/plots/static/month-interval-facet-rect.ts b/__tests__/plots/static/month-interval-facet-rect.ts
index b1e8a3a8aa..4688e4b7e6 100644
--- a/__tests__/plots/static/month-interval-facet-rect.ts
+++ b/__tests__/plots/static/month-interval-facet-rect.ts
@@ -34,7 +34,8 @@ export function monthIntervalFacetRect(): G2Spec {
     legend: {
       color: { position: 'right', size: 50 },
     },
-    paddingRight: 100,
+    paddingLeft: 40,
+    paddingBottom: 40,
     children: [
       {
         type: 'interval',
diff --git a/__tests__/plots/static/month-interval-radial-facet-rect.ts b/__tests__/plots/static/month-interval-radial-facet-rect.ts
index 75c59e193c..6fe6053cc5 100644
--- a/__tests__/plots/static/month-interval-radial-facet-rect.ts
+++ b/__tests__/plots/static/month-interval-radial-facet-rect.ts
@@ -43,7 +43,6 @@ export function monthIntervalRadialFacetRect(): G2Spec {
         },
       },
     },
-    paddingRight: 100,
     children: [
       {
         type: 'interval',
diff --git a/__tests__/plots/static/movies-interval-multiple-measure.ts b/__tests__/plots/static/movies-interval-multiple-measure.ts
index b1cb205b6a..597ff95f4e 100644
--- a/__tests__/plots/static/movies-interval-multiple-measure.ts
+++ b/__tests__/plots/static/movies-interval-multiple-measure.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function moviesIntervalMultipleMeasure(): G2Spec {
   return {
     type: 'view',
-    paddingBottom: 150,
     data: {
       type: 'fetch',
       value: 'data/movies.csv',
diff --git a/__tests__/plots/static/orders-line-missing-field-auto-padding-undefined.ts b/__tests__/plots/static/orders-line-missing-field-auto-padding-undefined.ts
index 964d1eecf7..512286a1ad 100644
--- a/__tests__/plots/static/orders-line-missing-field-auto-padding-undefined.ts
+++ b/__tests__/plots/static/orders-line-missing-field-auto-padding-undefined.ts
@@ -4,7 +4,6 @@ import { orders } from '../../data/orders';
 export function ordersLineMissingFieldAutoPaddingUndefined(): G2Spec {
   return {
     type: 'line',
-    padding: 'auto',
     data: orders,
     encode: {
       x: 'hour',
diff --git a/__tests__/plots/static/orders-line-missing-field.ts b/__tests__/plots/static/orders-line-missing-field.ts
index 7477ca0a3d..f96198aaf2 100644
--- a/__tests__/plots/static/orders-line-missing-field.ts
+++ b/__tests__/plots/static/orders-line-missing-field.ts
@@ -4,7 +4,6 @@ import { orders } from '../../data/orders';
 export function ordersLineMissingField(): G2Spec {
   return {
     type: 'line',
-    paddingLeft: 50,
     data: orders,
     encode: {
       x: 'hour',
diff --git a/__tests__/plots/static/penguins-boxplot-grouped-transpose.ts b/__tests__/plots/static/penguins-boxplot-grouped-transpose.ts
index 0ba6594384..67e4e5194e 100644
--- a/__tests__/plots/static/penguins-boxplot-grouped-transpose.ts
+++ b/__tests__/plots/static/penguins-boxplot-grouped-transpose.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function penguinsBoxPlotGroupedTranspose(): G2Spec {
   return {
     type: 'boxplot',
-    paddingLeft: 80,
     coordinate: { transform: [{ type: 'transpose' }] },
     inset: 6,
     data: {
diff --git a/__tests__/plots/static/penguins-point-facet-rect.ts b/__tests__/plots/static/penguins-point-facet-rect.ts
index 22870d34ec..4dd4ed4582 100644
--- a/__tests__/plots/static/penguins-point-facet-rect.ts
+++ b/__tests__/plots/static/penguins-point-facet-rect.ts
@@ -7,9 +7,8 @@ export function penguinsPointFacetRect(): G2Spec {
       type: 'fetch',
       value: 'data/penguins.csv',
     },
-    paddingRight: 80,
-    paddingBottom: 50,
-    paddingLeft: 50,
+    paddingBottom: 60,
+    paddingLeft: 60,
     height: 600,
     encode: {
       x: 'sex',
diff --git a/__tests__/plots/static/penguins-point-link.ts b/__tests__/plots/static/penguins-point-link.ts
index b7a4bbb0fe..893f76a0d5 100644
--- a/__tests__/plots/static/penguins-point-link.ts
+++ b/__tests__/plots/static/penguins-point-link.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function penguinsPointLink(): G2Spec {
   return {
     type: 'view',
-    paddingLeft: 80,
     height: 180,
     data: {
       type: 'fetch',
diff --git a/__tests__/plots/static/penguins-point-repeat-matrix.ts b/__tests__/plots/static/penguins-point-repeat-matrix.ts
index fc367b1465..0e257c77fe 100644
--- a/__tests__/plots/static/penguins-point-repeat-matrix.ts
+++ b/__tests__/plots/static/penguins-point-repeat-matrix.ts
@@ -5,8 +5,8 @@ export function penguinsPointRepeatMatrix(): G2Spec {
     type: 'repeatMatrix',
     width: 800,
     height: 800,
-    paddingLeft: 60,
-    paddingBottom: 60,
+    paddingLeft: 70,
+    paddingBottom: 70,
     data: {
       type: 'fetch',
       value: 'data/penguins.csv',
diff --git a/__tests__/plots/static/people-interval-area-dual-axis.ts b/__tests__/plots/static/people-interval-area-dual-axis.ts
index e97a036d43..00e2706f26 100644
--- a/__tests__/plots/static/people-interval-area-dual-axis.ts
+++ b/__tests__/plots/static/people-interval-area-dual-axis.ts
@@ -2,7 +2,6 @@ import { G2Spec } from '../../../src';
 
 export function peopleIntervalAreaDualAxis(): G2Spec {
   return {
-    padding: 'auto',
     type: 'view',
     data: {
       type: 'fetch',
diff --git a/__tests__/plots/static/people-point-stacked-auto-padding-number-label.ts b/__tests__/plots/static/people-point-stacked-auto-padding-number-label.ts
index ce290bda77..24a69bcfc0 100644
--- a/__tests__/plots/static/people-point-stacked-auto-padding-number-label.ts
+++ b/__tests__/plots/static/people-point-stacked-auto-padding-number-label.ts
@@ -4,7 +4,6 @@ export function peoplePointStackedAutoPaddingNumberLabel(): G2Spec {
   return {
     type: 'view',
     height: 360,
-    padding: 'auto',
     style: {
       viewFill: '#4e79a7',
       plotFill: '#f28e2c',
diff --git a/__tests__/plots/static/population-interval-diverging-auto-padding-undefined-title.ts b/__tests__/plots/static/population-interval-diverging-auto-padding-undefined-title.ts
index 5530871dde..7011cf40db 100644
--- a/__tests__/plots/static/population-interval-diverging-auto-padding-undefined-title.ts
+++ b/__tests__/plots/static/population-interval-diverging-auto-padding-undefined-title.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function populationIntervalDivergingAutoPaddingUndefinedTitle(): G2Spec {
   return {
     type: 'interval',
-    padding: 'auto',
     viewStyle: {
       viewFill: '#4e79a7',
       plotFill: '#f28e2c',
diff --git a/__tests__/plots/static/population2015-interval-donut-text-annotation-inset.ts b/__tests__/plots/static/population2015-interval-donut-text-annotation-inset.ts
index 7f327acd13..6e327e4caa 100644
--- a/__tests__/plots/static/population2015-interval-donut-text-annotation-inset.ts
+++ b/__tests__/plots/static/population2015-interval-donut-text-annotation-inset.ts
@@ -4,6 +4,7 @@ export function population2015IntervalDonutTextAnnotationInset(): G2Spec {
   return {
     type: 'view',
     height: 640,
+    padding: 0,
     inset: 50,
     coordinate: { type: 'theta', innerRadius: 0.6 },
     style: {
@@ -49,8 +50,8 @@ export function population2015IntervalDonutTextAnnotationInset(): G2Spec {
         style: {
           text: 'chart',
           // Absolute position.
-          x: 290,
-          y: 320,
+          x: 640 / 2,
+          y: 360,
           fontSize: 20,
           textAlign: 'center',
           fontWeight: 'bold',
diff --git a/__tests__/plots/static/population2015-interval-donut-text-annotation.ts b/__tests__/plots/static/population2015-interval-donut-text-annotation.ts
index 9d0f1b09e9..dd4401847f 100644
--- a/__tests__/plots/static/population2015-interval-donut-text-annotation.ts
+++ b/__tests__/plots/static/population2015-interval-donut-text-annotation.ts
@@ -4,6 +4,7 @@ export function population2015IntervalDonutTextAnnotation(): G2Spec {
   return {
     type: 'view',
     height: 640,
+    padding: 0,
     coordinate: { type: 'theta', innerRadius: 0.6 },
     children: [
       {
@@ -42,8 +43,8 @@ export function population2015IntervalDonutTextAnnotation(): G2Spec {
         style: {
           text: 'chart',
           // Absolute position.
-          x: 290,
-          y: 320,
+          x: 640 / 2,
+          y: 360,
           fontSize: 20,
           textAlign: 'center',
           fontWeight: 'bold',
diff --git a/__tests__/plots/static/product-interval-stacked-grouped.ts b/__tests__/plots/static/product-interval-stacked-grouped.ts
index 114e329934..c486c34993 100644
--- a/__tests__/plots/static/product-interval-stacked-grouped.ts
+++ b/__tests__/plots/static/product-interval-stacked-grouped.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function productIntervalStackedGrouped(): G2Spec {
   return {
     type: 'interval',
-    paddingLeft: 60,
     data: {
       type: 'fetch',
       value: 'data/product.csv',
diff --git a/__tests__/plots/static/profit-interval-range.ts b/__tests__/plots/static/profit-interval-range.ts
index f7e6b7629a..37df0524e6 100644
--- a/__tests__/plots/static/profit-interval-range.ts
+++ b/__tests__/plots/static/profit-interval-range.ts
@@ -4,7 +4,6 @@ import { profit } from '../../data/profit';
 export function profitIntervalRange(): G2Spec {
   return {
     type: 'interval',
-    paddingLeft: 60,
     data: profit,
     axis: { y: { labelFormatter: '~s' } },
     encode: {
diff --git a/__tests__/plots/static/question8-interval-radial-gradient-color.ts b/__tests__/plots/static/question8-interval-radial-gradient-color.ts
index 5847d14b54..f6b67fd829 100644
--- a/__tests__/plots/static/question8-interval-radial-gradient-color.ts
+++ b/__tests__/plots/static/question8-interval-radial-gradient-color.ts
@@ -13,11 +13,9 @@ export function question8IntervalRadialGradientColor(): G2Spec {
     legend: {
       color: {
         position: 'bottom',
-        size: 100,
         length: 300,
         tick: false,
-        labelFilter: (datum, index, data) =>
-          index === 0 || index === data.length - 1,
+        tickFilter: (d, i, data) => i === 0 || i === data.length - 1,
         layout: {
           justifyContent: 'center',
         },
diff --git a/__tests__/plots/static/questions-interval-diverging-stacked.ts b/__tests__/plots/static/questions-interval-diverging-stacked.ts
index 0bee1f3382..8f55538f98 100644
--- a/__tests__/plots/static/questions-interval-diverging-stacked.ts
+++ b/__tests__/plots/static/questions-interval-diverging-stacked.ts
@@ -12,7 +12,6 @@ export function questionsIntervalDivergingStacked(): G2Spec {
   return {
     type: 'interval',
     coordinate: { transform: [{ type: 'transpose' }] },
-    paddingLeft: 80,
     data: {
       type: 'fetch',
       value: 'data/questions.csv',
@@ -33,5 +32,6 @@ export function questionsIntervalDivergingStacked(): G2Spec {
           ? -d.percentage / 2
           : +d.percentage,
     },
+    axis: { y: { title: 'value' } },
   };
 }
diff --git a/__tests__/plots/static/stateages-interval-grouped.ts b/__tests__/plots/static/stateages-interval-grouped.ts
index f4076de793..9f8f795b40 100644
--- a/__tests__/plots/static/stateages-interval-grouped.ts
+++ b/__tests__/plots/static/stateages-interval-grouped.ts
@@ -3,22 +3,25 @@ import { G2Spec } from '../../../src';
 export function stateAgesIntervalGrouped(): G2Spec {
   return {
     type: 'interval',
-    paddingLeft: 50,
-    transform: [
-      { type: 'sortX', by: 'y', reverse: true, reducer: 'sum', slice: 6 },
-      { type: 'dodgeX' },
-    ],
+    title: {
+      title: 'Population by age and state',
+      subtitle: 'It shows the population of U.S. by age and state.',
+    },
     data: {
       type: 'fetch',
       value: 'data/stateages.csv',
     },
-    axis: {
-      y: { labelFormatter: '~s' },
-    },
+    transform: [
+      { type: 'sortX', by: 'y', reverse: true, reducer: 'sum', slice: 6 },
+      { type: 'dodgeX' },
+    ],
+    scale: { y: { nice: true } },
+    axis: { y: { labelFormatter: '~s' } },
     encode: {
       x: 'state',
       y: 'population',
       color: 'age',
     },
+    viewStyle: { viewFill: '#eee', mainFill: '#ddd' },
   };
 }
diff --git a/__tests__/plots/static/stateages-interval-stacked-cornered-all.ts b/__tests__/plots/static/stateages-interval-stacked-cornered-all.ts
index d5981cf412..7ae0c93639 100644
--- a/__tests__/plots/static/stateages-interval-stacked-cornered-all.ts
+++ b/__tests__/plots/static/stateages-interval-stacked-cornered-all.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function stateAgesIntervalStackedCorneredAll(): G2Spec {
   return {
     type: 'interval',
-    paddingLeft: 50,
     width: 800,
     transform: [
       { type: 'stackY', orderBy: 'sum' },
diff --git a/__tests__/plots/static/stateages-interval-stacked-cornered.ts b/__tests__/plots/static/stateages-interval-stacked-cornered.ts
index d960bed123..97701f05b8 100644
--- a/__tests__/plots/static/stateages-interval-stacked-cornered.ts
+++ b/__tests__/plots/static/stateages-interval-stacked-cornered.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function stateAgesIntervalStackedCornered(): G2Spec {
   return {
     type: 'interval',
-    paddingLeft: 50,
     width: 800,
     transform: [
       { type: 'stackY', orderBy: 'sum' },
diff --git a/__tests__/plots/static/stateages-interval-stacked.ts b/__tests__/plots/static/stateages-interval-stacked.ts
index 818def0d10..50ac34f6f1 100644
--- a/__tests__/plots/static/stateages-interval-stacked.ts
+++ b/__tests__/plots/static/stateages-interval-stacked.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function stateAgesIntervalStacked(): G2Spec {
   return {
     type: 'interval',
-    paddingLeft: 50,
     width: 800,
     transform: [{ type: 'stackY' }, { type: 'sortX', by: 'y', reverse: true }],
     data: {
diff --git a/__tests__/plots/static/stocks-line-aggregate-label.ts b/__tests__/plots/static/stocks-line-aggregate-label.ts
index ba00fe8c81..bce36e79ed 100644
--- a/__tests__/plots/static/stocks-line-aggregate-label.ts
+++ b/__tests__/plots/static/stocks-line-aggregate-label.ts
@@ -3,16 +3,12 @@ import { G2Spec } from '../../../src';
 export function stocksLineAggregateLabel(): G2Spec {
   return {
     type: 'line',
+    insetRight: 40,
     data: {
       type: 'fetch',
       value: 'data/stocks.csv',
     },
-    transform: [
-      {
-        type: 'groupX',
-        y: 'mean',
-      },
-    ],
+    transform: [{ type: 'groupX', y: 'mean' }],
     encode: {
       x: (d) => new Date(d.date).getFullYear(),
       y: 'price',
diff --git a/__tests__/plots/static/titanic-point-pack-nested.ts b/__tests__/plots/static/titanic-point-pack-nested.ts
index 578eabb2c2..fd7e4bb5de 100644
--- a/__tests__/plots/static/titanic-point-pack-nested.ts
+++ b/__tests__/plots/static/titanic-point-pack-nested.ts
@@ -21,7 +21,7 @@ export function titanicPointPackNested(): G2Spec {
       ],
     },
     paddingRight: 50,
-    paddingBottom: 50,
+    paddingBottom: 60,
     paddingLeft: 80,
     encode: {
       y: 'pclass',
diff --git a/__tests__/plots/static/titanic-point-pack-shared-data.ts b/__tests__/plots/static/titanic-point-pack-shared-data.ts
index e96d9ebb9e..b443811b9b 100644
--- a/__tests__/plots/static/titanic-point-pack-shared-data.ts
+++ b/__tests__/plots/static/titanic-point-pack-shared-data.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function titanicPointPackSharedData(): G2Spec {
   return {
     type: 'facetRect',
-    paddingRight: 50,
     data: {
       type: 'fetch',
       value: 'data/titanic.csv',
diff --git a/__tests__/plots/static/titanic-point-pack-shared-size.ts b/__tests__/plots/static/titanic-point-pack-shared-size.ts
index 0c4f305324..1d00ececfa 100644
--- a/__tests__/plots/static/titanic-point-pack-shared-size.ts
+++ b/__tests__/plots/static/titanic-point-pack-shared-size.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function titanicPointPackSharedSize(): G2Spec {
   return {
     type: 'facetRect',
-    paddingRight: 50,
     data: {
       type: 'fetch',
       value: 'data/titanic.csv',
diff --git a/__tests__/plots/static/titanic-point-pack.ts b/__tests__/plots/static/titanic-point-pack.ts
index 935cb08a86..02c0009f04 100644
--- a/__tests__/plots/static/titanic-point-pack.ts
+++ b/__tests__/plots/static/titanic-point-pack.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function titanicPointPack(): G2Spec {
   return {
     type: 'facetRect',
-    paddingRight: 50,
     data: {
       type: 'fetch',
       value: 'data/titanic.csv',
diff --git a/__tests__/plots/static/titanic2-point-pack.ts b/__tests__/plots/static/titanic2-point-pack.ts
index d632a6ff7c..9d57807eac 100644
--- a/__tests__/plots/static/titanic2-point-pack.ts
+++ b/__tests__/plots/static/titanic2-point-pack.ts
@@ -13,7 +13,7 @@ export function titanic2PointPack(): G2Spec {
         },
       ],
     },
-    paddingRight: 70,
+    paddingRight: 80,
     encode: {
       x: 'Class',
       y: 'Sex',
diff --git a/__tests__/plots/static/train-line-multi-axes-auto-padding-tick-method.ts b/__tests__/plots/static/train-line-multi-axes-auto-padding-tick-method.ts
index b6f97387d9..fede945eaf 100644
--- a/__tests__/plots/static/train-line-multi-axes-auto-padding-tick-method.ts
+++ b/__tests__/plots/static/train-line-multi-axes-auto-padding-tick-method.ts
@@ -14,7 +14,6 @@ export async function tranLineMultiAxesAutoPaddingTickMethod(): Promise<G2Spec>
     type: 'line',
     width: 800,
     height: 1000,
-    padding: 'auto',
     data,
     encode: {
       x: 'distance',
diff --git a/__tests__/plots/static/train-line-multi-axes.ts b/__tests__/plots/static/train-line-multi-axes.ts
index 1980644c05..e0623fa886 100644
--- a/__tests__/plots/static/train-line-multi-axes.ts
+++ b/__tests__/plots/static/train-line-multi-axes.ts
@@ -14,9 +14,6 @@ export async function tranLineMultiAxes(): Promise<G2Spec> {
     type: 'line',
     width: 800,
     height: 1000,
-    paddingLeft: 60,
-    paddingTop: 120,
-    paddingBottom: 120,
     data,
     encode: {
       x: 'distance',
diff --git a/__tests__/plots/static/unemployment-area-stacked-cols.ts b/__tests__/plots/static/unemployment-area-stacked-cols.ts
index 0f1347a583..8d15f88c08 100644
--- a/__tests__/plots/static/unemployment-area-stacked-cols.ts
+++ b/__tests__/plots/static/unemployment-area-stacked-cols.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function unemploymentAreaStackedCols(): G2Spec {
   return {
     type: 'area',
-    padding: 'auto',
     width: 800,
     data: {
       type: 'fetch',
diff --git a/__tests__/plots/static/unemployment-area-stacked-legend-size.ts b/__tests__/plots/static/unemployment-area-stacked-legend-size.ts
index 586ab07d3c..9c50d1f651 100644
--- a/__tests__/plots/static/unemployment-area-stacked-legend-size.ts
+++ b/__tests__/plots/static/unemployment-area-stacked-legend-size.ts
@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function unemploymentAreaStackedLegendSize(): G2Spec {
   return {
     type: 'area',
-    padding: 'auto',
     width: 800,
     data: {
       type: 'fetch',
diff --git a/__tests__/plots/static/unemployment-area-stacked-legend-small-vertical.ts b/__tests__/plots/static/unemployment-area-stacked-legend-small-vertical.ts
index 8f2c6725fc..880a8421cc 100644
--- a/__tests__/plots/static/unemployment-area-stacked-legend-small-vertical.ts
+++ b/__tests__/plots/static/unemployment-area-stacked-legend-small-vertical.ts
@@ -5,7 +5,6 @@ export function unemploymentAreaStackedLegendSmallVertical(): G2Spec {
     type: 'area',
     width: 800,
     height: 200,
-    padding: 'auto',
     data: {
       type: 'fetch',
       value: 'data/unemployment-by-industry.csv',
diff --git a/__tests__/plots/static/unemployment-area-stacked-legend-vertical.ts b/__tests__/plots/static/unemployment-area-stacked-legend-vertical.ts
index f86d2362b6..712013d5be 100644
--- a/__tests__/plots/static/unemployment-area-stacked-legend-vertical.ts
+++ b/__tests__/plots/static/unemployment-area-stacked-legend-vertical.ts
@@ -4,7 +4,6 @@ export function unemploymentAreaStackedLegendVertical(): G2Spec {
   return {
     width: 800,
     type: 'area',
-    padding: 'auto',
     data: {
       type: 'fetch',
       value: 'data/unemployment-by-industry.csv',
diff --git a/__tests__/plots/static/unemployment-area-stacked.ts b/__tests__/plots/static/unemployment-area-stacked.ts
index 4e8d6a58e9..c955238554 100644
--- a/__tests__/plots/static/unemployment-area-stacked.ts
+++ b/__tests__/plots/static/unemployment-area-stacked.ts
@@ -4,7 +4,6 @@ export function unemploymentAreaStacked(): G2Spec {
   return {
     width: 800,
     type: 'area',
-    padding: 'auto',
     data: {
       type: 'fetch',
       value: 'data/unemployment-by-industry.csv',
@@ -15,12 +14,6 @@ export function unemploymentAreaStacked(): G2Spec {
       y: 'unemployed',
       color: 'industry',
     },
-    viewStyle: {
-      viewFill: '#4e79a7',
-      plotFill: '#f28e2c',
-      mainFill: '#e15759',
-      contentFill: '#76b7b2',
-    },
   };
 }
 
diff --git a/__tests__/plots/static/vaccines-cell-scale-relation-auto-padding-tick-filter.ts b/__tests__/plots/static/vaccines-cell-scale-relation-auto-padding-tick-filter.ts
deleted file mode 100644
index af695defcc..0000000000
--- a/__tests__/plots/static/vaccines-cell-scale-relation-auto-padding-tick-filter.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { G2Spec } from '../../../src';
-
-export function vaccinesCellScaleRelationAutoPaddingTickFilter(): G2Spec {
-  return {
-    type: 'view',
-    width: 1152,
-    height: 780,
-    padding: 'auto',
-    data: {
-      type: 'fetch',
-      value: 'data/vaccines.csv',
-    },
-    style: {
-      viewFill: '#4e79a7',
-      plotFill: '#f28e2c',
-      mainFill: '#e15759',
-      contentFill: '#76b7b2',
-    },
-    axis: {
-      x: {
-        tickFilter: (d) => d % 10 === 0,
-        position: 'top',
-      },
-      y: {
-        labelAutoRotate: false,
-      },
-    },
-    scale: {
-      color: {
-        palette: 'puRd',
-        relations: [
-          [(d) => d === null, '#eee'],
-          [0, '#fff'],
-        ],
-      },
-    },
-    children: [
-      {
-        type: 'cell',
-        encode: {
-          x: 'year',
-          y: 'name',
-          color: 'value',
-        },
-        style: {
-          inset: 0.5,
-        },
-      },
-      {
-        type: 'lineX',
-        data: [1963],
-        style: {
-          stroke: 'black',
-        },
-        labels: [
-          {
-            text: '1963',
-            position: 'bottom',
-            dy: 3,
-            fontSize: 10,
-            textBaseline: 'top',
-          },
-          {
-            text: 'Measles vaccine introduced',
-            position: 'bottom',
-            textBaseline: 'top',
-            fontSize: 10,
-            fontWeight: 'bold',
-            dy: 12,
-          },
-        ],
-      },
-    ],
-  };
-}
diff --git a/__tests__/plots/static/vaccines-cell-scale-relation.ts b/__tests__/plots/static/vaccines-cell-scale-relation.ts
index c8cee51eba..e67fbaf340 100644
--- a/__tests__/plots/static/vaccines-cell-scale-relation.ts
+++ b/__tests__/plots/static/vaccines-cell-scale-relation.ts
@@ -3,9 +3,9 @@ import { G2Spec } from '../../../src';
 export function vaccinesCellScaleRelation(): G2Spec {
   return {
     type: 'view',
-    width: 1152,
-    height: 780,
-    paddingLeft: 60,
+    width: 1300,
+    height: 900,
+    insetBottom: 10,
     data: {
       type: 'fetch',
       value: 'data/vaccines.csv',
diff --git a/__tests__/plots/static/weather-line-multi-axes-auto-padding.ts b/__tests__/plots/static/weather-line-multi-axes-auto-padding.ts
index e4ffeab3e9..5b8be08734 100644
--- a/__tests__/plots/static/weather-line-multi-axes-auto-padding.ts
+++ b/__tests__/plots/static/weather-line-multi-axes-auto-padding.ts
@@ -5,7 +5,6 @@ export function weatherLineMultiAxesAutoPadding(): G2Spec {
   return {
     type: 'view',
     data: weather,
-    padding: 'auto',
     style: {
       viewFill: '#4e79a7',
       plotFill: '#f28e2c',
diff --git a/__tests__/plots/static/weather-line-multi-scrollbar.ts b/__tests__/plots/static/weather-line-multi-scrollbar.ts
index f36efed132..ac9747be56 100644
--- a/__tests__/plots/static/weather-line-multi-scrollbar.ts
+++ b/__tests__/plots/static/weather-line-multi-scrollbar.ts
@@ -5,7 +5,7 @@ export function weatherLineMultiScrollbar(): G2Spec {
   return {
     type: 'view',
     data: weather,
-    paddingLeft: 180,
+    clip: true,
     children: [
       {
         type: 'line',
diff --git a/__tests__/plots/static/weather-line-multi-slider.ts b/__tests__/plots/static/weather-line-multi-slider.ts
index db6ed38a2f..5f127f7ec1 100644
--- a/__tests__/plots/static/weather-line-multi-slider.ts
+++ b/__tests__/plots/static/weather-line-multi-slider.ts
@@ -5,7 +5,6 @@ export function weatherLineMultiSlider(): G2Spec {
   return {
     type: 'view',
     data: weather,
-    padding: 'auto',
     children: [
       {
         type: 'line',
@@ -47,7 +46,7 @@ export function weatherLineMultiSlider(): G2Spec {
             titleFill: '#5470C6',
           },
         },
-        slider: { y: { size: 40 } },
+        slider: { y: {} },
       },
       {
         type: 'line',
diff --git a/__tests__/plots/static/weather-line-repeat-matrix-col.ts b/__tests__/plots/static/weather-line-repeat-matrix-col.ts
index 0c7abe7840..c29f1fbb38 100644
--- a/__tests__/plots/static/weather-line-repeat-matrix-col.ts
+++ b/__tests__/plots/static/weather-line-repeat-matrix-col.ts
@@ -5,7 +5,7 @@ export function weatherLineRepeatMatrixCol(): G2Spec {
     type: 'repeatMatrix',
     width: 300,
     height: 720,
-    paddingLeft: 50,
+    paddingLeft: 60,
     paddingBottom: 60,
     data: {
       type: 'fetch',
diff --git a/__tests__/plots/tooltip/alphabet-interval-tooltip-render-update.ts b/__tests__/plots/tooltip/alphabet-interval-tooltip-render-update.ts
index 16eb3320ff..ae0f0783f3 100644
--- a/__tests__/plots/tooltip/alphabet-interval-tooltip-render-update.ts
+++ b/__tests__/plots/tooltip/alphabet-interval-tooltip-render-update.ts
@@ -5,7 +5,6 @@ import { LEGEND_ITEMS_CLASS_NAME } from '../../../src/interaction/legendFilter';
 export function alphabetIntervalTooltipRenderUpdate(): G2Spec {
   return {
     type: 'interval',
-    paddingLeft: 60,
     data: {
       type: 'fetch',
       value: 'data/alphabet.csv',
diff --git a/__tests__/plots/tooltip/forecast-range-area-line-transpose.ts b/__tests__/plots/tooltip/forecast-range-area-line-transpose.ts
index 0bba373be1..46fa413779 100644
--- a/__tests__/plots/tooltip/forecast-range-area-line-transpose.ts
+++ b/__tests__/plots/tooltip/forecast-range-area-line-transpose.ts
@@ -10,7 +10,6 @@ export function forecastRangeAreaLineTranspose(): G2Spec {
     },
     height: 800,
     width: 540,
-    paddingLeft: 60,
     coordinate: { transform: [{ type: 'transpose' }] },
     encode: { x: (d) => new Date(d[0]) },
     interaction: { tooltip: true },
diff --git a/__tests__/plots/tooltip/indices-line-formatter.ts b/__tests__/plots/tooltip/indices-line-formatter.ts
index 3b18a10ff8..dc303b4d0b 100644
--- a/__tests__/plots/tooltip/indices-line-formatter.ts
+++ b/__tests__/plots/tooltip/indices-line-formatter.ts
@@ -9,7 +9,6 @@ export async function indicesLineFormatter(): Promise<G2Spec> {
     type: 'line',
     data,
     legend: false,
-    paddingLeft: 60,
     encode: {
       x: (d) => d.Date.getFullYear(),
       y: 'Close',
diff --git a/__tests__/plots/tooltip/indices-line-reverse.ts b/__tests__/plots/tooltip/indices-line-reverse.ts
index 3f3c722e01..2a745aca63 100644
--- a/__tests__/plots/tooltip/indices-line-reverse.ts
+++ b/__tests__/plots/tooltip/indices-line-reverse.ts
@@ -8,7 +8,6 @@ export async function indicesLineReverse(): Promise<G2Spec> {
   return {
     type: 'view',
     width: 800,
-    paddingLeft: 60,
     children: [
       {
         type: 'line',
diff --git a/__tests__/plots/tooltip/profit-interval-legend-filter-ordinal.ts b/__tests__/plots/tooltip/profit-interval-legend-filter-ordinal.ts
index c06ba5b6e7..c413c6c6c1 100644
--- a/__tests__/plots/tooltip/profit-interval-legend-filter-ordinal.ts
+++ b/__tests__/plots/tooltip/profit-interval-legend-filter-ordinal.ts
@@ -5,7 +5,6 @@ import { profit } from '../../data/profit';
 
 export function profitIntervalLegendFilterOrdinal(): G2Spec {
   return {
-    paddingLeft: 60,
     type: 'interval',
     data: profit,
     axis: { x: { animate: false }, y: { labelFormatter: '~s' } },
diff --git a/__tests__/plots/tooltip/stateages-interval-normalized.ts b/__tests__/plots/tooltip/stateages-interval-normalized.ts
index d4dac27ac8..bc1e18c19f 100644
--- a/__tests__/plots/tooltip/stateages-interval-normalized.ts
+++ b/__tests__/plots/tooltip/stateages-interval-normalized.ts
@@ -4,7 +4,6 @@ import { tooltipSteps } from './utils';
 export function stateAgesIntervalNormalized(): G2Spec {
   return {
     type: 'interval',
-    paddingLeft: 50,
     width: 800,
     height: 1000,
     legend: false,
diff --git a/package.json b/package.json
index 923b7422be..b3f0ea7706 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
     "@antv/g": "^5.18.6",
     "@antv/g-canvas": "^1.11.5",
     "@antv/g-plugin-dragndrop": "^1.8.3",
-    "@antv/gui": "0.5.0-alpha.26",
+    "@antv/gui": "^0.5.0-alpha.26",
     "@antv/path-util": "^3.0.1",
     "@antv/scale": "^0.4.7",
     "@antv/util": "^3.3.2",
diff --git a/src/component/axis.ts b/src/component/axis.ts
index 4eca8099ed..2ffa95faad 100644
--- a/src/component/axis.ts
+++ b/src/component/axis.ts
@@ -2,7 +2,7 @@ import { Coordinate } from '@antv/coord';
 import type { DisplayObject } from '@antv/g';
 import { Axis as AxisComponent } from '@antv/gui';
 import { Linear as LinearScale } from '@antv/scale';
-import { deepMix, has, omit } from '@antv/util';
+import { deepMix, omit, upperFirst } from '@antv/util';
 import { extent } from 'd3-array';
 import { format } from 'd3-format';
 import {
@@ -304,15 +304,15 @@ function inferAxisLinearOverrideStyle(
     // axisY
     if (orientation === 'vertical') {
       return {
-        startPos: [x + width, y],
-        endPos: [x + width, y + height],
+        startPos: [x, y],
+        endPos: [x, y + height],
       };
     }
     // axisX
     else if (orientation === 'horizontal') {
       return {
-        startPos: [x, y + height],
-        endPos: [x + width, y + height],
+        startPos: [x, y],
+        endPos: [x + width, y],
       };
     }
     // axis with rotate
@@ -426,7 +426,7 @@ const ArcAxisComponent: GCC<AxisOptions> = (options) => {
       // @fixme transform is not valid for arcAxis.
       // @ts-ignore
       style: omit(finalStyle, ['transform']),
-    });
+    }) as unknown as DisplayObject;
   };
 };
 
@@ -439,12 +439,12 @@ function inferThemeStyle(
   orientation: GCO,
 ) {
   const baseStyle = theme.axis;
-  let furtherStyle = theme.axisLinear;
-
-  if (['top', 'right', 'bottom', 'left'].includes(position)) {
-    furtherStyle = theme[`axis${capitalizeFirst(position)}`];
-  }
-  return Object.assign({}, baseStyle, furtherStyle);
+  const positionStyle = ['top', 'right', 'bottom', 'left'].includes(position)
+    ? theme[`axis${capitalizeFirst(position)}`]
+    : theme.axisLinear;
+  const channel = scale.getOptions().name;
+  const channelStyle = theme[`axis${upperFirst(channel)}`] || {};
+  return Object.assign({}, baseStyle, positionStyle, channelStyle);
 }
 
 function inferDefaultStyle(
@@ -573,7 +573,7 @@ const LinearAxisComponent: GCC<AxisOptions> = (options) => {
     return new AxisComponent({
       className: 'axis',
       style: adaptor(finalAxisStyle),
-    });
+    }) as unknown as DisplayObject;
   };
 };
 
@@ -617,6 +617,8 @@ LinearAxis.props = {
   defaultPosition: 'center',
   defaultSize: 45,
   defaultOrder: 0,
+  defaultCrossPadding: [12, 12],
+  defaultPadding: [12, 12],
 };
 
 ArcAxis.props = {
@@ -624,4 +626,6 @@ ArcAxis.props = {
   defaultOrientation: 'vertical',
   defaultSize: 45,
   defaultOrder: 0,
+  defaultCrossPadding: [12, 12],
+  defaultPadding: [12, 12],
 };
diff --git a/src/component/legendCategory.ts b/src/component/legendCategory.ts
index 3ad3097c60..ceaec12707 100644
--- a/src/component/legendCategory.ts
+++ b/src/component/legendCategory.ts
@@ -1,14 +1,11 @@
-import type { Coordinate } from '@antv/coord';
 import type { DisplayObject } from '@antv/g';
 import { Category } from '@antv/gui';
 import { last } from '@antv/util';
 import { format } from 'd3-format';
-import { Identity, Point } from '@antv/scale';
+import { Identity } from '@antv/scale';
 import type {
   FlexLayout,
-  G2Library,
   G2MarkState,
-  G2Theme,
   GuideComponentComponent as GCC,
   GuideComponentOrientation as GCO,
   GuideComponentPosition as GCP,
@@ -246,6 +243,6 @@ LegendCategory.props = {
   defaultPosition: 'top',
   defaultOrder: 1,
   defaultSize: 40,
-  defaultPadding: [20, 10], // [horizontal, vertical]
-  defaultCrossPadding: [5, 10], // [horizontal, vertical]
+  defaultCrossPadding: [12, 12],
+  defaultPadding: [12, 12],
 };
diff --git a/src/component/legendContinuous.ts b/src/component/legendContinuous.ts
index ae3fd6ae89..a4592a7878 100644
--- a/src/component/legendContinuous.ts
+++ b/src/component/legendContinuous.ts
@@ -68,10 +68,9 @@ function inferContinuousShape(
   options: LegendContinuousOptions,
   component: GCC,
 ): Shape {
-  const { size, crossPadding = 0 } = options;
+  const { size } = options;
   const shape = inferComponentShape(value, options, component);
-  const finalSize = size - crossPadding * 2;
-  return updateShapeDimensions(shape, finalSize, shape.orientation);
+  return updateShapeDimensions(shape, size, shape.orientation);
 }
 
 function getFormatter(max: number) {
@@ -157,7 +156,7 @@ function getLinearConfig(
   return {
     ...shape,
     data: scale.getTicks().map((value) => ({ value })),
-    color: new Array(length).fill(0).map((d, i) => {
+    color: new Array(Math.floor(length)).fill(0).map((d, i) => {
       const value = ((max - min) / (length - 1)) * i + min;
       const color = scale.map(value);
       const opacity = opacityScale ? opacityScale.map(value) : 1;
@@ -285,5 +284,5 @@ LegendContinuous.props = {
   defaultLength: 200,
   defaultLegendSize: 60,
   defaultPadding: [20, 10], // [horizontal, vertical]
-  defaultCrossPadding: [5, 10], // [horizontal, vertical]
+  defaultCrossPadding: [12, 12], // [horizontal, vertical]
 };
diff --git a/src/component/scrollbar.ts b/src/component/scrollbar.ts
index 22dde7504d..f30a9c2a56 100644
--- a/src/component/scrollbar.ts
+++ b/src/component/scrollbar.ts
@@ -1,4 +1,5 @@
 import { Scrollbar as ScrollbarComponent } from '@antv/gui';
+import { DisplayObject } from '@antv/g';
 import { GuideComponentComponent as GCC } from '../runtime';
 
 export type ScrollbarOptions = {
@@ -34,7 +35,7 @@ export const Scrollbar: GCC<ScrollbarOptions> = (options) => {
         contentLength: actualSize,
         viewportLength: mainSize,
       }),
-    });
+    }) as unknown as DisplayObject;
   };
 };
 
@@ -42,4 +43,6 @@ Scrollbar.props = {
   defaultPosition: 'bottom',
   defaultSize: 24,
   defaultOrder: 1,
+  defaultCrossPadding: [12, 12],
+  defaultPadding: [12, 12],
 };
diff --git a/src/component/slider.ts b/src/component/slider.ts
index e56cd568d0..dc30c3d1de 100644
--- a/src/component/slider.ts
+++ b/src/component/slider.ts
@@ -1,5 +1,6 @@
 import { Slider as SliderComponent } from '@antv/gui';
 import { format } from 'd3-format';
+import { DisplayObject } from '@antv/g';
 import { isTranspose } from '../utils/coordinate';
 import { GuideComponentComponent as GCC } from '../runtime';
 import { invert } from '../utils/scale';
@@ -62,7 +63,7 @@ export const Slider: GCC<SliderOptions> = (options) => {
         ...style,
         ...rest,
       }),
-    });
+    }) as unknown as DisplayObject;
   };
 };
 
@@ -70,4 +71,6 @@ Slider.props = {
   defaultPosition: 'bottom',
   defaultSize: 24,
   defaultOrder: 1,
+  defaultCrossPadding: [12, 12],
+  defaultPadding: [12, 12],
 };
diff --git a/src/component/title.ts b/src/component/title.ts
index 7153108d8c..8b3aef7665 100644
--- a/src/component/title.ts
+++ b/src/component/title.ts
@@ -106,4 +106,6 @@ TitleComponent.props = {
   defaultPosition: 'top',
   defaultOrder: 2,
   defaultSize: 36,
+  defaultCrossPadding: [20, 20],
+  defaultPadding: [12, 12],
 };
diff --git a/src/component/utils.ts b/src/component/utils.ts
index 895651f9a7..da521b21cb 100644
--- a/src/component/utils.ts
+++ b/src/component/utils.ts
@@ -124,15 +124,13 @@ export function inferComponentShape(
     position = 'top',
     size: userDefinedSize,
     length: userDefinedLength,
-    crossPadding = 0,
   } = options;
   const isHorizontal = ['top', 'bottom', 'center'].includes(position);
   const [bboxSize, bboxLength] = isHorizontal
     ? [bbox.height, bbox.width]
     : [bbox.width, bbox.height];
   const { defaultSize, defaultLength } = component.props;
-  const size0 = userDefinedSize || defaultSize || bboxSize;
-  const size = size0 - crossPadding * 2;
+  const size = userDefinedSize || defaultSize || bboxSize;
   const length = userDefinedLength || defaultLength || bboxLength;
   const orientation = isHorizontal ? 'horizontal' : 'vertical';
   const [width, height] = isHorizontal ? [length, size] : [size, length];
diff --git a/src/runtime/component.ts b/src/runtime/component.ts
index 9437bdc427..766b00d164 100644
--- a/src/runtime/component.ts
+++ b/src/runtime/component.ts
@@ -82,14 +82,20 @@ export function inferComponent(
   // Title components.
   if (title) {
     const { props } = createGuideComponent('title');
-    const { defaultPosition, defaultOrientation, defaultOrder, defaultSize } =
-      props;
+    const {
+      defaultPosition,
+      defaultOrientation,
+      defaultOrder,
+      defaultSize,
+      defaultCrossPadding,
+    } = props;
     const titleOptions = typeof title === 'string' ? { title } : title;
     components.push({
       type: 'title',
       position: defaultPosition,
       orientation: defaultOrientation,
       order: defaultOrder,
+      crossPadding: defaultCrossPadding[0],
       defaultSize,
       ...titleOptions,
     });
@@ -222,7 +228,7 @@ export function groupComponents(
 
   // Update attributes of group components,
   // and maybe flatten group components without enough room.
-  return grouped.flatMap(([, components], i) => {
+  return grouped.flatMap(([, components]) => {
     if (components.length === 1) return components[0];
 
     // If crossSize defined, group components only when has
@@ -435,17 +441,10 @@ function inferAxisPositionAndOrientation(
     return ['center', angle];
   }
 
-  // There are multiple axes for parallel coordinate.
-  // Place the first one in the border area and put others in the center.
   if (type === 'axisY' && isParallel(coordinates)) {
-    // name looks like `position${number}`
-    const index = matchPosition(name);
-    if (index === null) return ordinalPosition;
-
-    if (isTranspose(coordinates)) {
-      return index === 0 ? ['top', null] : ['center', 'horizontal'];
-    }
-    return index === 0 ? ordinalPosition : ['center', 'vertical'];
+    return isTranspose(coordinates)
+      ? ['center', 'horizontal']
+      : ['center', 'vertical'];
   }
 
   // in non-cartesian coordinate systems, infer the arc axis angle
@@ -541,12 +540,18 @@ function inferScrollableComponents(
     if (!options || !componentType) return;
 
     const { props } = createGuideComponent(componentType);
-    const { defaultPosition, defaultSize, defaultOrder } = props;
+    const {
+      defaultPosition,
+      defaultSize,
+      defaultOrder,
+      defaultCrossPadding: [crossPadding],
+    } = props;
     return {
       position: defaultPosition,
       defaultSize,
       order: defaultOrder,
       type: componentType,
+      crossPadding,
       ...options,
       scales: [scale],
     };
@@ -585,6 +590,7 @@ export function computeComponentSize(
     if (t === 'legendCategory') return computeCategoryLegendSize;
     if (t.startsWith('slider')) return computeSliderSize;
     if (t === 'title') return computeTitleSize;
+    if (t.startsWith('scrollbar')) return computeScrollbarSize;
     return () => {};
   };
   return createCompute()(
@@ -626,6 +632,18 @@ function computeGroupSize(
   children.forEach((d) => (d.size = maxSize));
 }
 
+function computeScrollbarSize(
+  component: G2GuideComponentOptions,
+  crossSize: number,
+  crossPadding: [number, number],
+  position: GCP,
+  theme: G2Theme,
+  library: G2Library,
+) {
+  const { trackSize = 6 } = deepMix({}, theme.scrollbar, component);
+  component.size = trackSize;
+}
+
 function computeTitleSize(
   component: G2GuideComponentOptions,
   crossSize: number,
@@ -692,7 +710,7 @@ function computeAxisSize(
   const scale = createScale(component, library);
   const labelBBoxes = computeLabelsBBox(rest, scale);
   const paddingTick = tickLength + labelSpacing;
-  if (labelBBoxes) {
+  if (labelBBoxes && labelBBoxes.length) {
     const maxLabelWidth = max(labelBBoxes, (d) => d.width);
     const maxLabelHeight = max(labelBBoxes, (d) => d.height);
     if (isVertical) {
@@ -712,7 +730,7 @@ function computeAxisSize(
       }
     }
   } else {
-    component.size = paddingTick;
+    component.size = tickLength;
   }
 
   // Compute title.
@@ -776,9 +794,6 @@ function computeContinuousLegendSize(
       component.size += titleSpacing + titleBBox.height;
     }
   }
-
-  const { crossPadding: cp = 0 } = component;
-  component.size += cp * 2;
 }
 
 function computeCategoryLegendSize(
@@ -791,7 +806,14 @@ function computeCategoryLegendSize(
 ) {
   const styleOf = () => {
     const { legendCategory } = theme;
-    return deepMix({}, legendCategory, component);
+    const { title } = component;
+    const [defaultTitle, specifiedTitle] = Array.isArray(title)
+      ? [title, undefined]
+      : [undefined, title];
+    return deepMix({ title: defaultTitle }, legendCategory, {
+      ...component,
+      title: specifiedTitle,
+    });
   };
 
   const {
@@ -800,16 +822,24 @@ function computeCategoryLegendSize(
     titleSpacing,
     rowPadding,
     colPadding,
+    maxCols = Infinity,
+    maxRows = Infinity,
     ...rest
   } = styleOf();
 
   const { cols, length } = component;
 
-  const crossSize = length === undefined ? crossSize0 : length;
+  const getRows = (rows) => Math.min(rows, maxRows);
+  const getCols = (cols) => Math.min(cols, maxCols);
 
   // Vertical or horizontal.
   const isVertical = position === 'left' || position === 'right';
 
+  const crossSize =
+    length === undefined
+      ? crossSize0 + (isVertical ? 0 : crossPadding[0] + crossPadding[1])
+      : length;
+
   // Compute title.
   const titleBBox = computeTitleBBox(rest);
 
@@ -848,16 +878,16 @@ function computeCategoryLegendSize(
       maxRows = rows;
       maxPos = pos;
     }
-    component.size = maxSize * cols;
+    component.size = maxSize * getCols(cols);
     component.length = maxPos + titleHeight;
-    deepMix(component, { cols, gridRow: maxRows });
+    deepMix(component, { cols: getCols(cols), gridRow: maxRows });
   };
 
   // Horizontal grid layout.
   const computeHorizontalGrid = () => {
     const rows = Math.ceil(labelBBoxes.length / cols);
     const maxWidth = max(labelBBoxes, (d) => widthOf(d.width)) * cols;
-    component.size = height * rows;
+    component.size = height * getRows(rows) - rowPadding;
     component.length = Math.min(maxWidth, crossSize);
   };
 
@@ -877,7 +907,7 @@ function computeCategoryLegendSize(
       }
     }
     if (rows === 1) maxPos = pos;
-    component.size = height * rows;
+    component.size = height * getRows(rows) - rowPadding;
     component.length = maxPos;
   };
 
@@ -893,10 +923,6 @@ function computeCategoryLegendSize(
       component.size += titleSpacing + titleBBox.height;
     }
   }
-
-  // Compute crossPadding.
-  const { crossPadding: cp = 0 } = component;
-  component.size += cp * 2;
 }
 
 export function createScale(
@@ -1065,7 +1091,8 @@ function computeLabelSize(
   style: Record<string, any>,
 ): DOMRect {
   const shape = normalizeLabel(d);
-  shape.attr({ ...style, visibility: 'none' });
+  const { filter, ...rest } = style;
+  shape.attr({ ...rest, visibility: 'none' });
   const bbox = shape.getBBox();
   return bbox;
 }
diff --git a/src/runtime/layout.ts b/src/runtime/layout.ts
index 8d98b8b04d..171c2d2fd8 100644
--- a/src/runtime/layout.ts
+++ b/src/runtime/layout.ts
@@ -1,5 +1,5 @@
 import { Coordinate } from '@antv/coord';
-import { ascending, group, max, sum } from 'd3-array';
+import { ascending, group, max, min, sum } from 'd3-array';
 import { deepMix } from '@antv/util';
 import { isParallel, isPolar, isRadar, radiusOf } from '../utils/coordinate';
 import { capitalizeFirst, defined } from '../utils/helper';
@@ -22,7 +22,10 @@ import {
   styleOf,
 } from './component';
 import { G2GuideComponentOptions, G2Library, G2View } from './types/options';
-import { isPolar as isPolarOptions } from './coordinate';
+import {
+  isPolar as isPolarOptions,
+  isRadial as isRadarOptions,
+} from './coordinate';
 
 export function computeLayout(
   components: G2GuideComponentOptions[],
@@ -35,17 +38,17 @@ export function computeLayout(
     height,
     x = 0,
     y = 0,
-    inset = 0,
+    inset = theme.inset ?? 0,
     insetLeft = inset,
     insetTop = inset,
     insetBottom = inset,
     insetRight = inset,
-    margin = 0,
+    margin = theme.margin ?? 0,
     marginLeft = margin,
     marginBottom = margin,
     marginTop = margin,
     marginRight = margin,
-    padding,
+    padding = theme.padding,
     paddingBottom = padding,
     paddingLeft = padding,
     paddingRight = padding,
@@ -72,7 +75,10 @@ export function computeLayout(
     ];
   };
 
-  const roughPadding = (padding) => (padding === 'auto' ? 30 : padding ?? 30);
+  const roughPadding = (padding) =>
+    padding === 'auto'
+      ? theme.paddingDefault || 20
+      : padding ?? (theme.paddingDefault || 20);
   const rpt = roughPadding(paddingTop);
   const rpb = roughPadding(paddingBottom);
 
@@ -128,6 +134,8 @@ export function computeLayout(
   };
 }
 
+// For composite mark with a layout algorithm and without axis,
+// such as worldcloud, circlepack.
 export function computeRoughPlotSize(options: G2View) {
   const {
     height,
@@ -151,7 +159,7 @@ export function computeRoughPlotSize(options: G2View) {
 
   // @todo Add this padding to theme.
   // 30 is default size for padding, which defined in runtime.
-  const maybeAuto = (padding) => (padding === 'auto' ? 30 : padding);
+  const maybeAuto = (padding) => (padding === 'auto' ? 20 : padding);
 
   const finalWidth =
     width -
@@ -181,7 +189,9 @@ function computeInset(
   library: G2Library,
 ) {
   const { coordinates } = options;
-  if (!isPolarOptions(coordinates)) return options;
+  if (!isPolarOptions(coordinates) && !isRadarOptions(coordinates)) {
+    return options;
+  }
 
   // Filter axis.
   const axes = components.filter(
@@ -245,11 +255,12 @@ function computePadding(
 ) {
   const positionComponents = group(components, (d) => d.position);
   const {
-    padding,
+    padding = theme.padding,
     paddingLeft = padding,
     paddingRight = padding,
     paddingBottom = padding,
     paddingTop = padding,
+    coordinates,
   } = options;
   const layout = {
     paddingBottom,
@@ -260,6 +271,7 @@ function computePadding(
 
   for (const position of positions) {
     const key = `padding${capitalizeFirst(camelCase(position))}`;
+    const insetKey = `inset${capitalizeFirst(camelCase(position))}`;
     const components = positionComponents.get(position) || [];
     const value = layout[key];
     const defaultSizeOf = (d) => {
@@ -290,17 +302,42 @@ function computePadding(
       }
     };
 
+    const hasPolarInset = () => {
+      if (!isPolarOptions(coordinates) && !isRadarOptions(coordinates)) {
+        return false;
+      }
+      if (options[insetKey] === 0) return false;
+      return true;
+    };
+
+    const isHorizontal = position === 'bottom' || position === 'top';
+
+    // !!!Note
+    // Mute axis component padding.
+    // The first axis do not has padding.
+    const minOrder = min(components, (d) => d.order);
+    const axes = components.filter(
+      (d) => (d.type as string).startsWith('axis') && d.order == minOrder,
+    );
+    if (axes.length) axes[0].crossPadding = 0;
+
     // Specified padding.
     if (typeof value === 'number') {
       components.forEach(defaultSizeOf);
     } else {
       // Compute padding dynamically.
       if (components.length === 0) {
-        layout[key] = 30;
+        layout[key] = hasPolarInset() ? 0 : theme.paddingDefault || 20;
       } else {
-        const grouped = groupComponents(components, crossSize);
+        const size = isHorizontal
+          ? crossSize + crossPadding[0] + crossPadding[1]
+          : crossSize;
+        const grouped = groupComponents(components, size);
         grouped.forEach(autoSizeOf);
-        const totalSize = grouped.reduce((sum, { size }) => sum + size, 0);
+        const totalSize = grouped.reduce(
+          (sum, { size, crossPadding = 12 }) => sum + size + crossPadding,
+          0,
+        );
         layout[key] = totalSize;
       }
     }
@@ -350,9 +387,19 @@ export function placeComponents(
   ];
 
   const section: Section = {
-    top: [pl, 0, innerWidth, pt, 'vertical', true, ascending],
+    top: [pl, 0, innerWidth, pt, 'vertical', true, ascending, 0, width],
     right: [width - pr, pt, pr, innerHeight, 'horizontal', false, ascending],
-    bottom: [pl, height - pb, innerWidth, pb, 'vertical', false, ascending],
+    bottom: [
+      pl,
+      height - pb,
+      innerWidth,
+      pb,
+      'vertical',
+      false,
+      ascending,
+      0,
+      width,
+    ],
     left: [0, pt, pl, innerHeight, 'horizontal', true, ascending],
     'top-left': [pl, 0, innerWidth, pt, 'vertical', true, ascending],
     'top-right': [pl, 0, innerWidth, pt, 'vertical', true, ascending],
@@ -387,7 +434,6 @@ export function placeComponents(
      * @description entity components: other components
      * @description no volume components take up no extra space
      */
-
     const [nonEntityComponents, entityComponents] = divide(
       components,
       (component) => {
@@ -532,7 +578,7 @@ function placeAxisParallelVertical(
 
   // Create a high dimension vector and map to a list of two-dimension points.
   // [0, 0, 0] -> [x0, 0, x1, 0, x2, 0]
-  const vector = new Array(components.length + 1).fill(0);
+  const vector = new Array(components.length).fill(0);
   const points = coordinate.map(vector);
 
   // Extract x of each points.
@@ -557,7 +603,7 @@ function placeAxisParallelHorizontal(
 
   // Create a high dimension vector and map to a list of two-dimension points.
   // [0, 0, 0] -> [height, y0, height, y1, height, y2]
-  const vector = new Array(components.length + 1).fill(0);
+  const vector = new Array(components.length).fill(0);
   const points = coordinate.map(vector);
 
   // Extract y of each points.
@@ -571,8 +617,6 @@ function placeAxisParallelHorizontal(
     const height = Y[i + 1] - y;
     component.bbox = { x, y, width, height };
   }
-
-  // override style
 }
 
 function placeAxisRadar(
@@ -596,7 +640,8 @@ function placePaddingArea(
   coordinate: Coordinate,
   area: SectionArea,
 ) {
-  const [x, y, width, height, direction, reverse, comparator] = area;
+  const [x, y, width, height, direction, reverse, comparator, minX, totalSize] =
+    area;
   const [
     mainStartKey,
     mainStartValue,
@@ -615,20 +660,35 @@ function placePaddingArea(
   // The smaller the order, the closer to center.
   components.sort((a, b) => comparator?.(a.order, b.order));
 
+  const isLarge = (type) =>
+    type === 'title' || type === 'group' || type.startsWith('legend');
+
+  const crossSizeOf = (type, small, bigger) => {
+    if (bigger === undefined) return small;
+    if (isLarge(type)) return bigger;
+    return small;
+  };
+
+  const crossStartOf = (type, x, minX) => {
+    if (minX === undefined) return x;
+    if (isLarge(type)) return minX;
+    return x;
+  };
+
   const startValue = reverse ? mainStartValue + mainSizeValue : mainStartValue;
   for (let i = 0, start = startValue; i < components.length; i++) {
     const component = components[i];
-    const { crossPadding = 0 } = component;
+    const { crossPadding = 0, type } = component;
     const { size } = component;
     component.bbox = {
       [mainStartKey]: reverse
-        ? start - size + crossPadding
+        ? start - size - crossPadding
         : start + crossPadding,
-      [crossStartKey]: crossStartValue,
-      [mainSizeKey]: size - crossPadding * 2,
-      [crossSizeKey]: crossSizeValue,
+      [crossStartKey]: crossStartOf(type, crossStartValue, minX),
+      [mainSizeKey]: size,
+      [crossSizeKey]: crossSizeOf(type, crossSizeValue, totalSize),
     };
-    start += size * (reverse ? -1 : 1);
+    start += (size + crossPadding) * (reverse ? -1 : 1);
   }
 
   // Place group components.
diff --git a/src/runtime/plot.ts b/src/runtime/plot.ts
index 681883a747..3f303d383e 100644
--- a/src/runtime/plot.ts
+++ b/src/runtime/plot.ts
@@ -1488,7 +1488,7 @@ function createExitFunction(
 
 function inferTheme(theme: G2ThemeOptions = {}): G2ThemeOptions {
   if (typeof theme === 'string') return { type: theme };
-  const { type = 'classic', ...rest } = theme;
+  const { type = 'light', ...rest } = theme;
   return { ...rest, type };
 }
 
diff --git a/src/runtime/render.ts b/src/runtime/render.ts
index 24e457b2a6..1fff2e9d53 100644
--- a/src/runtime/render.ts
+++ b/src/runtime/render.ts
@@ -71,12 +71,7 @@ export function render<T extends G2ViewTree = G2ViewTree>(
   },
 ): HTMLElement {
   // Initialize the context if it is not provided.
-  const { width = 640, height = 480, theme } = options;
-  if (!theme) {
-    error(
-      'ChartOptions.theme is required, such as `const chart = new Chart({ theme: "classic"})`.',
-    );
-  }
+  const { width = 640, height = 480 } = options;
   const keyed = inferKeys(options);
   const {
     canvas = Canvas(width, height),
diff --git a/src/runtime/scale.ts b/src/runtime/scale.ts
index d062ca09fb..025fee1d3c 100644
--- a/src/runtime/scale.ts
+++ b/src/runtime/scale.ts
@@ -423,6 +423,7 @@ function categoricalColors(
   const { category10: c10, category20: c20 } = theme;
   const defaultPalette = unique(values.flat()).length <= c10.length ? c10 : c20;
   const { palette = defaultPalette, offset } = options;
+  if (Array.isArray(palette)) return palette;
   // Built-in palettes have higher priority.
   try {
     return usePalette({ type: palette });
diff --git a/src/runtime/types/common.ts b/src/runtime/types/common.ts
index e78097f2be..1b7abe93f3 100644
--- a/src/runtime/types/common.ts
+++ b/src/runtime/types/common.ts
@@ -191,6 +191,8 @@ export type SectionArea = [
   direction: Direction,
   reverse: boolean,
   comparator: (a: Primitive, b: Primitive) => number,
+  minX?: number,
+  totalWidth?: number,
 ];
 
 export type Section = Record<GuideComponentPosition, SectionArea>;
diff --git a/src/runtime/types/theme.ts b/src/runtime/types/theme.ts
index e4e7a14e96..24c17696b4 100644
--- a/src/runtime/types/theme.ts
+++ b/src/runtime/types/theme.ts
@@ -68,6 +68,8 @@ type InteractionTheme = {
 
 type ComponentTheme = {
   axis?: any;
+  axisX?: any;
+  axisY?: any;
   axisLinear?: any;
   axisTop?: any;
   axisBottom?: any;
@@ -75,6 +77,7 @@ type ComponentTheme = {
   axisRight?: any;
   axisRadar?: any;
   axisArc?: any;
+  legend?: any;
   legendCategory?: any;
   legendContinuous?: any;
   label?: LabelStyleProps;
@@ -111,9 +114,13 @@ type AreaTheme = {
 };
 
 export type G2Theme = {
+  padding?: 'auto' | number;
+  paddingDefault?: number;
+  inset?: 'auto' | number;
+  margin?: number;
   color?: string;
-  category10?: string;
-  category20?: string;
+  category10?: string | string[];
+  category20?: string | string[];
   size?: number;
   view?: WithPrefix<AreaTheme, 'view'> &
     WithPrefix<AreaTheme, 'plot'> &
diff --git a/src/stdlib/index.ts b/src/stdlib/index.ts
index b6173effb9..dfd8a490d6 100644
--- a/src/stdlib/index.ts
+++ b/src/stdlib/index.ts
@@ -116,7 +116,7 @@ import {
   Heatmap as HeatmapShape,
   Trail,
 } from '../shape';
-import { Classic, ClassicDark, Academy } from '../theme';
+import { Classic, ClassicDark, Academy, Light } from '../theme';
 import {
   AxisLinear,
   AxisArc,
@@ -445,6 +445,7 @@ export function createLibrary(): G2Library {
     'theme.classic': Classic,
     'theme.classicDark': ClassicDark,
     'theme.academy': Academy,
+    'theme.light': Light,
     'component.axisX': AxisX,
     'component.axisY': AxisY,
     'component.axisRadar': AxisRadar,
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 16faa6ec05..ed4d77538f 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -1,3 +1,4 @@
 export { Classic } from './classic';
 export { ClassicDark } from './classicDark';
 export { Academy } from './academy';
+export { Light } from './light';
diff --git a/src/theme/light.ts b/src/theme/light.ts
new file mode 100644
index 0000000000..ec6199ca96
--- /dev/null
+++ b/src/theme/light.ts
@@ -0,0 +1,470 @@
+import { ThemeComponent as TC, Theme } from '../runtime';
+
+export type LightOptions = Theme;
+
+const COLORS = {
+  BLACK: '#1D2129',
+  WHITE: '#fff',
+  STROKE: '#416180',
+  DEFAULT: '#1677FF',
+  BACKGROUND: 'transparent',
+};
+
+const PADDING = {
+  1: 8,
+  2: 12,
+  3: 20,
+};
+
+const ALPHA = {
+  90: 0.9,
+  65: 0.65,
+  45: 0.45,
+  25: 0.25,
+  10: 0.1,
+};
+
+/**
+ * Default theme.
+ */
+export const Light: TC<LightOptions> = (options) => {
+  const defaultOptions: Theme = {
+    paddingDefault: 20,
+    padding: 'auto',
+    margin: 0,
+    color: COLORS.DEFAULT,
+    size: 1,
+    category10: [
+      '#1677FF',
+      '#00C9AF',
+      '#9C5CE6',
+      '#F29900',
+      '#05C9F0',
+      '#5AA822',
+      '#FF7B57',
+      '#018282',
+      '#FA6992',
+    ],
+    category20: [
+      '#1677FF',
+      '#00C9AF',
+      '#9C5CE6',
+      '#F29100',
+      '#05C9F0',
+      '#5AA822',
+      '#FF8157',
+      '#018282',
+      '#FA6992',
+      '#A8B7FF',
+      '#6EDBD2',
+      '#C79CF7',
+      '#FFBD9C',
+      '#F79CE0',
+      '#8AD3EB',
+      '#81D785',
+      '#FFABAB',
+      '#5BD8A4',
+      '#FFB8E2',
+    ],
+    enter: {
+      duration: 300,
+      fill: 'both',
+      delay: 0,
+    },
+    update: {
+      duration: 300,
+      fill: 'both',
+      delay: 0,
+    },
+    exit: {
+      duration: 300,
+      fill: 'both',
+      delay: 0,
+    },
+    view: {
+      viewFill: COLORS.BACKGROUND,
+      plotFill: 'transparent',
+      mainFill: 'transparent',
+      contentFill: 'transparent',
+    },
+    line: {
+      line: {
+        fill: '',
+        strokeOpacity: 1,
+        lineWidth: 1,
+      },
+    },
+    point: {
+      point: {
+        r: 3,
+        fillOpacity: 0.95,
+        lineWidth: 0,
+      },
+      hollow: {
+        r: 3,
+        strokeOpacity: 0.95,
+        lineWidth: 1,
+      },
+      plus: {
+        r: 3,
+        strokeOpacity: 0.95,
+        lineWidth: 3,
+      },
+      diamond: {
+        r: 3,
+        strokeOpacity: 0.95,
+        lineWidth: 1,
+      },
+    },
+    interval: {
+      rect: {
+        fillOpacity: 0.95,
+      },
+      hollow: {
+        fill: '',
+        strokeOpacity: 1,
+        lineWidth: 2,
+      },
+    },
+    area: {
+      area: {
+        fillOpacity: 0.85,
+        lineWidth: 0,
+      },
+    },
+    polygon: {
+      polygon: {
+        fillOpacity: 0.95,
+      },
+    },
+    cell: {
+      cell: {
+        fillOpacity: 0.95,
+      },
+      hollow: {
+        fill: '',
+        strokeOpacity: 1,
+        lineWidth: 2,
+      },
+    },
+    rect: {
+      rect: {
+        fillOpacity: 0.95,
+      },
+      hollow: {
+        fill: '',
+        strokeOpacity: 1,
+        lineWidth: 2,
+      },
+    },
+    link: {
+      link: {
+        fill: '',
+        strokeOpacity: 1,
+      },
+    },
+    vector: {
+      vector: {
+        fillOpacity: 1,
+      },
+    },
+    box: {
+      box: {
+        fillOpacity: 0.95,
+        stroke: COLORS.BLACK,
+        lineWidth: 1,
+      },
+    },
+    text: {
+      text: {
+        fill: '#1D2129',
+        fontSize: 12,
+        strokeWidth: 0,
+        connectorStroke: COLORS.STROKE,
+        connectorStrokeOpacity: 0.45,
+        connectorLineWidth: 1,
+        backgroundFill: COLORS.STROKE,
+        backgroundFillOpacity: 0.15,
+        backgroundPadding: [2, 4],
+        startMarkerSymbol: 'circle',
+        startMarkerSize: 4,
+        endMarkerSymbol: 'circle',
+        endMarkerSize: 4,
+      },
+      badge: {
+        fill: '#1D2129',
+        fillOpacity: 0.65,
+        strokeWidth: 0,
+        fontSize: 10,
+        textAlign: 'center',
+        textBaseline: 'middle',
+        markerFill: COLORS.STROKE,
+        markerFillOpacity: 0.25,
+        markerStrokeOpacity: 0,
+      },
+    },
+    lineX: {
+      line: {
+        stroke: COLORS.STROKE,
+        strokeOpacity: 0.45,
+        lineWidth: 1,
+      },
+    },
+    lineY: {
+      line: {
+        stroke: COLORS.STROKE,
+        strokeOpacity: 0.45,
+        lineWidth: 1,
+      },
+    },
+    rangeX: {
+      range: {
+        fill: COLORS.STROKE,
+        fillOpacity: 0.15,
+        lineWidth: 0,
+      },
+    },
+    rangeY: {
+      range: {
+        fill: COLORS.STROKE,
+        fillOpacity: 0.15,
+        lineWidth: 0,
+      },
+    },
+    connector: {
+      connector: {
+        stroke: COLORS.STROKE,
+        strokeOpacity: 0.45,
+        lineWidth: 1,
+        connectLength1: 12,
+        endMarker: true,
+        endMarkerSize: 6,
+        endMarkerFill: COLORS.STROKE,
+        endMarkerFillOpacity: 0.95,
+      },
+    },
+    axis: {
+      arrow: false,
+      gridLineDash: [3, 4],
+      gridLineWidth: 0.5,
+      gridStroke: COLORS.BLACK,
+      gridStrokeOpacity: ALPHA[10],
+      labelAlign: 'horizontal',
+      labelFill: COLORS.BLACK,
+      labelOpacity: ALPHA[45],
+      labelFontSize: 12,
+      labelFontWeight: 'normal',
+      labelSpacing: PADDING[1], // spacing between label and it's tick
+      line: false,
+      lineLineWidth: 0.5,
+      lineStroke: COLORS.BLACK,
+      lineStrokeOpacity: ALPHA[45],
+      tickLength: 4,
+      tickLineWidth: 1,
+      tickStroke: COLORS.BLACK,
+      tickOpacity: ALPHA[45],
+      titleFill: COLORS.BLACK,
+      titleOpacity: ALPHA[90],
+      titleFontSize: 12,
+      titleFontWeight: 'normal',
+      titleSpacing: 12,
+      titleTransformOrigin: 'center',
+    },
+    axisTop: {
+      gridDirection: 'positive',
+      labelDirection: 'negative',
+      tickDirection: 'negative',
+      titlePosition: 'top',
+      titleSpacing: 12,
+      titleTextBaseline: 'middle',
+    },
+    axisBottom: {
+      gridDirection: 'negative',
+      labelDirection: 'positive',
+      labelAutoRotate: true,
+      tickDirection: 'positive',
+      titlePosition: 'bottom',
+      titleSpacing: 12,
+      titleTextBaseline: 'bottom',
+    },
+    axisLeft: {
+      gridDirection: 'negative',
+      labelAutoRotate: false,
+      labelDirection: 'positive',
+      tickDirection: 'positive',
+      titlePosition: 'left',
+      titleSpacing: 12,
+      titleTextBaseline: 'middle',
+      titleDirection: 'vertical',
+      titleTransformOrigin: 'center',
+    },
+    axisRight: {
+      gridDirection: 'positive',
+      labelDirection: 'negative',
+      labelAutoRotate: false,
+      tickDirection: 'negative',
+      titlePosition: 'right',
+      titleSpacing: 12,
+      titleTextBaseline: 'top',
+      titleDirection: 'vertical',
+      titleTransformOrigin: 'center',
+    },
+    axisLinear: {
+      girdClosed: true,
+      gridConnect: 'arc',
+      gridDirection: 'negative',
+      gridType: 'surround',
+      titlePosition: 'top',
+      titleSpacing: 0,
+    },
+    axisArc: {
+      title: false,
+      titlePosition: 'inner',
+      line: false,
+      tick: true,
+      labelSpacing: 4,
+    },
+    axisRadar: {
+      girdClosed: true,
+      gridStrokeOpacity: 0.3,
+      gridType: 'surround',
+      label: false,
+      tick: false,
+      titlePosition: 'start',
+    },
+    legendCategory: {
+      backgroundFill: 'transparent',
+      itemBackgroundFill: 'transparent',
+      itemLabelFill: COLORS.BLACK,
+      itemLabelFillOpacity: ALPHA[90],
+      itemLabelFontSize: 12,
+      itemLabelFontWeight: 'normal',
+      itemMarkerFillOpacity: 1,
+      itemMarkerSize: 8,
+      itemSpacing: [PADDING[1], PADDING[1]],
+      itemValueFill: COLORS.BLACK,
+      itemValueFillOpacity: 0.65,
+      itemValueFontSize: 12,
+      itemValueFontWeight: 'normal',
+      navButtonFill: COLORS.BLACK,
+      navButtonFillOpacity: 0.65,
+      navPageNumFill: COLORS.BLACK,
+      navPageNumFillOpacity: 0.45,
+      navPageNumFontSize: 12,
+      padding: 8,
+      title: false,
+      titleFill: COLORS.BLACK,
+      titleFillOpacity: 0.65,
+      titleFontSize: 12,
+      titleFontWeight: 'normal',
+      titleSpacing: 4,
+      tickStroke: COLORS.BLACK,
+      tickStrokeOpacity: 0.25,
+      rowPadding: PADDING[1],
+      colPadding: PADDING[2],
+      maxRows: 3,
+      maxCols: 3,
+    },
+    legendContinuous: {
+      handleHeight: 12,
+      handleLabelFill: COLORS.BLACK,
+      handleLabelFillOpacity: ALPHA[45],
+      handleLabelFontSize: 12,
+      handleLabelFontWeight: 'normal',
+      handleMarkerFill: COLORS.BLACK,
+      handleMarkerFillOpacity: 0.6,
+      handleMarkerLineWidth: 1,
+      handleMarkerStroke: COLORS.BLACK,
+      handleMarkerStrokeOpacity: 0.25,
+      handleWidth: 10,
+      labelFill: COLORS.BLACK,
+      labelFillOpacity: ALPHA[45],
+      labelFontSize: 12,
+      labelFontWeight: 'normal',
+      labelSpacing: 3,
+      tick: true,
+      tickLength: 12,
+      ribbonSize: 12,
+      ribbonFill: '#aaa',
+      handle: true,
+      handleLabel: false,
+      handleShape: 'slider',
+      handleIconSize: 12 / 1.8,
+      indicator: false,
+      titleFontSize: 12,
+      titleSpacing: 4,
+      titleFontWeight: 'normal',
+      titleFillOpacity: ALPHA[90],
+      tickStroke: COLORS.BLACK,
+      tickStrokeOpacity: ALPHA[45],
+    },
+    label: {
+      fill: COLORS.BLACK,
+      fillOpacity: 0.65,
+      fontSize: 12,
+      fontWeight: 'normal',
+      stroke: undefined,
+      offset: 12,
+      connectorStroke: COLORS.BLACK,
+      connectorStrokeOpacity: 0.45,
+      connectorLineWidth: 1,
+      connectorLength: 12,
+      connectorLength2: 8,
+      connectorDistance: 4,
+    },
+    innerLabel: {
+      fill: COLORS.WHITE,
+      fontSize: 12,
+      fillOpacity: 0.85,
+      fontWeight: 'normal',
+      stroke: undefined,
+      offset: 0,
+    },
+    slider: {
+      trackSize: 16,
+      trackFill: COLORS.STROKE,
+      trackFillOpacity: 1,
+      selectionFill: COLORS.DEFAULT,
+      selectionFillOpacity: 0.15,
+      handleIconSize: 10,
+      handleIconFill: '#f7f7f7',
+      handleIconFillOpacity: 1,
+      handleIconStroke: COLORS.BLACK,
+      handleIconStrokeOpacity: 0.25,
+      handleIconLineWidth: 1,
+      handleIconRadius: 2,
+      handleLabelFill: COLORS.BLACK,
+      handleLabelFillOpacity: 0.45,
+      handleLabelFontSize: 12,
+      handleLabelFontWeight: 'normal',
+    },
+    scrollbar: {
+      padding: [0, 0, 0, 0],
+      trackSize: 6,
+      isRound: true,
+      slidable: true,
+      scrollable: true,
+      trackFill: '#e5e5e5',
+      trackFillOpacity: 0,
+      thumbFill: '#000',
+      thumbFillOpacity: 0.15,
+      thumbHighlightedFillOpacity: 0.2,
+    },
+    title: {
+      spacing: 8,
+      titleFill: COLORS.BLACK,
+      titleFillOpacity: ALPHA[90],
+      titleFontSize: 16,
+      titleFontWeight: 'bold',
+      titleTextBaseline: 'top',
+      subtitleFill: COLORS.BLACK,
+      subtitleFillOpacity: ALPHA[65],
+      subtitleFontSize: 12,
+      subtitleFontWeight: 'normal',
+      subtitleTextBaseline: 'top',
+    },
+  };
+  return Object.assign({}, defaultOptions, options);
+};
+
+Light.props = {};
diff --git a/src/utils/size.ts b/src/utils/size.ts
index db4fbb92e5..e9ec40282e 100644
--- a/src/utils/size.ts
+++ b/src/utils/size.ts
@@ -57,7 +57,7 @@ export function getBBoxSize(options: G2View): Size {
 
   // @todo Add this padding to theme.
   // 30 is default size for padding, which defined in runtime.
-  const maybeAuto = (padding) => (padding === 'auto' ? 30 : padding);
+  const maybeAuto = (padding) => (padding === 'auto' ? 20 : padding);
 
   const finalWidth =
     width -