CODEWITHSUNDEEP
chartsgoogle-visualization
IGOR LEVKOVSKY
IGOR LEVKOVSKY

Reputation: 167

Remove decimal values from the axis

I'm using google charts and I have an issue with formatting of the hAxis. It looks like this when there are only 4 values on it:

enter image description here

I want to remove those decimal numbers between the real values. I don't want it to show 0.5,1.5,2.5,3.5 How can it be done?

Upvotes: 1

Views: 1214

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

there are a few options that could be used, if you were using a classic chart
but those are not supported using material charts

you can use option hAxis.format to change the number format,
but this will only remove the decimal and cause the numbers to repeat

the only method i've found when using a matieral chart,
is to use string values for the x-axis... 

['Lesson', 'Average', 'Average best'],
['1', 10, 10],
['2', 10, 10],
['3', 10, 10],
['4', 7, 7.5]

or you can use a DataView to convert the numbers to strings... 

var data = google.visualization.arrayToDataTable([
  ['Lesson', 'Average', 'Average best'],
  [1, 10, 10],
  [2, 10, 10],
  [3, 10, 10],
  [4, 7, 7.5]
]);

var view = new google.visualization.DataView(data);
view.setColumns([{
  calc: function (dt, row) {
    return dt.getValue(row, 0).toFixed(0);
  },
  label: data.getColumnLabel(0),
  type: 'string'
}, 1, 2]);

see following working snippet... 

google.charts.load('current', {
  packages: ['bar']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Lesson', 'Average', 'Average best'],
    [1, 10, 10],
    [2, 10, 10],
    [3, 10, 10],
    [4, 7, 7.5]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([{
    calc: function (dt, row) {
      return dt.getValue(row, 0).toFixed(0);
    },
    label: data.getColumnLabel(0),
    type: 'string'
  }, 1, 2]);

  var options = {
    chart: {
      title: 'Results distribution by lesson',
    },
    height: 280
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  chart.draw(view, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions