This repository was archived by the owner on Jul 19, 2019. It is now read-only.
Repository navigation
This repository was archived by the owner on Jul 19, 2019. It is now read-only.
Charts Not rendering in multiple Tabs #158
Description
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>
)
}
}`
Activity
fb13 commentedon Nov 14, 2017
Same issue here... Charts only show on default tab for bootstrap 4...
davidmason commentedon Nov 17, 2017
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 commentedon Dec 22, 2018
i having the same issue too, but i solve it by given a default height to the
div