Dynamically defined pie chart with function displays as black

[Nicolas Marchildon]

From the examples:

$(".pie-colours-1").peity("pie", {
  fill: ["cyan", "magenta", "yellow", "black"]
})

But this doesn't work:

$(".pie-colours-1").peity("pie", {
  fill: function() { return ["cyan", "magenta", "yellow", "black"]; }
})

SVG produced for all paths: fill="cyan", "magenta", "yellow", "black", instead of one color per path.

[Ben Pickles]

When setting a fill with a function it is called for each value of the chart (with the value, its index, and the full array of values) and should return a single value each time.

So with the following HTML:

<span class="pie-colours-1">4,7,6,5</span>

Your fill function would be called four times with the following arguments:

4, 0, [4,7,6,5]
7, 1, [4,7,6,5]
6, 2, [4,7,6,5]
5, 3, [4,7,6,5]

Here's a editable example: https://jsbin.com/recizo/1/edit?html,js,output

Hope this solves your problem.

[Nicolas Marchildon]

Thanks! I was confused by the format of the values in the HTML. I was actually using x/100, not a list.