javascript - Google Charts show all labels

Question

I would like to display a horizontal bar chart on a page. I am using the google charts library. The issue I am having is that some labels are being missed off. Is there a way of forcing all labels to display?

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

function drawBasic() {

  var data = google.visualization.arrayToDataTable([
    ['City', '2010 Population', ],
    ['New York City, NY', 8175000],
    ['Los Angeles, CA', 3792000],
    ['Chicago, IL', 2695000],
    ['Houston, TX', 2099000],
    ['Philadelphia, PA', 1526000],
    ['New York City2, NY', 8175000],
    ['Los Angeles2, CA', 3792000],
    ['Chicago2, IL', 2695000],
    ['Houston2, TX', 2099000],
    ['Philadelphia2, PA', 1526000]
  ]);

  var options = {
    title: 'Population of Largest U.S. Cities',
    chartArea: {
      width: '50%'
    },
    hAxis: {
      title: 'Total Population',
      minValue: 0
    },
    vAxis: {
      title: 'City'
    }
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

  chart.draw(data, options);
}

Demo jsfiddle

You will notice in the above code that there are 11 labels/values. All values are displayed but every other label is missing. I would like all labels to be displayed.

Duplicate question << This question has been asked but it concerns a different type of chart with a different data structure

Answer 1

you can set specific size and placement of the chartArea

to allow room for each axis label and title

along with the chart title, legend, etc...

see following example, added backgroundColor to highlight each area

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

function drawBasic() {
  var data = google.visualization.arrayToDataTable([
    ['City', '2010 Population', ],
    ['New York City, NY', 8175000],
    ['Los Angeles, CA', 3792000],
    ['Chicago, IL', 2695000],
    ['Houston, TX', 2099000],
    ['Philadelphia, PA', 1526000],
    ['New York City2, NY', 8175000],
    ['Los Angeles2, CA', 3792000],
    ['Chicago2, IL', 2695000],
    ['Houston2, TX', 2099000],
    ['Philadelphia2, PA', 1526000]
  ]);

  var options = {
    backgroundColor: 'cyan',
    title: 'Population of Largest U.S. Cities',

    // total size of chart
    height: 600,
    width: 900,

    // adjust size of chart area
    chartArea: {
      backgroundColor: 'magenta',

      // allow 70px for hAxis title and ticks
      height: 480,

      // allow 200px for vAxis title and ticks
      left: 200,

      // allow 50px for chart title
      top: 50,

      // allow 200px for legend on right
      width: 500
    },

    colors: ['yellow'],
    hAxis: {
      title: 'Total Population',
      minValue: 0
    },
    vAxis: {
      title: 'City'
    }
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>