Welcome
Design Principles
For Developers
For Designers
Extending
Writing Guidelines
Color
Icon
Text
General
Overview
Tabs
Form
Card
Editor
Iframe
Basic Grid
Flex Grid
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Action List
Upgrade
Order
Field
Input Group
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Numberinput
Textarea
Upload
Select
Multiselect
Datetime
Slider
Criteria
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Ring
Compare
Notification
Progress
Spinner
Validator
Tooltip
Checklist
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Widget
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
CSS Utility Classes
Flipper Service
Config
Authentication Token
Translation
Tracking
Redesign
Numeric
Time
Iframe Loader
Release Notes

Ring

Ring charts are generally used to display percentage or proportional data. Usually the percentages represented by each category are provided next to the chart one above the other.

Default

Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

Component Variation

Empty Doughnut
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

Doughnut
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

Concentric rings
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

Indicator
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

Small indicator
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

Generate wrapper
Copy Pug
Copy HTML
Open in playground
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" 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 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>
JavaScript
Copy JavaScript
Opened
23% (188,838)
Opened on mobile
11% (95,781)

Custom text
Copy Pug
Copy HTML
Open in playground
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">
    <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">
  <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>
JavaScript
Copy JavaScript
Mobile click-through
of Opened on mobile (132)

Colored mask
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

Inner content
Copy Pug
Copy HTML
Open in playground
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 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">
  <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>
JavaScript
Copy JavaScript
17.42%
(23)
Mobile click-through
of Opened on mobile (132)

With footer
Copy Pug
Copy HTML
Open in playground
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" 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>
<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>
JavaScript
Copy JavaScript
17.42%
(23)
Mobile click-through
of Opened on mobile (132)

Angular sample
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

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

API Reference

Properties

NameDescriptionTypeRequiredDefault value
typeType 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.stringdefault
labelsToggles the text right to the chart.boolean-
ParameterValue
typedefault | doughnut | concentric | indicator