var chart = new AreaChart('.chart-container', data, {
  area: {
    color: '#B8D551',
    opacity : 0.75,
    icon: {
      show : true,
      toBase64: true,
      url: 'https://bharadhwajcn.github.io/cinch-charts/static/images/green_circle.png',
      class: 'point-icon',
      width : 10
    }
  },
  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',
      toBase64: true,
      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;
    },
  }
});