How to display the antd charts

Question

I am using this example from AntV charts. However, When I import this function, I get an error that says

export 'default' (imported as 'IdeaStatusDonut') was not found in '../Insights/IdeaStatusDonut' (module has no exports)

How do I call this function in my other react function so I can render this chart? The error I get if I simply import and use it like any other function...

import { RadialChart,Hint, LabelSeries } from 'react-vis';
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client'

const root = ReactDOM.createRoot(document.getElementById("root"));

const IdeaStatusDonut = () => {
  const data = [
    {value: 2, type: 'Open',   },
    {value: 1, type: 'Close',   },
    {value: 1, type: 'In Review',    },
    {value: 1, type: 'In Development', },
    {value: 5, type: 'Accepted', }
  ];

  const config = {
    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',
      },
    },
  };

 
  return (<IdeaStatusDonut {...config} />);
         
  }
  root.render(<IdeaStatusDonut />);

How to display the antd charts

0 Answers0