Why is my on pie label not aligned?

[kiwis]

Also blue bar only covers blue section, or black bar isn't on black section?

Any help?

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

                    <script type="text/javascript">

                        google.charts.load("current", {packages:["corechart"]});

                        google.charts.setOnLoadCallback(drawChart);

                       

                        function drawChart() {

                            var data = google.visualization.arrayToDataTable([

                                ['Task', 'Wins'],

                                ['Canterbury', 21],

                                ['Auckland',    7],

                                ['Draw',    0]

                            ]);

                            var options = {

                                title: 'Head to Head Winning Reocrd',

                                pieHole: 0.1,

                                colors: ['#007bff', '#000', '#FFF'],

                                legend: {'position':'right','alignment':'center'},

                            };

                            var chart = new google.visualization.PieChart(document.getElementById('piechart'));

                            chart.draw(data, options);

                        }

                    </script>

                    <div id="piechart"></div>

[Daniel LaLiberte]

This problem of misaligned labels in the PieChart is typically due to drawing the chart when it is not visible.  Maybe just move your div to before the script.   It might also help to move the loader.js script tag to the header of your document.