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,
},
],
},
});
}