How to clear Apex stack bar chart to bind new data

Question

Greetings,

 

have bind apex chart on load time successfully.

 

Problem:

Code working fine to  bind chart on load time , but as i click on button to fetch new data to rebind chart ,it shows old data/chart bars ( not reflecting to show new data ),although everything is fine regarding fetching records

 

solution Required:

Guide to reflect new data when i click on button 

 

My Code

 

 

function onsuccessBindDonut(response) {
if (response.d.length > 0) {
var dataalready = [];
var datasoafare = [];
var dataplan = [];
var datapending = [];//['Approved', 'Pending', 'Rejected'];
var datalabel = [];
var mycolor = ['#f0ad4e', '#5cb85c', '#FF0000', '#c09c61'];
var tooltiptext = [];

$('#div_cyclename').text('Cycle Name : ' + response.d[0].Cyclename);
$('#' + '<%=dtfromexpected.ClientID%>' + '_dtfromexpectedDate').val(response.d[0].startDate);
$('#' + '<%=dttoexpected.ClientID%>' + '_dttoexpectedDate').val(response.d[0].expirydate);

for (var i = 0; i < response.d.length; i++) {
dataplan.push(response.d[i].plantobeupload);
datasoafare.push(response.d[i].total_sofareupload);
datapending.push(response.d[i].tobeupload);
datalabel.push(response.d[i].DeparttName + ' ( ' + response.d[i].plantobeupload + ' )');
}

// var chart = new ApexCharts(el, options);

new Vue({
el: '#app1',
components: {
apexchart: VueApexCharts,
},
data: {

series: [{
name: 'Plan',
data: dataplan,
colors: mycolor[0]

},
{
name: 'Exist',
data: datasoafare,
colors: mycolor[2]

},
{
name: 'Pending',
data: datapending,
colors: mycolor[3]

}],

chartOptions: {
colors: mycolor,
chart: {
type: 'bar',
height: 350,
stacked: true,
},
plotOptions: {
bar: {
horizontal: true,
vertical: false,
},
},
stroke: {
width: 1,
colors: ['#fff']
},
//title: {
// text: 'Documents Logs', align: 'center', style: {
// fontSize: '14px',
// fontWeight: 'bold',
// fontFamily: undefined,
// color: '#263238'
// },
//},
xaxis: {
categories: datalabel,
labels: {
formatter: function (val) {
return val
}
}
},
yaxis: {
title: {
text: 'Departments:'
},
},
tooltip: {
y: {
formatter: function (val) {
return val
}
}
},
fill: {
opacity: 1,
//colors: ['##5cb85c', '##f0ad4e', '#9C27B0'],

},
legend: {
position: 'top',
horizontalAlign: 'center',
offsetX: 40
},

},

},

});

}
}

 

Thanks