var chart = new MultiLineChart(element, data, {
  line: {
    width: [4, 8, 4],
    color: ['#359fd1', '#B8D551', '#FD8635'],
    icon: {
      show : [true, true, true],
      url: ['https://bharadhwajcn.github.io/cinch-charts/static/images/blue_star.png',
            'https://bharadhwajcn.github.io/cinch-charts/static/images/green_circle.png',
            'https://bharadhwajcn.github.io/cinch-charts/static/images/orange_circle.png',
          ],
      width : [10, 15, 10]
    }
  },
  threshold : {
    value : [131, 90, null],
    icon: {
      url: ['https://bharadhwajcn.github.io/cinch-charts/static/images/orange_circle.png'],
      width : 10,
    }
  },
  connectNull: [true, false, true],
  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 : [30, 60, 90, 120, 150, 180]
    }
  },
  transition: {
    animate: true,
    duration : 2000,
    delay : 1000,
  },
  margin : {
    left : 0,
    right : 0,
    top : 0,
    bottom : 0
  },
  goalLine : {
    value : 130,
    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,
      }
    },
    yAxis : {
      showAxisLine : true,
      firstLabel : false,
      orientation: 'left',
      ticks : {
        values: [ { value : 30, label : '30m unit' },
                  { value : 60, label : '60m unit' },
                  { value : 90, label : '90m unit' },
                  { value : 120, label : '120m unit' },
                  { value : 150, label : '150m unit' },
                  { value : 180, label : '180m unit' },
                ],
        position : {
          y : 10,
        },
        font_size : '12px',
      }
    }
  },
  tooltip: {
    show : true,
    listener : 'click touchstart',
    class : 'custom-tooltip',
    formatter : function() {
      return this.yValue + ' units in ' + this.xValue;
    },
  },
  legend: {
    show: true,
    class: 'legend-class',
    position : 'bottom',
    height : 45,
    clickable : [true, true, true]
  }
});