Chart Legend Component

Portion 1
10%
Portion 2
20%
Portion 3
30%
Portion 4
30%
Portion 5
10%
<div style="width: 250px">
  <div class="chart-legend">
    <dl aria-label="Example donut chart legend">
      <div class="chart-legend__item chart-legend__item">
        <dt class="chart-legend__label">Portion 1</dt>
        <dd class="chart-legend__value">10%</dd>
      </div>
      <div class="chart-legend__item chart-legend__item">
        <dt class="chart-legend__label">Portion 2</dt>
        <dd class="chart-legend__value">20%</dd>
      </div>
      <div class="chart-legend__item chart-legend__item">
        <dt class="chart-legend__label">Portion 3</dt>
        <dd class="chart-legend__value">30%</dd>
      </div>
      <div class="chart-legend__item chart-legend__item">
        <dt class="chart-legend__label">Portion 4</dt>
        <dd class="chart-legend__value">30%</dd>
      </div>
      <div class="chart-legend__item chart-legend__item">
        <dt class="chart-legend__label">Portion 5</dt>
        <dd class="chart-legend__value">10%</dd>
      </div>
    </dl>
  </div>
</div>
Ccd ComponentCheckbox Component