Pie Chart

Pie charts are used to show percentage or proportional data. On hover, the percentage of each category is provided in a tooltip. The pieces of a pie chart must add up to 100%. It is recommended that there is no more than six categories per one pie chart. Sections within a pie chart may be hard to compare to each other so you should use a pie chart when you want to compare an individual section to the whole. If you wish to show the exact value of each category, please check out the Bar Chart pattern.

Jump to Pie Chart with Bottom Legend, Pie Chart with Right Legend, Pie Chart with No Legend, or Small Pie Chart with Label

Pie Chart with Bottom Legend

Pie Chart with Right Legend

Pie Chart with No Legend

Small Pie Chart with Label

Animals

Description

pie-chart-callout
  1. Pie Chart Fill: For recommendations on fill colors, see the Color Palette.
    • Interaction (optional):
      • If drill down behavior is supported, clicking on a segment of the pie will navigate to the appropriate page.
      • If supported, right clicking on a segment of the pie chart will bring up a menu with associated actions.
  2. Label:(optional): The label may be shown either on top or bottom of the pie chart.
  3. Tooltip (optional): We recommend that the name and percentage are displayed on hover.
  4. Legend: It is recommended to include a legend to show values and define the colors on the chart. On the pie chart, the legend may be located left aligned and underneath the chart or left aligned and to the right of the chart.
    • Interaction (optional):
      • Clicking on a series in the legend should toggle the visibility of the series in the chart.
      • Hovering over a series in the legend will highlight the piece of pie associated with that attribute.

Jump to Pie Chart or Small Pie Chart

Pie Chart

Reference Markup

<script src="components/c3/c3.min.js"></script>
<script src="components/d3/d3.min.js"></script>
<div id="pie-chart-5" class="example-pie-chart"></div>
<div id="pie-chart-6" class="example-pie-chart-right-legend"></div>
<div id="pie-chart-7" class="example-pie-chart-bottom-legend"></div>
<script>
  var c3ChartDefaults = $().c3ChartDefaults();

  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); }
  };

  // Pie Chart without Legend
  var pieChartConfig = c3ChartDefaults.getDefaultPieConfig();
  pieChartConfig.bindto = '#pie-chart-5';
  pieChartConfig.data = pieData;
  pieChartConfig.size = {
    width: 200,
    height: 171
  };
  var pieChartNoLegend = c3.generate(pieChartConfig);

  // Right Legend
  var pieChartRightConfig = c3ChartDefaults.getDefaultPieConfig();
  pieChartRightConfig.bindto = '#pie-chart-6';
  pieChartRightConfig.data = pieData;
  pieChartRightConfig.legend = {
    show: true,
    position: 'right'
  };
  pieChartRightConfig.size = {
    width: 251,
    height: 161
  };
  var pieChartRightLegend = c3.generate(pieChartRightConfig);

  // Pie Chart Bottom Legend
  var pieChartBottomConfig = c3ChartDefaults.getDefaultPieConfig();
  pieChartBottomConfig.bindto = '#pie-chart-7';
  pieChartBottomConfig.data = pieData;
  pieChartBottomConfig.legend = {
    show: true,
    position: 'bottom'
  };
  pieChartBottomConfig.size = {
    width: 321,
    height: 191
  };
  var pieChartBottomLegend = c3.generate(pieChartBottomConfig);
</script>

          

Small Pie Chart

Animals

Reference Markup

<script src="components/c3/c3.min.js"></script>
<script src="components/d3/d3.min.js"></script>
<div id="pie-chart-8" 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 = '#pie-chart-8';
  pieChartSmallConfig.data = pieData;
  pieChartSmallConfig.legend = {
    show: true,
    position: 'right'
  };
  pieChartSmallConfig.size = {
    width: 260,
    height: 115
  };

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