Chartjs - Graphics Value type float

user_5690696 0
Viewed 4218

I have two graphs of the Chartjs and I need the values of both graphs to have broken values, for example (20,15);

Follow the graphics codes:

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 = {
          data: [

            ]
        }
    }

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>

Second chart:

  vm.chart_gasto = () => {
        vm.data_labels = ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","21","23","24","25","26","27","28","29","30","31"];
        vm.data_gasto = [85,55,85,105,55,85,35,95,85,64,25,85,25,55,85,25,85,64,85,25,64,35,85,35,55,85,35,85,35,85,105];
        vm.data_colors = ['#8aacdf', '#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf','#8aacdf'];
        vm.data_options = {
            scales:{
                yAxes:[{
                    display: false
                }],
                xAxes:[{
                    display: true,
                    gridLines: {
                        color: 'rgba(255,255,255,.35)'
                    },
                    ticks: {
                        fontColor: '#9d9d9c'
                    }
                }]
            }
        }
    }

html: 

  <canvas class="chart chart-bar" height="250px" 
          chart-data="vm.data_gasto" 
          chart-colors="vm.data_colors" 
          chart-labels="vm.data_labels" 
          chart-options="vm.data_options" 
          ng-init="vm.chart_gasto()">
  </canvas>

In addition to "broken" numbers, is there a possibility for the% value next to them?

Has anyone ever had to do something similar?

angularjs charts javascript
1 Answers

Based on ChartJS documentation:

The tooltip label configuration is nested below the tooltip configuration using the callbacks key. The tooltip has the following callbacks for providing text. For all functions, 'this' will be the tooltip object created from the Chart.Tooltip constructor.

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

In your case if I am not mistaken this applies to something like this:

  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;
        }
      }
    }
  }

Here's a working fiddle with the code you shared.

user_34130630
Related