{"id":7543,"date":"2015-07-26T05:12:23","date_gmt":"2015-07-26T05:12:23","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2015\/07\/26\/how-to-customize-color-in-pie-chart-of-nvd3-open-source-projects-novus-nvd3\/"},"modified":"2015-07-26T05:12:23","modified_gmt":"2015-07-26T05:12:23","slug":"how-to-customize-color-in-pie-chart-of-nvd3-open-source-projects-novus-nvd3","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2015\/07\/26\/how-to-customize-color-in-pie-chart-of-nvd3-open-source-projects-novus-nvd3\/","title":{"rendered":"How to customize color in pie chart of NVD3-open source projects novus\/nvd3"},"content":{"rendered":"<p><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/d8306a17efc82ce9bdce331d2c2ebb47?s=128&amp;d=identicon&amp;r=PG\" \/> <strong>shabeer90<\/strong><\/p>\n<p>To use your own colours you will have to override the existing colours, I prefer not to tinker around with the original code.<\/p>\n<p><del>So this is what I did.<\/del><\/p>\n<pre><code>    var myColors = [\"#1f77b4\", \"#ff7f0e\", \"#2ca02c\", \"#d62728\", \"#9467bd\", \"#8c564b\", \"#e377c2\", \"#7f7f7f\", \"#bcbd22\", \"#17becf\"];\n    d3.scale.myColors = function() {\n        return d3.scale.ordinal().range(myColors);\n    };\n\n    nv.addGraph(function() {\n      var chart = nv.models.pieChart()\n          .x(function(d) { return d.label })\n          .y(function(d) { return d.value })\n          .showLabels(true).color(d3.scale.myColors().range());\n\n        d3.select(\"#chart svg\")\n            .datum(data)\n          .transition().duration(1200)\n            .call(chart);\n\n      return chart;\n    });\n<\/code><\/pre>\n<p><del>All I did was add <code>.color(d3.scale.myColors().range())<\/code><\/del><\/p>\n<p>\n<strong><code>UPDATE :<\/code><\/strong><\/p>\n<p>Check answer by Christopher Chiche, for the perfect solution.<\/p>\n<pre><code>.color(['blue', 'green', 'yellow'])\n<\/code><\/pre>\n<p>Hope this helps.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>shabeer90 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 = [&#8220;#1f77b4&#8221;, &#8220;#ff7f0e&#8221;, &#8220;#2ca02c&#8221;, &#8220;#d62728&#8221;, &#8220;#9467bd&#8221;, &#8220;#8c564b&#8221;, &#8220;#e377c2&#8221;, &#8220;#7f7f7f&#8221;, &#8220;#bcbd22&#8221;, &#8220;#17becf&#8221;]; d3.scale.myColors = function() { return d3.scale.ordinal().range(myColors); }; nv.addGraph(function() { var chart = [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7543","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7543","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=7543"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7543\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=7543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=7543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=7543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}