Reference line text in Scatter Plot

[sarthakag-veritech]

I want to add a text above my reference line in below plot.
Reference image attached

Also after adding interactivity I am able to zoom on my bubbles, but how do I zoom out back?

import { Scatter } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const DemoScatter = () => {
  const config = {
    data: {
      type: 'fetch',
      value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/bubble.json',
    },
    xField: 'GDP',
    yField: 'LifeExpectancy',
    sizeField: 'Population',
    colorField: 'continent',
    shapeField: 'point',
    scale: {
      size: { type: 'log', range: [4, 20] },
    },
    style: { fillOpacity: 0.3, lineWidth: 1 },
       annotations: [
      {
        type: "lineY",
        data: [70],
        style: {
          stroke: "#FF9066",
          lineWidth: 2,
          lineDash: [4, 4],
        },
      },
      {
        type: "lineX",
        data: [40000],
        style: {
          stroke: "#FF9066",
          lineWidth: 2,
          lineDash: [4, 4],
        },
      },
    ],
  };
  return <Scatter {...config} />;
};

createRoot(document.getElementById('container')).render(<DemoScatter />);

[lxfu1]

在参考线（Reference Line）上方添加文本，以及图表交互缩放复原方法

---

1. 在参考线上方添加文本

您可以通过 annotations 属性，为参考线添加说明文字。
Ant Design Charts 支持 text 类型注解，可组合 lineY 或 lineX 实现此需求。

步骤说明

1. 添加 reference line（比如 lineY 或 lineX）
2. 添加 text 注解，并调整位置到参考线上方或附近

标准代码示例

import { Scatter } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const DemoScatter = () => {
  const config = {
    data: {
      type: 'fetch',
      value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/bubble.json',
    },
    xField: 'GDP',
    yField: 'LifeExpectancy',
    sizeField: 'Population',
    colorField: 'continent',
    shapeField: 'point',
    scale: {
      size: { type: 'log', range: [4, 20] },
    },
    style: { fillOpacity: 0.3, lineWidth: 1 },
    annotations: [
      {
        // 横向参考线
        type: "lineY",
        data: [70],
        style: {
          stroke: "#FF9066",
          lineWidth: 2,
          lineDash: [4, 4],
        },
      },
      {
        // 对应的文本注解（显示在 Y=70 参考线上方）
        type: "text",
        position: ['min', 70], // 'min' 代表最左侧，70为Y坐标
        content: "寿命参考线 (70)",
        style: {
          fill: "#FF9066",
          fontSize: 14,
          fontWeight: "bold",
        },
        offsetY: -10, // 控制文本与参考线间距，上方
      },
      {
        // 纵向参考线
        type: "lineX",
        data: [40000],
        style: {
          stroke: "#FF9066",
          lineWidth: 2,
          lineDash: [4, 4],
        },
      },
      {
        // 对应的文本注解（显示在 X=40000 参考线上方）
        type: "text",
        position: [40000, 'max'], // X=40000，Y为最大处
        content: "GDP参考线 (40000)",
        style: {
          fill: "#FF9066",
          fontSize: 14,
          fontWeight: "bold",
        },
        offsetX: 10, // 适当调整
        offsetY: -10, // 适当调整
      },
    ],
  };
  return <Scatter {...config} />;
};

createRoot(document.getElementById('container')).render(<DemoScatter />);

参数说明

• type: "text"：添加文字；
• position: [x, y]：文本位置，支持直接坐标或用 'min'/'max' 辅助定位；
• content：文本内容；
• style：文字样式；
• offsetX,offsetY：微调文本在横纵坐标方向上的位置。

更多注解配置详见官方文档注解章节

---

2. 缩放后如何缩放回去？

操作方法

Ant Design Charts Zoom 交互支持“点击重置按钮”或通过手势操作实现复原。组件内置了交互控制（交互模式，见 interactions）。

标准配置/用法

const config = {
  // ... 你的其他配置
  interactions: [
    { type: 'brush' },
    { type: 'zoom' }, // 支持缩放与拖拽
  ],
};

缩放复原方法：

• 默认支持“双击”画布自动复原；

• 或通过画布右上角小工具（如果内嵌了工具栏）恢复初始视角；

  • 缩放交互后，双击图表区域，即可回到初始缩放状态。

  注意：如果没有想要的复原交互或工具条，文档暂未涉及额外自定义控件。建议关注交互配置文档。

---

3. 相关文档链接

• 注解 Annotation API
• 交互 Interaction API
• Scatter 散点图官方文档

---

如需更多自定义，欢迎补充具体需求！

---

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

[Ayan-veritech]

How will i get toolbar for the zoom out option??

[sarthakag-veritech]

No, your provided suggestions are not working, additionally reference urls are not working

[lxfu1]

The answer in the AI response is V1.

import { Scatter } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const DemoAnnotations = () => {

  const config = {
    data: {
      type: 'fetch',
      value: 'https://assets.antv.antgroup.com/g2/top-30-countries-by-quality-of-life.json',
    },
    xField: 'x',
    yField: 'y',
    shapeField: 'circle',
    scale: { x: { domain: [137.5, 212] }, y: { domain: [0, 80] } },
    label: { text: 'name', fontSize: 10, dy: 6 },
    annotations: [
      {
        type: 'lineX',
        data: [200],
        style: {
          lineWidth: 2,
          stroke: 'red'
        },
      },
      {
        type: 'lineY',
        data: [30],
        style: {
          lineWidth: 2,
          stroke: 'red'
        },
        labels: [
          {
            text: 'lineX text',
            position: 'right',
            textBaseline: 'bottom',
            fill: '#000',
            fillOpacity: 0.45,
            background: true,
            backgroundFill: '#000',
            backgroundOpacity: 0.15,
          },
        ],
      },
      {
        type: 'text',
        data: [200, 80],
        style: {
          text: `2017-12-17, 受比特币影响，blockchain 搜索热度达到峰值：100`,
          wordWrap: true,
          wordWrapWidth: 164,
          dx: -174,
          dy: 30,
          fill: '#2C3542',
          fillOpacity: 0.65,
          fontSize: 10,
          background: true,
          backgroundRadius: 2,
          connector: true,
          startMarker: true,
          startMarkerFill: '#2C3542',
          startMarkerFillOpacity: 0.65,
        },
      },
    ],
  };
  return <Scatter {...config} />;
};

createRoot(document.getElementById('container')).render(<DemoAnnotations />);