NVD3 Discrete Bar Chart

nvd3 discrete bar chart v 1.8.4

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.0.0-beta/nv.d3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.css">
<div id="chart1">
  <svg></svg>
</div>

CSS

#chart1 svg {
  height: 400px;
}

JavaScript

historicalBarChart = [
        {
            key: "Cumulative Return",
            values: [
                {
                    "label" : "A" ,
                    "value" : 29.765957771107
                } ,
                // {
                //     "label" : "B" ,
                //     "value" : 0
                // } ,
                // {
                //     "label" : "C" ,
                //     "value" : 32.807804682612
                // } ,
                // {
                //     "label" : "D" ,
                //     "value" : 196.45946739256
                // } ,
                // {
                //     "label" : "E" ,
                //     "value" : 0.19434030906893
                // } ,
                // {
                //     "label" : "F" ,
                //     "value" : 98.079782601442
                // } ,
                // {
                //     "label" : "G" ,
                //     "value" : 13.925743130903
                // } ,
                {
                    "label" : "H" ,
                    "value" : 5.1387322875705
                }
            ]
        }
    ];

    nv.addGraph(function() {
        var chart = nv.models.discreteBarChart()
            .x(function(d) { return d.label })
            .y(function(d) { return d.value })
            .staggerLabels(true)
            .forceY([0, 35])
            //.staggerLabels(historicalBarChart[0].values.length > 8)
            .showValues(false)
            .duration(250)
            ;
                // chart.showYAxis(false);

        d3.select('#chart1 svg')
            .datum(historicalBarChart)
            .call(chart);

				var xValueScale = chart.xAxis.scale();
        var yValueScale = chart.yAxis.scale();
        var yValue = 0; 
        var svg = d3.select("#chart1 svg .nvd3 g");          
        var barWidth = 10;
				var yminValue = 27;
				var ymaxValue = 33;        

        svg.append("line")
            .style("stroke", "#FF7F0E")
        ...