Link copied!

Ring Chart Examples

<e-ring>
  <e-circle percent="31" color="#9f6e5d"></e-circle>
</e-ring>
<e-ring type="doughnut">
  <e-circle percent="0" color="#424e88"></e-circle>
  <e-circle percent="0" color="#6672c0"></e-circle>
</e-ring>
<e-ring type="doughnut">
  <e-circle percent="80" color="#424e88"></e-circle>
  <e-circle percent="20" color="#6672c0"></e-circle>
</e-ring>
<e-ring type="concentric">
  <e-circle percent="23" color="#65b964"></e-circle>
  <e-circle percent="11" color="#86da85"></e-circle>
</e-ring>
<e-ring type="indicator">
  <e-circle percent="50" color="#65b964"></e-circle>
  <e-circle percent="50" color="#999999"></e-circle>
</e-ring>
<e-ring type="indicator" radius="4" width="6">
  <e-circle percent="50" color="#65b964"></e-circle>
  <e-circle percent="50" color="#999999"></e-circle>
</e-ring>
<div class="e-ringchart">
  <div class="e-ringchart__chart">
    <e-ring type="concentric">
      <e-circle percent="23" color="#65b964" total="188,838"></e-circle>
      <e-circle percent="11" color="#86da85" total="95,781"></e-circle>
    </e-ring>
  </div>
  <div class="e-ringchart__legend">
    <div class="e-legend">
      <div class="e-legend__title">
        Opened
      </div>
      <div class="e-legend__value text-color-primary">
        23%&nbsp;
        <small>
          (188,838)
        </small>
      </div>
    </div>
    <div class="e-legend">
      <div class="e-legend__title">
        Opened on Mobile
      </div>
      <div class="e-legend__value text-color-primary">
        11%&nbsp;
        <small>
          (95,781)
        </small>
      </div>
    </div>
  </div>
</div>
<div class="e-ringchart">
  <div class="e-ringchart__chart">
    <e-ring>
      <e-circle percent="17.42" color="#6cc9b2"></e-circle>
    </e-ring>
  </div>
  <div class="e-ringchart__legend">
    <div class="e-legend">
      <div class="e-legend__title">
        Mobile Click-through
      </div>
      <div class="e-legend__value">
        <small>
          of Opened on Mobile&nbsp;
          <span class="text-color-primary">
            (132)
          </span>
        </small>
      </div>
    </div>
  </div>
</div>
<div style="background: #f3f3f3;">
  <e-ring mask-color="#f3f3f3" type="concentric">
    <e-circle percent="80" color="#424e88"></e-circle>
    <e-circle percent="20" color="#6672c0"></e-circle>
  </e-ring>
</div>
<div class="e-ringchart">
  <div class="e-ringchart__chart">
    <e-ring>
      <e-circle percent="17.42" color="#6cc9b2"></e-circle>
    </e-ring>
    <div class="e-ringchart__inner">
      <div class="e-legend">
        <div class="e-legend__value" style="color: #6cc9b2">
          17.42%
        </div>
        <div class="e-legend__secondaryvalue e-legend__secondaryvalue-block">
          (23)
        </div>
      </div>
    </div>
  </div>
  <div class="e-ringchart__legend">
    <div class="e-legend">
      <div class="e-legend__title">
        Mobile Click-through
      </div>
      <div class="e-legend__value">
        <small>
          of Opened on Mobile&nbsp;
          <span class="text-color-primary">
            (132)
          </span>
        </small>
      </div>
    </div>
  </div>
</div>
<div class="e-ringchart e-ringchart-has_footer">
  <div class="e-ringchart__chart">
    <e-ring>
      <e-circle percent="17.42" color="#6cc9b2" total="188,838"></e-circle>
    </e-ring>
    <div class="e-ringchart__inner">
      <div class="e-legend">
        <div class="e-legend__value" style="color: #6cc9b2">
          17.42%
        </div>
        <div class="e-legend__secondaryvalue e-legend__secondaryvalue-block">
          (23)
        </div>
      </div>
    </div>
  </div>
  <div class="e-ringchart__legend">
    <div class="e-legend">
      <div class="e-legend__title">
        Mobile Click-through
      </div>
      <div class="e-legend__value">
        <small>
          of Opened on Mobile&nbsp;
          <span class="text-color-primary">
            (132)
          </span>
        </small>
      </div>
    </div>
  </div>
</div>