0

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.

enter image description here

kitchen800
  • 197
  • 1
  • 12
  • 36

0 Answers0