Pie Chart with Legend loads small before window resize

• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Anyone with any guidance would be greatly appreciated

Reproduction link

DOESN’T WORK: Put the pie inside of a Col https://github.com/emaxedon/ant-pie-chart-bug

WORKS: If you put the pie outside of a Col https://github.com/emaxedon/ant-pie-chart-bug/tree/working

https://streamable.com/6o3z5

Steps to reproduce

• Add Pie chart that is in demo to a Card
• Load Pie Chart with legend

What is expected?

The pie chart to be full width

What is actually happening?

Pie chart is very small

Environment	Info
antd	3.13.2
React	16.14.1
System	OSX
Browser	Chrome

[emaxedon]

@chenshuai2144 Your delay technique works sometimes, and other times it does not. The main issue is that when a Pie component is placed inside a Col, the chart does not render properly.

import React, { Component } from "react";
import { Row, Col } from "antd";
import { ChartCard, Pie } from "ant-design-pro/lib/Charts";
import "ant-design-pro/dist/ant-design-pro.css";

import "./App.css";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: true
    };
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        loading: false
      });
    }, 1000);
  }

  render() {
    const { loading } = this.state;

    const data = [
      {
        x: "Foo",
        y: 100
      },
      {
        x: "Bar",
        y: 200
      }
    ];

    return (
      <Row gutter={16}>
        <Col span={12} />
        <Col span={12}>
          <ChartCard
            title="Foo Chart"
            loading={loading}
            contentHeight={500}
            bordered={false}
          >
            <Pie data={data} colors={["#F04864", "#1790FF"]} hasLegend />
          </ChartCard>
        </Col>
      </Row>
    );
  }
}

export default App;

Please take a look at the above code. You’ll notice on a widescreen it renders “ok”, with the delay. When rendering on a smaller screen it renders improperly sometimes (see attached image).

Your delay fix works sometimes; what else can we do to make sure the Pie chart works all the time (including when resizing the screen, when on mobile, etc.). Please demonstrate a working example using the code above (wrapped in the Col).

[taditang]

Same problem.When container is small, pie chart render too small.When I set styles.hasLegend to false, it’s OK, so I know why it happen. in css file there are these css code: &.hasLegend .chart { width: ~'calc(100% - 240px)'; } It will calc chart width, so i add a custom classname ‘my-pie’ to Pie component, and add css .my-pie > div{ width: 100% !important; }