var chart = new LineChart(element, data, { line: { color: '#B8D551', width: 4, icon: { show: true, url: 'https://bharadhwajcn.github.io/cinch-charts/static/images/green_circle.png', toBase64: false, class: 'point-icon', width: 10 } }, threshold: { value: 50, icon: { url: 'https://bharadhwajcn.github.io/cinch-charts/static/images/orange_circle.png', toBase64: false, } }, grids: { vertical: { show: true, color: '#999', opacity: .5, }, horizontal: { show: true, color: '#999', opacity: .5, skipFirst: false, skipLast: false, values: [10, 30, 50, 70, 80] } }, transition: { animate: true, duration: 2000 }, margin: { left: 0, right: 0, top: 0, bottom: 0 }, goalLine: { value: 50, class: 'goalline', icon: { url: 'https://bharadhwajcn.github.io/cinch-charts/static/images/goal_arrow.png', class: 'goal-icon', height: 15, width: 13, left: 0 } }, axis: { xAxis: { showAxisLine: true, firstLabel: true, orientation: 'bottom', ticks: { values: ['Jan', 'Mar', 'May', 'Aug', 'Oct', 'Dec'], padding: 10, formatter: function(value) { return value + " '17"; } } }, yAxis: { showAxisLine: true, firstLabel: false, orientation: 'left', ticks: { values: [{ value: 10, label: '10 m unit' }, { value: 30, label: '30 m unit' }, { value: 50, label: '50 m unit' }, { value: 70, label: '70 m unit' }, { value: 80, label: '80 m unit' }, ], position : { x : 0, y : 10 }, font_size: '12px', } } }, tooltip: { show: true, listener: 'click touchstart', class: 'custom-tooltip', formatter: function() { return this.yValue + ' units in ' + this.xValue; }, }, connectNull: true });