Quiero agregar etiquetas de datos en la parte superior de cada barra y colorearlas en negro y hacerlo en una fuente más grande. Así: mi gráfico con las etiquetas necesarias
Pero todo lo que probé no cambia el gráfico.
Agrego chartjs y charts-plugin-datalabels:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.js"></script>Función de creación de gráficos:
function bars_chart(data, period) { Chart.register(ChartDataLabels) document.querySelector('#chartContainer').innerHTML = '<canvas id="bar-chart-horizontal"></canvas>' var chartConfig = { type: 'bar', data: { labels: period, datasets: data }, options: { responsive: true, plugins: { dataLabels: { font: { color: "#000000", size: 25 }, color: "#000000" }, legend: { position: 'top', }, title: { display: true, text: 'Chart.js Bar Chart' }, } }, }; new Chart(document.getElementById("bar-chart-horizontal"), chartConfig); }Parece que hay una solución simple pero no puedo encontrarla)
Su espacio de nombres es incorrecto, puso una L mayúscula allí mientras debe estar completamente en minúsculas. Después de eso, puede establecer anchor y align al 'end' para obtener el valor en la parte superior de las barras:
Chart.register(ChartDataLabels) const options = { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: 'pink' }] }, options: { plugins: { datalabels: { color: 'black', font: { size: 40 }, anchor: 'end', align: 'end' } } } } const ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options); <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.js"></script> </body>