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
<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
<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
<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
<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
<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-legend">
<div class="e-legend__title">
Opened
</div>
<div class="e-legend__value text-color-primary">
23%
<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%
<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" 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-legend"><div class="e-legend__title">Opened</div><div class="e-legend__value text-color-primary">23% <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% <small>(95,781)</small></div></div></div></div>Opened
23% (188,838)
Opened on mobile
11% (95,781)
Custom text
<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
<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 <span class="text-color-primary">(132)</span></small></div></div></div></div>Mobile click-through
of Opened on mobile (132)
Colored mask
<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
<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">
<div class="e-legend">
<div class="e-legend__title">
Mobile click-through
</div>
<div class="e-legend__value">
<small>
of Opened on mobile
<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 style="color: #6cc9b2">17,42%</div><div class="text-size-subheader text-color-shade">(23)</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 <span class="text-color-primary">(132)</span></small></div></div></div></div>17,42%
(23)
Mobile click-through
of Opened on mobile (132)
With 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">
<div class="e-legend">
<div class="e-legend__title">
Mobile click-through
</div>
<div class="e-legend__value">
<small>
of Opened on mobile
<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" 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"><div class="e-legend"><div class="e-legend__title">Mobile click-through</div><div class="e-legend__value"><small>of Opened on mobile <span class="text-color-primary">(132)</span></small></div></div></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 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" 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 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">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 |