I am trying to make my ChartJS Pie chart responsive on mobile. All the labels and titles scale ok, but when it comes to the actual chart it looks like this.
This is what I am aiming for it to look like.
I tried changing aspect ratios and responsiveness true/false values, but that didn't do anything.
Does anyone know what could be the issue here?
JS:
Chart.defaults.global.defaultFontFamily = "Archivo";
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'pie',
responsive: true,
maintainAspectRatio: false,
data: {
labels: ["Total Working Time", "Time Wasted On Scheduling"],
datasets: [{
data: [40-appendHours, 40-(40-appendHours)],
backgroundColor: [
'#73D500',
'#FD4D7A',
],
borderColor: [
'#73D500',
'#73D500'
],
borderWidth: 5
}]
},
options: {
events: [],
legend: {
labels: {
fontColor: '#44566c',
fontSize: 15,
fontStyle: "normal",
fontFamily: "'Archivo', sans-serif"
},
},
title: {
display: true,
text: 'Hours wasted by 1 person on scheduling per week',
fontSize: 15,
position: 'bottom',
fontColor: '#44566c',
fontFamily: "'Archivo', sans-serif"
},
}
});
}); ///End
HTML:
<div class="col-md-6 order-lg-2 order-md-2 order-sm-2 order-col-2 resultsBox">
<div class="Task">
<h3 class="resultsFont">Results</h3>
<p class="descriptionFont" id="savings"></p>
<hr />
<canvas id="myChart" class="descriptionFont"></canvas>
</div>
</div>