ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart

Question

I am using ng2 charts from valor software with my angular 2 app. I am not able to figure out how to customize the whole html content of the default tooltip that is displayed when hovering over a bar chart.

Any ideas?

Update:

Here is my html/markup code:

<canvas baseChart width="100" height="100" style="padding:24px; border:1px solid black;border-color:gray" 
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [colors]="chartColors"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
  </div>

In my typescript class, I have implemented the barChartOptions function:

tooltips: {
    callbacks: {
        ...
        ...
}}

to customize few things but this seem really limited. For example, I can change label etc using the label property:

label: function(tooltipItem, data) {                
    return "customlabel";
}  

But, I don't see how I can add additional labels. With ng2-charts, if I have a bar chart with two datasets, and hover on one bar, then it displays only label and data for that bar, but it does not display data for the second bar of the second dataset. I would like to display both but don't see how I can add additional labels and data for this.

Major

Any code you have done if so update to the post – Neogaea

I came across some older posts that said this could be achieved by using multiTooltipTemplate property. But, I don't see this in current Chart.js documentation chartjs.org/docs/#getting-started-global-chart-configuration Is this no longer supported? If not, what is the alternative now? – Major

Answer 1

I had success with the following setup:

Template

<canvas
  baseChart
  [chartType]="chartSettings.lineChartType"
  [colors]="chartSettings.lineChartColors"
  [datasets]="lineChartData"
  [labels]="lineChartLabels"
  [legend]="chartSettings.lineChartLegend"
  [options]="chartSettings.lineChartOptions"   <---- the important one
>
</canvas>

And the settings I created a file stats.chart-settings.ts:

export const ChartSettings: any = {
  lineChartOptions: {
    tooltips: {
      backgroundColor: 'rgba(255,255,255,0.9)',
      bodyFontColor: '#999',
      borderColor: '#999',
      borderWidth: 1,
      caretPadding: 15,
      colorBody: '#666',
      displayColors: false,
      enabled: true,
      intersect: true,
      mode: 'x',
      titleFontColor: '#999',
      titleMarginBottom: 10,
      xPadding: 15,
      yPadding: 15,
    }
  }
}

In the component I simply have:

import { ChartSettings } from './stats.chart-settings';

...

chartSettings: any;

constructor() {
  this.chartSettings = ChartSettings;
}

Saponify

The question is about customizing the "html content". The tooltips option does not appear to support that. – Skinny

Answer 2

Basically , you can't apply styling using css to a canvas chart . However , chartJS provides a way to apply styles to the tooltips . Please read more at Tooltip customisation

Also consider this example: Inside chart options tooltips: {backgroundColor: '#fff'}

Bouse