Chartjs - Insert% at end of value in tooltip

Question

Chartjs - Insert% at end of value in tooltip

Navigation

#1 by (1 votes)

1

I'm making a Chart.js in angular and I need to put the percent (%) at the end of each tooltip where it shows the value in the chart.

Follow my chart code:

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 = {
        }
    }

Does anyone know if it is in the options that I enter this option?

The vm.data only accepts integers, maybe you should have some method of entering decimal values and with them the% together.

html angularjs chartjs

asked by anonymous 03.11.2017 / 18:28

1 answer

How to trigger the event cancel when I click outside the modal or ESC constraint? how do I get scrollbars from my iframe via css?

score 1 · Accepted Answer

Done.

Based on the ChartJS documentation:

The tool label setting is nested below the   tool tip configuration using the   call. The tooltip has the following callbacks for   provide text. For all functions, "this" will be the tip object of   tool created from the Chart.Tooltip constructor.

All functions are called with the same arguments: a   tooltip, and the data object passed to the chart. All   the functions must return a string or an array of strings. Arrays   of strings are treated as multiple lines of text.

 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 in working jsfiddle.