diff --git a/__tests__/integration/snapshots/interaction/weather-line-legend-mark/step0.png b/__tests__/integration/snapshots/interaction/weather-line-legend-mark/step0.png
index 1c8f9a1c17..71f441f0c7 100644
Binary files a/__tests__/integration/snapshots/interaction/weather-line-legend-mark/step0.png and b/__tests__/integration/snapshots/interaction/weather-line-legend-mark/step0.png differ
diff --git a/__tests__/integration/snapshots/interaction/weather-line-legend-mark/step1.png b/__tests__/integration/snapshots/interaction/weather-line-legend-mark/step1.png
index ec0ed3b876..c997cc3666 100644
Binary files a/__tests__/integration/snapshots/interaction/weather-line-legend-mark/step1.png and b/__tests__/integration/snapshots/interaction/weather-line-legend-mark/step1.png differ
diff --git a/__tests__/integration/snapshots/static/githubStarIntervalThemeAcademy.png b/__tests__/integration/snapshots/static/githubStarIntervalThemeAcademy.png
index 1ed436e502..8a24b2c991 100644
Binary files a/__tests__/integration/snapshots/static/githubStarIntervalThemeAcademy.png and b/__tests__/integration/snapshots/static/githubStarIntervalThemeAcademy.png differ
diff --git a/__tests__/plots/interaction/appl-line-slider-filter.ts b/__tests__/plots/interaction/appl-line-slider-filter.ts
index a844f34115..acc2e49127 100644
--- a/__tests__/plots/interaction/appl-line-slider-filter.ts
+++ b/__tests__/plots/interaction/appl-line-slider-filter.ts
@@ -37,7 +37,7 @@ export function dispatchValueChange(slider, values = [0.25, 0.75]) {
   );
 }
 
-aaplLineSliderFilter.maxError = 500;
+aaplLineSliderFilter.maxError = 600;
 
 aaplLineSliderFilter.steps = ({ canvas }) => {
   const { document } = canvas;
diff --git a/__tests__/plots/static/github-star-interval-theme-academy.ts b/__tests__/plots/static/github-star-interval-theme-academy.ts
index 92ca5dcb74..af39108dfb 100644
--- a/__tests__/plots/static/github-star-interval-theme-academy.ts
+++ b/__tests__/plots/static/github-star-interval-theme-academy.ts
@@ -4,9 +4,6 @@ import { githubStar } from '../../data/github-star';
 export function githubStarIntervalThemeAcademy(): G2Spec {
   return {
     type: 'interval',
-    width: 1000,
-    paddingBottom: 100,
-    paddingLeft: 160,
     data: {
       value: githubStar,
       transform: [{ type: 'sortBy', fields: [['star', true]] }],
diff --git a/src/runtime/component.ts b/src/runtime/component.ts
index 37f0a50ff0..4dcc8b7441 100644
--- a/src/runtime/component.ts
+++ b/src/runtime/component.ts
@@ -921,8 +921,12 @@ export function computeTitleBBox(
   const { title: styleTitle } = style;
   if (isFalsy(title) || isFalsy(styleTitle) || title === undefined) return null;
   const titleStyle = subObject(style, 'title');
+  const { direction, transform } = titleStyle;
   const titleText = Array.isArray(title) ? title.join(',') : title;
-  const titleBBox = computeLabelSize(titleText, titleStyle);
+  const titleBBox = computeLabelSize(titleText, {
+    ...titleStyle,
+    transform: transform || direction === 'vertical' ? 'rotate(-90)' : '',
+  });
   return titleBBox;
 }
 
diff --git a/src/runtime/plot.ts b/src/runtime/plot.ts
index ccb60eb1ec..aadc3de95c 100644
--- a/src/runtime/plot.ts
+++ b/src/runtime/plot.ts
@@ -1,7 +1,7 @@
 import { Vector2 } from '@antv/coord';
 import { DisplayObject, IAnimation as GAnimation, Rect } from '@antv/g';
 import { deepMix, upperFirst } from '@antv/util';
-import { group } from 'd3-array';
+import { group, groups } from 'd3-array';
 import { format } from 'd3-format';
 import { mapObject } from '../utils/array';
 import { ChartEvent } from '../utils/event';
@@ -799,9 +799,15 @@ async function plotView(
 
   // Render components.
   // @todo renderComponent return ctor and options.
+  // Key for each type of component.
+  // Index them grouped by position.
+  for (const [, C] of groups(components, (d) => `${d.type}-${d.position}`)) {
+    C.forEach((d, i) => (d.index = i));
+  }
+
   const componentsTransitions = selection
     .selectAll(className(COMPONENT_CLASS_NAME))
-    .data(components, (d, i) => `${d.type}-${i}`)
+    .data(components, (d) => `${d.type}-${d.position}-${d.index}`)
     .join(
       (enter) =>
         enter
diff --git a/src/theme/academy.ts b/src/theme/academy.ts
index 420cbbc43c..6641b867a3 100644
--- a/src/theme/academy.ts
+++ b/src/theme/academy.ts
@@ -272,7 +272,7 @@ export const Academy: TC<AcademyOptions> = (options) => {
       titlePosition: 'left',
       titleSpacing: 4,
       titleTextBaseline: 'middle',
-      titleTransform: `translate(50%, 0) rotate(-90) translate(0, -50%)`,
+      titleDirection: 'vertical',
       titleTransformOrigin: 'center',
     },
     axisRight: {
@@ -283,7 +283,7 @@ export const Academy: TC<AcademyOptions> = (options) => {
       titlePosition: 'right',
       titleSpacing: 0,
       titleTextBaseline: 'top',
-      titleTransform: `translate(-50%, 0) rotate(-90)`,
+      titleDirection: 'vertical',
       titleTransformOrigin: 'center',
     },
     axisLinear: {
diff --git a/src/theme/classic.ts b/src/theme/classic.ts
index 020f5aef86..3706a8457f 100644
--- a/src/theme/classic.ts
+++ b/src/theme/classic.ts
@@ -274,7 +274,7 @@ export const Classic: TC<ClassicOptions> = (options) => {
       titlePosition: 'left',
       titleSpacing: 10,
       titleTextBaseline: 'middle',
-      titleTransform: `translate(50%, 0) rotate(-90)`,
+      titleDirection: 'vertical',
       titleTransformOrigin: 'center',
     },
     axisRight: {
@@ -286,7 +286,7 @@ export const Classic: TC<ClassicOptions> = (options) => {
       titlePosition: 'right',
       titleSpacing: 0,
       titleTextBaseline: 'top',
-      titleTransform: `translate(-50%, 0) rotate(-90)`,
+      titleDirection: 'vertical',
       titleTransformOrigin: 'center',
     },
     axisLinear: {
diff --git a/src/theme/classicDark.ts b/src/theme/classicDark.ts
index 37463c0881..dee00bfa48 100644
--- a/src/theme/classicDark.ts
+++ b/src/theme/classicDark.ts
@@ -272,7 +272,7 @@ export const ClassicDark: TC<ClassicDarkOptions> = (options) => {
       titlePosition: 'left',
       titleSpacing: 10,
       titleTextBaseline: 'middle',
-      titleTransform: `translate(50%, 0) rotate(-90)`,
+      titleDirection: 'vertical',
       titleTransformOrigin: 'center',
     },
     axisRight: {
@@ -283,7 +283,7 @@ export const ClassicDark: TC<ClassicDarkOptions> = (options) => {
       titlePosition: 'right',
       titleSpacing: 0,
       titleTextBaseline: 'top',
-      titleTransform: `translate(-50%, 0) rotate(-90)`,
+      titleDirection: 'vertical',
       titleTransformOrigin: 'center',
     },
     axisLinear: {