Pie Chart

Pie charts are commonly used to show percentages or proportional data. 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 data point, please check out the Bar Chart pattern.

On hover, the percentage value of each section is provided in a tooltip. The pieces of a pie chart must add up to 100%. It is recommended that there are no more than six categories per single pie chart.

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 Bottom Legend

Pie Chart with Right Legend

Pie Chart with Right Legend

Pie Chart with No Legend

Pie Chart with No Legend

Small Pie Chart with Label

Small Pie Chart with Label

Pie Chart

#callout-1

  1. Pie Chart Fill: - Fill colors should be based on the PatternFly Color Palette. - Interaction (optional):
    • If drill-down behavior is supported, clicking on a segment of the pie will trigger an associated action or navigation.
    • 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 quantity/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 should be left-aligned. It should be placed beneath or to the right of the pie 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>