nvd3 angular-nvd3 d3 Displaying chart legend vertically

Question

I'm creating a pie chart using nvd3 and angular-nvd3. I've got my legend displayed but it's in a row across the top.

I'd like to display it in a column down the left side.

I found http://embed.plnkr.co/TJqjjkHaD2S0VjsGmN3c/preview but when I use the options found in the .js file then all that does is change the look of the legend, not the placement.

The css file is empty and there doesn't seem to be inline css in the html. So I'm unsure how they placed the position of the legend on the right in a column.

I do see legendPosition: 'right' but when I use legendPosition: 'left' then the entire pie chart disappears.

So at the least how do I display in a column, and it would be great if I could change it to the left.

Options object:

$scope.patientsChart = {
     chart: {
            type: 'pieChart',
            height: 500,
            x: function (d) {
                var PatientStatuses = ["Unknown", "Green- Healthy", "Yellow - Fair", "Red - Unhealthy"];
                return PatientStatuses[d.Key -1];
            },
            y: function (d) { return d.Value.length; },
            showLabels: true,
            duration: 500,
            labelThreshold: 0.01,
            labelSunbeamLayout: true,
            showLegend: false,
            legend: {
                margin: {
                    top: 5,
                    right: 35,
                    bottom: 5,
                    left: 0
                }
            },
            pie: {
                dispatch: {
                    //elementClick: function (e) { console.log(e) }
                }
            },
            color: function (d) {
                var colors = ['#4066b9', '#009446', '#eba323', '#ee2726'];
                return colors[d.Key - 1];
            }
        }
    };

Directive for angular-nvd3:

<nvd3 options="FEV1Chart" data="patients"></nvd3>

In the nv.d3.js source code, the only options are for legendPosition configuration are 'top' and 'right'. A hacky way to move the legend around is by increasing its padding, as I've done in this plunker, but without modifying the way the source code renders the svg, I'm not sure how to get the pie and legend side-by-side with the legend on the left. You can see I tried grabbing the respective CSS classes and manipulating them that way, but with no luck. — Bennett Adams
There's a lot of opportunity for people to jump in and contribute features like these. If it's something you care about, build it and make a pull request! It's fun too. Since angular-nvd3 is just a shim around nvd3, most of what you want will be adding meat to models/pieChart.js github.com/novus/nvd3/blob/master/src/models/pieChart.js — Eric Hartford

Cátia Matos Cátia Matos · Accepted Answer · 2017-10-19T10:40:28

If you want to rotateLabels in xAxis just add "rotateLabels: -45"

For example,

xAxis: {
                        axisLabel: 'Hours',
                        axisLabelDistance: 20,
                        showMaxMin: false,
                        rotateLabels: -45
                    },

nvd3 angular-nvd3 d3 Displaying chart legend vertically

1 Answers