donut-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: Donut 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-donut-chart, .example-donut-chart-right-legend, .example-donut-chart-bottom-legend {
    width: 440px;
  }
  .example-donut-chart {
    margin-left: 10px;
  }
  .example-donut-chart-right-legend {
    margin-left: 28px;
  }
  .example-donut-chart-bottom-legend {
    margin-left: -25px;
  }
  .example-donut-chart-mini {
    margin-left: 28px;
  }
  .example-donut-chart-utilization {
    width: 220px;
    margin-left: 10px;
  }
</style>
<div>
  <h2>Donut Chart - Utilization</h2>
  <div class="text-center">
    {% include widgets/charts/donut-utilization.html id="utilizationDonutChart" %}
  </div>
  <h2>Donut Chart - Relationship to a Whole</h2>
  <div>
    {% include widgets/charts/donut-whole-relationship.html id="donut-chart-no-legend" %}
  </div>
  <h2>Donut Chart - Small</h2>
  <div>
    {% include widgets/charts/donut-mini.html id="smallDonutChart" %}
  </div>
</div>