2

Tengo el siguiente gráfico de barras:

Chart.register(ChartDataLabels);

var ctx = document.getElementById("articulos").getContext('2d');
var ventas = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Ejemplo1', 'Ejemplo2', 'Ejemplo3'],
    datasets: [{
      barPercentage: 0.2,
      label: 'Artículos más vendidos',
      data: [5, 8, 2],
      borderWidth: 1,
      borderRadius: {
        topLeft: 10,
        topRight: 10
      }
    }]
  },
  options: {
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'top',
        formatter: Math.round,
        font: {
          weight: 'bold'
        }
      }
    }
  }
});
<div class="box-body mx-auto">
  <canvas id="articulos" width="100" height="30"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Sucede que la segunda barra, el número que está encima de la barra está chocando con el label, y mi pregunta es cómo hacer una separación entre el label y el gráfico para evitar esto.

El label vendría a ser la parte donde dice "artículos más vendidos".

Leyendo la documentación, intenté agregando las siguientes opciones al label, pero ocurre que el padding afecta tanto al label como al gráfico:

Chart.register(ChartDataLabels);

var ctx = document.getElementById("articulos").getContext('2d');
var ventas = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Ejemplo1', 'Ejemplo2', 'Ejemplo3'],
    datasets: [{
      barPercentage: 0.2,
      label: 'Artículos más vendidos',
      data: [5, 8, 2],
      borderWidth: 1,
      borderRadius: {
        topLeft: 10,
        topRight: 10
      }
    }]
  },
  options: {
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'top',
        formatter: Math.round,
        font: {
          weight: 'bold'
        }
      },
      legend: {
        labels: {
          padding: 50
        }
      },
    }
  }
});
<div class="box-body mx-auto">
  <canvas id="articulos" width="100" height="30"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

1 respuesta 1

2

Tienes el array con datos:

let data = [5, 8, 2];

Buscas el máximo y le sumas uno:

let max = Math.max(...data) + 1;

Y luego seteas la propiiedad suggestedMax del eje Y con ese máximo

Chart.register(ChartDataLabels);
let data = [5, 8, 2];
let max = Math.max(...data) + 1;

var ctx = document.getElementById("articulos").getContext('2d');
var ventas = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Ejemplo1', 'Ejemplo2', 'Ejemplo3'],
    datasets: [{
      barPercentage: 0.2,
      label: 'Artículos más vendidos',
      data: data,
      borderWidth: 1,
      borderRadius: {
        topLeft: 10,
        topRight: 10
      }
    }]
  },
  options: {
    scales: {
          y: {
              suggestedMax: max
          }
      },
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'top',
        formatter: Math.round,
        font: {
          weight: 'bold'
        }
      }
    }
  }
});
<div class="box-body mx-auto">
  <canvas id="articulos" width="100" height="30"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

1
  • Capturar el máximo y sumarle 1 en su eje, me parece muy bien pensado, gracias. Commented el 12 mar. 2023 a las 2:26

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.