Tried it, not working
constructor(props) {
super(props);
this.state = {
options: {},
};
}
componentDidMount() {
this.chartDetails();
}
chartDetails() {
let data = {};
let datasets = [];
let obj = {};
let dataPoints = [];
if (this.props.data.datasets) {
obj.backgroundColor = this.props.data.datasets[0].backgroundColor;
obj.data = this.props.data.datasets[0].data;
obj.hoverBackgroundColor = this.props.data.datasets[0].hoverBackgroundColor;
datasets.push(obj);
data.datasets = datasets;
let labels = this.props.data.labels;
data.labels = labels;
for (var i = 0; i < data.datasets[0].data.length; i++) {
let dataPoint = {};
dataPoint.name = data.labels[i];
dataPoint.y = data.datasets[0].data[i];
dataPoints.push(dataPoint);
}
}
this.setState({
options: {
//responsive: true,
animationEnabled: true,
animationDuration: 2000,
backgroundColor: "transparent",
legend: {
horizontalAlign: "center",
verticalAlign: "bottom",
cursor: "pointer",
itemclick: function (e) {
//console.log("legend click: " + e.dataPointIndex);
//console.log(e);
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
e.chart.render();
}
},
data: [
{
type: "doughnut",
radius: "90%",
showInLegend: this.props.legend,
innerRadius: "50%",
indexLabel: "{y}",
toolTipContent: "{name}: <strong>{y}</strong>",
indexLabelPlacement: "outside",
dataPoints: dataPoints,
},
],
},
});
}
render() {
return (
<div>
<div>
<CanvasJSChart options={this.state.options} />
</div>
</div>
);
}
}
