Hello, I’m using canvas.js pie charts.
Implementation is :
I have a component called “PieChart” and create chart like this :
<div
v-if="emptyChart == false"
style="height: 370px; max-width: 100%; margin: 0px auto;"
:id="chartArea"
></div>
and I have a method :
initCharts() {
console.log("1");
var flag = false;
for (let i = 0; i < this.chartData.length; i++) {
if (this.chartData[i] != 0) {
flag = true;
break;
}
}
if (flag == false) {
this.emptyChart = true;
return;
}
this.chart = new CanvasJS.Chart(this.chartArea, this.chartConfig);
this.chart.render();
},
this component called from its parent like this :
<div style="width:100%">
<div style="width:33%;display:inline-block;position:relative">
<PieChart :chartData="eventsPieChartData" chartArea="t1" title="Events" :visible="testMounted" />
</div>
<div style="width:33%;display:inline-block;position:relative">
<PieChart :chartData="partsPieChartData" chartArea="t2" title="Parts" :visible="testMounted" />
</div>
<div style="width:33%;display:inline-block;position:relative">
<PieChart :chartData="warningChartData" chartArea="t3" title="Warnings" :visible="testMounted" />
</div>
</div>
first testMounted is false. I change testMounted to true when the parent component is fully mounted and all data is received.
now the charts does not fit the whole container and does not shown properly.
but when i zoom out in browser and zoom in again the width is good and will be fit to the whole container(33%)
i don’t want to use setTimeout(because sometimes it works and sometimes it does not)
thanks alot.
.
