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:


  [options]="chartsettings.linechartoptions"   <---- the important one

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;

Related Query

More Query from same tag