Todas mis etiquetas están en la parte superior de las barras. Puedo ver esta esta imagen
pero quiero que sea así: este relleno de imagen no funciona para xAxes, pero funciona para yAxes
legend: {display: false}, scales: { xAxes: [{ position: 'top', stacked: true, ticks: { stepSize: 1, min: 0, autoSkip: false, fontColor: '#3f7ba2', fontStyle: 600, fontFamily: 'Italic', }, gridLines: { color: '#dedfe7', tickMarkLength: 0, } }], yAxes: [{ stacked: true, ticks: { min: 0, fontColor: '#62aae8', padding: 5 }, gridLines: { color: '#dedfe7' //b5cce2 } }], }Este es un problema que solo persiste en chart.js versión 2.6.0 y anteriores. Como puede leer en las notas de la versión debajo de las correcciones de errores, dice que en PR 4403 la opción ticks.padding ahora se aplica a escalas verticales y horizontales.
Entonces, para resolver su problema, deberá actualizar a una versión de chart.js superior o igual a 2.7.0
const options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderWidth: 1 } ] }, options: { scales: { xAxes: [{ position: 'top', ticks: { padding: 100 } }], } } } 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/2.7.0/Chart.js"></script> </body>