nvd3 pie chart when no data and for value zero

Question

I have created a pie chart using nvd3. Here is my code :

<nvd3-pie-chart
    data="examplePieData"
    id="exampleId"
    showLabels="true"
    labelType="value"
    x="xPieFunction()"
    y="yPieFunction()"
    donut="true"
    donutRatio=".5"
    tooltips="true"  
    noData="Data aint here"
    tooltipcontent="toolTipContentFunction()"                                                  
    color="pieColorFunction()"
    donutLabelsOutside="false">
<svg height="200" style="margin-left: -121px; margin-top: -49px;"></svg>
</nvd3-pie-chart>

and

$scope.examplePieData = [
            {
                key: "First",
                y: 5
            },
            {
                key: "Second",
                y: 3
            },
            {
                key: "Third",
                y: 1
            }
        ];

        $scope.toolTipContentFunction = function(){
            return function(key, x, y, e, graph) {
                return '<p>' + key +"&nbsp;&nbsp;&nbsp;"+ y.value + '</p>'
            }
        }

        $scope.xPieFunction = function(){
            return function(d) {
                return d.key;
            };
        }
        $scope.yPieFunction = function(){
            return function(d) {
                return d.y;
            };
        }

        var pieColorArray = [  '#5EA9DD','#e76060', '#008000'];
        $scope.pieColorFunction = function() {
            return function(d, i) {
                return pieColorArray[i];
            };
        }

Here I want to display a message when there is no data. I have tried with noDate = "Message" but it is not working. And I want to show pic chart even for y value is zero (y :0). Finally, how to adjust tooltip distance and same color for the tooltip when mouseover on the perticular field in pie chart. Help me. Thank you.

Answer 1

For no data, try with chart.noData() function. For me it is perfectly working,

HTML:

<div id="chart">
  <svg></svg>
</div>

Javascript:

var h = 300;
var r = h/2;
var data = [];
var colors = [
        'rgb(178, 55, 56)',
        'rgb(213, 69, 70)',
        'rgb(230, 125, 126)',
        'rgb(239, 183, 182)'
    ];

    nv.addGraph(function() {
        var chart = nv.models.pieChart()
            .x(function(d) { return d.label })
            .y(function(d) { return d.value })
            .color(colors)
            .showLabels(true)
            .labelType("percent");

        chart.noData("No data");

        d3.select("#chart svg")
            .datum(data)
            .transition().duration(1200)
            .call(chart)
        ;        
        return chart;
    });