react-chartjs-2
react-chartjs-2 copied to clipboard
In the chart mix how to pass API request values constant into the afterDraw plugin
The problem is getting the value read by the request made to the API, but I've already used the value in options normally, only when it arrives at the plugin it takes a value as if I haven't received anything from the API, as if it weren't a sequential program, apparently it is running the constant plugin even before requesting the API or better without the API request code part, because the API request occurs periodically
const options = {
responsive: true,
labels: ['Janeiro(' + acumuladoJaneiro + ')(' + this.state.janeiroF + ')', 'Fevereiro(' + acumuladoFevereiro + ')(' + acumuladoFevereiroF + ')', 'Marco(' + acumuladoMarco + ')(' + acumuladoMarcoF + ')', 'Abril(' + acumuladoAbril + ')(' + acumuladoAbrilF + ')', 'Maio(' + acumuladoMaio + ')(' + acumuladoMaioF + ')', 'Junho(' + acumuladoJunho + ')(' + acumuladoJunhoF + ')', 'Jullho(' + acumuladoJulho + ')(' + acumuladoJulhoF + ')', 'Agosto(' + acumuladoAgosto + ')(' + acumuladoAgostoF + ')', 'Setembro(' + acumuladoSetembro + ')(' + acumuladoSetembroF + ')', 'Outubro(' + acumuladoOutubro + ')(' + acumuladoOutubroF + ')', 'Novembro(' + acumuladoNovembro + ')(' + acumuladoNovembroF + ')', 'Dezembro(' + acumuladoDezembro + ')(' + acumuladoDezembroF + ')'],
tooltips: {
mode: 'label'
},
elements: {
line: {
fill: false
}
},
scales: {
xAxes: [
{
display: true,
gridLines: {
display: false
},
labels: ['Janeiro(' + acumuladoJaneiro + ')(' + this.state.janeiroF + ')', 'Fevereiro(' + acumuladoFevereiro + ')(' + acumuladoFevereiroF + ')', 'Marco(' + acumuladoMarco + ')(' + acumuladoMarcoF + ')', 'Abril(' + acumuladoAbril + ')(' + acumuladoAbrilF + ')', 'Maio(' + acumuladoMaio + ')(' + acumuladoMaioF + ')', 'Junho(' + acumuladoJunho + ')(' + acumuladoJunhoF + ')', 'Jullho(' + acumuladoJulho + ')(' + acumuladoJulhoF + ')', 'Agosto(' + acumuladoAgosto + ')(' + acumuladoAgostoF + ')', 'Setembro(' + acumuladoSetembro + ')(' + acumuladoSetembroF + ')', 'Outubro(' + acumuladoOutubro + ')(' + acumuladoOutubroF + ')', 'Novembro(' + acumuladoNovembro + ')(' + acumuladoNovembroF + ')', 'Dezembro(' + acumuladoDezembro + ')(' + acumuladoDezembroF + ')']
}
],
yAxes: [
{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-1',
gridLines: {
display: false
},
labels: {
show: true
}
},
{
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-2',
gridLines: {
display: false
},
labels: {
show: true
}
}
]
}
};
const exempleConst = Math.round(this.state.fevereiro)
const exempleConst2 = exempleConst + 2
const percentagemJaneiro = Math.round(((this.state.janeiroF + (acumuladoJaneiro ? 0 : 1)) / (acumuladoJaneiro ? acumuladoJaneiro : 1)) * 100)
const percentagemMarco = Math.round(((acumuladoMarcoF + (acumuladoMarco ? 0 : 1)) / (acumuladoMarco ? acumuladoMarco : 1)) * 100)
const plugins = [
{
afterDraw: (chartInstance, easing) => {
const { ctx } = chartInstance.chart;
ctx.fillText(exempleConst2, 300, 500);
ctx.fillText(percentagemJaneiro - 100 + "%", 75, 500);
ctx.fillText(acumuladoMarco + "%", 500, 100);
}
}
];