pie-mini.html

<div id="{{include.id}}" class="pie-chart-pf example-pie-chart-mini"></div>
<div style="text-align: center; width: 220px;">Animals</div>
<script>
  var pieData = {
    type : 'pie',
    colors: {
      Dogs: $.pfPaletteColors.red,
      Cats: $.pfPaletteColors.blue,
      Fish: $.pfPaletteColors.orange,
      Hamsters: $.pfPaletteColors.green
    },
    columns: [
      ['Dogs', 3],
      ['Cats', 2],
      ['Fish', 10],
      ['Hamsters', 2]
    ],
    onclick: function (d, i) { console.log("onclick", d, i); },
    onmouseover: function (d, i) { console.log("onmouseover", d, i); },
    onmouseout: function (d, i) { console.log("onmouseout", d, i); }
  };

  var c3ChartDefaults = $().c3ChartDefaults();
  var pieChartSmallConfig = c3ChartDefaults.getDefaultPieConfig();
  pieChartSmallConfig.bindto = '#{{include.id}}';
  pieChartSmallConfig.data = pieData;
  pieChartSmallConfig.legend = {
    show: true,
    position: 'right'
  };
  pieChartSmallConfig.size = {
    width: 260,
    height: 115
  };

  var pieChartSmall = c3.generate(pieChartSmallConfig);
</script>