Hi there,
I have a chart with two sets of data (one is the max value and the other is the current value). The idea is that with each click – the current value increases and gets closer to the max value.
My issue is that each time I click (which increases the value by first changing the value and then re-calling the function) – the chart keeps getting bigger and bigger.
Here is the code (please note that value and maxvalue are defined earlier):
submit() {
alert(‘You contributed 5k’)
this.value = this.value + 5000
this.barGraph()
// operations
// .transfer(this.contract, this.myaddress, this.transferAmount)
// .then(result => {
// console.log(result);
// });
},
// Bar Graph
barGraph() {
let bar_ctx = document.getElementById(“myChart”);
let bar_chart = new Chart(bar_ctx, {
type: “bar”,
data: {
labels: [],
datasets: [
{
data: [this.value],
backgroundColor: “blue”
},
{
data: [this.maxvalue – this.value],
backgroundColor: “red”
}
]
},
options: {
responsive: false,
legend: {
display: false
},
tooltips: {
enabled: false
},
scales: {
xAxes: [
{
display: false,
stacked: true
}
],
yAxes: [
{
display: true,
stacked: true
}
]
} // scales
} // options
});
}