How to put a title in the angular-Chart caption

Question

On my line chart I wanted that when you hover over the chart line when the caption appears, and that it had a title. This is only possible by filling the array of Abels, but appears below the graph, on the "X" axis the names, and I do not want, I just want the titles in the captions.

Follows the code:

angular.module("app", ["chart.js"]).controller("LineCtrl", function($scope) {
    $scope.labels = ["Titulo 1", "Titulo 2", "Titulo 3", "Titulo 4", "Titulo      5", "Titulo 6", "Titulo 7"];
    $scope.series = ['Legenda 1', 'Legenda 2'];
    $scope.data = [
        [65, 59, 80, 81, 56, 55, 40],
        [28, 48, 40, 19, 86, 27, 90]
    ];
    $scope.onClick = function(points, evt) {
        console.log(points, evt);
    };
});

In this way, it generates a title over the captions when passing the mouse, however appears the names below the chart, I wish it did not appear the names below the chart, only in the title even when passing the mouse, as would be?

Reference: http://jtblin.github.io/angular-chart.js/

jsfiddle:http://jsfiddle.net/Lfmhcab3/4/

Answer 1

The part about changing the contents of the tootlip can do so by modifying the multiTooltipTemplate:

// Chart.js Options
$scope.options = {
  multiTooltipTemplate: '<%= datasetLabel + ": " + value %>',

To remove the X-axis caption is more complicated. There have been lengthy discussions about this (1, 2, 3) but it looks like there’s nothing implemented yet. You can hide the Y axis with scaleShowLabels: false, but not the X-axis...

One option would be to hide both Labels with showScale: false, (example).

However it is possible to modify the methods of the library and based on the suggestion that the @potatopeelings you gave in Soen you can do so:

var originalLineInitialize = Chart.types.Line.prototype.initialize;
Chart.types.Line.prototype.initialize = function(data) {
    var originalLabels = data.labels.slice();
    data.labels = new Array(data.labels.length);
    originalLineInitialize.apply(this, arguments);

    this.scale.xLabels = originalLabels;
    this.datasets.forEach(function(dataset) {
        dataset.points.forEach(function(point, i) {
            point.label = originalLabels[i];
        });
    });

    var originalScaleDraw = this.scale.draw;
    this.scale.draw = function() {
        for (var i = 0; i < this.xLabels.length; i++) {
            this.xLabels[i] = '';
        }
        originalScaleDraw.apply(this, arguments);
    }
}

jsFiddle: http://jsfiddle.net/8z5gp995/1/

Answer 2

Use scaleFontSize: false and scaleLabel: "<%= ' ' + value%>" in the $scope.options.

Jsfiddle: http://jsfiddle.net/rapa09/fph4jecj/5/

Answer 3

Add legend="false" in the canvas being generated Chart, inside the html file.