fix: prevent label overlap in multiple charts (#6490)

src/label-transform/exceedAdjust.ts

@@ -34,9 +34,7 @@ export type ExceedAdjustOptions = Omit<ExceedAdjustLabel, 'type'>;
  * adjust the label when exceed the plot
  */
 export const ExceedAdjust: LLC<ExceedAdjustOptions> = () => {
-  return (labels: DisplayObject[], { canvas }) => {
-    const { width, height } = canvas.getConfig();
-
+  return (labels: DisplayObject[], { canvas, layout }) => {
     labels.forEach((l) => {
       show(l);
       const { max, min } = l.getRenderBounds();
@@ -47,9 +45,10 @@ export const ExceedAdjust: LLC<ExceedAdjustOptions> = () => {
           [xMin, yMin],
           [xMax, yMax],
         ],
+        // Prevent label overlap in multiple charts by calculating layouts separately to avoid collisions.
         [
-          [0, 0],
-          [width, height],
+          [layout.x, layout.y],
+          [layout.x + layout.width, layout.y + layout.height],
         ],
       );
       // For label with connectorPoints

src/runtime/plot.ts

@@ -1229,11 +1229,12 @@ function plotLabel(
   const labelGroups = group(labelShapes, (d) =>
     labelDescriptor.get(d.__data__),
   );
-  const { coordinate } = view;
+  const { coordinate, layout } = view;
 
   const labelTransformContext = {
     canvas: context.canvas,
     coordinate,
+    layout,
   };
   for (const [label, shapes] of labelGroups) {
     const { transform = [] } = label;

src/runtime/types/component.ts

@@ -15,6 +15,7 @@ import {
   Vector2,
   G2MarkState,
   GuideComponentPlane,
+  Layout,
 } from './common';
 import { DataComponent } from './data';
 import { Encode, EncodeComponent } from './encode';
@@ -233,6 +234,7 @@ export type LabelTransform = (
   context: {
     coordinate: Coordinate;
     canvas: Canvas;
+    layout: Layout;
   },
 ) => DisplayObject[];
 export type LabelTransformComponent<O = Record<string, unknown>> =