d3.js - nvd3 angular-nvd3 d3 チャートの凡例を縦に表示する

Question

nvd3 と angular-nvd3 を使用して円グラフを作成しています。凡例を表示しましたが、一番上に並んでいます。

左側の列に表示したいと思います。

http://embed.plnkr.co/TJqjjkHaD2S0VjsGmN3c/previewを見つけましたが、.js ファイルにあるオプションを使用すると、配置ではなく凡例の外観が変わるだけです。

css ファイルが空で、html にインライン css がないようです。したがって、列の右側に凡例の位置をどのように配置したかはわかりません。

わかりますlegendPosition: 'right'が、使用するとlegendPosition: 'left'円グラフ全体が消えます。

せめて列に表示するにはどうすればいいのか、左に変更できればいいのですが。

オプション オブジェクト:

$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];
            }
        }
    };

angular-nvd3 のディレクティブ:

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