ingrese la descripción de la imagen aquí
grafico() { const bgColor = { id: 'bgColor', beforeDraw: (gráfico, pasos, opciones) => { const { ctx, ancho, alto } = gráfico; ctx.fillStyle = 'blanco'; ctx.fillRect(0, 0, ancho, alto); ctx.restaurar(); }, }; const ctx = document.getElementById('myChart'); nuevo gráfico (ctx, { tipo: 'barra', opciones: { receptivo: verdadero, keepAspectRatio: falso, escalas: {
yAxes: [ { beginAtZero:true, ticks: { callback(value, index) { return 'R$' + value; }, }, }, ], xAxes: [{}], }, legend: { display: false, }, }, plugins: [bgColor], data: { labels: this.dateChartFormated, datasets: [ { type: 'line', label: 'R$', data: this.finalBalanceChart, backgroundColor: 'rgb(0,53,132)', borderColor: 'rgb(0,53,132)', lineTension: 0, fill: false, }, { type: 'bar', label: 'R$', data: this.receivedAmounts, backgroundColor: 'rgb(37,126,37)', fill: false, }, { type: 'bar', label: 'R$', backgroundColor: 'rgb(233,64,64)', borderColor: 'rgb(233,64,64)', borderWidth: 1, data: this.paymentAmounts, fill: false, }, ], }, });}
Así es como funciona el gráfico y cómo se representan correctamente los datos. Pero si desea que todas las barras sean más visibles, puede usar la opción minBarLength . Esto asegura que las barras tengan al menos esa cantidad de píxeles de alto.
Esto se puede configurar en un nivel de conjunto de datos para que solo las barras de ese conjunto de datos sean tan altas o en un nivel de gráfico en las opciones de los yAxes aunque las opciones de nivel de gráfico están obsoletas y ya no funcionan en V3:
const options = { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [1200, 19, 3, 5, 2, 3], backgroundColor: 'pink' }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], backgroundColor: 'orange', minBarLength: 100, // Set the min bar length on a dataset level so only the orange bars will be at least 100 pixels high } ] }, options: { scales: { yAxes: [{ minBarLength: 100, // Set the min bar length on a chart level so all bars will be at least 100 pixels high }] } } } const ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options); <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> </body>