Resize issue in canvas react charts

[skp]

I’m facing a resize issue in canvasjs reactjs doughnut and bubble charts, the fact is that it is working good in mobile view but whenever the sidemenu is closed or open, it does not fit in or not responsive.
`import React, { Component } from “react”;
import CanvasJSReact from “../../../assets/canvasjs/canvasjs.react”;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;

class DoughnutChart extends Component {
constructor(props) {
super(props);
this.state = {
options: {},
};
}

componentDidMount() {
this.chartDetails();
}

componentDidUpdate(prevProps) {
if (prevProps.data != this.props.data) {
this.chartDetails();
}
}

chartDetails() {
this.setState({
options: {
interactivityEnabled: true,
animationEnabled: true,
animationDuration: 1000,
backgroundColor: “transparent”,

legend: {
horizontalAlign: “center”,
verticalAlign: “bottom”,
},
data: [
{
type: “doughnut”,
startAngle: 270,
radius: “90%”,
showInLegend: this.props.legend,
innerRadius: “50%”,
indexLabel: “{y}”,
toolTipContent: “{name}: {y}“,
indexLabelPlacement: “outside”,
dataPoints: dataPoints,
},
],
},
});
}

render() {
return <CanvasJSChart options={this.state.options} />;
}
}

export default DoughnutChart;

[Manoj Mohan]

@skp,

Re-rendering the chart on closing and opening the sidemenu should work fine in your case.

If you are still facing the issue, kindly create a sample project reproducing the issue and share it with us over Google-Drive or Onedrive along with sample data so that we can look into the code, understand your scenario better and help you out.

—-
Manoj Mohan
Team CanvasJS