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