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>