UI Kit

Overview
Principles
Icons
Colors
Flex grid
Functions
Grid
Media
Mixins
Typography
Utility
Button
Checkbox
Emoji
Field
Input
Multiselect
Numberinput
Radio
Select
Switch
Textarea
Tokeninput
Upload
Box
Emptystate
Field
Fullheight
Header
Infolayer
Phone
Separator
Fixed
Deprecated Flex Grid
Grid
Accordion
Navigation bar
Pagination
Steps
Tab
Verticalnav
Alert
Notice
Progress
Spinner
Validator
Button
Button group
Button radio
Calendar
Card
Carousel
Chart
Colorpicker
Compare
Criteria
Datepicker
Daterange
Datetimepicker
Dialog
Dropdown
Fieldset
Inplaceeditor
Label
List
Overlay
Ring
Snackbar
Table
Tooltip

Ring

Last update:
()
Message doc(search): new tags and hidden components --skip-ci
Committer: Tamás Bíró
Version history

Default

Copy Jade
Copy HTML
Show code
Hide code
<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
Copy Jade
Copy HTML
Show code
Hide code 

<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
Copy Jade
Copy HTML
Show code
Hide code 

<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
Copy Jade
Copy HTML
Show code
Hide code
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
Copy Jade
Copy HTML
Show code
Hide code
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
Copy Jade
Copy HTML
Show code
Hide code
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
Copy Jade
Copy HTML
Show code
Hide code
previus example without autogenerate wrapper 

<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>
Opened
23%(188,838)
Opened on mobile
11%(95,781)

Custom text
Copy Jade
Copy HTML
Show code
Hide code 

<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>
Mobile click-through
of Opened on mobile  (132)

Colored mask
Copy Jade
Copy HTML
Show code
Hide code
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
Copy Jade
Copy HTML
Show code
Hide code
.e-ringchart__inner 

<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>
17,42%
(23)
Mobile click-through
of Opened on mobile  (132)

With footer
Copy Jade
Copy HTML
Show code
Hide code
.e-ringchart-has_footer 

<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>
17,42%
(23)
Mobile click-through
of Opened on mobile  (132)

Angular sample
Copy Jade
Copy HTML
Show code
Hide code 

<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