CODEWITHSUNDEEP
javascriptangularjsd3.jsnvd3.js
Kode_12
Kode_12

Reputation: 4798

How can I change the colors of the NVD3 Pie Chart

I'm learning how to use the NVD3 framework. I have customized a pie chart using the example from krispo's github. How can I change the color of each wedge in the pie chart?

Here is what I have thus far: http://plnkr.co/edit/QYuol3Q10xsA3pziiWGl?p=preview

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

 app.controller('MainCtrl', function($scope) {
   $scope.options = {
        chart: {
            type: 'pieChart',
            height: 500,
            x: function(d){return d.key;},
            y: function(d){return d.y;},
            showLabels: false,
            duration: 500,
            labelThreshold: 0.01,
            labelSunbeamLayout: true,
            legend: {
                margin: {
                    top: 5,
                    right: 35,
                    bottom: 5,
                    left: 0
                }
            }
        }
    };

    $scope.data = [
        {
            key: "CAT I",
            y: 2
        },
        {
            key: "CAT II",
            y: 3
        },
        {
            key: "CAT III",
            y: 1
        },
    ];
});

I want it to look similar to the following:

enter image description here

I'm just not sure how or where I can do this?

Upvotes: 0

Views: 357

Answers (2)

Paresh Gami
Paresh Gami

Reputation: 4782

Change script like below.

See working example here.

http://plnkr.co/edit/0nETt0rPnfbtJUevYBpX?p=preview

<script type="text/javascript">
    var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {

  $scope.color = ['red','blue','green'];

  $scope.options = 
  {
            chart: {
                type: 'pieChart',
                height: 500,
                x: function(d){return d.key;},
                y: function(d){return d.y;},
                showLabels: false,
                duration: 500,
                labelThreshold: 0.01,
                labelSunbeamLayout: true,
                legend: {
                    margin: {
                        top: 5,
                        right: 35,
                        bottom: 5,
                        left: 0
                    }
                },
                color:function(d)
                {
                    console.log(d);
                    return $scope.color[d.y];

                }
            }
        };

        $scope.data = [
            {
                key: "CAT I",
                y: 2
            },
            {
                key: "CAT II",
                y: 3
            },
            {
                key: "CAT III",
                y: 1
            },
        ];
});

</script>

Upvotes: 0

runningviolent
runningviolent

Reputation: 317

Add color:['#FFC455', '#00A6CD', '#CE1B1F'], to the chart:

    chart: {
        color:['#FFC455', '#00A6CD', '#CE1B1F'],
        type: 'pieChart',
        height: 500,
        x: function(d){return d.key;},
        y: function(d){return d.y;},
        showLabels: false,
        duration: 500,
        labelThreshold: 0.01,
        labelSunbeamLayout: true,
        legend: {
            margin: {
                top: 5,
                right: 35,
                bottom: 5,
                left: 0
            }
        }
    }

If you want to mimic the background color of the example, change the <body> tag to :

<body ng-controller="MainCtrl" style="background-color: #2F2F2F">

Upvotes: 1

Related Questions