examples/donutChart.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js"></script>
    <script src="../build/nv.d3.js"></script>
    <script src="lib/stream_layers.js"></script>

    <style>
        text {
            font: 12px sans-serif;
        }

        svg {
            display: block;
            float: left;
            height: 350px;
            width: 350px;
        }
        html, body {
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }

        .nvd3.nv-pie.nv-chart-donut2 .nv-pie-title {
            fill: rgba(70, 107, 168, 0.78);
        }

        .nvd3.nv-pie.nv-chart-donut1 .nv-pie-title {
            font-size: 45px;
            opacity: 0.4;
            fill: rgba(224, 116, 76, 0.91);
        }

    </style>
</head>
<body class='with-3d-shadow with-transitions'>

<svg id="test1" class="mypiechart"></svg>

<svg id="test2" class="mypiechart"></svg>

<script>

    var testdata = [
        {key: "One", y: 5},
        {key: "Two", y: 2},
        {key: "Three", y: 9},
        {key: "Four", y: 7},
        {key: "Five", y: 4},
        {key: "Six", y: 3},
        {key: "Seven", y: 0.5},
    ];

    var height = 350;
    var width = 350;

    nv.addGraph(function() {
        var chart = nv.models.pieChart()
            .x(function(d) { return d.key })
            .y(function(d) { return d.y })
            .donut(true)
            .width(width)
            .height(height)
            .padAngle(.08)
            .cornerRadius(5)
            .id('donut1'); // allow custom CSS for this one svg

        chart.title("100%");
        chart.pie.donutLabelsOutside(true).donut(true);

        d3.select("#test1")
            .datum(testdata)
            .transition().duration(1200)
            .attr('width', width)
            .attr('height', height)
            .call(chart);

        return chart;

    });

    nv.addGraph(function() {
        var chart = nv.models.pieChart()
            .x(function(d) { return d.key })
            .y(function(d) { return d.y })
            //.labelThreshold(.08)
            //.showLabels(false)
            .color(d3.scale.category20().range().slice(10))
            .width(width)
            .height(height)
            .donut(true)
            .id('donut2')
            .titleOffset(-30)
            .title("woot");

        // MAKES IT HALF CIRCLE
        chart.pie
            .startAngle(function(d) { return d.startAngle/2 -Math.PI/2 })
            .endAngle(function(d) { return d.endAngle/2 -Math.PI/2 });

        d3.select("#test2")
            //.datum(historicalBarChart)
            .datum(testdata)
            .transition().duration(1200)
            .attr('width', width)
            .attr('height', height)
            .call(chart);

        return chart;
    });

</script>
</body>
</html>