Ng2-charts: Html template to the bar chart (label) tooltip

[MishDish]

Custom HTML template to the bar chart tooltip

Hi Guys ,

I 'm wondering how to add html content to the bar chart (label) tooltip. I'm passing the string of values , but i can't pass a html code cause the tooltip callback function returns just string /array of strings.

 tooltips: {
                    callbacks: {
                        label: (tooltipItem, data) => {              
                             return '<h2>Some Content</h2>'
                        }
                    }
                }

Is there is any possible solution with ng2 charts itself , or shoud be used some other way to reach the chart object or canvas ?

Thank you !

[Mumumurilo]

@MishDish Have you found any solution to that? I'd like to add a '%' symbol to the end of my tooltip but I can't do so.

[MelvinRabang]

Have you guys found a solution to this. I would like to create a table inside the tooltip if that is possible

[Mumumurilo]

@MelvinRabang I resolved the issue by adding the tooltip manually via an Angular variable under my chart. It's not the perfect solution but it worked for me.

[MelvinRabang]

Cool. Do you have a plunker or codes whicj can show to solve this issue?

[missingeverytime]

Hi @Mumumurilo ,
I have found another solution to display '%', which may help you.

tooltips: {
      callbacks: {
        label: function (tooltipItem, data) {
          const datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
          return  datasetLabel + ': ' + tooltipItem.yLabel + '%';
        }
      }
    }

Any question, just let me know.

[h-maac]

@Mumumurilo i know it has been a long time but can you explain how you did that? did you create it outside the canvas?

[Mumumurilo]

@h-maac Yes! I just put an HTML tag right under the canvas.