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'
    },
  },

Answer 1

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>