AngularJS ChartJS - Multiline with diff no. of data points for each line
<p>I'm using <a href="https://jtblin.github.io/angular-chart.js/" rel="nofollow noreferrer">angular-chart.js</a> which is extension on <a href="http://www.chartjs.org/docs/" rel="nofollow noreferrer">chart.js</a> in my page to create multiline chart.</p>

<p>In my multiline chart, each line may have different set of data points. For example, the chart has 2 lines A &amp; B. Then x-axis labels would be of fixed # like months - Jan to March. The line A can have data points for month Jan &amp; Feb and line B can have data points for Jan &amp; March.  I'm not able to make it work using angularjs but according to <a href="https://github.com/chartjs/Chart.js/issues/1544" rel="nofollow noreferrer">this</a>, it is possible using chartjs.</p>

<p>Example Code:
<a href="https://plnkr.co/edit/aM9mMP5liENQMa8nfOE9?p=preview" rel="nofollow noreferrer">Plnkr Link</a> </p>

<pre><code>&lt;body ng-app="DashboardApp"&gt;
&lt;div ng-controller="MultiLineChartCtrl"&gt;
  &lt;canvas class="chart chart-line" chart-data="data" chart-labels="labels" chart-series="series" chart-options="options" chart-dataset-override="datasetOverride" chart-click="onClick" height="250px"&gt;&lt;/canvas&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<pre><code>var dbapp = angular.module('DashboardApp', ['chart.js']);

dbapp.controller('MultiLineChartCtrl', ['$scope',
function($scope) {

$scope.labels = ["January", "February", "March", "April"];
$scope.series = ['Person A', 'Person B'];
$scope.data = [];
$scope.data.push({
  labels: ["January", "February", "March"],
  data: [4.43, 6.27, 6.74]
});
$scope.data.push({
  labels: ["January", "March", "April"],
  data: [6.43, 5.27, 7.74]
});


$scope.options = {
  limitLines: [{
    label: 'Target',
    value: 1,
    color: 'rgba(255, 0, 0, .9)'
  }],
  steppedLine: true,
  showLines: true,
  elements: {
    line: {
      fill: false,
    }
  },
  scales: {
    xAxes: [{
      display: true,
      scaleLabel: {
        show: true,
        labelString: 'Month'
      }
    }],
    yAxes: [{
      display: true,
      scaleLabel: {
        show: true,
        labelString: 'Value'
      },
      ticks: {
        suggestedMin: 0,
        beginAtZero: true
      }
    }]
  },
  legend: {
    display: true,
    position: 'top',
    fill: false
  }
};
$scope.$on('create', function(event, chart) {
  var legend = chart.generateLegend();
  console.log(legend);
});

 }
]);
</code></pre>