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.
Here is a picture of what's going on:
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}.
How could I get this line chart to cover the other coordinates as I intended?
Here is my linechart.component.js:
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 < 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]
}
};
}
})
Here is the git repo if you'd like to run it.
I found the issue. All numbers after the y coordinate of 783 were in the thousands, and were coming in from the API as a string with commas. So I had to remove the "," from each number. Then the rest of the line chart was able to plot.