Add different colors to 4 quadrants in Plot

[sarthakag-veritech]

Hey, I want to add different colors to 4 quadrants of a plot in antd
I am trying type region its not working

import React from "react";
import { Scatter } from "@ant-design/plots";

export default function QuadrantChart() {
  const data = [
    { x: 10, y: 20 },
    { x: 30, y: 60 },
    { x: 70, y: 40 },
    { x: 90, y: 80 },
  ];

  const config = {
    data,
    xField: "x",
    yField: "y",
    pointSize: 5,
    quadrant: {
      xBaseline: 50, // vertical split
      yBaseline: 50, // horizontal split
      lineStyle: {
        stroke: "#aaa",
        lineDash: [4, 4],
      },
      labels: [
        { content: "Q1", position: "top-right" },
        { content: "Q2", position: "top-left" },
        { content: "Q3", position: "bottom-left" },
        { content: "Q4", position: "bottom-right" },
      ],
    },
    annotations: [
      // Q1
      {
        type: "region",
        start: [50, 50],
        end: ["max", "max"],
        style: { fill: "rgba(118, 96, 243, 0.1)" },
      },
      // Q2
      {
        type: "region",
        start: ["min", 50],
        end: [50, "max"],
        style: { fill: "rgba(243, 112, 176, 0.1)" },
      },
      // Q3
      {
        type: "region",
        start: ["min", "min"],
        end: [50, 50],
        style: { fill: "rgba(49, 199, 174, 0.1)" },
      },
      // Q4
      {
        type: "region",
        start: [50, "min"],
        end: ["max", 50],
        style: { fill: "rgba(255, 200, 0, 0.1)" },
      },
    ],
  };

  return <Scatter {...config} />;
}

Attaching an reference image

[lxfu1]

如何为 Ant Design Charts 的散点图添加四象限区域背景色

你的需求是：使用 @ant-design/plots 的 Scatter 组件，为图表四象限添加不同的背景色。你尝试使用了 annotations 的 region 类型，这是正确方式。【但重要注意：Scatter 组件的 region 注解目前仅支持 plot 区域内的填色，且属性写法需规范，否则效果出现问题。】

---

标准实现步骤

1. 设置四象限线：
   使用 config.quadrant 配置来控制象限线的基准点，并添加象限标签。
2. 添加象限区块颜色：
   通过 config.annotations 数组，添加对应的四个 type: "region" 注解，每个注解覆盖一个象限，并配置填充色。

---

标准代码示例（文档写法）

import React from "react";
import { Scatter } from "@ant-design/charts"; // 注意：建议用 "@ant-design/charts"，v2.4.0推荐（@ant-design/plots基本兼容）

const data = [
  { x: 10, y: 20 },
  { x: 30, y: 60 },
  { x: 70, y: 40 },
  { x: 90, y: 80 },
];

const config = {
  data,
  xField: "x",
  yField: "y",
  pointSize: 5,
  quadrant: {
    xBaseline: 50, // x 轴分割线
    yBaseline: 50, // y 轴分割线
    lineStyle: {
      stroke: "#aaa",
      lineDash: [4, 4],
    },
    labels: [
      { content: "Q1", position: "top-right" },
      { content: "Q2", position: "top-left" },
      { content: "Q3", position: "bottom-left" },
      { content: "Q4", position: "bottom-right" },
    ],
  },
  // 四个象限区域填色
  annotations: [
    // Q1: 右上
    {
      type: "region",
      start: [50, 50],
      end: ["max", "max"],
      style: {
        fill: "rgba(118, 96, 243, 0.1)",
        stroke: null,
      },
    },
    // Q2: 左上
    {
      type: "region",
      start: ["min", 50],
      end: [50, "max"],
      style: {
        fill: "rgba(243, 112, 176, 0.1)",
        stroke: null,
      },
    },
    // Q3: 左下
    {
      type: "region",
      start: ["min", "min"],
      end: [50, 50],
      style: {
        fill: "rgba(49, 199, 174, 0.1)",
        stroke: null,
      },
    },
    // Q4: 右下
    {
      type: "region",
      start: [50, "min"],
      end: ["max", 50],
      style: {
        fill: "rgba(255, 200, 0, 0.1)",
        stroke: null,
      },
    },
  ],
};

export default () => <Scatter {...config} />;

---

参数说明

• annotations:
  数组，每个元素可以设置 type: "region"，表示绘制一个矩形区域，start 表示左下/左上角，end 表示右上/右下角，style.fill 设置填充色。

• "min"和"max":
  特殊值，分别代表画布的最小坐标和最大坐标。

• quadrant.xBaseline和yBaseline:
  控制象限分割线的位置（以数据值为分界）。

---

常见问题/注意事项

1. 库版本兼容问题：
   建议使用 @ant-design/charts（最新版），与 @ant-design/plots 体验一致，文档链接：官方文档 - Scatter
2. region类型在其他组件：
   文档仅明确支持 Scatter、Line、Area 等基础图。部分复杂自定义场景建议确认支持情况。
3. 填充效果未生效？
   请确认数据范围、start和end值是否落在坐标轴数据范围内。建议先在不加 quadrant 的情况下用 region 试下。

---

官方文档参考

• Scatter 散点图 | Ant Design Charts
• annotations 注解 API

---

如果你还有其他定制化需求、或 region 注解不生效，请补充你的“组件版本号、报错信息”等详细场景，我会帮你进一步定位。

---

---

此回答由AI自动生成，仅供参考。如有疑问，请等待维护者回复。