Estoy tratando de duplicar las marcas del eje X en ambos lados del gráfico (inferior y superior).

He visto preguntas anteriores sobre esto, pero esto fue durante chartjs 2.x. Han cambiado la sección de escala de las opciones desde entonces. Solías ser capaz de hacer algo similar a esto:

 xAxes: [ { position: 'top', }, { position: 'bottom', } ]

Pero en Chartjs 3.x no puede proporcionar una matriz para xAxes. Ahora debe agregar una ID a su conjunto de datos y luego, en las opciones de escala, haga referencia a esa ID. Pero no puedo hacer referencia a 1 conjunto de datos en 2 objetos de escala cuando uno dice posición: superior y la otra posición: inferior. Solo usará el último objeto de escala.

Entonces mi pregunta es, con UN conjunto de datos. ¿Cómo puedo hacer que el eje X esté en la parte inferior del gráfico Y en la parte superior de un gráfico de barras horizontales? De esa manera, en caso de que el gráfico sea grande, no tengo que desplazarme siempre hacia abajo para ver cuál es el valor.

Editar: según los comentarios, ahora tengo el siguiente resultado, que está más cerca de lo que estoy buscando, pero lo que sucede con las marcas en la parte superior. ¿Por qué no coinciden con los números en la parte inferior?

 new Chart('myChart', { type: 'line', data: { labels: ['A', 'B', 'C', 'D', 'E', 'F'], datasets: [{ data: [1, 3, 6, 2, 8, 9], borderColor: '#00D', }] }, options: { indexAxis: "y", scales: { x: { }, x1: { position: 'top' } } } });

 canvas { max-height: 180px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script> <canvas id="myChart"></canvas>