When using ChartJS v2.6 to create a pieChart within a Bootstrap Grid, everything appears correctly in Chrome and Firefox, but not in Internet Explorer. In IE, the chart is unintentionally stretched on larger screens. Bootstrap should handle the sizing, but I can't pinpoint the issue. Can anyone here help me determine if it's a CSS or ChartJS problem and how to resolve it?
The Webservice has been uploaded to a VPS because the original hosting environment is secure, hence the incorrect certificate.
This section contains the Chart and Legend on the right side
<div class="row" >
<div id="charts" class="col-sm-7">
<div id="chartWrapper" class="row">
<canvas id="questionChart"></canvas>
</div>
<div class="col-12 correctAnswers" style="display: none"></div>
<div class="col-12 answerTime">
<div id="buttongrp"></div>
<div id="answerCount"></div>
</div>
</div>
<div id="legendContainer" class="col-sm-5">
....
</div>
</div>
This is how the Chart is created
ctx = document.getElementById("questionChart");
chart = new Chart(ctx, { //The chart options vary significantly by question type
type: 'pie',
data: {
labels: dataCountMap.keys(), //Generating labels from Map keys
datasets: [{
label: '# of Votes',
data: dataCountMap.values(), //Generating chart data from Map values
backgroundColor: usedColors, // Randomly chosen colors from the array defined in the options
hoverBackgroundColor: usedHoverColors
}]
},
options: {
aspectRatio: 1,
legend: {
display: false
},
showAllTooltips: true,
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
var value = data.datasets[0].data[tooltipItem.index];
return value;
},
title: function (tooltipItem, data) {
return '';
}
},
tooltipTitleFontSize: 0,
bodyFontSize: 30,
displayColors: false,
xPadding: 10,
backgroundColor: '#323232'
}
}
});
This section contains the CSS for scaling the Chart
@media (max-width: 575px) {
.pieChart {
padding: 0px 60px 20px 60px;
}
.barChart {
margin: 0px;
padding: 0px 40px 20px 40px;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.pieChart {
padding: 0px 20px 0px 20px;
}
.barChart {
margin: 0px;
padding: 0px 10px 0px 10px;
}
}
@media (min-width: 768px) and (max-width: 860px) {
.pieChart {
padding: 0px 60px 0px 60px;
}
.barChart {
margin: 0px;
padding: 0px 20px 0px 20px;
}
}
@media (min-width: 861px) and (max-width: 991px) {
.pieChart {
padding: 0px 85px 0px 85px;
}
.barChart {
margin: 0px;
padding: 0px 20px 0px 20px;
}
}
@media (min-width: 992px) and (max-width: 1100px) {
.pieChart {
padding: 0px 110px 0px 110px;
}
.barChart {
margin: 0px;
padding: 0px 60px 0px 60px;
}
}
@media (min-width: 1101px) and (max-width: 1199px) {
.pieChart {
padding: 0px 130px 0px 130px;
}
.barChart {
margin: 0px;
padding: 0px 60px 0px 60px;
}
}
This is the view in Chrome:
This is the view in IE:
Thank you