ColumnChart not show all string labels

Question

I have The following problem related with ColumnChart (https://developers.google.com/chart/interactive/docs/gallery/columnchart).

If the label (when you mouse hover into any columns that looks like a tooltip) is set as a number, all 2000 items shows correctly. But if the label is set as a string it only shows 289 items in the chart and it is missing 1711 columns for an unknown reason.

I have this code (Label set with String, only shows 289 items instead of 2000): http://jsfiddle.net/c809mbjx/11/

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string' ,'Day');
    data.addColumn('number', 'Matches');
    var dataArray = []
    let number = 2000
    data.addRows(number);
    for (var i = 0; i < number;i++) {
     data.setCell(i,0,"aaa_"+i)
     data.setCell(i,1,i);
    }
    //var data = new google.visualization.arrayToDataTable(dataArray);        
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    var view = new google.visualization.DataView(data);
        view.setColumns([0, 1]);
    var options = {
            colors: ['#0095e8'],
            hAxis: {textPosition: 'none'},
            vAxis: {minValue: 0, viewWindow: {min: 0}},
            legend: 'none',
            animation: {duration: 10000, easing: 'out'}
        };
    chart.draw(view, options);
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});

And this code (Label set with Number and works correctly): http://jsfiddle.net/c809mbjx/12/

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number' ,'Day');
    data.addColumn('number', 'Matches');
    var dataArray = []
    let number = 2000
    data.addRows(number);
    for (var i = 0; i < number;i++) {
     data.setCell(i,0,i)
     data.setCell(i,1,i);
    }
    //var data = new google.visualization.arrayToDataTable(dataArray);        
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    var view = new google.visualization.DataView(data);
        view.setColumns([0, 1]);
    var options = {
            colors: ['#0095e8'],
            hAxis: {textPosition: 'none'},
            vAxis: {minValue: 0, viewWindow: {min: 0}},
            legend: 'none',
            animation: {duration: 10000, easing: 'out'}
        };
    chart.draw(view, options);
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});

Hi @WhiteHat I refered to tooltip when mouse hover in each column..and not show all data in the chart — Cristian Rodriguez, Feb 16 '21 at 12:33
looks like a limitation of the chart, if I increase the width of the chart, more columns are shown, but still not all. why do you want to use string instead of number? we can probably find a workaround for the reason while using numbers... — WhiteHat, Feb 16 '21 at 13:34
hi @WhiteHat , I need use the string because.. each columns represents a date ( 01-02-2021).. and only can use this tooltip label.. but for example with Linear Chart works correctly: http://jsfiddle.net/qzgo2rn5/ I think that is a bug for ColumnChart . — Cristian Rodriguez, Feb 16 '21 at 14:46

score 1 · Accepted Answer · answered Feb 16 '21 at 15:09

we can use numbers on the x-axis and still display the string on the tooltip.
which can be accomplished by setting the last argument of the setCell method --> formattedValue

setCell(rowIndex, columnIndex, value, formattedValue)

the tooltip will display the formatted value by default.
so we provide the number as the value, and our own string as the formatted value.

   data.setCell(i,0,i,"aaa_"+i);

see following working snippet...

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number' ,'Day');
  data.addColumn('number', 'Matches');
  let number = 2000;
  data.addRows(number);
  for (var i = 0; i < number;i++) {
   data.setCell(i,0,i,"aaa_"+i);
   data.setCell(i,1,i);
  }
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1]);
  var options = {
    colors: ['#0095e8'],
    hAxis: {textPosition: 'none'},
    vAxis: {minValue: 0, viewWindow: {min: 0}},
    legend: 'none',
    animation: {duration: 10000, easing: 'out'}
  };
  chart.draw(view, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

note: the version of google charts loaded using jsapi has been deprecated and should no longer be used.

instead, use loader.js, this will only change the load statement.
see above snippet...

ColumnChart not show all string labels

1 Answers1