[Chartjs]-Ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart

by

3👍

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

0👍

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

Leave a comment