var chart = new BarChart(element, data, { bar : { color : '#B8D551', width : 20, curve : true, 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 : [ 'Jan', 'Mar', 'May', 'Aug', 'Oct', 'Dec'] }, 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 : [ 'Jan', 'Mar', 'May', 'Aug', 'Oct', 'Dec'], padding : 10, position : { angle : 30, x : -10, y : -5 }, } }, 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' }, ], position : { angle : 30, x : -5, y : -10 }, fontSize : '12px', formatter : function(value) { return String(value) + 'k units'; }, } } }, tooltip: { show : true, listener : 'click touchstart', class : 'custom-tooltip', formatter : function() { return this.yValue + ' units in ' + this.xValue; }, }, });