Donut Chart Component

ALPHA: APIs are subject to change

Small container

<div class="donut-chart" style="width: 200px">
  <div class="donut-chart__grid">
    <div class="donut-chart__title">Donut chart title</div>
    <div class="donut-chart__metric">
      <div class="donut-chart__metric-value">175</div>
      <div class="donut-chart__metric-label">Returns processed</div>
    </div>
    <div class="donut-chart__graph">
      <div>Graph placeholder</div>
    </div>
    <div class="donut-chart__legend">
      <div class="chart-legend">
        <dl aria-label="Example donut chart legend">
          <div class="chart-legend__item">
            <dt class="chart-legend__label">Portion 1</dt>
            <dd class="chart-legend__value">10%</dd>
          </div>
          <div class="chart-legend__item">
            <dt class="chart-legend__label">Portion 2</dt>
            <dd class="chart-legend__value">20%</dd>
          </div>
          <div class="chart-legend__item">
            <dt class="chart-legend__label">Portion 3</dt>
            <dd class="chart-legend__value">30%</dd>
          </div>
        </dl>
      </div>
    </div>
  </div>
</div>

Variable width container

<div class="donut-chart">
  <div class="donut-chart__grid">
    <div class="donut-chart__title">Donut chart title</div>
    <div class="donut-chart__metric">
      <div class="donut-chart__metric-value">175</div>
      <div class="donut-chart__metric-label">Returns processed</div>
    </div>
    <div class="donut-chart__graph">
      <div>Graph placeholder</div>
    </div>
    <div class="donut-chart__legend">
      <div class="chart-legend">
        <dl aria-label="Example donut chart legend">
          <div class="chart-legend__item">
            <dt class="chart-legend__label">Portion 1</dt>
            <dd class="chart-legend__value">10%</dd>
          </div>
          <div class="chart-legend__item">
            <dt class="chart-legend__label">Portion 2</dt>
            <dd class="chart-legend__value">20%</dd>
          </div>
          <div class="chart-legend__item">
            <dt class="chart-legend__label">Portion 3</dt>
            <dd class="chart-legend__value">30%</dd>
          </div>
        </dl>
      </div>
    </div>
  </div>
</div>