Messy numbers in stacked Google column chart

Question

I use a stacked Google Columns chart with a Dataview to add the value to the column. However the number is sometimes displayed outside the column on another column.

How do I prevent this, or center the number in the middle of the column?

Furthermore it also displays numbers when the value is 0, which is annoying.

Jsfiddle: https://jsfiddle.net/p44byfa7/

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {  
  var data = new google.visualization.arrayToDataTable([
  ['Month', 'A', 'B', 'C'],
  ['Jan', 1, 4, 6],
  ['Feb', 0, 2, 11],
  ['Mar', 4, 0, 1],
  ['Apr', 0, 0, 0],
  ['May', 14, 1, 11],
  ['Jun', 12, 1, 7]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
                   { 
                   calc: "stringify",
                   sourceColumn: 1,
                   type: "string",
                   role: "annotation" 
                   },
                   2, 
                   { 
                   calc: "stringify",
                   sourceColumn: 2,
                   type: "string",
                   role: "annotation"
                   }, 
                   3, 
                   { 
                   calc: "stringify",
                   sourceColumn: 3,
                   type: "string",
                   role: "annotation" }]);

  var options = {
    legend: { position: 'top', maxLines: 3 },
    isStacked: true,
    height: 600
  };

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

score 0 · Answer 1 · answered Jun 17 '16 at 10:04

The easiest way to solve this problem is by either reducing the font size of the annotations/labelling on the stacked columns or increasing the height of the graph so the annotations/labelling is not displayed outside the column.

My Solution

var options = {
    legend: { position: 'top', maxLines: 3 },
    isStacked: true,
    height: 700,
    annotations: {textStyle: {fontSize: 10, bold: true}}
  };

More information on annotation styling and other features is available here under the table row annotations.textStyle.

To avoid the number 0 being displayed on your graph, I suppose you could replace your 0 values with null. Even though, this is not the best approach, it does the job. If this data is coming from another source and is not static, then a function may need to be written to replace the 0's.

['Month', 'A', 'B', 'C'],
['Jan', 1, 4, 6],
['Feb', null, 2, 11],
['Mar', 4, null, 1],
['Apr', null, null, null],
['May', 14, 1, 11],
['Jun', 12, 1, 7]

In this case the values are dynamic and while writing null works perfectly, returning null with php creates an error. However I found a solution to this in another question: http://stackoverflow.com/questions/13216377/google-chart-api-error-all-series-on-a-given-axis-must-be-of-the-same-data-type — user3296337, Jun 17 '16 at 13:50

Messy numbers in stacked Google column chart

1 Answers1