CODEWITHSUNDEEP
angularjsnvd3.js
user1824797
user1824797

Reputation: 89

Legend different from labels, Pie Chart, Angular-nvD3

I would like to display "Not acknowledged" and "Acknowledged" in the legend, and have the amounts display as labels on the pie chart. I do not see a way of accomplishing this in the directive options.

http://krispo.github.io/angular-nvd3/#/pieChart

enter image description here

Javascript options & data:

 $scope.pie = {
    options: {
        chart: {
            type: 'pieChart',
            height: 300,
            margin: {
                top: 0,
                right: 20,
                bottom: 0,
                left: 20
            },
            color: ["#97bbcd", "#dcdcdc"],
            x: function(d){return d.y;},
            y: function(d){return d.y;},
            legend: {
                updateState:false
            },
            showLabels: true,
            showLegend: true,
            transitionDuration: 500,
            labelThreshold: 0.01
        }
    },
    data: [
            { 
                key: 'Not Acknowledged', 
                y: 18
            },
            {
                key: 'Acknowledged', 
                y: 44
            }
        ]
};

Upvotes: 0

Views: 895

Answers (2)

Jassi
Jassi

Reputation: 541

Try this code:

$scope.pie = {
    options: {
        chart: {
            type: 'pieChart',
            height: 300,
            margin: {
                top: 0,
                right: 20,
                bottom: 0,
                left: 20
            },
            color: ["#97bbcd", "#dcdcdc"],
            x: function(d){return d.key;},
            y: function(d){return d.y;},
            legend: {
                updateState:false
            },
            showLabels: true,
            labelType: 'value',
            showLegend: true,
            transitionDuration: 500,
            labelThreshold: 0.01
        }
    },
    data: [
            { 
                key: 'Not Acknowledged', 
                y: 18
            },
            {
                key: 'Acknowledged', 
                y: 44
            }
        ]
};

Upvotes: 0

martin
martin

Reputation: 96889

Since legend is generated from x values, you can return its key instead of y. Then set labelType to value which will renders pie's values instead.

chart: {
    type: 'pieChart',
    height: 300,
    margin: {
        top: 0,
        right: 20,
        bottom: 0,
        left: 20
    },
    color: ["#97bbcd", "#dcdcdc"],
    x: function(d){return d.key;},
    y: function(d){return d.y;},
    labelType: 'value',
    legend: {
        updateState:false
    },
    showLabels: true,
    showLegend: true,
    transitionDuration: 500,
    labelThreshold: 0.01
}

Upvotes: 1

Related Questions