Skin CSS Framework

Main Navigation

CSS Components

Guides

@ebay/skin/chart-legend

DS v1.0

A representation of legend keys and their values on the plotted area of any chart or graph.

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>