grafico() { const bgColor = { id: 'bgColor', beforeDraw: (chart, steps, options) => { const { ctx, width, height } = chart; ctx.fillStyle = 'white'; ctx.fillRect(0, 0, width, height); ctx.restore(); }, }; const ctx = document.getElementById('myChart'); new Chart(ctx, { type: 'bar', options: { responsive: true, maintainAspectRatio: false, scales: {
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,
},
],
},
});
}
This is how the chart works and how the data is correctly represented. But if you want all bars to be more visible you can use the minBarLength option. This ensures the bars are at least that many pixels high.
This can be configured on a dataset level so only bars from that dataset are that high or on a chart level in the options of the yAxes although the chart level options are deprecated and dont work in V3 anymore:
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>