7

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.

user1892775
  • 2,001
  • 6
  • 37
  • 58
  • Any code you have done if so update to the post – Aravind Feb 19 '17 at 16:02
  • 1
    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 http://www.chartjs.org/docs/#getting-started-global-chart-configuration Is this no longer supported? If not, what is the alternative now? – user1892775 Feb 20 '17 at 17:02

2 Answers2

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;
}
Boris Yakubchik
  • 3,861
  • 3
  • 34
  • 41
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'}

hhsb
  • 560
  • 3
  • 23