Soy nuevo en chart.js, y tengo una pregunta sobre cómo colocar las etiquetas del eje x en la parte superior.
Este es el resultado que esperaba: las etiquetas del eje x están en la parte superior.
Y este es mi intento:
const ctx = document.getElementById('weather_chart'); const myChart = new Chart(ctx, { data: { datasets: [{ type: 'bar', label: 'rainfall probability', data: [10, 20, 30, 40], }, { type: 'line', label: 'temperature', data: [50, 50, 50, 50], borderColor: '#EB6E4B', backgroundColor: '#EB6E4B', }], labels: ['now', '9am', '10am', '11am', '12pm'], }, options: { plugins: { legend: { display: false, }, } } }); <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <div id="chart"> <canvas id="weather_chart"></canvas> </div>Si es posible, ¿te tomarías tu tiempo para escribir la respuesta?
Gracias de antemano, y si mi pregunta es insuficiente, le agradecería que me lo dijera.
Puede configurar todas las cosas relacionadas con la escala, como la posición en este espacio de nombres: options.scales[scaleId] . Para obtener más opciones de configuración de las escalas, puede leer la documentación: https://www.chartjs.org/docs/master/axes/
const ctx = document.getElementById('weather_chart'); const myChart = new Chart(ctx, { data: { datasets: [{ type: 'bar', label: 'rainfall probability', data: [10, 20, 30, 40], }, { type: 'line', label: 'temperature', data: [50, 50, 50, 50], borderColor: '#EB6E4B', backgroundColor: '#EB6E4B', }], labels: ['now', '9am', '10am', '11am', '12pm'], }, options: { scales: { x: { position: 'top' } }, plugins: { legend: { display: false, }, } } }); <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <div id="chart"> <canvas id="weather_chart"></canvas> </div>dentro de opciones> escalas> xAxes, xAxes es una matriz, por lo que podemos definir múltiples ejes y una configuración como esta:
options:{ scales: { xAxes: [ { position: 'top', ticks: { maxRotation: 90, minRotation: 80 } } ] } }Consulte el ejemplo aquí https://codepen.io/ganeshbkdm/pen/oNeaOwm