Google charts not showing full decimal leading 0 in x-axis

Question

I have a Google Chart that displays data as decimals.

I am displaying decimals as hour.minutes. So 3 hours and 30 minutes would be 3.30

Even though in my source I am inputing a decimal as 3.30 when mousing over on the chart it will display it as 3.3 as well as 5.10 showing as 5.1

My source to confirm that the leading 0 is inputted on dates 9/01, 9/02

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    // ticket per day //
    var data = google.visualization.arrayToDataTable([
                                ['Time Tracked Hours', 'Non-Billable Hours', 'Billable Hours'],
                        ['8/29', 0, 0],
                        ['8/30', 0, 0],
                        ['8/31', 0, 0],
                        ['9/01', 3.30, 0],
                        ['9/02', 5.10, 0],
                        ['9/03', 0.05, 0],
                        ['9/04', 0, 0],
                            ]);

    var options = {
        title: '',
        subtitle: 'by ticket status',
        legend: {position: 'bottom'}
    };

    var chart = new google.visualization.LineChart(document.getElementById('columnchart_ticketperday'));

    chart.draw(data, options);

When I mouse over I see this

Is there any options in the code that I can use to change this so it shows the leading 0? or is there something I could do with Javascript or jquery?

I'm surprised how Google made it so complex... I just couldn't find it in their doc... And I'm not sure if I really want to make the effort to understand [this SO answer](https://stackoverflow.com/questions/18204678/how-to-format-numbers-in-google-api-linechart). Good luck! — Louys Patrice Bessette, Sep 04 '17 at 07:44
I hear ya, yeah I have been reading through all those docs and I can't find an answer. There are some "close" solutions but nothing definitive. — Cesar Bielich, Sep 04 '17 at 08:23

score 2 · Accepted Answer · answered Sep 04 '17 at 16:52

by default, the tooltip displays the formatted value

format the data table column, before drawing the chart

see following working snippet...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Time Tracked Hours', 'Non-Billable Hours', 'Billable Hours'],
    ['8/29', 0, 0],
    ['8/30', 0, 0],
    ['8/31', 0, 0],
    ['9/01', 3.30, 0],
    ['9/02', 5.10, 0],
    ['9/03', 0.05, 0],
    ['9/04', 0, 0],
  ]);

  var formatNumber = new google.visualization.NumberFormat({
    pattern: '0.00'
  });
  formatNumber.format(data, 1);
  formatNumber.format(data, 2);

  var options = {
    title: '',
    subtitle: 'by ticket status',
    legend: {position: 'bottom'}
  };

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

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

Google charts not showing full decimal leading 0 in x-axis

1 Answers1