title: How to position Pie chart on top using Nv.d3.js library?
body: <p>I was left data visualisation charts built using nv.d3.js from the previous developer and I am currently trying to edit the pie charts to position the pie chart at the top and the labels at the bottom. Here is a fiddle for a visual example. </p>
  
  <p><a href="https://jsfiddle.net/kxrd2h7t/2/" rel="nofollow">https://jsfiddle.net/kxrd2h7t/2/</a></p>
  
  <p>the version of nv.d3.js that the previous developer used is different i believe, I have found the pie chart function but don't know where to start.</p>
  
  <pre><code>a.models.pieChart = function () {
  
          "use strict";
  
          function b(e) {
              return q.reset(), q.models(c), e.each(function (e) {
                  var k = d3.select(this);
                  a.utils.initSVG(k);
                  var n = a.utils.availableWidth(g, k, f),
                      o = a.utils.availableHeight(h, k, f);
                  if (b.update = function () {
                          k.transition().call(b)
                      }, b.container = this, l.setter(s(e), b.update).getter(r(e)).update(), l.disabled = e.map(function (a) {
                          return !!a.disabled
                      }), !m) {
                      var q;
                      m = {};
                      for (q in l) m[q] = l[q] instanceof Array ? l[q].slice(0) : l[q]
                  }
                  if (!e || !e.length) return a.utils.noData(b, k), b;
                  k.selectAll(".nv-noData").remove();
                  var t = k.selectAll("g.nv-wrap.nv-pieChart").data([e]),
                      u = t.enter().append("g").attr("class", "nvd3 nv-wrap nv-pieChart").append("g"),
                      v = t.select("g");
                  if (u.append("g").attr("class", "nv-pieWrap"), u.append("g").attr("class", "nv-legendWrap"), i)
                      if ("top" === j) d.width(n).key(c.x()), t.select(".nv-legendWrap").datum(e).call(d), f.top != d.height() &amp;&amp; (f.top = d.height(), o = a.utils.availableHeight(h, k, f)), t.select(".nv-legendWrap").attr("transform", "translate(0," + -f.top + ")");
                      else if ("right" === j) {
                      var w = a.models.legend().width();
                      w &gt; n / 2 &amp;&amp; (w = n / 2), d.height(o).key(c.x()), d.width(w), n -= d.width(), t.select(".nv-legendWrap").datum(e).call(d).attr("transform", "translate(" + n + ",0)")
                  }
                  t.attr("transform", "translate(" + f.left + "," + f.top + ")"), c.width(n).height(o);
                  var x = v.select(".nv-pieWrap").datum([e]);
                  d3.transition(x).call(c), d.dispatch.on("stateChange", function (a) {
                      for (var c in a) l[c] = a[c];
                      p.stateChange(l), b.update()
                  }), p.on("changeState", function (a) {
                      "undefined" != typeof a.disabled &amp;&amp; (e.forEach(function (b, c) {
                          b.disabled = a.disabled[c]
                      }), l.disabled = a.disabled), b.update()
                  })
              }), q.renderEnd("pieChart immediate"), b
          }
          var c = a.models.pie(),
              d = a.models.legend(),
              e = a.models.tooltip(),
              f = {
                  top: 30,
                  right: 20,
                  bottom: 20,
                  left: 20
              },
              g = null,
              h = null,
              i = !0,
              j = "top",
              k = a.utils.defaultColor(),
              l = a.utils.state(),
              m = null,
              n = null,
              o = 250,
              p = d3.dispatch("tooltipShow", "tooltipHide", "stateChange", "changeState", "renderEnd");
          e.headerEnabled(!1).duration(0).valueFormatter(function (a, b) {
              return c.valueFormat()(a, b)
          });
          var q = a.utils.renderWatch(p),
              r = function (a) {
                  return function () {
                      return {
                          active: a.map(function (a) {
                              return !a.disabled
                          })
                      }
                  }
              },
              s = function (a) {
                  return function (b) {
                      void 0 !== b.active &amp;&amp; a.forEach(function (a, c) {
                          a.disabled = !b.active[c]
                      })
                  }
              };
          return c.dispatch.on("elementMouseover.tooltip", function (a) {
              a.series = {
                  key: b.x()(a.data),
                  value: b.y()(a.data),
                  color: a.color
              }, e.data(a).hidden(!1)
          }), c.dispatch.on("elementMouseout.tooltip", function () {
              e.hidden(!0)
          }), c.dispatch.on("elementMousemove.tooltip", function () {
              e.position({
                  top: d3.event.pageY,
                  left: d3.event.pageX
              })()
          }), b.legend = d, b.dispatch = p, b.pie = c, b.tooltip = e, b.options = a.utils.optionsFunc.bind(b), b._options = Object.create({}, {
              noData: {
                  get: function () {
                      return n
                  },
                  set: function (a) {
                      n = a
                  }
              },
              showLegend: {
                  get: function () {
                      return i
                  },
                  set: function (a) {
                      i = a
                  }
              },
              legendPosition: {
                  get: function () {
                      return j
                  },
                  set: function (a) {
                      j = a
                  }
              },
              defaultState: {
                  get: function () {
                      return m
                  },
                  set: function (a) {
                      m = a
                  }
              },
              tooltips: {
                  get: function () {
                      return e.enabled()
                  },
                  set: function (b) {
                      a.deprecated("tooltips", "use chart.tooltip.enabled() instead"), e.enabled(!!b)
                  }
              },
              tooltipContent: {
                  get: function () {
                      return e.contentGenerator()
                  },
                  set: function (b) {
                      a.deprecated("tooltipContent", "use chart.tooltip.contentGenerator() instead"), e.contentGenerator(b)
                  }
              },
              color: {
                  get: function () {
                      return k
                  },
                  set: function (a) {
                      k = a, d.color(k), c.color(k)
                  }
              },
              duration: {
                  get: function () {
                      return o
                  },
                  set: function (a) {
                      o = a, q.reset(o)
                  }
              },
              margin: {
                  get: function () {
                      return f
                  },
                  set: function (a) {
                      f.top = void 0 !== a.top ? a.top : f.top, f.right = void 0 !== a.right ? a.right : f.right, f.bottom = void 0 !== a.bottom ? a.bottom : f.bottom, f.left = void 0 !== a.left ? a.left : f.left
                  }
              }
          }), a.utils.inheritOptions(b, c), a.utils.initOptions(b), b
      }
  </code></pre>
  
  <p>Is there a much simpler way of implementing this rather that editing source code? I made a few attempts with css but it did not work.</p>