如何从谷歌图表中删除标题和公告

Question

I'm using google donut chart, but it's showing the title and bullets.

I need to know how to remove them and make the chart fit inside the card.

<div class="col-xl-4 col-lg-12 col-md-4 col-sm-12 col-12">
    <div class="card">
        <h5 class="card-header">Credits History</h5>
        <div class="card-body">
            <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', 'Hours per Day'],
                  ['Work',     11],
                  ['Eat',      2]
                ]);

                var options = {
                  title: 'My Daily Activities',
                  pieHole: 0.4,
                };

                var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
                chart.draw(data, options);
              }
            </script>  
            <div id="donutchart" style="width: 220px; height: 155px;"></div>
        </div>
    </div>
</div>

Answer 1

to remove the chart title, remove the title option from the chart options.

as for the bullets, or bulletins, that is the chart's legend,
to remove, add the following option --> legend: 'none'

and you can use the chartArea option to maximize the chart within the container.

var options = {
  chartArea: {
    height: '100%',
    width: '100%'
  },
  legend: 'none',
  pieHole: 0.4
};

see following working snippet...

 google.charts.load("current", { packages: ["corechart"] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2] ]); var options = { chartArea: { height: '100%', width: '100%' }, legend: 'none', pieHole: 0.4 }; var chart = new google.visualization.PieChart(document.getElementById('donutchart')); chart.draw(data, options); }

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="donutchart" style="width: 220px; height: 155px;"></div>