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.

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;
}