Angular nvd3 plot line barely visible

70 Views Asked by At

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

0

There are 0 best solutions below