Tengo la necesidad de crear un grafico de barras con la librería Chart.js
Tengo el siguiente código
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Informe con Gráfico de Barras</title>
<!-- Incluir Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Informe con Gráfico de Barras</h1>
<!-- Agregar un contenedor para el gráfico -->
<canvas id="barChart" width="10" height="5"></canvas>
<script>
// Datos para el gráfico de barras
var data = {
labels: ["17/09", "18/09", "19/09", "20/09", "21/09", "22/09", "23/09"],
datasets: [{
label: "Ventas",
data: [12.50, 19.00, 3.50, 5, 2, 10, 20],
backgroundColor: 'rgb(4, 24, 124)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
};
// Opciones del gráfico de barras
var options = {
scales: {
y: {
beginAtZero: true
}
},
plugins: {
datalabels: {
anchor: 'end',
align: 'end',
offset: 4,
color: 'red',
font: {
weight: 'bold',
size: 12
}
}
}
};
// Crear el gráfico de barras
var ctx = document.getElementById('barChart').getContext('2d');
var barChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
</script>
</body>
</html>
Lo que necesito es que el monto se quede fijo en la parte superior de cada barra y que no se muestre al poner el raton por encima de la barra, el otro problema que tengo es que no puedo modificar es el tamaño del contenedor de las barras voy a ingresar mas información por debajo de las barras por que es un reporte por mas que modifique el width
y el height