1

I am using following configurations for displaying my line chart with the help of angular nvd3. The issue is that while displaying the chart if there is only one point near the edge then it gets doesn't get displayed unless it is hovered upon.

$scope.options = {
        chart: {
            type: 'lineChart',
            forceY:[0],            
            height: 450,
            margin : {
                top: 30,
                right: 70,
                bottom: 68,
                left: 90
            },
            x: function(d){ return d[0]; },
            y: function(d){ return d[1]; },
            useInteractiveGuideline: false,
            xDomain: [moment($scope.calenderStartDate).valueOf(), moment($scope.calenderEndDate).valueOf()],            
            lines:{
                            dispatch: {
                                elementClick: function(e){
                                    console.log(e);
                                    handleDataForTable(e.point.x,e.series.key);
                                    $scope.api.refresh();
                                },
                                elementMouseout: function(){}
                            }
                },
            xScale: d3.time.scale().clamp(true),
            xAxis: {
                tickFormat: function(d){
                    return d3.time.format('%d-%b-%y')(new Date(d))
                },                    
                 rotateLabels:-30

            },

        legend: {
                vers: 'furious'
        },
        showLegend:false,
            yAxis: {
                axisLabel: 'No of Bookings',
                tickFormat: function(d){
                    return d3.format('d')(d);
                }
            },
            callback: function(chart){
                console.log("!!! lineChart callback !!!");
            },
            defined:function(d) { return !isNaN(d[1]); }
        },
        title: {
            enable: false,
            text: 'Title for Line Chart'
        },
        subtitle: {
            enable: false,
            text: '',
            css: {
                'text-align': 'center',
                'margin': '10px 13px 0px 7px'
            }
        },
        caption: {
            enable: false,
            html: '',
            css: {
                'text-align': 'justify',
                'margin': '10px 13px 0px 7px'
            }
        }
    };

}

Ambar Bhatnagar
  • 215
  • 1
  • 3
  • 9

1 Answers1

3

if the length of your data is 1 then delete forceY from $scope.options.chart.forceY like this:

delete $scope.options.chart['forceY']

The chart will get the properly rendered by d3. The problem is that when you use the 'forceY' option in d3 if single point is not rendered.You will have to find the point in graph by hovering.So deleting 'forceY' when length of the data is 1 , graph will render properly with default rendering options provided by d3 with single point visible and y axis will show 1 with spaces indicating 0 and 2(some larger value than 1).

Chetan
  • 944
  • 5
  • 22