Search code examples
javascriptangularjsangularjs-directivelinechartangular-nvd3

NVD3 How to remove Y-axis in Line chart and also utilize the space of Y-axis after it is removed


I am using NVD3 for showing a line chart. I have this line chart as follows:

chart: {
                type: 'lineChart',
                height: 150,
                margin : {
                    top: 20,
                    right: 20,
                    bottom: 40,
                    left: 55
                },
                x: function(d){ return d.x; },
                useInteractiveGuideline: true,
                "xAxis": {
                    ticks:7,
                    showMaxMin : false,
                    tickFormat: 
                        function (d) { 
                        var x = globalFactory.getCalendarConstants().dateMap.weekDayShortLabels
                        return x[d] },
                },
                showYAxis:false,
                showLegend : false,
            }

It removes the Y-Axis but the space of Y-axis is not Utilized. I want to use up that space.

Is their any solution to it?


Solution

  • You can try adjusting the margins (see below), though you may have to play with it a bit to get that spaced out the way you want it.

    margin : {
              top: 20,
              right: 20,
              bottom: 40,
              left: 0
             },