[Vuejs]-Customize tooltip using vue-google-charts

by

0👍

✅

the default tooltip will display the formatted value of each cell in the data table.

when building your data,
you can use object notation to provide both the value (v:) and the formatted value (f:). 

[{v: 2014.042, f: 'Jan, 2014'}, {v: 1000, f: '$1,000'}],

this allows you to use any format for the axis,
but format the value differently for the tooltip.
either of the following will produce the same tooltip. 

[{v: 2014.042, f: 'Jan, 2014'}, {v: 1000, f: '$1,000'}],

[{v: new Date(2014, 0), f: 'Jan, 2014'}, {v: 1000, f: '$1,000'}],

see following working snippet… 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Time', 'Price'],
    [{v: new Date(2014, 0), f: 'Jan, 2014'}, {v: 1000, f: '$1,000'}],
    [{v: new Date(2014, 1), f: 'Feb, 2014'}, {v: 1170, f: '$1,170'}],
    [{v: new Date(2014, 2), f: 'Mar, 2014'}, {v: 1170, f: '$1,170'}],
    [{v: new Date(2014, 3), f: 'Apr, 2014'}, {v: 1170, f: '$1,170'}],
    [{v: new Date(2014, 4), f: 'May, 2014'}, {v: 1170, f: '$1,170'}],
    [{v: new Date(2014, 5), f: 'Jun, 2014'}, {v: 660, f: '$660'}],
    [{v: new Date(2014, 6), f: 'Jul, 2014'}, {v: 1030, f: '$1,030'}],
    [{v: new Date(2014, 7), f: 'Aug, 2014'}, {v: 1170, f: '$1,170'}],
    [{v: new Date(2014, 8), f: 'Sep, 2014'}, {v: 1170, f: '$1,170'}],
    [{v: new Date(2014, 9), f: 'Oct, 2014'}, {v: 1170, f: '$1,170'}],
    [{v: new Date(2014, 10), f: 'Nov, 2014'}, {v: 1170, f: '$1,170'}],
    [{v: new Date(2014, 11), f: 'Dec, 2014'}, {v: 1170, f: '$1,170'}],
    [{v: new Date(2015, 0), f: 'Jan, 2015'}, {v: 1170, f: '$1,170'}],
  ]);

  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, {
    hAxis: {
      format: 'yyyy.MM'
    }
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
👤WhiteHat

Leave a comment