Accepted answer

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());"#chart svg")

      return chart;

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


Check answer by Christopher Chiche, for the perfect solution.

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

Hope this helps.


Here is a note that got me, I was setting chart.color inside of nv.addGraph, this was not working correctly and would instead use the defaults. I then set it outside of this and it worked fine.


I use .color(function(d) {return [d.value > 0 ? 'blue' : 'red']}); to make it change color depending on data value.

Hope this help someone.


Here is the Typescript solution which is similar to the JS version. Let's say you want a Top 10 of your results with 10 different colors :

Here i'll give you the example that work for my PieChart or MultiBarChart

  • Create a global array of color like colors = ["#D9D9D9", "#4B11A6", ....];
  • The data has to be formatted in an Object : myGraph { key: "Title", values : { streams to push }}
  • Then when creating your data table just push the color for each stream :

let stream = {}; let data = []; let i=0;

dataTable.forEach((period) => {
    stream = { 'label': period.key, 'value': period.value, 'color': this.colors[i] };

if(period.value !== 0) {
this.myGraph = data;

The if condition is just there to prevent empty piece in the graph


I have used below concept to add custom color:

// for define variable of custom colors 
var colors = ["red", "green", "blue"];
chart {
    color: function(d,i){
        return ( && || colors[i % colors.length]

For dynamic color based on JSON Data just add New json obj color such as below concept..

// or set custom colors directly in the data
data = [{
        key: "One",
        y: 5,
        color: "yellow"
        key: "Two",
        y: 2,
        color: "gray"
        key: "Three",
        y: 9


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.


If you want to use specific color for pie


Then, organize your data as:

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

Related Query