Ring

Default
<e-ring></e-ring> 

<e-ring>
  <e-circle percent="31" color="#9f6e5d"></e-circle>
</e-ring>


                        <e-ring>
                          <e-circle percent="31" color="#9f6e5d"></e-circle>
                        </e-ring>

Component Variation

Empty Doughnut 

<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="0" color="#424e88"></e-circle>
                            <e-circle percent="0" color="#6672c0"></e-circle>
                          </e-ring>

Doughnut 

<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="doughnut">
                            <e-circle percent="80" color="#424e88"></e-circle>
                            <e-circle percent="20" color="#6672c0"></e-circle>
                          </e-ring>

Concentric rings
type="concentric" 

<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="concentric">
                            <e-circle percent="23" color="#65b964"></e-circle>
                            <e-circle percent="11" color="#86da85"></e-circle>
                          </e-ring>

Indicator
type="indicator" 

<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">
                            <e-circle percent="50" color="#65b964"></e-circle>
                            <e-circle percent="50" color="#999999"></e-circle>
                          </e-ring>

Small indicator
type="indicator" 

<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>


                          <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>

Generate wrapper
previus example without autogenerate wrapper

Opened
23%(188,838)
Opened on mobile
11%(95,781)
<div class="e-ringchart">
  <div class="e-ringchart__chart">
    <e-ring type="concentric">
      <e-circle percent="23" color="#65b964" title="Opened" total="188,838"></e-circle>
      <e-circle percent="11" color="#86da85" title="Opened on mobile" total="95,781"></e-circle>
    </e-ring>
  </div>
  <div class="e-ringchart__legend">
    <div class="e-ringchart__title">
      Opened
    </div>
    <div style="color:#65b964" class="e-ringchart__value">
      23%
      <small>
        (188,838)
      </small>
    </div>
    <div class="e-ringchart__title">
      Opened on mobile
    </div>
    <div style="color:#86da85" class="e-ringchart__value">
      11%
      <small>
        (95,781)
      </small>
    </div>
  </div>
</div>


                          <div class="e-ringchart">
                            <div class="e-ringchart__chart">
                              <e-ring type="concentric">
                                <e-circle percent="23" color="#65b964" title="Opened" total="188,838"></e-circle>
                                <e-circle percent="11" color="#86da85" title="Opened on mobile" total="95,781"></e-circle>
                              </e-ring>
                            </div>
                            <div class="e-ringchart__legend">
                              <div class="e-ringchart__title">Opened</div>
                              <div style="color:#65b964" class="e-ringchart__value">23%<small>(188,838)</small></div>
                              <div class="e-ringchart__title">Opened on mobile</div>
                              <div style="color:#86da85" class="e-ringchart__value">11%<small>(95,781)</small></div>
                            </div>
                          </div>

Custom text

Mobile click-through
of Opened on mobile  (132)
<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">
    <b>
      Mobile click-through
    </b>
    <br>
    of Opened on mobile &nbsp;
    <span class="text-color-success">
      (132)
    </span>
  </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"><b>Mobile click-through</b><br>of Opened on mobile &nbsp;<span class="text-color-success">(132)</span></div>
                          </div>

Colored mask
mask-color: #ccc 

<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 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>

Inner content
.e-ringchart__inner

17,42%
(23)
Mobile click-through
of Opened on mobile  (132)
<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 style="color: #6cc9b2">
        17,42%
      </div>
      <div class="text-size-subheader text-color-shade">
        (23)
      </div>
    </div>
  </div>
  <div class="e-ringchart__legend">
    <b>
      Mobile click-through
    </b>
    <br>
    of Opened on mobile &nbsp;
    <span class="text-color-success">
      (132)
    </span>
  </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 class="e-ringchart__inner">
                                <div style="color: #6cc9b2">17,42%</div>
                                <div class="text-size-subheader text-color-shade">(23)</div>
                              </div>
                            </div>
                            <div class="e-ringchart__legend"><b>Mobile click-through</b><br>of Opened on mobile &nbsp;<span class="text-color-success">(132)</span></div>
                          </div>

With footer
.e-ringchart-has_footer

17,42%
(23)
Mobile click-through
of Opened on mobile  (132)
<div class="e-ringchart e-ringchart-has_footer">
  <div class="e-ringchart__chart">
    <e-ring>
      <e-circle percent="17.42" color="#6cc9b2" title="Opened" total="188,838"></e-circle>
    </e-ring>
    <div class="e-ringchart__inner">
      <div style="color: #6cc9b2">
        17,42%
      </div>
      <div class="text-size-subheader text-color-shade">
        (23)
      </div>
    </div>
  </div>
  <div class="e-ringchart__legend">
    <b>
      Mobile click-through
    </b>
    <br>
    of Opened on mobile &nbsp;
    <span class="text-color-success">
      (132)
    </span>
  </div>
</div>


                          <div class="e-ringchart e-ringchart-has_footer">
                            <div class="e-ringchart__chart">
                              <e-ring>
                                <e-circle percent="17.42" color="#6cc9b2" title="Opened" total="188,838"></e-circle>
                              </e-ring>
                              <div class="e-ringchart__inner">
                                <div style="color: #6cc9b2">17,42%</div>
                                <div class="text-size-subheader text-color-shade">(23)</div>
                              </div>
                            </div>
                            <div class="e-ringchart__legend"><b>Mobile click-through</b><br>of Opened on mobile &nbsp;<span class="text-color-success">(132)</span></div>
                          </div>

Angular sample 

<div class="e-field">
  <e-ring separated="true" type="doughnut">
    <e-circle percent="{{ openedOnMobile }}" color="#6e71c2" title="Opened on mobile"></e-circle>
    <e-circle percent="{{ openedOnDesktop }}" color="#86da85" title="Opened on desktop"></e-circle>
    <e-circle percent="{{ notOpened }}" color="#d86761" title="Not opened"></e-circle>
  </e-ring>
</div>
<input type="text" ng-model="openedOnMobile" ng-init="openedOnMobile = 30" placeholder="Opened on mobile" class="e-input e-input-small">
<input type="text" ng-model="openedOnDesktop" ng-init="openedOnDesktop = 50" placeholder="Opened on desktop" class="e-input e-input-small">
<input type="text" ng-model="notOpened" ng-init="notOpened = 20" placeholder="Not opened" class="e-input e-input-small">


                          <div class="e-field">
                            <e-ring separated="true" type="doughnut">
                              <e-circle percent="{{ openedOnMobile }}" color="#6e71c2" title="Opened on mobile"></e-circle>
                              <e-circle percent="{{ openedOnDesktop }}" color="#86da85" title="Opened on desktop"></e-circle>
                              <e-circle percent="{{ notOpened }}" color="#d86761" title="Not opened"></e-circle>
                            </e-ring>
                          </div>
                          <input type="text" ng-model="openedOnMobile" ng-init="openedOnMobile = 30" placeholder="Opened on mobile" class="e-input e-input-small">
                          <input type="text" ng-model="openedOnDesktop" ng-init="openedOnDesktop = 50" placeholder="Opened on desktop" class="e-input e-input-small">
                          <input type="text" ng-model="notOpened" ng-init="notOpened = 20" placeholder="Not opened" class="e-input e-input-small">

API Reference

Properties

Name Description Type Required Default value
type Type of the doughnut chart. Default means one ring with one or multiple values and concentric means two or ore values on several different rings. There's a special type, indicator, which is half-half or fully filled with one color. string default
labels Toggles the text right to the chart. boolean -
Parameter Value
type default | doughnut | concentric | indicator

Last update

Message fix(circle): empty state if percent is 0
Date:
()
Committer: rudywaltz
Component history