Google charts - Labels are not showing

user_1682826 0
Viewed 4733

I was trying to create 3 charts using google charts in a single line.but it not showing the labels for the values and we can see there is lot of space was vacant in between the charts.is there any way to remove that space and show the labels properly in the graph?

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

function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 5],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 7]
  ]);

  var options = {
    pieSliceText: 'value',
    pieHole: '0.5',

    legend: {
      position: 'labeled',
      labeledValueText: 'both',
      textStyle: {
        color: 'blue',
        fontSize: 14
      }
    },
  };

  var chart1 = new google.visualization.PieChart(document.getElementById('chart1'));
  var chart2 = new google.visualization.PieChart(document.getElementById('chart2'));
  var chart3 = new google.visualization.PieChart(document.getElementById('chart3'));
  options.title = 'industries For USA';
  chart1.draw(data, options);
  options.title = 'Categories For USA';
  chart2.draw(data, options);
  options.title = 'Categories For Construction';
  chart3.draw(data, options);
}
.chart-wrapper {
  float: left;
  width: 33%;
}

.top-five-charts {
  width: 100%;
  display: block;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="top-five-charts">
  <div class="chart-wrapper">
    <div id="chart1" class="insight-pie"></div>
  </div>
  <div class="chart-wrapper">
    <div id="chart2" class="insight-pie"></div>
  </div>
  <div class="chart-wrapper">
    <div id="chart3" class="insight-pie"></div>
  </div>
</div>

Here is the output in normal screen

enter image description here

google-visualization charts css javascript
3 Answers

Just add this line on your JavaScript code before drawing the charts:

options.chartArea = {left: '10%', width: '100%', height: '65%'};

I've also changed the legend font size to 10.

It will look like this: adjusted pie charts

Here's the JSFiddle illustrating it: https://jsfiddle.net/6r3ms2tz/

user_97738370
user_45000960

After several tries, below worked:

Code:

let options = {
  legend: {
    position: "labeled",
  },
  chartArea: {
    width: "100%"
  }
};

HTML for my case is below because I am using https://github.com/FERNman/angular-google-charts

  <google-chart
    style="width: 100%; height: 100%;"
  >
  </google-chart>

HTML for your case:

<div id="chart1" class="insight-pie" style="width: 100%; height: 100%;" ></div>

Hope that helps.

user_9844710
Related