I am having trouble centering my graph I made using chartsjs. I set responsive = false
but i dont think that should make a difference when i wan to get it entered with text-align
.
Index.html
<div class="container">
<h1> Live Data </h1>
<div class="row">
<div class="hello">
<canvas id="myChart" width="350" height="350"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Ok", "Fail"],
datasets: [{
label: 'Breakdown',
data: [
{% for number in numbers_from_saf_defect_table %}
{{number.saf_number_in_table}},
{{number.defect_number_in_table}}
{% endfor %}
],
backgroundColor: ['#49A9EA', '#36CAAB', '#PGA1ZA'],
borderWidth: 1
}]
},
options: {
title: {
display: true,
text: 'Number of faults'
},
responsive: false,
}
});
</script>
</div>
Main.css
body {
background: #649dfa;
}
.container {
background: #ffffff;
margin-bottom: 50px;
margin-top: 50px;
padding: 25px;
text-align: center;
border-style: solid;
}
.row {
text-align: center;
}
Expected result is that the chart will be in the middle of the screen, instead its off to the left hand side.