I am using nvd3 with angular directives to plot some data. It used to work fine, however now I noticed that the plot disappeared, or rather reduced to a very thin line. The data is coming in and the plot is being displayed but it is barely visible. How do I get it back to normal?
Here is what it looks like in html:
<nvd3 options="options" data="data"></nvd3>
and here are the options in javascript:
$scope.options = {
chart: {
type: 'lineChart',
height: 200,
margin : {
top: 20,
right: 80,
bottom: 40,
left: 80
},
color: d3.scale.category10().range(),
x: function(d){ return d.timestamp; },
y: function(d){ return d.avg_voltage; },
useInteractiveGuideline: true,
duration: 0,
xScale: d3.time.scale.utc(),
xAxis: {
axisLabel: 'Time',
rotateLabels: 0,
tickFormat: function (d) {return d3.time.format('%X')(new Date(d))},
showMaxMin: false,
},
yAxis: {
axisLabel: 'Voltage (v)',
tickFormat: function(d){return d3.format('.04f')(d);}
}
}
};
Also here are all my javascript dependencies in case they are the problem:
"dependencies": {
"angular": "^1.4.0",
"bootstrap": "^3.3.6",
"angular-animate": "^1.4.0",
"angular-cookies": "^1.4.0",
"angular-resource": "^1.4.0",
"angular-route": "^1.4.0",
"angular-sanitize": "^1.4.0",
"angular-touch": "^1.4.0",
"d3": "~3.5.8",
"n3-line-chart": "~2.0.3",
"angular-nvd3": "~1.0.5",
"angular-ui-bootstrap": "~1.1.2",
"font-awesome": "fontawesome#~4.5.0",
"angular-bootstrap": "~1.1.2"
}
Thanks