Customize tooltip using vue-google-charts

Question

I'm using Vue.js and Vue's wrapper library for Google Charts, vue-google-charts, to draw a basic line graph. The data is in the form of a time-series, and I'm not happy with the display of the tooltip: for a point on the graph, the tooltip is of the format: "2,016.957 Price: $1025" (corresponding to Dec, 2016).

What I want is the tooltip to have either of the following format: "Dec, 2016 Price: $1025", or "2016.957 Price: $1025".

While I can achieve the displays of either of these formats with the standard Google Charts library, I can't seem to find a solution using vue-google-charts. The main problem is that google.visualization.DataTable() is created under the hood; all I can do is pass in an array to it, and there is no way to customize the columns or the datatable any further. So I cannot do as is described here: https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#customizing-tooltip-content.

One other solution that I explored was using Date objects instead of decimals for the time axis. However, then the tooltip is of the format "Dec 1, 2016 Price: $1025", which is also not what I want. Again, this problem can be solved with the basic library (https://developers.google.com/chart/interactive/docs/reference#dateformatter) but not with Vue's wrapper library.

Does anyone know of a way that let's you customize tooltips in vue-google-charts library?

<GChart
    type="LineChart"
    :data="chartData"
    :options="chartOptions"
 />

export default {
   data () {
        return {
      // Array will be automatically processed with visualization.arrayToDataTable function
      chartData: [
        ['Time', 'Price'],
        ['2014.042', 1000], //january 2014
        ['2014.125', 1170], //february 2014
        ['2014.208', 1170], //march 2014
        ['2014.292', 1170], //april 2014
        ['2014.375', 1170], ...
        ['2014.458', 660],
        ['2014.542', 1030],
        ['2014.625', 1170],
        ['2014.708', 1170],
        ['2014.792', 1170],
        ['2014.875', 1170],
        ['2014.958', 1170], //december 2014
        ['2015.042', 1170],
      ],
      chartOptions: {
        chart: {
          title: 'Company Performance',
          subtitle: 'Sales, Expenses, and Profit: 2014-2017',
        }
      }
    }
  }
}

Can you post how you are creating the data object and options object you are passing to the GChart? — Tim Wickstrom
developers.google.com/chart/interactive/docs/roles#tooltiprole the basics of it are it is a column passed to the data object. You can format the data using new Data() method or any library that is available to you such as moment.js — Tim Wickstrom

WhiteHat WhiteHat · Accepted Answer · 2019-01-28T12:49:59

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>

Customize tooltip using vue-google-charts

1 Answers