CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
user12870276
user12870276

Reputation:

How to remove title and bulletins from google charts

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>

Upvotes: 1

Views: 2336

Answers (1)

WhiteHat
WhiteHat

Reputation: 61255

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>

Upvotes: 2

Related Questions