Tengo que crear tres gráficos de líneas que compartan el mismo eje x pero que estén apilados verticalmente uno encima del otro con diferentes ejes y.
Aquí está mi visualización actual.

Desafortunadamente, las marcas de verificación del eje x no se alinean debido a las etiquetas del eje y. ¿Cómo debo hacer para arreglar esto?
Solo apila los ejes:
var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Black"], datasets: [{ label: 'Dataset 1', data: [10, 30, 50, 20, 25, 44, -10], borderColor: 'red', backgroundColor: 'red' }, { label: 'Dataset 2', data: [10000, 30000, 50000, 20000, 25000, 44000, -10000], borderColor: 'blue', backgroundColor: 'blue', yAxisID: 'y2', } ] }, options: { scales: { y: { type: 'linear', position: 'left', stack: 'demo', grid: { borderColor: 'red' }, title: { display: true, text: 'hello' } }, y2: { offset: true, position: 'left', stack: 'demo', grid: { borderColor: 'blue' }, title: { display: true, text: 'hello2' } } } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options); <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script> </body>