CODEWITHSUNDEEP
reactjschartscomponentsantddonut-chart
Srinath Macherla
Srinath Macherla

Reputation: 103

How to remove tooltip in ant-design donut chart

I am trying to remove the tooltip from the donut chart in @ant-design/plots.

I have tried passing tooltip:false to the label object which didn't work.

const config = {
    appendPadding: 10,
    data,
    angleField: 'value',
    colorField: 'type',
    radius: 1,
    innerRadius: 0.6,
    label: {
    tooltip:false,
      type: 'inner',
      offset: '-50%',
      content: '{value}',
      style: {
        textAlign: 'center',
        fontSize: 14,
      },
    },
    interactions: [
      {
        type: 'element-selected',
      },
      {
        type: 'element-active',
      },
    ],
    statistic: {
      title: false,
      content: {
        style: {
          whiteSpace: 'pre-wrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        },
        content: 'AntV\nG2Plot',
      },
    },
  };

enter image description here

Upvotes: 1

Views: 2878

Answers (1)

Anjan Talatam
Anjan Talatam

Reputation: 3996

tooltip:false should be in config object

tooltip is a property under Plot Components in the API

To remove the tooltip you should pass it directly in the config object.

const config = {
    tooltip:false,
    appendPadding: 10,
    data,
    angleField: 'value',
    colorField: 'type',
    radius: 1,
    innerRadius: 0.6,
    label: {
      type: 'inner',
      offset: '-50%',
      content: '{value}',
      style: {
        textAlign: 'center',
        fontSize: 14,
      },
    },
    interactions: [
      {
        type: 'element-selected',
      },
      {
        type: 'element-active',
      },
    ],
    statistic: {
      title: false,
      content: {
        style: {
          whiteSpace: 'pre-wrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        },
        content: 'AntV\nG2Plot',
      },
    },
  };

Upvotes: 1

Related Questions