pie-charts.html

---
alert-message: ', <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>, and <a href="http://c3js.org/">http://c3js.org/</a>'
categories: [Charts]
layout: page
title: Pie Charts
resource: true
url-js-extra: ['https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js']
---
<style>
  .example-pie-chart, .example-pie-chart-right-legend, .example-pie-chart-bottom-legend {
    width: 440px;
  }

  .example-pie-chart {
    margin-left: 10px;
  }

  .example-pie-chart-right-legend {
    margin-left: 27px;
  }

  .example-pie-chart-bottom-legend {
    margin-left: -50px;
  }

  .example-pie-chart-mini {
    margin-left: 23px;
  }
</style>
<div>
  <h2>Donut Chart - Relationship to a Whole</h2>
  <div>
    {% include widgets/charts/pie-whole-relationship.html id1="donut-chart-no-legend" id2="donut-chart-right-legend" id3="donut-chart-bottom-legend" %}
  </div>
  <h2>Pie Chart - Small</h2>
  <div>
    {% include widgets/charts/pie-mini.html id="smallDonutChart" %}
  </div>
</div>