How to add decimal point and Lacs inside tooltip in a google chart?

Question

I am using google chart.I have created a chart according to my data. Now I want to modify my tooltip. There are two things I want to modify.

1 decimal point in every data with containing the word Lacs. Suppose I have data like 31.221(from my picture). I want it to show 31.2 Lacs.

How can I do this? Please share with me if any one has any idea about it.

My codes are:

HTML:

<div id="chart_div" style="height: 400px; margin: 0 auto"></div>

Script:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawLogScales);

function drawLogScales() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'X');
      data.addColumn('number', 'ELSS 13%');
      data.addColumn('number', 'ULIP 9%');
      data.addColumn('number', 'SSY 8.6%');
      data.addColumn('number', 'PPF 8.1%');
      data.addColumn('number', 'LIC 6%');
      data.addColumn('number', 'NSC 5.95%');
      data.addColumn('number', 'TD 5.95%');
      data.addColumn('number', 'FD 5.5%');

      data.addRows([
        ["0",0,0,0,0,0,0,0,0],["2016",1.695,1.635,1.629,1.6215,1.59,1.58925,1.58925,1.5825], ["2017", 3.61035, 3.41715,3.398094,3.3743415,3.2754,3.273060375,3.273060375, 3.2520375], ["2018", 5.7746955, 5.3596935,5.319330084,5.269163162, 5.061924,    5.057057467, 5.057057467, 5.013399563],  ["2019", 8.220405915, 7.477065915,7.405792471,7.317465378,    6.95563944,  6.947202387, 6.947202387, 6.871636538],  ["2020", 10.98405868, 9.785001847,9.671690624,9.531680073,    8.962977806, 8.949810929, 8.949810929, 8.832076548], ["2021", 14.10698631, 12.30065201,12.13245602,11.92524616, 11.09075647, 11.07157468, 11.07157468, 10.90034076], ["2022", 17.63589453, 15.04271069,14.80484723,14.5126911,  13.34620186, 13.31958337, 13.31958337, 13.0823595], ["2023", 21.62356082, 18.03155466,17.7070641,17.30971908,   15.73697398, 15.70134858, 15.70134858, 15.38438927], ["2024", 26.12962373, 21.28939458,20.85887161,20.33330632, 18.27119241, 18.22482882, 18.22482882, 17.81303068], ["2025", 31.22147481, 24.84044009,24.28173457,23.60180413, 20.95746396, 20.89845614, 20.89845614, 20.37524737], ["2026", 36.97526654, 28.7110797,27.99896374,27.13505027,  23.8049118,  23.73116428, 23.73116428, 23.07838598], ["2027", 43.47705119, 32.93007687,32.03587462,30.95448934, 26.8232065,  26.73241855, 26.73241855, 25.9301972], ["2028", 50.82406785, 37.52878379,36.41995984,35.08330298,  30.02259889, 29.91224746, 29.91224746, 28.93885805], ["2029", 59.12619667, 42.54137433,41.18107639,39.54655052, 33.41395483, 33.28127618, 33.28127618, 32.11299524], ["2030", 68.50760223, 48.00509802,46.35164896,44.37132111, 37.00879212, 36.85076211, 36.85076211, 35.46170998]
      ]);


      var options = {
        'title' : 'Accumulation of Rs. 150000 invested every year in 80C instruments',
        colors: ['#F69688', '#A8423F', '#86A44A','#6E548D','#3D96AE','#DA8137','#403152','#CE8E8D'],
        backgroundColor: 'transparent',
        hAxis: {
          title: 'Years',
          logScale: true
        },
        vAxis: {
          title: 'Accumulated amounts (in lakhs)',
          logScale: false,
          gridlines: { color: 'transparent' }
        }     

      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
   </script>

Answer 1

you can use NumberFormat to format the data

// create formatter
var formatter = new google.visualization.NumberFormat({
  pattern: '0.0',
  suffix: ' Lacs'
});

// format number columns
for (var i = 1; i < data.getNumberOfColumns(); i++) {
  formatter.format(data, i);
}

which is then displayed in the tooltip

see following example...

 google.charts.load('current', { callback: drawLogScales, packages: ['corechart'] }); function drawLogScales() { var data = new google.visualization.DataTable(); data.addColumn('string', 'X'); data.addColumn('number', 'ELSS 13%'); data.addColumn('number', 'ULIP 9%'); data.addColumn('number', 'SSY 8.6%'); data.addColumn('number', 'PPF 8.1%'); data.addColumn('number', 'LIC 6%'); data.addColumn('number', 'NSC 5.95%'); data.addColumn('number', 'TD 5.95%'); data.addColumn('number', 'FD 5.5%'); data.addRows([ ["0",0,0,0,0,0,0,0,0],["2016",1.695,1.635,1.629,1.6215,1.59,1.58925,1.58925,1.5825], ["2017", 3.61035, 3.41715,3.398094,3.3743415,3.2754,3.273060375,3.273060375, 3.2520375], ["2018", 5.7746955, 5.3596935,5.319330084,5.269163162, 5.061924, 5.057057467, 5.057057467, 5.013399563], ["2019", 8.220405915, 7.477065915,7.405792471,7.317465378, 6.95563944, 6.947202387, 6.947202387, 6.871636538], ["2020", 10.98405868, 9.785001847,9.671690624,9.531680073, 8.962977806, 8.949810929, 8.949810929, 8.832076548], ["2021", 14.10698631, 12.30065201,12.13245602,11.92524616, 11.09075647, 11.07157468, 11.07157468, 10.90034076], ["2022", 17.63589453, 15.04271069,14.80484723,14.5126911, 13.34620186, 13.31958337, 13.31958337, 13.0823595], ["2023", 21.62356082, 18.03155466,17.7070641,17.30971908, 15.73697398, 15.70134858, 15.70134858, 15.38438927], ["2024", 26.12962373, 21.28939458,20.85887161,20.33330632, 18.27119241, 18.22482882, 18.22482882, 17.81303068], ["2025", 31.22147481, 24.84044009,24.28173457,23.60180413, 20.95746396, 20.89845614, 20.89845614, 20.37524737], ["2026", 36.97526654, 28.7110797,27.99896374,27.13505027, 23.8049118, 23.73116428, 23.73116428, 23.07838598], ["2027", 43.47705119, 32.93007687,32.03587462,30.95448934, 26.8232065, 26.73241855, 26.73241855, 25.9301972], ["2028", 50.82406785, 37.52878379,36.41995984,35.08330298, 30.02259889, 29.91224746, 29.91224746, 28.93885805], ["2029", 59.12619667, 42.54137433,41.18107639,39.54655052, 33.41395483, 33.28127618, 33.28127618, 32.11299524], ["2030", 68.50760223, 48.00509802,46.35164896,44.37132111, 37.00879212, 36.85076211, 36.85076211, 35.46170998] ]); // create formatter var formatter = new google.visualization.NumberFormat({ pattern: '0.0', suffix: ' Lacs' }); // format number columns for (var i = 1; i < data.getNumberOfColumns(); i++) { formatter.format(data, i); } var options = { title : 'Accumulation of Rs. 150000 invested every year in 80C instruments', titleTextStyle: { fontSize: 20 }, colors: ['#F69688', '#A8423F', '#86A44A','#6E548D','#3D96AE','#DA8137','#403152','#CE8E8D'], backgroundColor: 'transparent', hAxis: { title: 'Years', logScale: true }, vAxis: { title: 'Accumulated amounts (in lakhs)', logScale: false, gridlines: { color: 'transparent' } } }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" style="height: 400px; margin: 0 auto"></div> 

Answer 2

You can create custom tooltip as shown below:

    dataTable.addColumn({type: 'string', role: 'tooltip'});
    dataTable.addRows([
      ['2010', 600,'$600K in our first year!'],
      ['2011', 1500, 'Sunspot activity made this our best year ever!'],
      ['2012', 800, '$800K in 2012.'],
      ['2013', 1000, '$1M in sales last year.']
    ]);

    var options = { legend: 'none' };
    var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_action'));
    chart.draw(dataTable, options);

For more details: https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#customizing-tooltip-content