Why is my on pie label not aligned?

27 views
Skip to first unread message

kiwis

unread,
Oct 17, 2021, 12:23:47 AM10/17/21
to Google Visualization API
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>

chart.PNG

Daniel LaLiberte

unread,
Oct 20, 2021, 2:45:12 PM10/20/21
to Google Visualization API
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.
Reply all
Reply to author
Forward
0 new messages