Intenté eliminar el desplazamiento del gráfico de barras (desplazamiento: falso), pero el resultado es que la primera barra se desplazó hacia la izquierda de modo que solo se muestra la mitad de la primera barra. Esto es lo que tengo, pero no se muestran el principio y el final del gráfico de pasos.
function createBarChart() { const ctx = document.getElementById('myChart'); const myChart = new Chart(ctx, { type: 'line', data: { labels: ['1', '2', '3', '4', '5', '6'], datasets: [ { type: 'line', label: 'Dataset 1', data: [18, 19, 16, 12, 13, 11], borderColor: 'rgb(54, 162, 235)', fill: false, radius: 0, stepped: 'middle', // xAxisID: 'xStepChart' }, { type: 'bar', label: 'Label 2', data: [9.35, 8.35, 8.56, 6.46, 5.04, 3.15], //-- No gaps between bars barPercentage: 1.0, categoryPercentage: 1.0, backgroundColor: ['#71797E'], borderColor: ['#000000'], borderWidth: 1 }, { type: 'bar', label: 'Label 3', data: [20.34, 17.31, 16.39, 13.48, 11.29, 11.23], //-- No gaps between bars barPercentage: 1.0, categoryPercentage: 1.0, backgroundColor: ['#A9A9A9'], borderColor: ['#000000'], borderWidth: 1 }, { type: 'bar', label: 'Label 4', data: [20.40, 18.57, 16.96, 14.19, 12.68, 11.98], //-- No gaps between bars barPercentage: 1.0, categoryPercentage: 1.0, backgroundColor: ['rgba(46, 142, 201, 0.2)'], borderColor: ['rgba(61, 61, 60, 1)'], borderWidth: 1 }, ] }, options: { scales: { x: { stacked: true, }, y: { stacked: false } } } }) }Puede definir los data de la 'line' como una matriz de puntos (objetos individuales que tienen cada uno una propiedad x e y ). Luego, vincule el conjunto de dataset a un segundo eje x que no se muestra.
{ type: 'line', label: 'Dataset 1', data: [{x: 0, y: 18}, {x: 1, y: 19}, {x: 2, y: 16}, {x: 3, y: 12}, {x: 4, y: 13}, {x: 5, y: 11}, {x: 6, y: 11}], ... stepped: 'end', xAxisID: 'x2' }, El eje x para el conjunto de dataset 'line' ...
x2: { type: 'linear', display: false }Eche un vistazo a su código modificado y ejecutable a continuación y vea cómo funciona.
new Chart('myChart', { type: 'line', data: { labels: ['1', '2', '3', '4', '5', '6'], datasets: [{ type: 'line', label: 'Dataset 1', data: [{x: 0, y: 18}, {x: 1, y: 19}, {x: 2, y: 16}, {x: 3, y: 12}, {x: 4, y: 13}, {x: 5, y: 11}, {x: 6, y: 11}], borderColor: 'rgb(54, 162, 235)', fill: false, radius: 0, stepped: 'end', xAxisID: 'x2' }, { type: 'bar', label: 'Label 2', data: [9.35, 8.35, 8.56, 6.46, 5.04, 3.15], //-- No gaps between bars barPercentage: 1.0, categoryPercentage: 1.0, backgroundColor: ['#71797E'], borderColor: ['#000000'], borderWidth: 1 }, { type: 'bar', label: 'Label 3', data: [20.34, 17.31, 16.39, 13.48, 11.29, 11.23], //-- No gaps between bars barPercentage: 1.0, categoryPercentage: 1.0, backgroundColor: ['#A9A9A9'], borderColor: ['#000000'], borderWidth: 1 }, { type: 'bar', label: 'Label 4', data: [20.40, 18.57, 16.96, 14.19, 12.68, 11.98], //-- No gaps between bars barPercentage: 1.0, categoryPercentage: 1.0, backgroundColor: ['rgba(46, 142, 201, 0.2)'], borderColor: ['rgba(61, 61, 60, 1)'], borderWidth: 1 }, ] }, options: { scales: { x: { stacked: true, }, x2: { type: 'linear', display: false }, y: { stacked: false } } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script> <canvas id="myChart"></canvas>