1

Estou fazendo um Chart.js em angular e preciso colocar o por cento ( % ) no final de cada tooltip onde mostra o valor no gráfico.

Segue código do meu gráfico:

Html:

<canvas class="chart chart-doughnut" chart-data="vm.data" chart-labels="vm.labels" chart-colors="vm.colors" chart-options="vm.options" ng-init="vm.chart()"></canvas>

JS:

vm.chart = () => {
        vm.labels = ["D1", "VC1", "Internacional", "À cobrar", "0300", "Gratuita", "Locais"];
        vm.colors = [ '#f36e20', '#8aca7b', '#0bc4df', '#272343', '#389223', '#f1a80a', '#1e75eb'];
        vm.data = [10, 10, 20, 10, 10, 10, 30];
        vm.options = {
        }
    }

Alguém sabe informar se é no options que insiro esta opção?

O vm.data só aceita números inteiros, talvez deve ter algum método de inserir valores decimais e com eles o % junto.

2
  • Que texto aparece no tooltip?
    – Sam
    Commented 4/11/2017 às 5:20
  • Aparece o valor do vm.data Commented 7/11/2017 às 11:19

1 Resposta 1

1

Feito.

Baseado na documentação do ChartJS:

A configuração do rótulo da ferramenta é aninhada abaixo da configuração da dica de ferramenta usando a chave de retorno de chamada. O tooltip tem as seguintes devoluções de chamada para fornecer texto. Para todas as funções, "este" será o objeto de dica de ferramenta criado a partir do construtor Chart.Tooltip.

Todas as funções são chamadas com os mesmos argumentos: um item de dica de ferramenta e o objeto de dados passado para o gráfico. Todas as funções devem retornar uma string ou uma matriz de strings. Arrays of strings são tratados como várias linhas de texto.

 vm.options = {
    tooltips: {
      callbacks: {
        label: (tooltipItem, chart) => {
          const realValue = chart.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]
          const customValue = realValue.toFixed(2).replace(".", ",") + '%';
          const label = chart.labels[tooltipItem.index] + ':';
          return label + customValue;
        }
      }
    }
  }

Link no jsfiddle em funcionamento.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .