How to customize color in pie chart of NVD3

Question

I am trying to use NVD3 http://nvd3.org/livecode/#codemirrorNav a pie chart. But i want to change the default color. How do i change the color. i am not able to do it.

Solution 1

To use your own colours you will have to override the existing colours, I prefer not to tinker around with the original code.

So this is what I did.

    var myColors = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"];
    d3.scale.myColors = function() {
        return d3.scale.ordinal().range(myColors);
    };

    nv.addGraph(function() {
      var chart = nv.models.pieChart()
          .x(function(d) { return d.label })
          .y(function(d) { return d.value })
          .showLabels(true).color(d3.scale.myColors().range());

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

      return chart;
    });

All I did was add .color(d3.scale.myColors().range())

UPDATE :

Check answer by Christopher Chiche, for the perfect solution.

.color(['blue', 'green', 'yellow'])

Hope this helps.

Solution 2

If you want to use specific color for pie

chart.color(function(d){
    return d.data.color
});

Then, organize your data as:

[
  {
    key: "Cumulative Return",
    values: [
      { 
        "label": "One",
        "value" : 29.765957771107,
        "color" : "#8c564b"
      } ,
      { 
        "label": "Three",
        "value" : 32.807804682612,
        "color" : "#e377c2"
      } 
    ]
  }
]

Solution 3

You can add colors by passing an array to the 'color()' option. So just add:

.color(['blue', 'green', 'yellow'])

If you want to use these colors for 3 elements.

Note: if you have more than 3 elements, then some colors will be used multiple times.