[Chartjs]-How to customize tool tip while mouse go over bars on Chart js bar chart

by

3👍

I have a custom tooltip working on chart.js charts in an angular application using the angular-chart.js directive:

I created my scaffolded app using yeoman (yo angular) and I added the directive using

bower install angular-chart.js --save

I added it to the modules in app.js

angular.module('chartapp', ['chart.js'])

The markup for the chart is 

<canvas id="line" class="chart chart-line" data="data"
  labels="labels" legend="true" series="series"
  click="onClick">
</canvas>

And my controller has the following data for the chart:

angular.module('oauthClientApp')
    .controller('ChartCtrl', function ($scope) {

        $scope.labels=['Jan', 'Feb', 'Mar', 'Apr', 'May'];

        $scope.series=['Series A'];

        $scope.data = [[10, 20, 30, 20, 10]];

        $scope.onClick = function(points, evt) {
            console.log(points, evt);
        };

The customisations you can perform on the global Chart object are outlined here

Specifically the tooltipTemplate I set was as follows:

Chart.defaults.global.tooltipTemplate = function(value) {
    if (value.label)  {
        return value.label + ":" + value.value;
    } else {
        return value.value;
    }
};

Which gets called each time the tooltip is generated.

If your chart has multiple series then you need to do the same for multiTooltipTemplate:

Chart.defaults.global.multiTooltipTemplate = function(value) {
    return 'The value is ' + value.value;
};

Which gets called for each series.

There are plenty of other customisations you can perform.

Aidan

Leave a comment