Hi,
I am using chart,kindly let me know to increase its width
My code:
if (response.d.length > 0) {
var dataarray = [];
var datapending = [];
var datareject = [];
var datalabel = [];//['Approved', 'Pending', 'Rejected'];
var datapending = [];
var datareject = [];
var datalabel = [];//['Approved', 'Pending', 'Rejected'];
for (var i = 0; i < response.d.length; i++) {
console.log(response.d[i].DepartName);
console.log(response.d[i].DepartName);
// dataarray.push({ name:response.d[i].DepartName + '( ' + response.d[i].totaldocs + ' )', data: [response.d[i].pendingdocs, response.d[i].approveddocs,
response.d[i].rejecteddocs] });
dataarray.push(response.d[i].approveddocs);
datapending.push(response.d[i].pendingdocs);
datareject.push(response.d[i].rejecteddocs);
datalabel.push(response.d[i].DepartName + ' ( ' + response.d[i].totaldocs + ' )');
}
new Vue({
el: '#app',
components: {
apexchart: VueApexCharts,
},
data: {
// series: dataarray,
series: [{
name: 'Approved',
data: dataarray
}, {
name: 'Pending',
data: datapending
dataarray.push(response.d[i].approveddocs);
datapending.push(response.d[i].pendingdocs);
datareject.push(response.d[i].rejecteddocs);
datalabel.push(response.d[i].DepartName + ' ( ' + response.d[i].totaldocs + ' )');
}
new Vue({
el: '#app',
components: {
apexchart: VueApexCharts,
},
data: {
// series: dataarray,
series: [{
name: 'Approved',
data: dataarray
}, {
name: 'Pending',
data: datapending
}, {
name: 'Rejected',
data: datareject
}],
//}, {
// name: 'Approved',
// data: [{
// x: "A2",
// y: 40
// }]
//}, {
// name: 'Pending',
// data: [{
// x: "A2",
// y: 30
// }],
//}, {
name: 'Rejected',
data: datareject
}],
//}, {
// name: 'Approved',
// data: [{
// x: "A2",
// y: 40
// }]
//}, {
// name: 'Pending',
// data: [{
// x: "A2",
// y: 30
// }],
//}, {
// name: 'Rejected',
// data: [{
// x: "A2",
// y: 8
// }],
//}],
// data: [{
// x: "A2",
// y: 8
// }],
//}],
chartOptions: {
chart: {
type: 'bar',
height: 350,
stacked: true,
},
plotOptions: {
bar: {
horizontal: true,
},
},
stroke: {
width: 1,
colors: ['#fff']
},
title: {
text: 'Publication Grid', align: 'center', style: {
fontSize: '14px',
fontWeight: 'bold',
fontFamily: undefined,
color: '#263238'
},
},
xaxis: {
categories: datalabel,
labels: {
formatter: function (val) {
return val + "k"
}
}
},
yaxis: {
title: {
text: 'Departments:'
},
},
tooltip: {
y: {
formatter: function (val) {
return val + "k"
}
}
},
fill: {
opacity: 1
},
legend: {
nbsp; horizontalAlign: 'center',
offsetX: 40
}
},
chart: {
type: 'bar',
height: 350,
stacked: true,
},
plotOptions: {
bar: {
horizontal: true,
},
},
stroke: {
width: 1,
colors: ['#fff']
},
title: {
text: 'Publication Grid', align: 'center', style: {
fontSize: '14px',
fontWeight: 'bold',
fontFamily: undefined,
color: '#263238'
},
},
xaxis: {
categories: datalabel,
labels: {
formatter: function (val) {
return val + "k"
}
}
},
yaxis: {
title: {
text: 'Departments:'
},
},
tooltip: {
y: {
formatter: function (val) {
return val + "k"
}
}
},
fill: {
opacity: 1
},
legend: {
nbsp; horizontalAlign: 'center',
offsetX: 40
}
},
},
})
}
}
Thanks