Google Charts (ng2-google-charts) - custom tooltips - HTML gets appended to tooltip instead of replacing it

Question

I want to replace the default tooltip generated by google charts with the HTML one created by me. I've added the new column { type: 'string', role: 'tooltip', p: { html: true } }, I've also added the tooltip: { isHtml: true }, to chart options like it's suggested in the documentation, but instead of replacing the default tooltip, the html that I'm passing gets appended at the end of the end of the default tooltip.

How can I replace the entire default tooltip with provided HTML?

First two rows from dataTable object:

Tooltip:

Chart options:

  options: {
    focusTarget: 'category',
    animation: {
      startup: true,
      easing: 'out',
      duration: 500,
    },
    tooltip: {
      isHtml: true
    },
    height: '250',
    interpolateNulls: true,
    chartArea: {
      width: '90%',
      height: '79%',
    },
    vAxes: {
      0: {
        titlePosition: 'none',
        textStyle: {
          color: '#febd02',
          bold: true,
          fontSize: 13,
        },
        format: '#',
        gridlines: {
          color: '#eaeaea',
          count: '5',
        },
      },
      1: {
        titlePosition: 'none',
        format: '#',
        gridlines: {
          color: 'transparent'
        },
      },
      2: {
        groupWidth: '100%',
        titlePosition: 'none',
        textStyle: {
          color: '#0284ff',
          bold: true,
          fontSize: 13,
        },
        format: 'decimal',
        gridlines: {
          color: 'transparent'
        },
      },
    },
    hAxis: {
      textStyle: {
        color: '#393939',
        bold: true,
        fontSize: 13,
      },
      format: 'MMM d, YYYY',
      gridlines: {
        count: 0,
        color: 'transparent'
      },
      ticks: [],
    },
    series: {
      0: {
        targetAxisIndex: 0,
        type: 'area',
      },
      1: {
        type: 'line'
      },
      2: {
        targetAxisIndex: 2,
        type: 'bars',
        dataOpacity: 0.5,
      },
    },
    colors: [
      '#febd02',
      '#a5a5a5',
      '#0284ff',
    ],
    bar: {
      groupWidth: '35'
    },
    legend: {
      position: 'none'
    },
  },

will you please share all the options used to draw the chart? — WhiteHat, Dec 01 '20 at 14:51

score 1 · Accepted Answer · answered Dec 01 '20 at 16:55

try removing the following option...

focusTarget: 'category'

the above option causes the tooltips for all series on the same x-axis value to be combined.

since you are only providing a custom tooltip for one series ('Precipitation'),
the default tooltips are shown for the first two series',
and the custom tooltip for the last series is added to the end.

removing the above option will allow the tooltip for each series to be displayed individually.

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function() {
  var data = google.visualization.arrayToDataTable([
    ['Time', 'Maximum Temperature', 'Minimum Temperature', 'Precipitation', {type: 'string', role: 'tooltip', p: {html: true}}],
    [new Date(2020, 7, 26, 14), 19.4, 12, 22, '<div>test</div>']
  ]);

  var options = {
    //focusTarget: 'category',
    animation: {
      startup: true,
      easing: 'out',
      duration: 500,
    },
    tooltip: {
      isHtml: true
    },
    height: '250',
    interpolateNulls: true,
    chartArea: {
      width: '90%',
      height: '79%',
    },
    vAxes: {
      0: {
        titlePosition: 'none',
        textStyle: {
          color: '#febd02',
          bold: true,
          fontSize: 13,
        },
        format: '#',
        gridlines: {
          color: '#eaeaea',
          count: '5',
        },
      },
      1: {
        titlePosition: 'none',
        format: '#',
        gridlines: {
          color: 'transparent'
        },
      },
      2: {
        groupWidth: '100%',
        titlePosition: 'none',
        textStyle: {
          color: '#0284ff',
          bold: true,
          fontSize: 13,
        },
        format: 'decimal',
        gridlines: {
          color: 'transparent'
        },
      },
    },
    hAxis: {
      textStyle: {
        color: '#393939',
        bold: true,
        fontSize: 13,
      },
      format: 'MMM d, YYYY',
      gridlines: {
        count: 0,
        color: 'transparent'
      },
      ticks: [],
    },
    series: {
      0: {
        targetAxisIndex: 0,
        type: 'area',
      },
      1: {
        type: 'line'
      },
      2: {
        targetAxisIndex: 2,
        type: 'bars',
        dataOpacity: 0.5,
      },
    },
    colors: [
      '#febd02',
      '#a5a5a5',
      '#0284ff',
    ],
    bar: {
      groupWidth: '35'
    },
    legend: {
      position: 'none'
    },
  };

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Ok, but this functionality won't work for me, I want the custom tooltip to show up whenever I hover anywhere on the chart, not only when I hover over the bar in bar series or line in line/area series, so the `focustTarget: 'category'` has to stay I guess (or there has to be a way to mimic the same behaviour). The other thing is, why does the custom tooltip only apply to the last column (precipitation) and doesn't apply to the other ones? How can I make it apply to all of the series? (Or how can I create additional tooltips with the same content for all of the series?) — Jaruzel, Dec 02 '20 at 07:53
I've answered your original question, but each series may have its own custom tooltip. so you would need to add the tooltip column role, after each series column, not just the last. if you want all to have the same tooltip, then add the same custom tooltip after each series column. — WhiteHat, Dec 02 '20 at 12:28

Google Charts (ng2-google-charts) - custom tooltips - HTML gets appended to tooltip instead of replacing it

1 Answers1