Angular NVD-3 Graph: Axis Labels and Axis Numbers Cut Off and Outside of Viewing Window

0
votes

Currently I am using angular-nvd3 graphing to display data. However, the stacked area chart nvd3 graph type is cutting off the numbers and axis labels. The template graph can be viewed here. The y-axis numbers and label is the main concern. Below is the graph options code and an image of the issue.

Is there a way to reduce the size to prevent the y-axis numbers and label from being cut-off?

$scope.optionsStacked = {
                    chart: {
                        type: 'stackedAreaChart',
                        height: 450,
                        margin : {
                            top: 20,
                            right: 20,
                            bottom: 30,
                            left: 40
                        },
                        x: function(d){return d[0];},
                        y: function(d){return d[1]/100;},
                        useVoronoi: false,
                        clipEdge: true,
                        duration: 100,
                        useInteractiveGuideline: true,
                        xAxis: {
                            axisLabel: 'Time (Years)',
                            axisLabelDistance: -8,
                            showMaxMin: false,
                            tickFormat: function(d) {
                                return d3.time.format('%Y')(new Date(d))
                            },
                            showMaxMin: true
                        },
                        yAxis: {
                            axisLabel: 'arb units',
                            axisLabelDistance: -4,
                            tickFormat: function(d){
                                return d3.format(',.2f')(d);
                            }
                        },
                        zoom: {
                            enabled: true,
                            scaleExtent: [1, 10],
                            useFixedDomain: false,
                            useNiceScale: false,
                            horizontalOff: false,
                            verticalOff: true,
                            unzoomEventType: 'dblclick.zoom'
                        }
                    }
                };

enter image description here

1
javascriptangularjsnvd3.jsangular-nvd3
Did you try changing margin left? A JSFiddle/Plunkr would help. – jeznag
Your right. I increased the left margin from 40 to 100. The higher the left margin the smaller the graph gets, allowing for the numbers and axis labels viewing space. If you post up an answer, I can give you credit for the answer. – Val

1 Answers

1
votes

Try increasing margin.left. It will make space for the y axis values.