Chart growing each time it's called

[Kustanza]

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

[Indranil]

@kustanza,

We don’t see CanvasJS related code in the snippet that you have shared. Can you kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can look into code, understand the scenario better and help you out?

__________
Indranil Deo
Team CanvasJS