CODEWITHSUNDEEP
chartsgoogle-visualization
kolurbo
kolurbo

Reputation: 538

Tooltip number formatting in google chart

How can I format number in a tooltip in google chart? I tried to apply "none" formatting in datatable and also applied "####" formatting on h-axis in google chart option but still can see 2,012 in tooltip. 

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

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
            [
            {label: "year", type: "number", format: "none"},
            {label: "performance", type: "number", format: "none"},
        ],
        ["2009", 10],
        ["2010", 15],
        ["2011", 3],
        ["2012", 5]
    ]);

    var options = {
      title: 'Company Performance',
      hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}, format: "####"},
      vAxis: {minValue: 0}
    };

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

JSFiddle can be found here: https://jsfiddle.net/ux37j0dk/3/

Upvotes: 3

Views: 4868

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

by default, the tooltip will display the formatted value of data table cell

you can use the NumberFormat class to format the data table... 

  var yearPattern = "0";
  var formatNumber = new google.visualization.NumberFormat({
    pattern: yearPattern
  });
  formatNumber.format(data, 0);

see following working snippet... 

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    [{
        label: "year",
        type: "number",
        format: "none"
      },
      {
        label: "performance",
        type: "number",
        format: "none"
      },
    ],
    ["2009", 10],
    ["2010", 15],
    ["2011", 3],
    ["2012", 5]
  ]);
  
  var yearPattern = "0";
  var formatNumber = new google.visualization.NumberFormat({
    pattern: yearPattern
  });
  formatNumber.format(data, 0);

  var options = {
    title: 'Company Performance',
    hAxis: {
      title: 'Year',
      titleTextStyle: {
        color: '#333'
      },
      format: yearPattern
    },
    vAxis: {
      minValue: 0
    }
  };

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

you can also use object notation to supply both the value (v:) and the formatted value (f:),
when loading the data table... 

[{v: "2009", f: "2009"}, 10],

see following working snippet... 

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    [{
        label: "year",
        type: "number",
        format: "none"
      },
      {
        label: "performance",
        type: "number",
        format: "none"
      },
    ],
    [{v: "2009", f: "2009"}, 10],
    [{v: "2010", f: "2010"}, 15],
    [{v: "2011", f: "2011"}, 3],
    [{v: "2012", f: "2012"}, 5]
  ]);
  
  var yearPattern = "0";

  var options = {
    title: 'Company Performance',
    hAxis: {
      title: 'Year',
      titleTextStyle: {
        color: '#333'
      },
      format: yearPattern
    },
    vAxis: {
      minValue: 0
    }
  };

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

Upvotes: 8

Related Questions