Creating a pie diagram is as easy as providing a number of chart-column elements. You can configure a few options using the chart-pie directive.

<c3chart bindto-id="pie-plot1-chart" sort-data="desc">
    <chart-column column-id="Data 1"
                  column-values="70"
                  column-type="pie"/>
    <chart-column column-id="Data 2"
                  column-values="35"
                  column-type="pie"/>
    <chart-column column-id="Data 3"
                  column-values="60"
                  column-type="pie"/>
    <chart-pie expand="true" show-label="true" threshold-label="0.1"/>
</c3chart>

Using the color configuration options it is possible to specify the colors to use in the pie chart. In the following sample we specify the colors to use in a pattern array.

<c3chart bindto-id="pie-plot1-chart" sort-data="desc">
    <chart-column column-id="Data 1"
                  column-values="70"
                  column-type="pie"/>
    <chart-column column-id="Data 2"
                  column-values="35"
                  column-type="pie"/>
    <chart-column column-id="Data 3"
                  column-values="60"
                  column-type="pie"/>
    <chart-colors color-pattern="#000,#888,#ccc"/>
    <chart-pie expand="true" show-label="true" threshold-label="0.1"/>
</c3chart>

Using the color configuration options it is possible to specify the colors to use in the pie chart. In the following sample we specify the colors using a color function. At the moment I cannot use the value, but I can use the name of the columns in the function

<c3chart bindto-id="pie-plot1-chart" sort-data="desc">
    <chart-column column-id="Data 1"
                  column-values="70"
                  column-type="pie"/>
    <chart-column column-id="Data 2"
                  column-values="35"
                  column-type="pie"/>
    <chart-column column-id="Data 3"
                  column-values="60"
                  column-type="pie"/>
    <chart-colors color-function="vm.calculateColor"/>
    <chart-pie expand="true" show-label="true" threshold-label="0.1"/>
</c3chart>
function calculateColor(color, value) {
    if (value === "Data 1") {
        return "red";
    } else if (value === "Data 2") {
        return "blue";
    } else if (value === "Data 3") {
        return "yellow";
    } else {
        return "green";
    }
}

Using the color configuration options it is possible to specify the colors to use in the pie chart. In the following sample we specify the colors however in the columns themselves.

<c3chart bindto-id="pie-plot1-chart" sort-data="desc">
    <chart-column column-id="Data 1"
                  column-values="70"
                  column-type="pie"
                  column-color="red"/>
    <chart-column column-id="Data 2"
                  column-values="35"
                  column-type="pie"
                  column-color="orange"/>
    <chart-column column-id="Data 3"
                  column-values="60"
                  column-type="pie"
                  column-color="cyan"/>
    <chart-pie expand="true" show-label="true" threshold-label="0.1"/>
</c3chart>