Google charts tooltips not working on mobile

0
votes

I'm using google charts for various charts. I have one, a bar chart that I'm struggling with right now. The chart itself is working great and I have no issues with it really, especially on desktop.

However, on mobile devices the tooltips aren't working. Basically they don't appear when a bar is touched. This is my code for creating the chart:

   makeRequest('/stocks/quotes/portfolio_performance.json').then(function(result) {
    data = google.visualization.arrayToDataTable(result, false);
    chart = new google.visualization.ColumnChart($('#portfolio_performance')[0]);
    options = {
        fontName: 'Ubuntu',
        isStacked: true,
        legend: {
            position: 'none'
        },
        colors: [
            'transparent', '#dd4814', '#2c8d3a', '#772953', '#e7a413', '#bc271c'
        ],
        tooltip: {
            trigger: 'both'
        }
    };

    chart.draw(data, options);
  }

I had thought that using tooltip.trigger:'both' should activate the tooltip when hovering and when selecting, which covers both use cases for Desktop and for Mobile. And indeed both trigger it showing on a desktop, but selecting it on mobile still doesn't show the tooltip.

1
javascriptchartsgoogle-visualization

1 Answers

2
votes

This is what I've been doing.

var isWebView = ionic.Platform.isWebView();
var isIPad = ionic.Platform.isIPad();
var isIOS = ionic.Platform.isIOS();
var isAndroid = ionic.Platform.isAndroid();
var isWindowsPhone = ionic.Platform.isWindowsPhone();

var isMobile = isIOS || isIPad || isAndroid || isWindowsPhone;

if (isMobile) {
  options.tooltip = { trigger: 'selection' };
}