donut-mini.html

<div id="{{include.id}}" class="donut-chart-pf example-donut-chart-mini"></div>
<div style="text-align: center; width: 220px;">Animals</div>
<script>
  var c3ChartDefaults = $().c3ChartDefaults();

  var donutData = {
    type : 'donut',
    columns: [
      ['Dogs', 2],
      ['Cats', 2],
      ['Fish', 3],
      ['Hamsters', 1]
    ],
    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); }
  };

  // Small Donut Chart
  var donutChartSmallConfig = c3ChartDefaults.getDefaultRelationshipDonutConfig('8');
  donutChartSmallConfig.bindto = '#{{include.id}}';
  donutChartSmallConfig.tooltip = {show: true};
  donutChartSmallConfig.data = donutData;
  donutChartSmallConfig.legend = {
    show: true,
    position: 'right'
  };
  donutChartSmallConfig.size = {
    width: 250,
    height: 115
  };
  donutChartSmallConfig.tooltip = {
    contents: $().pfDonutTooltipContents
  };

  var donutChartSmall = c3.generate(donutChartSmallConfig);
</script>