Skip to main content
título editado
Enlace
Cris223511.dev
  • 9.3k
  • 4
  • 7
  • 31

Hacer un espacio entre el label y el grafico de barras - Chart.js

cuerpo editado
Origen Enlace
Cris223511.dev
  • 9.3k
  • 4
  • 7
  • 31

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

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

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

Origen Enlace
Cris223511.dev
  • 9.3k
  • 4
  • 7
  • 31

Hacer un espacio entre el label y el grafico de barras - Chart.js

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 "productos 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>