Creé un gráfico de líneas y un gráfico de barras en Chartjs con exactamente la misma configuración, pero por alguna razón, las escalas x de ambos gráficos son diferentes, como puede ver en la imagen a continuación.

La configuración para ambos gráficos es la misma, la única diferencia es el tipo de gráfico:

 function getOptions() { return { animation: false, responsive: true, maintainAspectRatio: false, plugins: { tooltip: false, legend: { display: false }, title: { display: false } }, elements: { line: { fill: true }, point: { radius: 0 } }, scales: { x: { type: "time", time: { displayFormats: { second: 'HH:mm:ss', minute: 'HH:mm', hour: 'HH' }, unit: 'minute', stepSize: 1, min: '00:00:00', max: '23:59:59', }, grid: { display: true, drawBorder: true, drawOnChartArea: true, drawTicks: true, color: function(context) { return '#fff'; }, } }, y: { beginAtZero: true, grid: { display: true, drawBorder: false, color: function(context) { return '#fff'; }, }, } } }; }

Noté que los ejes x se alinean perfectamente, si configuro el "tamaño de paso" en 'segundos'. Esto probablemente tiene que ver con el hecho de que los datos insertados en el gráfico son datos secundarios.