title: Why is my line chart not plotting all of my data?
body: <p>I am trying to create a line charts which covers points of {x: someX, y: someY}. But, it's not covering all of my points, and maxes out when y is 783. </p>
  
  <p>Here is a picture of what's going on:</p>
  
  <p><a href="https://i.stack.imgur.com/hdEJt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hdEJt.png" alt="There&#39;s a big space"></a></p>
  
  <p>The airlines on the bottom should have the line covering them as well, but my line chart is stopping the line at {x: 21, y: 783}. </p>
  
  <p>How could I get this line chart to cover the other coordinates as I intended? </p>
  
  <p>Here is my linechart.component.js: </p>
  
  <pre><code>app.component('linechart', {
    templateUrl: 'views/linechart.template.html',
    controller: function($scope, ClaimService) {
      $scope.data = [];
      $scope.getData = (function() {
  
        ClaimService.getData().then(function(data) {
  
          var coordinates = [];
  
          var coords;
          for (var i = 0; i &lt; data.length; i++) {
  
            coords = {
              x: i,
              y: data[i].monthlyLoss,
              label: data[i].key
            }
  
            coordinates.push(coords);
  
          }
  
          $scope.data = [
            {
              key: "Refer to X axis for airline names",
              values: coordinates,
              color: "blue"
            }
          ]
  
        })
      })();
  
      $scope.options = {
        chart: {
          type: 'lineChart',
          height: 500,
          width: 5000,
          x: function(d) {
  
            return d.x;
  
          },
          y: function(d) {
            return d.y
  
          },
  
          color: d3.scale.category10().range(),
          duration: 300,
          useInteractiveGuideline: true,
          clipVoronoi: false,
  
          xAxis: {
            axisLabel: "Monthly loss",
            tickFormat: function(d) {
              console.log(d)
              var label = $scope.data[0].values[d].label;
              return label;
  
            }
          },
  
          yAxis: {
            axisLabel: 'Y Axis',
  
            axisLabelDistance: 0
          },
          yDomain: [0, 40000]
        }
      };
    }
  })
  </code></pre>
  
  <p>Here is the git <a href="https://github.com/capozzic1/tsa-claims" rel="nofollow noreferrer">repo</a> if you'd like to run it.</p>