var chart = new StackedBarChart(element, data, stack, {
bar : {
color : ['#90ED7D', '#757575', '#00526C', '#6ED1F7', '#238FFF'],
width : 20,
curve : {
show : true,
bars : 'top'
},
opacity : 0.8,
padding : .01,
},
margin : {
left : 0,
right : 0,
top : 0,
bottom : 0
},
transition: {
animate: true,
delay : 100,
duration : 200
},
grids : {
vertical : {
show : true,
color : '#999',
opacity : .5,
values : [ '2010', '2012', '2014', '2016']
},
horizontal : {
show : true,
color : '#999',
opacity : .5,
skipFirst : false,
skipLast : false,
values : [0, 10, 30, 40, 50, 80]
}
},
goalLine : {
value : 60,
class : 'goalline',
icon: {
url: 'https://bharadhwajcn.github.io/cinch-charts/static/images/goal_arrow.png',
toBase64 : true,
class: 'goal-icon',
height : 20,
width : 20,
left: 0
}
},
axis : {
xAxis : {
showAxisLine : true,
firstLabel : true,
orientation: 'bottom',
ticks : {
values : [ '2010', '2012', '2014', '2016'],
padding : 10,
}
},
yAxis : {
showAxisLine : true,
firstLabel : true,
orientation: 'left',
ticks : {
values: [ { value : 10, label : '10 m unit' },
{ value : 30, label : '30 m unit' },
{ value : 40, label : '40 m unit' },
{ value : 50, label : '50 m unit' },
{ value : 80, label : '80 m unit' },
],
font_size : '12px',
formatter : function(value) {
return String(value) + 'k units';
},
}
}
},
tooltip: {
show : true,
listener : 'click touchstart',
class : 'custom-tooltip',
formatter : function() {
return 'Total ' + this.yValue +
'First : ' + this.stackData.firstquarter + ' Second: ' + this.stackData.secondquarter +
'Third : ' + this.stackData.thirdquarter + ' Fourth: ' + this.stackData.fourthquarter;
}
}
});