Angular-nvd3-directives adjust height of the chart according to the width of the chart

Question

I'm trying to create a line chart using angular-nvd3-directives. To make it look good I need to set the height attribute to "250", that looks good large and medium screens. But, on small screens it will look weird since the height is fixed, and the widths value will be much smaller then the height. If don't set the height attribute to a value, it will be too wide. I want the height of the y-axis to have the same value as the width of the chart. Is that possible? Or is there an other way to solve this?

Here is a plunker that shows the problem

http://plnkr.co/edit/sjJOYm

The HTML

<div class="container" >
     <div id="topGraph" class="row well">
      <div class="col-md-6">
        <div ng-controller="report">
            <nvd3-line-chart 
                data="chartData"
                id="report3"
                showXAxis="true"
                showYAxis="true"
                tooltips="true"
                margin="{left:90,top:20,bottom:20,right:20}"
                height="250"> <!-- I want that attribute to adjust according to the width -->
            <svg></svg>
        </nvd3-line-chart>
      </div>  
    </div>
    <div class="col-md-6 ">
             <h3 style="margin-top: 2em;">Statistics</h3>
            <ul>
                <li>Averge post per day: <strong>4</strong>
                </li>
                <li>Max post per day: <strong>3</strong>
                </li>
                <li>Min post per day: <strong>2</strong>
                </li>
                <li>Number of posts: <strong>1</strong>
                </li>
            </ul>
        </div>
    </div>
  </div>

The javascript

var app = angular.module('app', ['nvd3ChartDirectives']);

app.controller('report',
    ['$scope', report]);

function report($scope) {

     $scope.chartData = [
            {
                "key": "Key1",
                "values":
                    [
                    [1, 150000.0], [2, 1000000.0], [3, 1071000.0], [4, 1271000.0],
                    [5, 1371000.0], [6, 1471000.0], [7, 1571000.0], [8, 1671000.0],
                    [9, 1771000.0], [10, 1871000.0], [11, 1971000.0], [12, 2271000.0]
                    ]
            },
            {
                "key": "key 2",
                "values":
                    [
                    [1, 150000.0], [2, 1200000.0], [3, 1371000.0], [4, 1971000.0],
                    [5, 1371000.0], [6, 1471000.0], [7, 1571000.0], [8, 1671000.0],
                    [9, 1771000.0], [10, 1871000.0], [11, 1971000.0], [12, 2271000.0]
                    ]
            }
    ]

}

This is the first time I wrote a plunker, but I hope that it works as I intended.

Answer 1

Remove all height and width attributes on the chart. It will auto-size to its container.

Then use normal CSS on the container to achieve the aspect ratio you want. Maintain the aspect ratio of a div with CSS