[Solved]-ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart-Chart.js

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

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