1

Quiero trabajar con gráficos ChartJs y me gustaria saber como formatear los números a mostrar en el gráfico, ya que no aparecen con formato, por ejemplo así como se muestra en la imagen, en lugar de que muestre 7000000, mostrará $7,000,000

var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
var donutData        = {
  labels: [
      'Chrome',
      'IE',
  ],
  datasets: [
    {
      data: [7000000,500000],
      labels: ['70','50'],
      backgroundColor : ['#f56954', '#00a65a'],
    }
  ]
}
var donutOptions     = {
  maintainAspectRatio : false,
  responsive : true,

}
//Create pie or douhnut chart
// You can switch between pie and douhnut using the method below.
new Chart(donutChartCanvas, {
  type: 'doughnut',
  data: donutData,
  options: donutOptions,

})

1 respuesta 1

2

Para dar formato a los datos dentro de los tooltips podes utilizar options.plugins.tooltip, más precisamente options.plugins.tooltip.callbacks.label

Ejemplo:

var donutChartCanvas = document.querySelector('#donutChart').getContext('2d')
var donutData = {
  labels: [
    'Chrome',
    'IE',
  ],
  datasets: [{
    data: [7000000, 500000],
    backgroundColor: ['#f56954', '#00a65a'],
  }]
}
var donutOptions = {
  maintainAspectRatio: false,
  responsive: true,
  plugins: {
    tooltip: {
      callbacks: {
        label: function(context) {
          let label = context.label || '';
          if (context.parsed !== null) {
            label = new Intl.NumberFormat('en-US', {
              style: 'currency',
              currency: 'USD',
              minimumIntegerDigits: 2,
              maximumSignificantDigits: 2
            }).format(context.parsed);
          }
          return label;
        }
      }
    }
  },

}
//Create pie or douhnut chart
// You can switch between pie and douhnut using the method below.
new Chart(donutChartCanvas, {
  type: 'doughnut',
  data: donutData,
  options: donutOptions,

})
<div>
  <canvas id="donutChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.