Full option Multi Line Chart

The working example of full option multi line chart.

by Bharadhwaj CN

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" href="https://bharadhwajcn.github.io/cinch-charts/static/css/min/cinch-charts.min.css">
<script src="https://bharadhwajcn.github.io/cinch-charts/static/js/min/multiLine.min.js"></script>
<div class="chart-container" id="first-chart"> </div>

CSS

.chart-container {
  height: 90%;
  width: 100%;
}

JavaScript

var element = document.querySelector('#first-chart');

var data = [{
  key: 'Series 1',
  value: [
    ['Jan', 177],
    ['Feb', 104],
    ['Mar', 124],
    ['Apr', 127],
    ['May', 143],
    ['Jun', 130],
    ['Jul', 90],
    ['Aug', 154],
    ['Sep', 114],
    ['Oct', 102],
    ['Nov', 123],
    ['Dec', 135]
  ]
}, {
  key: 'Series 2',
  value: [
    ['Jan', 82],
    ['Feb', 97],
    ['Mar', 78],
    ['Apr', 86],
    ['May', 116],
    ['Jun', 95],
    ['Jul', null],
    ['Aug', 78],
    ['Sep', 86],
    ['Oct', 116],
    ['Nov', 95],
    ['Dec', 109]
  ]
}, {
  key: 'Series 3',
  value: [
    ['Jan', 50],
    ['Feb', 40],
    ['Mar', 95],
    ['Apr', 75],
    ['May', 90],
    ['Jun', null],
    ['Jul', 74],
    ['Aug', 68],
    ['Sep', 60],
    ['Oct', 90],
    ['Nov', 48],
    ['Dec', 66]
  ]
}];

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: {
   ...