javascript - Google charts - Labels are not showing - Stack Overflow

admin管理员组

文章数量:1394123

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=".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>

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./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

• javascript
• css
• charts
• google-visualization

Share Improve this question Follow edited Jul 30, 2018 at 21:09 Andrzej Ziółek 2,31911 gold badge1515 silver badges2222 bronze badges asked Sep 19, 2017 at 12:13 Shijin TRShijin TR 7,7881111 gold badges6363 silver badges125125 bronze badges 1

• 1 sizing google's PieChart is the worst -- to reduce gaps between charts, use option --> chartArea.width = '100%' -- but this will not fix labels --- to show labels, use option --> legend.position = 'top' -- instead of 'labeled' and remove fontSize, 14 is too big --- but this will bring back gaps... – WhiteHat Commented Sep 19, 2017 at 12:55

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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:

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

You should have a look responsive design principles and please check out this link: https://developers.google./chart/interactive/docs/basic_customizing_chart

Simply change: 'legend':'right' according to the your choice.

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./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.

本文标签： javascriptGoogle chartsLabels are not showingStack Overflow