Charts Not rendering in multiple Tabs

[Aman725]

Hi,
I am trying to render multiple Doughnut charts in multiple tabs(react-bootstrap tabs), But Doughnut chart only shows on Default tab.

Here is the code for parent component with tabs

export default class DealBreakUpStats extends Component {
constructor(props) {
super(props)
this.state = {
key: 1
};
}
handleSelect = (key) => {
this.setState ({ "key": key });
}
render() {
const {stats} = this.props;
var colors = ["#581845", "#900C3F", "#C70039", "#FF5733", "#FFC300"];

    // sector related vars
    // data used in creating sector chart
    var sectorCountData = Object.keys(stats.sector_count_distribution).map(function (sector, index) {
        return ({
            value: stats.sector_count_distribution[sector],
            label: sector.toUpperCase(),
            color: colors[index]
        });
    });

    // used for showing percentage wise sector distribution
    const sectorPercentDiv = Object.keys(stats.sector_percent_distribution).map(function (sector, index) {
        return (
            <div className="row">
                <div className="col-xs-9 text-left">
                    {sector.toUpperCase()}
                </div>
                <div className="col-xs-3 text-right">
                    {stats.sector_percent_distribution[sector]}%
                </div>
            </div>
        )
    });

    // location related vars
    // data used in creating location chart
    var locationCountData = Object.keys(stats.location_count_distribution).map(function (location, index) {
        return ({
            value: stats.location_count_distribution[location],
            label: location.toUpperCase(),
            color: colors[index]
        });
    });

    // used for showing percentage wise location distribution
    const locationPercentDiv = Object.keys(stats.location_percent_distribution).map(function (location, index) {
        return (
            <div className="row">
                <div className="col-xs-9 text-left">
                    {location.toUpperCase()}
                </div>
                <div className="col-xs-3 text-right">
                    {stats.location_percent_distribution[location]}%
                </div>
            </div>
        )
    });

    return (
        <div className="panel panel-default stats-panel">
            <div className="panel-heading text-align-center no-padding">
                <div className="stats-panel-title">
                    Deal Break-up
                </div>
            </div>
            <div className="panel-body">
                <Tabs className="row stats-text-light fz12 text-bold stats-tab-nav" activeKey={this.state.key} onSelect={this.handleSelect} id="Details">
                   <Tab eventKey={2} title="SECTOR"><DealBreakUpSectorSegment sector_count_distribution={stats.sector_count_distribution} sector_percent_distribution={stats.sector_percent_distribution} /></Tab>
                    <Tab eventKey={1} title="LOCATION"><DealBreakUpLocationSegment location_count_distribution={stats.location_count_distribution} location_percent_distribution={stats.location_percent_distribution}/></Tab>
                </Tabs>
            </div>
        </div>
    )
}

}`

Here is the code for child component with Doughnut

export default class DealBreakUpSectorSegment extends Component {
constructor(props) {
super(props)
}

render() {
    const {location_count_distribution, location_percent_distribution} = this.props;
    var colors = ["#900C3F", "#900C3F", "#C70039", "#FF5733", "#FFC300"];
    //var LocationDoughnutChart = require("react-chartjs").Doughnut;

    // sector related vars
    // data used in creating sector chart
    var sectorCountData = Object.keys(location_count_distribution).map(function (sector, index) {
        return ({
            value: location_count_distribution[sector],
            label: sector.toUpperCase(),
            color: colors[index]
        });
    });

    // used for showing percentage wise sector distribution
    const sectorPercentDiv = Object.keys(location_percent_distribution).map(function (sector, index) {
        return (
            <div className="row" key={index}>
                <div className="col-xs-9 text-left">
                    {sector.toUpperCase()}
                </div>
                <div className="col-xs-3 text-right">
                    {location_percent_distribution[sector]}%
                </div>
            </div>
        )
    });

    return (
        <div>
            <div className="text-align-center">
                <LocationDoughnutChart  data={sectorCountData} options={{}} width="100%"/>
            </div>

            <div className="row ptb10"
                 style={{margin: '4%', backgroundColor: '#e2e2e2', color: '#777777', fontWeight: '500'}}>
                <div className="col-xs-7 text-left">
                    LOCATIONS
                </div>
                <div className="col-xs-5 text-right">
                    (%)
                </div>
            </div>
            <div style={{padding: '10%', paddingTop: '0px', paddingBottom: '15px', fontWeight: '500'}}>
                {sectorPercentDiv}
            </div>
        </div>
    )
}

}`

[fb13]

Same issue here... Charts only show on default tab for bootstrap 4...

[davidmason]

Sounds like there could be an interaction with react-bootstrap here. I've had some issues in the past with react-bootstrap doing things in strange ways.

I have no time for the foreseeable future to look into this, but I can make enough time to review and merge a fix if someone wants to investigate and make a pull request.

[adamnator92]

i having the same issue too, but i solve it by given a default height to the div

<div className="chart-wrapper"  style={{ height: 300 }}>
    <Line data={line} options={options} />
</div>