ant-design / ant-design-charts

A React Chart Library
https://ant-design-charts.antgroup.com/
MIT License
1.95k stars 364 forks source link

🧐[问题] How to hide tooltip in annotations for pie chart #2552

Closed vominhtrius closed 5 months ago

vominhtrius commented 5 months ago

🧐 问题描述 [详细地描述问题,让大家都能理解]

Currently, Annotations for pie charts always display the tooltip (x:50% x:50%), I want to know how to hide this tooltip from the pie chart

💻 示例代码 [如果有必要,展示代码,线上示例,或仓库]

import React from 'react';
import ReactDOM from 'react-dom';
import { Pie } from '@ant-design/plots';

const DemoPie = () => {
  const config = {
    data: [
      { type: '分类一', value: 27 },
      { type: '分类二', value: 25 },
      { type: '分类三', value: 18 },
      { type: '分类四', value: 15 },
      { type: '分类五', value: 10 },
      { type: '其他', value: 5 },
    ],
    angleField: 'value',
    colorField: 'type',
    paddingRight: 80,
    innerRadius: 0.6,
    label: {
      text: 'value',
      style: {
        fontWeight: 'bold',
      },
    },
    legend: {
      color: {
        title: false,
        position: 'right',
        rowPadding: 5,
      },
    },
    annotations: [
      {
        type: 'text',
        style: {
          text: 'AntV\nCharts',
          x: '50%',
          y: '50%',
          textAlign: 'center',
          fontSize: 40,
          fontStyle: 'bold',
        },
      },
    ],
  };
  return <Pie {...config} />;
};

ReactDOM.render(<DemoPie />, document.getElementById('container'));

🚑 其他信息 [如截图等其他信息可以贴在这里]

image
lxfu1 commented 5 months ago
annotations: [
      {
        type: 'text',
        style: {
          text: 'AntV\nCharts',
          x: '50%',
          y: '50%',
          textAlign: 'center',
          fontSize: 40,
          fontStyle: 'bold',
        },
      tooltip: false
      },
    ],