Skip to main content
replaced http://stackoverflow.com/ with https://stackoverflow.com/
Fonte Link

A parte de mudar o conteúdo da tootlip podes fazer assim, modificando o multiTooltipTemplate:

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

Para remover a legenda do eixo X é mais complicado. Tem havido discussões longas sobre isso (1, 2, 3) mas parece que ainda não há nada implementado nesse sentido. Dá para esconder o eixo Y com scaleShowLabels: false, mas não o eixo X...

Uma opção seria esconder ambos os labels com showScale: false, (exemplo).

Porém é possivel modificar os métodos da biblioteca e baseado na sugestão que o @potatopeelings@potatopeelings te deu no SOen podes fazer assim:

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/

A parte de mudar o conteúdo da tootlip podes fazer assim, modificando o multiTooltipTemplate:

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

Para remover a legenda do eixo X é mais complicado. Tem havido discussões longas sobre isso (1, 2, 3) mas parece que ainda não há nada implementado nesse sentido. Dá para esconder o eixo Y com scaleShowLabels: false, mas não o eixo X...

Uma opção seria esconder ambos os labels com showScale: false, (exemplo).

Porém é possivel modificar os métodos da biblioteca e baseado na sugestão que o @potatopeelings te deu no SOen podes fazer assim:

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/

A parte de mudar o conteúdo da tootlip podes fazer assim, modificando o multiTooltipTemplate:

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

Para remover a legenda do eixo X é mais complicado. Tem havido discussões longas sobre isso (1, 2, 3) mas parece que ainda não há nada implementado nesse sentido. Dá para esconder o eixo Y com scaleShowLabels: false, mas não o eixo X...

Uma opção seria esconder ambos os labels com showScale: false, (exemplo).

Porém é possivel modificar os métodos da biblioteca e baseado na sugestão que o @potatopeelings te deu no SOen podes fazer assim:

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/

Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

A parte de mudar o conteúdo da tootlip podes fazer assim, modificando o multiTooltipTemplate:

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

Para remover a legenda do eixo X é mais complicado. Tem havido discussões longas sobre isso (1, 2, 3) mas parece que ainda não há nada implementado nesse sentido. Dá para esconder o eixo Y com scaleShowLabels: false, mas não o eixo X...

Uma opção seria esconder ambos os labels com showScale: false, (exemplo).

Porém é possivel modificar os métodos da biblioteca e baseado na sugestão que o @potatopeelings te deu no SOen podes fazer assim:

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/