gmazzamuto / ng2-google-charts

Angular Google Charts module
https://www.devrandom.it/software/ng2-google-charts/
MIT License
120 stars 64 forks source link

html tooltips #153

Closed akashskypatel closed 2 years ago

akashskypatel commented 2 years ago

Is it possible to have html tooltips like shown here? The tooltip.isHtml option doesn't seem to do anything.

https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

I've tried below but doesn't seem to work as expected

public timelineChartData: any = {
    chartType: GoogleChartType.Timeline,
    dataTable: {
      cols: [
        {type: 'string', id: 'Type'},
        {type: 'string',  role: 'tooltip', 'p': {'html': true}},
        {type: 'date', id: 'Start'},
        {type: 'date', id: 'End'}
      ],
      rows: [
        { c: [{ v: 'Timeline' }, { v: '<img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" style="width:75px;height:50px">' }, { v: new Date("2022-10-05T17:55:59.106Z") }, { v: new Date("2022-10-05T22:04:56.879Z") }] },
        { c: [{ v: 'Event 1' }, { v: '<img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" style="width:75px;height:50px">' }, { v: new Date("2022-10-05T17:55:59.106Z") }, { v: new Date("2022-10-05T18:56:00.216Z") }] },
        { c: [{ v: 'Event 2' }, { v: '<img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg" style="width:75px;height:50px">' }, { v: new Date("2022-10-05T19:02:08.501Z") }, { v: new Date("2022-10-05T20:02:10.797Z") }] },
        { c: [{ v: 'Event 3' }, { v: '<img src="https://upload.wikimedia.org/wikipedia/commons/a/ae/Flag_of_the_United_Kingdom.svg" style="width:75px;height:50px">' }, { v: new Date("2022-10-05T19:21:56.842Z") }, { v: new Date("2022-10-05T21:21:59.472Z") }] }
      ]
    },
    options: {
      title: 'Test Chart',
      tooltip: {
        isHtml: true
      },
      timeline: {
        showRowLabels: false,
        showBarLabels: false,
        avoidOverlappingGridLines: false
      },
      allowHtml: true
    }
  }
gmazzamuto commented 2 years ago

You also need focusTarget: 'category' as detailed in the documentation page that you've linked