diff --git a/apps/demos/Demos/Charts/AjaxRequest/Angular/app/app.component.html b/apps/demos/Demos/Charts/AjaxRequest/Angular/app/app.component.html
index 3acde2b1fd21..2c7114ccc7e7 100644
--- a/apps/demos/Demos/Charts/AjaxRequest/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/AjaxRequest/Angular/app/app.component.html
@@ -4,16 +4,24 @@
   dataSource="../../../../data/simpleJSON.json"
   [rotated]="true"
 >
-  <dxi-series color="#79cac4" type="bar" argumentField="day" valueField="sales">
-    <dxo-label [visible]="true" backgroundColor="#c18e92"></dxo-label>
-  </dxi-series>
-  <dxo-argument-axis>
-    <dxo-label [customizeText]="customizeText"></dxo-label>
-  </dxo-argument-axis>
-  <dxi-value-axis>
-    <dxo-tick [visible]="false"></dxo-tick>
-    <dxo-label [visible]="false"></dxo-label>
-  </dxi-value-axis>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxo-legend [visible]="false"></dxo-legend>
+  <dxi-chart-series
+    color="#79cac4"
+    type="bar"
+    argumentField="day"
+    valueField="sales"
+  >
+    <dxo-chart-label
+      [visible]="true"
+      backgroundColor="#c18e92"
+    ></dxo-chart-label>
+  </dxi-chart-series>
+  <dxo-chart-argument-axis>
+    <dxo-chart-label [customizeText]="customizeText"></dxo-chart-label>
+  </dxo-chart-argument-axis>
+  <dxi-chart-value-axis>
+    <dxo-chart-tick [visible]="false"></dxo-chart-tick>
+    <dxo-chart-label [visible]="false"></dxo-chart-label>
+  </dxi-chart-value-axis>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
+  <dxo-chart-legend [visible]="false"></dxo-chart-legend>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/Annotation/Angular/app/app.component.html b/apps/demos/Demos/Charts/Annotation/Angular/app/app.component.html
index 6b4260a15546..5e603d27886a 100644
--- a/apps/demos/Demos/Charts/Annotation/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/Annotation/Angular/app/app.component.html
@@ -1,55 +1,55 @@
 <dx-chart id="chart" [dataSource]="dataSource">
-  <dxo-argument-axis argumentType="datetime"> </dxo-argument-axis>
-  <dxi-value-axis position="right"> </dxi-value-axis>
-  <dxo-title text="Apple Stock Price" subtitle="AAPL"></dxo-title>
-  <dxo-legend [visible]="false"></dxo-legend>
-  <dxo-common-series-settings argumentField="date" type="line">
-  </dxo-common-series-settings>
-  <dxi-series valueField="close" name="AAPL"></dxi-series>
-  <dxo-common-annotation-settings
+  <dxo-chart-argument-axis argumentType="datetime"> </dxo-chart-argument-axis>
+  <dxi-chart-value-axis position="right"> </dxi-chart-value-axis>
+  <dxo-chart-title text="Apple Stock Price" subtitle="AAPL"></dxo-chart-title>
+  <dxo-chart-legend [visible]="false"></dxo-chart-legend>
+  <dxo-chart-common-series-settings argumentField="date" type="line">
+  </dxo-chart-common-series-settings>
+  <dxi-chart-series valueField="close" name="AAPL"></dxi-chart-series>
+  <dxo-chart-common-annotation-settings
     series="AAPL"
     type="image"
     [customizeTooltip]="customizeTooltip"
   >
-    <dxo-font [size]="16" [weight]="600"></dxo-font>
-    <dxo-image [width]="50.5" [height]="105.75"></dxo-image>
-  </dxo-common-annotation-settings>
-  <dxi-annotation
+    <dxo-chart-font [size]="16" [weight]="600"></dxo-chart-font>
+    <dxo-chart-image [width]="50.5" [height]="105.75"></dxo-chart-image>
+  </dxo-chart-common-annotation-settings>
+  <dxi-chart-annotation
     type="text"
     text="WWDC 2017"
     [argument]="appleWWDCDate"
     description="The Apple Worldwide Developers Conference was held from June 5 to June 9, 2017 at the San Jose Convention Center in San Jose, California, which was the first time since 2002 that the conference took place in the city. Software announcements included iOS 11, watchOS 4, macOS High Sierra, and updates to tvOS. Hardware announcements included updates to iMac, MacBook and MacBook Pro, as well as the new iMac Pro, 10.5-inch iPad Pro and smart speaker HomePod. Fall Out Boy performed at the Bash held in Discovery Meadow on June 8"
-  ></dxi-annotation>
-  <dxi-annotation
+  ></dxi-chart-annotation>
+  <dxi-chart-annotation
     type="text"
     text="Apple TV+ announced"
     [argument]="appleTVAnnouncementDate"
     description="Apple TV+ is an upcoming over-the-top ad-free subscription video on demand web television service announced by Apple Inc. in 2019 during their March 25 Apple Special Event held at Steve Jobs Theater."
-  ></dxi-annotation>
-  <dxi-annotation
+  ></dxi-chart-annotation>
+  <dxi-chart-annotation
     [argument]="watchReleaseDate"
     [paddingTopBottom]="5"
     description="Apple Watch is a line of smartwatches designed, developed, and marketed by Apple Inc. It incorporates fitness tracking and health-oriented capabilities with integration with iOS and other Apple products and services. The Apple Watch was released on April 24, 2015 and quickly became the best-selling wearable device with 4.2 million sold in the second quarter of the 2015 fiscal year"
   >
-    <dxo-image
+    <dxo-chart-image
       url="../../../../images/Charts/Annotation/apple-watch.png"
-    ></dxo-image>
-  </dxi-annotation>
-  <dxi-annotation
+    ></dxo-chart-image>
+  </dxi-chart-annotation>
+  <dxi-chart-annotation
     [argument]="seReleaseDate"
     description="The iPhone SE (Special Edition) is a smartphone that was designed and marketed by Apple Inc. It is part of the ninth generation of the iPhone alongside the iPhone 6S. It was announced on March 21, 2016 at the Town Hall auditorium in the Apple Campus by Apple executive Greg Joswiak, with pre-orders beginning on March 24, and official release on March 31, 2016. It was re-released almost a year later on March 24, 2017 with larger storage capacities. The iPhone SE shares the same physical design and dimensions as the iPhone 5S, but has upgraded internal hardware, including the newer Apple A9 system-on-chip, greater battery capacity, and a 12-megapixel rear camera that can record 4K video. Along with the iPhone 6S and the iPhone X, the iPhone SE was discontinued by Apple on September 12, 2018"
   >
-    <dxo-image
+    <dxo-chart-image
       url="../../../../images/Charts/Annotation/iphone-se.png"
-    ></dxo-image>
-  </dxi-annotation>
-  <dxi-annotation
+    ></dxo-chart-image>
+  </dxi-chart-annotation>
+  <dxi-chart-annotation
     [argument]="xReleaseDate"
     [offsetY]="110"
     description="iPhone X (Roman numeral 'X' pronounced 'ten') is a smartphone designed, developed, and marketed by Apple Inc. It was the eleventh generation of the iPhone. It was announced on September 12, 2017, alongside the iPhone 8 and iPhone 8 Plus, at the Steve Jobs Theater in the Apple Park campus. The phone was released on November 3, 2017, marking the iPhone series' tenth anniversary"
   >
-    <dxo-image
+    <dxo-chart-image
       url="../../../../images/Charts/Annotation/iphone-x.png"
-    ></dxo-image>
-  </dxi-annotation>
+    ></dxo-chart-image>
+  </dxi-chart-annotation>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/Area/Angular/app/app.component.html b/apps/demos/Demos/Charts/Area/Angular/app/app.component.html
index a750a003f50d..0810ffc171a4 100644
--- a/apps/demos/Demos/Charts/Area/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/Area/Angular/app/app.component.html
@@ -4,20 +4,25 @@
     palette="Harmony Light"
     [dataSource]="populationData"
   >
-    <dxi-series valueField="y1564" name="15-64 years"></dxi-series>
-    <dxi-series valueField="y014" name="0-14 years"></dxi-series>
-    <dxi-series valueField="y65" name="65 years and older"></dxi-series>
-    <dxo-common-series-settings
+    <dxi-chart-series valueField="y1564" name="15-64 years"></dxi-chart-series>
+    <dxi-chart-series valueField="y014" name="0-14 years"></dxi-chart-series>
+    <dxi-chart-series
+      valueField="y65"
+      name="65 years and older"
+    ></dxi-chart-series>
+    <dxo-chart-common-series-settings
       #commonSeries
       argumentField="country"
       [type]="types[0]"
     >
-    </dxo-common-series-settings>
-    <dxo-margin [bottom]="20"></dxo-margin>
-    <dxo-argument-axis [valueMarginsEnabled]="false"></dxo-argument-axis>
-    <dxo-export [enabled]="true"></dxo-export>
-    <dxo-legend verticalAlignment="bottom" horizontalAlignment="center">
-    </dxo-legend>
+    </dxo-chart-common-series-settings>
+    <dxo-chart-margin [bottom]="20"></dxo-chart-margin>
+    <dxo-chart-argument-axis
+      [valueMarginsEnabled]="false"
+    ></dxo-chart-argument-axis>
+    <dxo-chart-export [enabled]="true"></dxo-chart-export>
+    <dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center">
+    </dxo-chart-legend>
   </dx-chart>
   <div class="options">
     <div class="caption">Options</div>
diff --git a/apps/demos/Demos/Charts/AreaSelectionZooming/Angular/app/app.component.html b/apps/demos/Demos/Charts/AreaSelectionZooming/Angular/app/app.component.html
index bcf553447deb..c8dd3977481e 100644
--- a/apps/demos/Demos/Charts/AreaSelectionZooming/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/AreaSelectionZooming/Angular/app/app.component.html
@@ -1,32 +1,32 @@
 <dx-chart id="chart" [dataSource]="data">
-  <dxo-title text="Life Expectancy vs. Birth Rates"></dxo-title>
-  <dxo-zoom-and-pan
+  <dxo-chart-title text="Life Expectancy vs. Birth Rates"></dxo-chart-title>
+  <dxo-chart-zoom-and-pan
     valueAxis="both"
     argumentAxis="both"
     [dragToZoom]="true"
     [allowMouseWheel]="true"
     panKey="shift"
-  ></dxo-zoom-and-pan>
-  <dxo-common-series-settings
+  ></dxo-chart-zoom-and-pan>
+  <dxo-chart-common-series-settings
     type="scatter"
     argumentField="life_exp"
     valueField="birth_rate"
   >
-    <dxo-point [size]="8"></dxo-point>
-  </dxo-common-series-settings>
-  <dxo-series-template nameField="year"></dxo-series-template>
-  <dxo-crosshair [enabled]="true">
-    <dxo-label [visible]="true"></dxo-label>
-  </dxo-crosshair>
-  <dxo-tooltip
+    <dxo-chart-point [size]="8"></dxo-chart-point>
+  </dxo-chart-common-series-settings>
+  <dxo-chart-series-template nameField="year"></dxo-chart-series-template>
+  <dxo-chart-crosshair [enabled]="true">
+    <dxo-chart-label [visible]="true"></dxo-chart-label>
+  </dxo-chart-crosshair>
+  <dxo-chart-tooltip
     [enabled]="true"
     [customizeTooltip]="customizeTooltip"
-  ></dxo-tooltip>
-  <dxo-argument-axis title="Life Expectancy"> </dxo-argument-axis>
-  <dxi-value-axis title="Birth Rate"> </dxi-value-axis>
-  <dxo-legend position="inside">
-    <dxo-border [visible]="true"></dxo-border>
-  </dxo-legend>
+  ></dxo-chart-tooltip>
+  <dxo-chart-argument-axis title="Life Expectancy"> </dxo-chart-argument-axis>
+  <dxi-chart-value-axis title="Birth Rate"> </dxi-chart-value-axis>
+  <dxo-chart-legend position="inside">
+    <dxo-chart-border [visible]="true"></dxo-chart-border>
+  </dxo-chart-legend>
 </dx-chart>
 <dx-button
   id="reset-zoom"
diff --git a/apps/demos/Demos/Charts/AutoCalculatedBarWidth/Angular/app/app.component.html b/apps/demos/Demos/Charts/AutoCalculatedBarWidth/Angular/app/app.component.html
index 3e05541d1ce5..09fcdb3a95d2 100644
--- a/apps/demos/Demos/Charts/AutoCalculatedBarWidth/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/AutoCalculatedBarWidth/Angular/app/app.component.html
@@ -4,16 +4,16 @@
   palette="soft"
   title="Percent of Total Energy Production"
 >
-  <dxi-series valueField="oil" name="Oil Production"></dxi-series>
-  <dxi-series valueField="gas" name="Gas Production"></dxi-series>
-  <dxi-series valueField="coal" name="Coal Production"></dxi-series>
-  <dxo-common-series-settings
+  <dxi-chart-series valueField="oil" name="Oil Production"></dxi-chart-series>
+  <dxi-chart-series valueField="gas" name="Gas Production"></dxi-chart-series>
+  <dxi-chart-series valueField="coal" name="Coal Production"></dxi-chart-series>
+  <dxo-chart-common-series-settings
     argumentField="state"
     type="bar"
     [ignoreEmptyPoints]="true"
   >
-  </dxo-common-series-settings>
-  <dxo-legend verticalAlignment="bottom" horizontalAlignment="center">
-  </dxo-legend>
-  <dxo-export [enabled]="true"></dxo-export>
+  </dxo-chart-common-series-settings>
+  <dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center">
+  </dxo-chart-legend>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/AxisCustomPosition/Angular/app/app.component.html b/apps/demos/Demos/Charts/AxisCustomPosition/Angular/app/app.component.html
index b5d2352ade87..1d62b8adb08c 100644
--- a/apps/demos/Demos/Charts/AxisCustomPosition/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/AxisCustomPosition/Angular/app/app.component.html
@@ -1,25 +1,27 @@
 <dx-chart id="chart" [dataSource]="dataSource">
-  <dxo-common-series-settings type="scatter"></dxo-common-series-settings>
-  <dxi-series argumentField="x1" valueField="y1"></dxi-series>
-  <dxi-series argumentField="x2" valueField="y2">
-    <dxo-point symbol="triangleDown"></dxo-point>
-  </dxi-series>
-  <dxo-argument-axis
+  <dxo-chart-common-series-settings
+    type="scatter"
+  ></dxo-chart-common-series-settings>
+  <dxi-chart-series argumentField="x1" valueField="y1"></dxi-chart-series>
+  <dxi-chart-series argumentField="x2" valueField="y2">
+    <dxo-chart-point symbol="triangleDown"></dxo-chart-point>
+  </dxi-chart-series>
+  <dxo-chart-argument-axis
     #argument
     [visualRange]="[-20, 20]"
     [offset]="0"
     [customPosition]="0"
   >
-  </dxo-argument-axis>
-  <dxi-value-axis
+  </dxo-chart-argument-axis>
+  <dxi-chart-value-axis
     #value
     [visualRange]="[-20, 20]"
     [endOnTick]="false"
     [offset]="0"
     [customPosition]="0"
   >
-  </dxi-value-axis>
-  <dxo-legend [visible]="false"></dxo-legend>
+  </dxi-chart-value-axis>
+  <dxo-chart-legend [visible]="false"></dxo-chart-legend>
 </dx-chart>
 <div class="options">
   <div class="caption">Options</div>
diff --git a/apps/demos/Demos/Charts/AxisLabelCustomization/Angular/app/app.component.html b/apps/demos/Demos/Charts/AxisLabelCustomization/Angular/app/app.component.html
index 97c99f01cb40..75561e7f6502 100644
--- a/apps/demos/Demos/Charts/AxisLabelCustomization/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/AxisLabelCustomization/Angular/app/app.component.html
@@ -3,15 +3,21 @@
   title="Ice Hockey World Championship Gold Medal Winners"
   [dataSource]="dataSource"
 >
-  <dxo-common-series-settings type="bar" argumentField="country">
-    <dxo-label visible="true"></dxo-label>
-  </dxo-common-series-settings>
-  <dxi-series name="Gold" valueField="gold" color="#ffd700"> </dxi-series>
-  <dxi-series name="Silver" valueField="silver" color="#c0c0c0"> </dxi-series>
-  <dxi-series name="Bronze" valueField="bronze" color="#cd7f32"> </dxi-series>
-  <dxo-argument-axis>
-    <dxo-label [visible]="true" template="labelTemplate"></dxo-label>
-  </dxo-argument-axis>
+  <dxo-chart-common-series-settings type="bar" argumentField="country">
+    <dxo-chart-label visible="true"></dxo-chart-label>
+  </dxo-chart-common-series-settings>
+  <dxi-chart-series name="Gold" valueField="gold" color="#ffd700">
+  </dxi-chart-series>
+  <dxi-chart-series name="Silver" valueField="silver" color="#c0c0c0">
+  </dxi-chart-series>
+  <dxi-chart-series name="Bronze" valueField="bronze" color="#cd7f32">
+  </dxi-chart-series>
+  <dxo-chart-argument-axis>
+    <dxo-chart-label
+      [visible]="true"
+      template="labelTemplate"
+    ></dxo-chart-label>
+  </dxo-chart-argument-axis>
   <svg overflow="visible" *dxTemplate="let data of 'labelTemplate'">
     <image
       filter="url(#DevExpress_shadow_filter)"
diff --git a/apps/demos/Demos/Charts/BarColorCustomization/Angular/app/app.component.html b/apps/demos/Demos/Charts/BarColorCustomization/Angular/app/app.component.html
index 813706e623a9..4dedbe7ab4bf 100644
--- a/apps/demos/Demos/Charts/BarColorCustomization/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/BarColorCustomization/Angular/app/app.component.html
@@ -1,15 +1,15 @@
 <dx-chart id="chart" [dataSource]="userData" palette="soft">
-  <dxo-title
+  <dxo-chart-title
     text="Age Breakdown of Facebook Users in the U.S."
     subtitle="as of January 2017"
   >
-  </dxo-title>
-  <dxo-common-series-settings
+  </dxo-chart-title>
+  <dxo-chart-common-series-settings
     argumentField="age"
     type="bar"
     valueField="number"
     [ignoreEmptyPoints]="true"
   >
-  </dxo-common-series-settings>
-  <dxo-series-template nameField="age"></dxo-series-template>
+  </dxo-chart-common-series-settings>
+  <dxo-chart-series-template nameField="age"></dxo-chart-series-template>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/BarDrillDown/Angular/app/app.component.html b/apps/demos/Demos/Charts/BarDrillDown/Angular/app/app.component.html
index 4d73afc78205..7bc29c926527 100644
--- a/apps/demos/Demos/Charts/BarDrillDown/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/BarDrillDown/Angular/app/app.component.html
@@ -6,9 +6,9 @@
   title="The Most Populated Countries by Continents"
   [customizePoint]="customizePoint"
 >
-  <dxi-series type="bar"></dxi-series>
-  <dxo-legend [visible]="false"></dxo-legend>
-  <dxi-value-axis [showZero]="false"></dxi-value-axis>
+  <dxi-chart-series type="bar"></dxi-chart-series>
+  <dxo-chart-legend [visible]="false"></dxo-chart-legend>
+  <dxi-chart-value-axis [showZero]="false"></dxi-chart-value-axis>
 </dx-chart>
 <dx-button
   class="button-container"
diff --git a/apps/demos/Demos/Charts/BiDirectionalBarChart/Angular/app/app.component.html b/apps/demos/Demos/Charts/BiDirectionalBarChart/Angular/app/app.component.html
index fccd7ab35a72..fe7ec5f5339a 100644
--- a/apps/demos/Demos/Charts/BiDirectionalBarChart/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/BiDirectionalBarChart/Angular/app/app.component.html
@@ -5,16 +5,18 @@
   [barGroupWidth]="18"
   title="Population Pyramid For Norway 2016"
 >
-  <dxo-common-series-settings argumentField="age" type="stackedbar">
-  </dxo-common-series-settings>
-  <dxi-series valueField="male" name="Male" color="#3F7FBF"> </dxi-series>
-  <dxi-series valueField="female" name="Female" color="#F87CCC"> </dxi-series>
-  <dxo-tooltip [enabled]="true" [customizeTooltip]="customizeTooltip">
-  </dxo-tooltip>
-  <dxi-value-axis>
-    <dxo-label [customizeText]="customizeLabel"></dxo-label>
-  </dxi-value-axis>
-  <dxo-legend verticalAlignment="bottom" horizontalAlignment="center">
-    <dxo-margin [left]="50"></dxo-margin>
-  </dxo-legend>
+  <dxo-chart-common-series-settings argumentField="age" type="stackedbar">
+  </dxo-chart-common-series-settings>
+  <dxi-chart-series valueField="male" name="Male" color="#3F7FBF">
+  </dxi-chart-series>
+  <dxi-chart-series valueField="female" name="Female" color="#F87CCC">
+  </dxi-chart-series>
+  <dxo-chart-tooltip [enabled]="true" [customizeTooltip]="customizeTooltip">
+  </dxo-chart-tooltip>
+  <dxi-chart-value-axis>
+    <dxo-chart-label [customizeText]="customizeLabel"></dxo-chart-label>
+  </dxi-chart-value-axis>
+  <dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center">
+    <dxo-chart-margin [left]="50"></dxo-chart-margin>
+  </dxo-chart-legend>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/Bubble/Angular/app/app.component.html b/apps/demos/Demos/Charts/Bubble/Angular/app/app.component.html
index c01cf04130a6..e05b25cec7bb 100644
--- a/apps/demos/Demos/Charts/Bubble/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/Bubble/Angular/app/app.component.html
@@ -5,24 +5,26 @@
   [palette]="['#00ced1', '#008000', '#ffd700', '#ff7f50']"
   (onSeriesClick)="onSeriesClick($event)"
 >
-  <dxo-common-series-settings type="bubble"></dxo-common-series-settings>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxo-legend position="inside" horizontalAlignment="left">
-    <dxo-border [visible]="true"></dxo-border>
-  </dxo-legend>
-  <dxo-argument-axis title="Total Population">
-    <dxo-label [customizeText]="argumentCustomizeText"></dxo-label>
-  </dxo-argument-axis>
-  <dxi-value-axis title="Population with Age over 60">
-    <dxo-label [customizeText]="valueCustomizeText"></dxo-label>
-  </dxi-value-axis>
-  <dxo-tooltip
+  <dxo-chart-common-series-settings
+    type="bubble"
+  ></dxo-chart-common-series-settings>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
+  <dxo-chart-legend position="inside" horizontalAlignment="left">
+    <dxo-chart-border [visible]="true"></dxo-chart-border>
+  </dxo-chart-legend>
+  <dxo-chart-argument-axis title="Total Population">
+    <dxo-chart-label [customizeText]="argumentCustomizeText"></dxo-chart-label>
+  </dxo-chart-argument-axis>
+  <dxi-chart-value-axis title="Population with Age over 60">
+    <dxo-chart-label [customizeText]="valueCustomizeText"></dxo-chart-label>
+  </dxi-chart-value-axis>
+  <dxo-chart-tooltip
     [enabled]="true"
     location="edge"
     [customizeTooltip]="customizeTooltip"
   >
-  </dxo-tooltip>
-  <dxi-series
+  </dxo-chart-tooltip>
+  <dxi-chart-series
     *ngFor="let correlation of correlationSource"
     [name]="correlation.name"
     [argumentField]="correlation.argumentField"
@@ -30,5 +32,5 @@
     [sizeField]="correlation.sizeField"
     [tagField]="correlation.tagField"
   >
-  </dxi-series>
+  </dxi-chart-series>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/Candlestick/Angular/app/app.component.html b/apps/demos/Demos/Charts/Candlestick/Angular/app/app.component.html
index 68aeb3f8d955..75ba2a4b6eef 100644
--- a/apps/demos/Demos/Charts/Candlestick/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/Candlestick/Angular/app/app.component.html
@@ -1,30 +1,30 @@
 <dx-chart id="chart" title="Stock Price" [dataSource]="stockPrices">
-  <dxi-series
+  <dxi-chart-series
     name="E-Mart"
     openValueField="o"
     highValueField="h"
     lowValueField="l"
     closeValueField="c"
   >
-    <dxo-reduction color="red"></dxo-reduction>
-  </dxi-series>
-  <dxo-common-series-settings argumentField="date" type="candlestick">
-  </dxo-common-series-settings>
-  <dxo-legend itemTextPosition="left"></dxo-legend>
-  <dxi-value-axis [tickInterval]="1">
-    <dxo-title text="US dollars"></dxo-title>
-    <dxo-label>
-      <dxo-format type="currency" [precision]="0"> </dxo-format>
-    </dxo-label>
-  </dxi-value-axis>
-  <dxo-argument-axis [workdaysOnly]="true">
-    <dxo-label format="shortDate"></dxo-label>
-  </dxo-argument-axis>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxo-tooltip
+    <dxo-chart-reduction color="red"></dxo-chart-reduction>
+  </dxi-chart-series>
+  <dxo-chart-common-series-settings argumentField="date" type="candlestick">
+  </dxo-chart-common-series-settings>
+  <dxo-chart-legend itemTextPosition="left"></dxo-chart-legend>
+  <dxi-chart-value-axis [tickInterval]="1">
+    <dxo-chart-title text="US dollars"></dxo-chart-title>
+    <dxo-chart-label>
+      <dxo-chart-format type="currency" [precision]="0"> </dxo-chart-format>
+    </dxo-chart-label>
+  </dxi-chart-value-axis>
+  <dxo-chart-argument-axis [workdaysOnly]="true">
+    <dxo-chart-label format="shortDate"></dxo-chart-label>
+  </dxo-chart-argument-axis>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
+  <dxo-chart-tooltip
     [enabled]="true"
     location="edge"
     [customizeTooltip]="customizeTooltip"
   >
-  </dxo-tooltip>
+  </dxo-chart-tooltip>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/CenterLabelCustomization/Angular/app/app.component.html b/apps/demos/Demos/Charts/CenterLabelCustomization/Angular/app/app.component.html
index 2a9be162b83e..e719dc826a81 100644
--- a/apps/demos/Demos/Charts/CenterLabelCustomization/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/CenterLabelCustomization/Angular/app/app.component.html
@@ -12,17 +12,17 @@
       centerTemplate="centerTemplate"
       [innerRadius]="0.65"
     >
-      <dxi-series argumentField="commodity" valueField="total">
-        <dxo-label
+      <dxi-pie-chart-series argumentField="commodity" valueField="total">
+        <dxo-pie-chart-label
           backgroundColor="none"
           [visible]="true"
           format="fixedPoint"
           [customizeText]="customizeLabel"
         >
-          <dxo-connector [visible]="true"></dxo-connector>
-        </dxo-label>
-      </dxi-series>
-      <dxo-legend [visible]="false"> </dxo-legend>
+          <dxo-pie-chart-connector [visible]="true"></dxo-pie-chart-connector>
+        </dxo-pie-chart-label>
+      </dxi-pie-chart-series>
+      <dxo-pie-chart-legend [visible]="false"> </dxo-pie-chart-legend>
       <svg *dxTemplate="let pieChart of 'centerTemplate'">
         <circle
           cx="100"
diff --git a/apps/demos/Demos/Charts/ClientSideDataProcessing/Angular/app/app.component.html b/apps/demos/Demos/Charts/ClientSideDataProcessing/Angular/app/app.component.html
index fd45298ae5c7..03550f8d28fa 100644
--- a/apps/demos/Demos/Charts/ClientSideDataProcessing/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/ClientSideDataProcessing/Angular/app/app.component.html
@@ -1,14 +1,20 @@
 <div id="chart-demo">
   <dx-chart [dataSource]="monthWeather" [customizePoint]="customizePoint">
-    <dxo-title text="Temperature in Seattle: October 2017"></dxo-title>
-    <dxo-size [height]="420"></dxo-size>
-    <dxi-series argumentField="day" valueField="t" type="bar"></dxi-series>
-    <dxo-legend [visible]="false"></dxo-legend>
-    <dxo-export [enabled]="true"></dxo-export>
-    <dxi-value-axis>
-      <dxo-label [customizeText]="customizeText"></dxo-label>
-    </dxi-value-axis>
-    <dxo-loading-indicator [enabled]="true"></dxo-loading-indicator>
+    <dxo-chart-title
+      text="Temperature in Seattle: October 2017"
+    ></dxo-chart-title>
+    <dxo-chart-size [height]="420"></dxo-chart-size>
+    <dxi-chart-series
+      argumentField="day"
+      valueField="t"
+      type="bar"
+    ></dxi-chart-series>
+    <dxo-chart-legend [visible]="false"></dxo-chart-legend>
+    <dxo-chart-export [enabled]="true"></dxo-chart-export>
+    <dxi-chart-value-axis>
+      <dxo-chart-label [customizeText]="customizeText"></dxo-chart-label>
+    </dxi-chart-value-axis>
+    <dxo-chart-loading-indicator [enabled]="true"></dxo-chart-loading-indicator>
   </dx-chart>
   <div class="action">
     <div class="label">Choose a temperature threshold, &deg;C: </div>
diff --git a/apps/demos/Demos/Charts/ContinuousData/Angular/app/app.component.html b/apps/demos/Demos/Charts/ContinuousData/Angular/app/app.component.html
index aa5c313eaf8d..53a1244602bd 100644
--- a/apps/demos/Demos/Charts/ContinuousData/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/ContinuousData/Angular/app/app.component.html
@@ -3,9 +3,13 @@
   title="Rose in Polar Coordinates"
   [dataSource]="coordinates"
 >
-  <dxi-series type="line"></dxi-series>
-  <dxo-argument-axis [inverted]="true" [startAngle]="90" [tickInterval]="30">
-  </dxo-argument-axis>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxo-legend [visible]="false"></dxo-legend>
+  <dxi-polar-chart-series type="line"></dxi-polar-chart-series>
+  <dxo-polar-chart-argument-axis
+    [inverted]="true"
+    [startAngle]="90"
+    [tickInterval]="30"
+  >
+  </dxo-polar-chart-argument-axis>
+  <dxo-polar-chart-export [enabled]="true"></dxo-polar-chart-export>
+  <dxo-polar-chart-legend [visible]="false"></dxo-polar-chart-legend>
 </dx-polar-chart>
diff --git a/apps/demos/Demos/Charts/Crosshair/Angular/app/app.component.html b/apps/demos/Demos/Charts/Crosshair/Angular/app/app.component.html
index 301a6134eca2..a0f85d9d612e 100644
--- a/apps/demos/Demos/Charts/Crosshair/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/Crosshair/Angular/app/app.component.html
@@ -1,33 +1,40 @@
 <dx-chart id="chart" [dataSource]="countriesInfo">
-  <dxi-series
+  <dxi-chart-series
     *ngFor="let energy of energySources"
     [valueField]="energy.value"
     [name]="energy.name"
   >
-  </dxi-series>
-  <dxo-common-series-settings argumentField="country" type="spline">
-    <dxo-point hoverMode="allArgumentPoints"></dxo-point>
-  </dxo-common-series-settings>
-  <dxo-argument-axis
+  </dxi-chart-series>
+  <dxo-chart-common-series-settings argumentField="country" type="spline">
+    <dxo-chart-point hoverMode="allArgumentPoints"></dxo-chart-point>
+  </dxo-chart-common-series-settings>
+  <dxo-chart-argument-axis
     [valueMarginsEnabled]="false"
     discreteAxisDivisionMode="crossLabels"
   >
-    <dxo-grid [visible]="true"></dxo-grid>
-  </dxo-argument-axis>
-  <dxo-crosshair [enabled]="true" color="#949494" [width]="3" dashStyle="dot">
-    <dxo-label [visible]="true" backgroundColor="#949494">
-      <dxo-font color="#fff" [size]="12"> </dxo-font>
-    </dxo-label>
-  </dxo-crosshair>
-  <dxo-legend
+    <dxo-chart-grid [visible]="true"></dxo-chart-grid>
+  </dxo-chart-argument-axis>
+  <dxo-chart-crosshair
+    [enabled]="true"
+    color="#949494"
+    [width]="3"
+    dashStyle="dot"
+  >
+    <dxo-chart-label [visible]="true" backgroundColor="#949494">
+      <dxo-chart-font color="#fff" [size]="12"> </dxo-chart-font>
+    </dxo-chart-label>
+  </dxo-chart-crosshair>
+  <dxo-chart-legend
     verticalAlignment="bottom"
     horizontalAlignment="center"
     itemTextPosition="bottom"
   >
-  </dxo-legend>
-  <dxo-title text="Energy Consumption in 2004">
-    <dxo-subtitle text="(Millions of Tons, Oil Equivalent)"></dxo-subtitle>
-  </dxo-title>
-  <dxo-tooltip [enabled]="true"></dxo-tooltip>
-  <dxo-export [enabled]="true"></dxo-export>
+  </dxo-chart-legend>
+  <dxo-chart-title text="Energy Consumption in 2004">
+    <dxo-chart-subtitle
+      text="(Millions of Tons, Oil Equivalent)"
+    ></dxo-chart-subtitle>
+  </dxo-chart-title>
+  <dxo-chart-tooltip [enabled]="true"></dxo-chart-tooltip>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/CustomAnnotations/Angular/app/app.component.html b/apps/demos/Demos/Charts/CustomAnnotations/Angular/app/app.component.html
index 5cb3fbfbd2a3..c87f22a4ded3 100644
--- a/apps/demos/Demos/Charts/CustomAnnotations/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/CustomAnnotations/Angular/app/app.component.html
@@ -1,26 +1,26 @@
 <dx-chart id="chart" [dataSource]="populationData">
-  <dxo-title text="Top 5 Most Populated States in US"> </dxo-title>
-  <dxi-series
+  <dxo-chart-title text="Top 5 Most Populated States in US"> </dxo-chart-title>
+  <dxi-chart-series
     type="bar"
     name="Population"
     argumentField="name"
     valueField="population"
   >
-  </dxi-series>
-  <dxo-common-annotation-settings
+  </dxi-chart-series>
+  <dxo-chart-common-annotation-settings
     type="custom"
     series="Population"
     template="template"
     [allowDragging]="true"
   >
-  </dxo-common-annotation-settings>
-  <dxi-annotation
+  </dxo-chart-common-annotation-settings>
+  <dxi-chart-annotation
     *ngFor="let data of populationData"
     [data]="data"
     [argument]="data.name"
   >
-  </dxi-annotation>
-  <dxo-legend [visible]="false"></dxo-legend>
+  </dxi-chart-annotation>
+  <dxo-chart-legend [visible]="false"></dxo-chart-legend>
   <svg *dxTemplate="let annotation of 'template'" class="annotation">
     <image attr.href="{{ getImagePath(annotation) }}" width="60" height="40" />
     <rect x="0" y="0" class="border" />
diff --git a/apps/demos/Demos/Charts/CustomBarWidth/Angular/app/app.component.html b/apps/demos/Demos/Charts/CustomBarWidth/Angular/app/app.component.html
index 1fc01441468c..da18095a2e96 100644
--- a/apps/demos/Demos/Charts/CustomBarWidth/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/CustomBarWidth/Angular/app/app.component.html
@@ -1,20 +1,20 @@
 <dx-chart id="chart" [dataSource]="oilProductionData" palette="soft">
-  <dxi-series valueField="year1970" name="1970"></dxi-series>
-  <dxi-series valueField="year1980" name="1980"></dxi-series>
-  <dxi-series valueField="year1990" name="1990"></dxi-series>
-  <dxi-series valueField="year2000" name="2000"></dxi-series>
-  <dxi-series valueField="year2008" name="2008"></dxi-series>
-  <dxi-series valueField="year2009" name="2009"></dxi-series>
-  <dxo-common-series-settings
+  <dxi-chart-series valueField="year1970" name="1970"></dxi-chart-series>
+  <dxi-chart-series valueField="year1980" name="1980"></dxi-chart-series>
+  <dxi-chart-series valueField="year1990" name="1990"></dxi-chart-series>
+  <dxi-chart-series valueField="year2000" name="2000"></dxi-chart-series>
+  <dxi-chart-series valueField="year2008" name="2008"></dxi-chart-series>
+  <dxi-chart-series valueField="year2009" name="2009"></dxi-chart-series>
+  <dxo-chart-common-series-settings
     argumentField="state"
     type="bar"
     [barPadding]="0.5"
   >
-  </dxo-common-series-settings>
-  <dxo-legend verticalAlignment="bottom" horizontalAlignment="center">
-  </dxo-legend>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxo-title text="Oil Production">
-    <dxo-subtitle text="(in millions tonnes)"></dxo-subtitle>
-  </dxo-title>
+  </dxo-chart-common-series-settings>
+  <dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center">
+  </dxo-chart-legend>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
+  <dxo-chart-title text="Oil Production">
+    <dxo-chart-subtitle text="(in millions tonnes)"></dxo-chart-subtitle>
+  </dxo-chart-title>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/CustomFillStyles/Angular/app/app.component.html b/apps/demos/Demos/Charts/CustomFillStyles/Angular/app/app.component.html
index 1fc13f08fa65..59f1a3354368 100644
--- a/apps/demos/Demos/Charts/CustomFillStyles/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/CustomFillStyles/Angular/app/app.component.html
@@ -1,8 +1,8 @@
 <dx-pie-chart id="pie" [dataSource]="data" [customizePoint]="customizePoint">
-  <dxi-series argumentField="type" valueField="value">
-    <dxo-label [visible]="true" [customizeText]="customizeText">
-      <dxo-connector [visible]="true"></dxo-connector>
-    </dxo-label>
-  </dxi-series>
-  <dxo-export [enabled]="true"></dxo-export>
+  <dxi-pie-chart-series argumentField="type" valueField="value">
+    <dxo-pie-chart-label [visible]="true" [customizeText]="customizeText">
+      <dxo-pie-chart-connector [visible]="true"></dxo-pie-chart-connector>
+    </dxo-pie-chart-label>
+  </dxi-pie-chart-series>
+  <dxo-pie-chart-export [enabled]="true"></dxo-pie-chart-export>
 </dx-pie-chart>
diff --git a/apps/demos/Demos/Charts/CustomizePointsAndLabels/Angular/app/app.component.html b/apps/demos/Demos/Charts/CustomizePointsAndLabels/Angular/app/app.component.html
index b4160e4daf1c..7328c76304a0 100644
--- a/apps/demos/Demos/Charts/CustomizePointsAndLabels/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/CustomizePointsAndLabels/Angular/app/app.component.html
@@ -5,31 +5,34 @@
   [customizePoint]="customizePoint"
   [customizeLabel]="customizeLabel"
 >
-  <dxi-series
+  <dxi-chart-series
     argumentField="day"
     valueField="value"
     type="bar"
     color="#e7d19a"
-  ></dxi-series>
-  <dxi-value-axis [maxValueMargin]="0.01" [visualRange]="{ startValue: 40 }">
-    <dxo-label [customizeText]="customizeText"></dxo-label>
-    <dxi-constant-line
+  ></dxi-chart-series>
+  <dxi-chart-value-axis
+    [maxValueMargin]="0.01"
+    [visualRange]="{ startValue: 40 }"
+  >
+    <dxo-chart-label [customizeText]="customizeText"></dxo-chart-label>
+    <dxi-chart-constant-line
       [width]="2"
       [value]="lowAverage"
       color="#8c8cff"
       dashStyle="dash"
     >
-      <dxo-label text="Low Average"></dxo-label>
-    </dxi-constant-line>
-    <dxi-constant-line
+      <dxo-chart-label text="Low Average"></dxo-chart-label>
+    </dxi-chart-constant-line>
+    <dxi-chart-constant-line
       [width]="2"
       [value]="highAverage"
       color="#ff7c7c"
       dashStyle="dash"
     >
-      <dxo-label text="High Average"></dxo-label>
-    </dxi-constant-line>
-  </dxi-value-axis>
-  <dxo-legend [visible]="false"></dxo-legend>
-  <dxo-export [enabled]="true"></dxo-export>
+      <dxo-chart-label text="High Average"></dxo-chart-label>
+    </dxi-chart-constant-line>
+  </dxi-chart-value-axis>
+  <dxo-chart-legend [visible]="false"></dxo-chart-legend>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/DiscreteAxisZoomingAndScrolling/Angular/app/app.component.html b/apps/demos/Demos/Charts/DiscreteAxisZoomingAndScrolling/Angular/app/app.component.html
index bd526758c69b..c6699d3d3d54 100644
--- a/apps/demos/Demos/Charts/DiscreteAxisZoomingAndScrolling/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/DiscreteAxisZoomingAndScrolling/Angular/app/app.component.html
@@ -5,44 +5,49 @@
     [dataSource]="chemicalComposition"
     title="The Chemical Composition of the Earth Layers"
   >
-    <dxi-series
+    <dxi-chart-series
       *ngFor="let item of seriesSource"
       [valueField]="item.valueField"
       [name]="item.name"
     >
-    </dxi-series>
-    <dxo-common-series-settings type="bar" [ignoreEmptyPoints]="true">
-    </dxo-common-series-settings>
-    <dxi-value-axis>
-      <dxo-label [customizeText]="customizeText"></dxo-label>
-    </dxi-value-axis>
-    <dxo-argument-axis #argumentAxis> </dxo-argument-axis>
-    <dxo-legend
+    </dxi-chart-series>
+    <dxo-chart-common-series-settings type="bar" [ignoreEmptyPoints]="true">
+    </dxo-chart-common-series-settings>
+    <dxi-chart-value-axis>
+      <dxo-chart-label [customizeText]="customizeText"></dxo-chart-label>
+    </dxi-chart-value-axis>
+    <dxo-chart-argument-axis #argumentAxis> </dxo-chart-argument-axis>
+    <dxo-chart-legend
       [visible]="true"
       verticalAlignment="top"
       horizontalAlignment="right"
       orientation="horizontal"
     >
-      <dxo-border [visible]="true"></dxo-border>
-    </dxo-legend>
+      <dxo-chart-border [visible]="true"></dxo-chart-border>
+    </dxo-chart-legend>
   </dx-chart>
   <dx-range-selector
     [dataSource]="chemicalComposition"
     [(value)]="argumentAxis.visualRange"
   >
-    <dxo-size [height]="120"></dxo-size>
-    <dxo-margin [left]="10"></dxo-margin>
-    <dxo-scale [minorTickCount]="1"></dxo-scale>
-    <dxo-behavior valueChangeMode="onHandleMove"></dxo-behavior>
-    <dxo-chart palette="soft">
-      <dxo-common-series-settings type="bar" [ignoreEmptyPoints]="true">
-      </dxo-common-series-settings>
-      <dxi-series
+    <dxo-range-selector-size [height]="120"></dxo-range-selector-size>
+    <dxo-range-selector-margin [left]="10"></dxo-range-selector-margin>
+    <dxo-range-selector-scale [minorTickCount]="1"></dxo-range-selector-scale>
+    <dxo-range-selector-behavior
+      valueChangeMode="onHandleMove"
+    ></dxo-range-selector-behavior>
+    <dxo-range-selector-chart palette="soft">
+      <dxo-range-selector-common-series-settings
+        type="bar"
+        [ignoreEmptyPoints]="true"
+      >
+      </dxo-range-selector-common-series-settings>
+      <dxi-range-selector-series
         *ngFor="let item of seriesSource"
         [valueField]="item.valueField"
         [name]="item.name"
       >
-      </dxi-series>
-    </dxo-chart>
+      </dxi-range-selector-series>
+    </dxo-range-selector-chart>
   </dx-range-selector>
 </div>
diff --git a/apps/demos/Demos/Charts/DiscreteData/Angular/app/app.component.html b/apps/demos/Demos/Charts/DiscreteData/Angular/app/app.component.html
index bdfddff06769..9c5be5f8a565 100644
--- a/apps/demos/Demos/Charts/DiscreteData/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/DiscreteData/Angular/app/app.component.html
@@ -3,11 +3,20 @@ <h3>Average temperature in London</h3>
 </div>
 <div id="chart-demo">
   <dx-polar-chart id="radarChart" [dataSource]="temperaturesData">
-    <dxi-series valueField="day" name="Day" color="#ba4d51"></dxi-series>
-    <dxi-series valueField="night" name="Night" color="#5f8b95"></dxi-series>
-    <dxo-common-series-settings #seriesSettings type="scatter">
-    </dxo-common-series-settings>
-    <dxo-margin [top]="50" [bottom]="50" [left]="100"> </dxo-margin>
+    <dxi-polar-chart-series
+      valueField="day"
+      name="Day"
+      color="#ba4d51"
+    ></dxi-polar-chart-series>
+    <dxi-polar-chart-series
+      valueField="night"
+      name="Night"
+      color="#5f8b95"
+    ></dxi-polar-chart-series>
+    <dxo-polar-chart-common-series-settings #seriesSettings type="scatter">
+    </dxo-polar-chart-common-series-settings>
+    <dxo-polar-chart-margin [top]="50" [bottom]="50" [left]="100">
+    </dxo-polar-chart-margin>
   </dx-polar-chart>
   <div class="center">
     <div>Series Type</div>&nbsp;
diff --git a/apps/demos/Demos/Charts/DiscretePointsAggregation/Angular/app/app.component.html b/apps/demos/Demos/Charts/DiscretePointsAggregation/Angular/app/app.component.html
index bfd30ebd8870..92ff3dde3bd1 100644
--- a/apps/demos/Demos/Charts/DiscretePointsAggregation/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/DiscretePointsAggregation/Angular/app/app.component.html
@@ -1,13 +1,13 @@
 <dx-chart id="chart" [dataSource]="dataSource">
-  <dxo-title text="Production of Crude Oil">
-    <dxo-subtitle text="(in Barrels)"></dxo-subtitle>
-  </dxo-title>
-  <dxo-common-series-settings
+  <dxo-chart-title text="Production of Crude Oil">
+    <dxo-chart-subtitle text="(in Barrels)"></dxo-chart-subtitle>
+  </dxo-chart-title>
+  <dxo-chart-common-series-settings
     argumentField="state"
     valueField="value"
     type="bar"
   >
-    <dxo-aggregation enabled="true" method="sum"></dxo-aggregation>
-  </dxo-common-series-settings>
-  <dxo-series-template nameField="year"></dxo-series-template>
+    <dxo-chart-aggregation enabled="true" method="sum"></dxo-chart-aggregation>
+  </dxo-chart-common-series-settings>
+  <dxo-chart-series-template nameField="year"></dxo-chart-series-template>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/Doughnut/Angular/app/app.component.html b/apps/demos/Demos/Charts/Doughnut/Angular/app/app.component.html
index cf3dac0ce874..2b92a3fe17b6 100644
--- a/apps/demos/Demos/Charts/Doughnut/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/Doughnut/Angular/app/app.component.html
@@ -5,21 +5,21 @@
   palette="Soft Pastel"
   [dataSource]="populationByRegions"
 >
-  <dxi-series argumentField="region">
-    <dxo-label [visible]="true" format="millions">
-      <dxo-connector [visible]="true"></dxo-connector>
-    </dxo-label>
-  </dxi-series>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxo-legend
+  <dxi-pie-chart-series argumentField="region">
+    <dxo-pie-chart-label [visible]="true" format="millions">
+      <dxo-pie-chart-connector [visible]="true"></dxo-pie-chart-connector>
+    </dxo-pie-chart-label>
+  </dxi-pie-chart-series>
+  <dxo-pie-chart-export [enabled]="true"></dxo-pie-chart-export>
+  <dxo-pie-chart-legend
     [margin]="0"
     horizontalAlignment="right"
     verticalAlignment="top"
-  ></dxo-legend>
-  <dxo-tooltip
+  ></dxo-pie-chart-legend>
+  <dxo-pie-chart-tooltip
     [enabled]="true"
     [customizeTooltip]="customizeTooltip"
     format="millions"
   >
-  </dxo-tooltip>
+  </dxo-pie-chart-tooltip>
 </dx-pie-chart>
diff --git a/apps/demos/Demos/Charts/DoughnutSelection/Angular/app/app.component.html b/apps/demos/Demos/Charts/DoughnutSelection/Angular/app/app.component.html
index 796b69e6bdac..60b9ea6f6e4b 100644
--- a/apps/demos/Demos/Charts/DoughnutSelection/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/DoughnutSelection/Angular/app/app.component.html
@@ -6,13 +6,13 @@
   [dataSource]="olympicMedals"
   (onPointClick)="pointClickHandler($event)"
 >
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxo-legend
+  <dxo-pie-chart-export [enabled]="true"></dxo-pie-chart-export>
+  <dxo-pie-chart-legend
     [margin]="0"
     horizontalAlignment="right"
     verticalAlignment="top"
-  ></dxo-legend>
-  <dxi-series argumentField="country" valueField="medals">
-    <dxo-hover-style color="#ffd700"></dxo-hover-style>
-  </dxi-series>
+  ></dxo-pie-chart-legend>
+  <dxi-pie-chart-series argumentField="country" valueField="medals">
+    <dxo-pie-chart-hover-style color="#ffd700"></dxo-pie-chart-hover-style>
+  </dxi-pie-chart-series>
 </dx-pie-chart>
diff --git a/apps/demos/Demos/Charts/DoughnutWithTopNSeries/Angular/app/app.component.html b/apps/demos/Demos/Charts/DoughnutWithTopNSeries/Angular/app/app.component.html
index 1d6dfb1aa281..d56774f18015 100644
--- a/apps/demos/Demos/Charts/DoughnutWithTopNSeries/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/DoughnutWithTopNSeries/Angular/app/app.component.html
@@ -5,22 +5,25 @@
   palette="Soft Pastel"
   [dataSource]="internetLanguages"
 >
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxo-legend
+  <dxo-pie-chart-export [enabled]="true"></dxo-pie-chart-export>
+  <dxo-pie-chart-legend
     horizontalAlignment="center"
     verticalAlignment="bottom"
-  ></dxo-legend>
-  <dxi-series argumentField="language" valueField="percent">
-    <dxo-small-values-grouping
+  ></dxo-pie-chart-legend>
+  <dxi-pie-chart-series argumentField="language" valueField="percent">
+    <dxo-pie-chart-small-values-grouping
       mode="topN"
       [topCount]="3"
-    ></dxo-small-values-grouping>
-    <dxo-label
+    ></dxo-pie-chart-small-values-grouping>
+    <dxo-pie-chart-label
       [visible]="true"
       format="fixedPoint"
       [customizeText]="customizeLabel"
     >
-      <dxo-connector [visible]="true" [width]="1"></dxo-connector>
-    </dxo-label>
-  </dxi-series>
+      <dxo-pie-chart-connector
+        [visible]="true"
+        [width]="1"
+      ></dxo-pie-chart-connector>
+    </dxo-pie-chart-label>
+  </dxi-pie-chart-series>
 </dx-pie-chart>
diff --git a/apps/demos/Demos/Charts/DynamicSeries/Angular/app/app.component.html b/apps/demos/Demos/Charts/DynamicSeries/Angular/app/app.component.html
index 205b1c5168cf..39ef43b0048f 100644
--- a/apps/demos/Demos/Charts/DynamicSeries/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/DynamicSeries/Angular/app/app.component.html
@@ -1,16 +1,19 @@
 <dx-chart id="chart" [dataSource]="productionData" palette="violet">
-  <dxo-common-series-settings
+  <dxo-chart-common-series-settings
     argumentField="country"
     type="bar"
     valueField="oil"
   >
-  </dxo-common-series-settings>
-  <dxo-series-template nameField="year" [customizeSeries]="customizeSeries">
-  </dxo-series-template>
-  <dxo-title text="Oil Production">
-    <dxo-subtitle text="(in millions tonnes)"></dxo-subtitle>
-  </dxo-title>
-  <dxo-legend verticalAlignment="bottom" horizontalAlignment="center">
-  </dxo-legend>
-  <dxo-export [enabled]="true"></dxo-export>
+  </dxo-chart-common-series-settings>
+  <dxo-chart-series-template
+    nameField="year"
+    [customizeSeries]="customizeSeries"
+  >
+  </dxo-chart-series-template>
+  <dxo-chart-title text="Oil Production">
+    <dxo-chart-subtitle text="(in millions tonnes)"></dxo-chart-subtitle>
+  </dxo-chart-title>
+  <dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center">
+  </dxo-chart-legend>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/EqualSizePies/Angular/app/app.component.html b/apps/demos/Demos/Charts/EqualSizePies/Angular/app/app.component.html
index ceaf8c5083ca..51ef674eaec4 100644
--- a/apps/demos/Demos/Charts/EqualSizePies/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/EqualSizePies/Angular/app/app.component.html
@@ -7,15 +7,18 @@
     [dataSource]="options.dataSource"
     sizeGroup="piesGroup"
   >
-    <dxi-series argumentField="name" valueField="area">
-      <dxo-label [visible]="true" format="percent"></dxo-label>
-    </dxi-series>
-    <dxo-legend
+    <dxi-pie-chart-series argumentField="name" valueField="area">
+      <dxo-pie-chart-label
+        [visible]="true"
+        format="percent"
+      ></dxo-pie-chart-label>
+    </dxi-pie-chart-series>
+    <dxo-pie-chart-legend
       verticalAlignment="bottom"
       horizontalAlignment="center"
       itemTextPosition="right"
       [rowCount]="2"
     >
-    </dxo-legend>
+    </dxo-pie-chart-legend>
   </dx-pie-chart>
 </div>
diff --git a/apps/demos/Demos/Charts/ErrorBars/Angular/app/app.component.html b/apps/demos/Demos/Charts/ErrorBars/Angular/app/app.component.html
index 8f817dd914f5..e5c320f48ee8 100644
--- a/apps/demos/Demos/Charts/ErrorBars/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/ErrorBars/Angular/app/app.component.html
@@ -4,45 +4,45 @@
   [dataSource]="weatherData"
   title="Weather in Los Angeles, California"
 >
-  <dxi-series pane="top" valueField="avgT" name="Average Temperature, °C">
-    <dxo-value-error-bar
+  <dxi-chart-series pane="top" valueField="avgT" name="Average Temperature, °C">
+    <dxo-chart-value-error-bar
       lowValueField="avgLowT"
       highValueField="avgHighT"
       [lineWidth]="1"
       [opacity]="0.8"
     >
-    </dxo-value-error-bar>
-  </dxi-series>
-  <dxi-series
+    </dxo-chart-value-error-bar>
+  </dxi-chart-series>
+  <dxi-chart-series
     pane="bottom"
     valueField="avgH"
     type="bar"
     name="Average Humidity, %"
   >
-    <dxo-value-error-bar type="fixed" [value]="3" [lineWidth]="1">
-    </dxo-value-error-bar>
-  </dxi-series>
-  <dxo-common-series-settings
+    <dxo-chart-value-error-bar type="fixed" [value]="3" [lineWidth]="1">
+    </dxo-chart-value-error-bar>
+  </dxi-chart-series>
+  <dxo-chart-common-series-settings
     argumentField="month"
-  ></dxo-common-series-settings>
-  <dxi-pane name="top"></dxi-pane>
-  <dxi-pane name="bottom"></dxi-pane>
-  <dxo-argument-axis>
-    <dxo-label displayMode="stagger"></dxo-label>
-  </dxo-argument-axis>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxi-value-axis pane="top">
-    <dxo-grid [visible]="true"></dxo-grid>
-    <dxo-title text="Temperature, °C"></dxo-title>
-  </dxi-value-axis>
-  <dxi-value-axis [tickInterval]="50" pane="bottom">
-    <dxo-grid [visible]="true"></dxo-grid>
-    <dxo-title text="Humidity, %"></dxo-title>
-  </dxi-value-axis>
-  <dxo-tooltip
+  ></dxo-chart-common-series-settings>
+  <dxi-chart-pane name="top"></dxi-chart-pane>
+  <dxi-chart-pane name="bottom"></dxi-chart-pane>
+  <dxo-chart-argument-axis>
+    <dxo-chart-label displayMode="stagger"></dxo-chart-label>
+  </dxo-chart-argument-axis>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
+  <dxi-chart-value-axis pane="top">
+    <dxo-chart-grid [visible]="true"></dxo-chart-grid>
+    <dxo-chart-title text="Temperature, °C"></dxo-chart-title>
+  </dxi-chart-value-axis>
+  <dxi-chart-value-axis [tickInterval]="50" pane="bottom">
+    <dxo-chart-grid [visible]="true"></dxo-chart-grid>
+    <dxo-chart-title text="Humidity, %"></dxo-chart-title>
+  </dxi-chart-value-axis>
+  <dxo-chart-tooltip
     [enabled]="true"
     [customizeTooltip]="customizeTooltip"
-  ></dxo-tooltip>
-  <dxo-legend verticalAlignment="bottom" horizontalAlignment="center">
-  </dxo-legend>
+  ></dxo-chart-tooltip>
+  <dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center">
+  </dxo-chart-legend>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/ExportAndPrintingAPI/Angular/app/app.component.html b/apps/demos/Demos/Charts/ExportAndPrintingAPI/Angular/app/app.component.html
index 1cdb0d45da30..64f1b3e041fd 100644
--- a/apps/demos/Demos/Charts/ExportAndPrintingAPI/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/ExportAndPrintingAPI/Angular/app/app.component.html
@@ -1,20 +1,20 @@
 <dx-chart id="chart" [dataSource]="mountains" title="The Highest Mountains">
-  <dxi-series
+  <dxi-chart-series
     argumentField="name"
     valueField="height"
     type="bar"
     color="#E55253"
   >
-  </dxi-series>
-  <dxo-argument-axis [visible]="true"></dxo-argument-axis>
-  <dxi-value-axis [visualRange]="{ startValue: 8000 }">
-    <dxo-label [customizeText]="customizeLabel"></dxo-label>
-  </dxi-value-axis>
-  <dxo-tooltip
+  </dxi-chart-series>
+  <dxo-chart-argument-axis [visible]="true"></dxo-chart-argument-axis>
+  <dxi-chart-value-axis [visualRange]="{ startValue: 8000 }">
+    <dxo-chart-label [customizeText]="customizeLabel"></dxo-chart-label>
+  </dxi-chart-value-axis>
+  <dxo-chart-tooltip
     [enabled]="true"
     [customizeTooltip]="customizeTooltip"
-  ></dxo-tooltip>
-  <dxo-legend [visible]="false"></dxo-legend>
+  ></dxo-chart-tooltip>
+  <dxo-chart-legend [visible]="false"></dxo-chart-legend>
 </dx-chart>
 <div id="buttonGroup">
   <dx-button icon="print" text="Print" (onClick)="print()"> </dx-button>
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.html b/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.html
index 28e13eeed1ca..4d669c49873f 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.html
@@ -45,22 +45,22 @@
     </svg>
   </div>
   <dx-chart id="chart" [dataSource]="oilProductionData" palette="Violet">
-    <dxi-series valueField="year1990" name="1990"></dxi-series>
-    <dxi-series valueField="year2000" name="2000"></dxi-series>
-    <dxi-series valueField="year2010" name="2010"></dxi-series>
-    <dxi-series valueField="year2016" name="2016"></dxi-series>
-    <dxi-series valueField="year2017" name="2017"></dxi-series>
-    <dxo-common-series-settings
+    <dxi-chart-series valueField="year1990" name="1990"></dxi-chart-series>
+    <dxi-chart-series valueField="year2000" name="2000"></dxi-chart-series>
+    <dxi-chart-series valueField="year2010" name="2010"></dxi-chart-series>
+    <dxi-chart-series valueField="year2016" name="2016"></dxi-chart-series>
+    <dxi-chart-series valueField="year2017" name="2017"></dxi-chart-series>
+    <dxo-chart-common-series-settings
       argumentField="state"
       type="bar"
       [barPadding]="0.3"
     >
-    </dxo-common-series-settings>
-    <dxo-legend verticalAlignment="bottom" horizontalAlignment="center">
-    </dxo-legend>
-    <dxo-title text="Oil Production">
-      <dxo-subtitle text="(in millions tonnes)"></dxo-subtitle>
-    </dxo-title>
+    </dxo-chart-common-series-settings>
+    <dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center">
+    </dxo-chart-legend>
+    <dxo-chart-title text="Oil Production">
+      <dxo-chart-subtitle text="(in millions tonnes)"></dxo-chart-subtitle>
+    </dxo-chart-title>
   </dx-chart>
 </div>
 
diff --git a/apps/demos/Demos/Charts/ExportSeveralCharts/Angular/app/app.component.html b/apps/demos/Demos/Charts/ExportSeveralCharts/Angular/app/app.component.html
index 47d98dd487b5..46eb2cafde7f 100644
--- a/apps/demos/Demos/Charts/ExportSeveralCharts/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/ExportSeveralCharts/Angular/app/app.component.html
@@ -5,15 +5,15 @@
     title="Olympic Gold Medals in 2008"
     [rotated]="true"
   >
-    <dxi-series
+    <dxi-chart-series
       color="#f3c40b"
       type="bar"
       argumentField="country"
       valueField="medals"
     >
-      <dxo-label [visible]="true"></dxo-label>
-    </dxi-series>
-    <dxo-legend [visible]="false"></dxo-legend>
+      <dxo-chart-label [visible]="true"></dxo-chart-label>
+    </dxi-chart-series>
+    <dxo-chart-legend [visible]="false"></dxo-chart-legend>
   </dx-chart>
 
   <dx-pie-chart
@@ -22,11 +22,11 @@
     [title]="title"
     palette="Harmony Light"
   >
-    <dxi-series argumentField="country" valueField="medals">
-      <dxo-label [visible]="true">
-        <dxo-connector [visible]="true"></dxo-connector>
-      </dxo-label>
-    </dxi-series>
+    <dxi-pie-chart-series argumentField="country" valueField="medals">
+      <dxo-pie-chart-label [visible]="true">
+        <dxo-pie-chart-connector [visible]="true"></dxo-pie-chart-connector>
+      </dxo-pie-chart-label>
+    </dxi-pie-chart-series>
   </dx-pie-chart>
 </div>
 
diff --git a/apps/demos/Demos/Charts/FullStackedBar/Angular/app/app.component.html b/apps/demos/Demos/Charts/FullStackedBar/Angular/app/app.component.html
index 0ca9bfa45df8..2b3370579308 100644
--- a/apps/demos/Demos/Charts/FullStackedBar/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/FullStackedBar/Angular/app/app.component.html
@@ -1,21 +1,26 @@
 <dx-chart id="chart" [dataSource]="countriesInfo">
-  <dxi-series valueField="hydro" name="Hydro-electric"></dxi-series>
-  <dxi-series valueField="oil" name="Oil"></dxi-series>
-  <dxi-series valueField="gas" name="Natural gas"></dxi-series>
-  <dxi-series valueField="coal" name="Coal"></dxi-series>
-  <dxi-series valueField="nuclear" name="Nuclear"></dxi-series>
-  <dxo-common-series-settings argumentField="country" type="fullStackedBar">
-  </dxo-common-series-settings>
-  <dxo-legend
+  <dxi-chart-series valueField="hydro" name="Hydro-electric"></dxi-chart-series>
+  <dxi-chart-series valueField="oil" name="Oil"></dxi-chart-series>
+  <dxi-chart-series valueField="gas" name="Natural gas"></dxi-chart-series>
+  <dxi-chart-series valueField="coal" name="Coal"></dxi-chart-series>
+  <dxi-chart-series valueField="nuclear" name="Nuclear"></dxi-chart-series>
+  <dxo-chart-common-series-settings
+    argumentField="country"
+    type="fullStackedBar"
+  >
+  </dxo-chart-common-series-settings>
+  <dxo-chart-legend
     verticalAlignment="top"
     horizontalAlignment="center"
     itemTextPosition="right"
   >
-  </dxo-legend>
-  <dxo-title text="Energy Consumption in 2004">
-    <dxo-subtitle text="(Millions of Tons, Oil Equivalent)"></dxo-subtitle>
-  </dxo-title>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxo-tooltip [enabled]="true" [customizeTooltip]="customizeTooltip">
-  </dxo-tooltip>
+  </dxo-chart-legend>
+  <dxo-chart-title text="Energy Consumption in 2004">
+    <dxo-chart-subtitle
+      text="(Millions of Tons, Oil Equivalent)"
+    ></dxo-chart-subtitle>
+  </dxo-chart-title>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
+  <dxo-chart-tooltip [enabled]="true" [customizeTooltip]="customizeTooltip">
+  </dxo-chart-tooltip>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/FunnelChart/Angular/app/app.component.html b/apps/demos/Demos/Charts/FunnelChart/Angular/app/app.component.html
index c7ca11bf9262..b5a03dddd357 100644
--- a/apps/demos/Demos/Charts/FunnelChart/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/FunnelChart/Angular/app/app.component.html
@@ -5,18 +5,19 @@
   valueField="value"
   palette="Soft Pastel"
 >
-  <dxo-title text="Website Conversions">
-    <dxo-margin [bottom]="30"></dxo-margin>
-  </dxo-title>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxo-tooltip [enabled]="true" format="fixedPoint"> </dxo-tooltip>
-  <dxo-item>
-    <dxo-border [visible]="true"> </dxo-border>
-  </dxo-item>
-  <dxo-label
+  <dxo-funnel-title text="Website Conversions">
+    <dxo-funnel-margin [bottom]="30"></dxo-funnel-margin>
+  </dxo-funnel-title>
+  <dxo-funnel-export [enabled]="true"></dxo-funnel-export>
+  <dxo-funnel-tooltip [enabled]="true" format="fixedPoint">
+  </dxo-funnel-tooltip>
+  <dxo-funnel-item>
+    <dxo-funnel-border [visible]="true"> </dxo-funnel-border>
+  </dxo-funnel-item>
+  <dxo-funnel-label
     [visible]="true"
     position="inside"
     backgroundColor="none"
     [customizeText]="customizeText"
-  ></dxo-label>
+  ></dxo-funnel-label>
 </dx-funnel>
diff --git a/apps/demos/Demos/Charts/HoverMode/Angular/app/app.component.html b/apps/demos/Demos/Charts/HoverMode/Angular/app/app.component.html
index 275b3e0d2881..11c32c6d4eee 100644
--- a/apps/demos/Demos/Charts/HoverMode/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/HoverMode/Angular/app/app.component.html
@@ -4,21 +4,21 @@
   [stickyHovering]="false"
   title="Great Lakes Gross State Product"
 >
-  <dxi-series valueField="year2004" name="2004"></dxi-series>
-  <dxi-series valueField="year2001" name="2001"></dxi-series>
-  <dxi-series valueField="year1998" name="1998"></dxi-series>
-  <dxo-common-series-settings
+  <dxi-chart-series valueField="year2004" name="2004"></dxi-chart-series>
+  <dxi-chart-series valueField="year2001" name="2001"></dxi-chart-series>
+  <dxi-chart-series valueField="year1998" name="1998"></dxi-chart-series>
+  <dxo-chart-common-series-settings
     argumentField="state"
     type="spline"
     hoverMode="includePoints"
   >
-    <dxo-point hoverMode="allArgumentPoints"></dxo-point>
-  </dxo-common-series-settings>
-  <dxo-legend
+    <dxo-chart-point hoverMode="allArgumentPoints"></dxo-chart-point>
+  </dxo-chart-common-series-settings>
+  <dxo-chart-legend
     verticalAlignment="bottom"
     horizontalAlignment="center"
     hoverMode="excludePoints"
   >
-  </dxo-legend>
-  <dxo-export [enabled]="true"></dxo-export>
+  </dxo-chart-legend>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/InvertedChart/Angular/app/app.component.html b/apps/demos/Demos/Charts/InvertedChart/Angular/app/app.component.html
index eba185fe3dc8..be10d3c00100 100644
--- a/apps/demos/Demos/Charts/InvertedChart/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/InvertedChart/Angular/app/app.component.html
@@ -3,10 +3,14 @@
   title="Inverted Rose in Polar Coordinates"
   [dataSource]="coordinates"
 >
-  <dxi-series type="area" name="Function"></dxi-series>
-  <dxo-argument-axis [inverted]="true" [startAngle]="90" [tickInterval]="30">
-  </dxo-argument-axis>
-  <dxo-value-axis [inverted]="true"></dxo-value-axis>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxo-legend [visible]="false"></dxo-legend>
+  <dxi-polar-chart-series type="area" name="Function"></dxi-polar-chart-series>
+  <dxo-polar-chart-argument-axis
+    [inverted]="true"
+    [startAngle]="90"
+    [tickInterval]="30"
+  >
+  </dxo-polar-chart-argument-axis>
+  <dxo-polar-chart-value-axis [inverted]="true"></dxo-polar-chart-value-axis>
+  <dxo-polar-chart-export [enabled]="true"></dxo-polar-chart-export>
+  <dxo-polar-chart-legend [visible]="false"></dxo-polar-chart-legend>
 </dx-polar-chart>
diff --git a/apps/demos/Demos/Charts/LabelCustomization/Angular/app/app.component.html b/apps/demos/Demos/Charts/LabelCustomization/Angular/app/app.component.html
index ad57937dfc3c..fd1c65d0d23b 100644
--- a/apps/demos/Demos/Charts/LabelCustomization/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/LabelCustomization/Angular/app/app.component.html
@@ -4,22 +4,25 @@
   palette="bright"
   [dataSource]="olympicMedals"
 >
-  <dxo-legend
+  <dxo-pie-chart-legend
     orientation="horizontal"
     itemTextPosition="right"
     horizontalAlignment="center"
     verticalAlignment="bottom"
     [columnCount]="4"
-  ></dxo-legend>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxi-series argumentField="country" valueField="medals">
-    <dxo-label
+  ></dxo-pie-chart-legend>
+  <dxo-pie-chart-export [enabled]="true"></dxo-pie-chart-export>
+  <dxi-pie-chart-series argumentField="country" valueField="medals">
+    <dxo-pie-chart-label
       [visible]="true"
       position="columns"
       [customizeText]="customizeLabel"
     >
-      <dxo-font [size]="16"></dxo-font>
-      <dxo-connector [visible]="true" [width]="0.5"></dxo-connector>
-    </dxo-label>
-  </dxi-series>
+      <dxo-pie-chart-font [size]="16"></dxo-pie-chart-font>
+      <dxo-pie-chart-connector
+        [visible]="true"
+        [width]="0.5"
+      ></dxo-pie-chart-connector>
+    </dxo-pie-chart-label>
+  </dxi-pie-chart-series>
 </dx-pie-chart>
diff --git a/apps/demos/Demos/Charts/LegendMarkersCustomization/Angular/app/app.component.html b/apps/demos/Demos/Charts/LegendMarkersCustomization/Angular/app/app.component.html
index d50bdd700cf9..4d24434531e7 100644
--- a/apps/demos/Demos/Charts/LegendMarkersCustomization/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/LegendMarkersCustomization/Angular/app/app.component.html
@@ -3,13 +3,14 @@
   [dataSource]="dataSource"
   (onLegendClick)="onLegendClick($event)"
 >
-  <dxo-title text="Noisy and Original Signals"> </dxo-title>
-  <dxo-common-series-settings argumentField="argument">
-    <dxo-point [visible]="false"></dxo-point>
-  </dxo-common-series-settings>
-  <dxi-series valueField="originalValue" name="Original Signal"> </dxi-series>
-  <dxi-series valueField="value" name="Noisy Signal"> </dxi-series>
-  <dxo-legend
+  <dxo-chart-title text="Noisy and Original Signals"> </dxo-chart-title>
+  <dxo-chart-common-series-settings argumentField="argument">
+    <dxo-chart-point [visible]="false"></dxo-chart-point>
+  </dxo-chart-common-series-settings>
+  <dxi-chart-series valueField="originalValue" name="Original Signal">
+  </dxi-chart-series>
+  <dxi-chart-series valueField="value" name="Noisy Signal"> </dxi-chart-series>
+  <dxo-chart-legend
     verticalAlignment="bottom"
     horizontalAlignment="center"
     markerTemplate="markerTemplate"
@@ -28,5 +29,5 @@
       ></rect>
       <path attr.d="{{ getMarkerPath(item.series.name) }}"></path>
     </svg>
-  </dxo-legend>
+  </dxo-chart-legend>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/Line/Angular/app/app.component.html b/apps/demos/Demos/Charts/Line/Angular/app/app.component.html
index 6176c5ccdf62..ed856ebc0699 100644
--- a/apps/demos/Demos/Charts/Line/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/Line/Angular/app/app.component.html
@@ -1,35 +1,36 @@
 <div id="chart-demo">
   <dx-chart palette="Violet" [dataSource]="countriesInfo">
-    <dxi-series
+    <dxi-chart-series
       *ngFor="let energy of energySources"
       [valueField]="energy.value"
       [name]="energy.name"
     >
-    </dxi-series>
-    <dxo-common-series-settings
+    </dxi-chart-series>
+    <dxo-chart-common-series-settings
       #seriesSettings
       argumentField="country"
       [type]="types[0]"
     >
-    </dxo-common-series-settings>
-    <dxo-margin [bottom]="20"></dxo-margin>
-    <dxo-argument-axis
+    </dxo-chart-common-series-settings>
+    <dxo-chart-margin [bottom]="20"></dxo-chart-margin>
+    <dxo-chart-argument-axis
       [valueMarginsEnabled]="false"
       discreteAxisDivisionMode="crossLabels"
     >
-      <dxo-grid [visible]="true"></dxo-grid>
-    </dxo-argument-axis>
-    <dxo-legend
+      <dxo-chart-grid [visible]="true"></dxo-chart-grid>
+    </dxo-chart-argument-axis>
+    <dxo-chart-legend
       verticalAlignment="bottom"
       horizontalAlignment="center"
       itemTextPosition="bottom"
     >
-    </dxo-legend>
-    <dxo-title text="Energy Consumption in 2004">
-      <dxo-subtitle text="(Millions of Tons, Oil Equivalent)"> </dxo-subtitle>
-    </dxo-title>
-    <dxo-export [enabled]="true"></dxo-export>
-    <dxo-tooltip [enabled]="true"></dxo-tooltip>
+    </dxo-chart-legend>
+    <dxo-chart-title text="Energy Consumption in 2004">
+      <dxo-chart-subtitle text="(Millions of Tons, Oil Equivalent)">
+      </dxo-chart-subtitle>
+    </dxo-chart-title>
+    <dxo-chart-export [enabled]="true"></dxo-chart-export>
+    <dxo-chart-tooltip [enabled]="true"></dxo-chart-tooltip>
   </dx-chart>
   <div class="options">
     <div class="caption">Options</div>
diff --git a/apps/demos/Demos/Charts/LoadDataOnDemand/Angular/app/app.component.html b/apps/demos/Demos/Charts/LoadDataOnDemand/Angular/app/app.component.html
index dbf1909a52e9..b121d525f275 100644
--- a/apps/demos/Demos/Charts/LoadDataOnDemand/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/LoadDataOnDemand/Angular/app/app.component.html
@@ -4,22 +4,22 @@
   [dataSource]="chartDataSource"
   [zoomAndPan]="{ argumentAxis: 'pan' }"
 >
-  <dxo-scroll-bar [visible]="true"></dxo-scroll-bar>
-  <dxo-argument-axis
+  <dxo-chart-scroll-bar [visible]="true"></dxo-chart-scroll-bar>
+  <dxo-chart-argument-axis
     argumentType="datetime"
     [(visualRange)]="currentVisualRange"
     [wholeRange]="bounds"
   >
-  </dxo-argument-axis>
-  <dxi-value-axis name="temperature" [allowDecimals]="false">
-    <dxo-title text="Temperature, &deg;C">
-      <dxo-font color="#ff950c"></dxo-font>
-    </dxo-title>
-    <dxo-label>
-      <dxo-font color="#ff950c"></dxo-font>
-    </dxo-label>
-  </dxi-value-axis>
-  <dxi-series
+  </dxo-chart-argument-axis>
+  <dxi-chart-value-axis name="temperature" [allowDecimals]="false">
+    <dxo-chart-title text="Temperature, &deg;C">
+      <dxo-chart-font color="#ff950c"></dxo-chart-font>
+    </dxo-chart-title>
+    <dxo-chart-label>
+      <dxo-chart-font color="#ff950c"></dxo-chart-font>
+    </dxo-chart-label>
+  </dxi-chart-value-axis>
+  <dxi-chart-series
     color="#ff950c"
     type="rangeArea"
     argumentField="date"
@@ -27,10 +27,10 @@
     rangeValue2Field="maxTemp"
     name="Temperature range"
   >
-  </dxi-series>
-  <dxo-animation [enabled]="false"></dxo-animation>
-  <dxo-loading-indicator backgroundColor="none">
-    <dxo-font [size]="14"></dxo-font>
-  </dxo-loading-indicator>
-  <dxo-legend [visible]="false"></dxo-legend>
+  </dxi-chart-series>
+  <dxo-chart-animation [enabled]="false"></dxo-chart-animation>
+  <dxo-chart-loading-indicator backgroundColor="none">
+    <dxo-chart-font [size]="14"></dxo-chart-font>
+  </dxo-chart-loading-indicator>
+  <dxo-chart-legend [visible]="false"></dxo-chart-legend>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/LogarithmicAxis/Angular/app/app.component.html b/apps/demos/Demos/Charts/LogarithmicAxis/Angular/app/app.component.html
index 49202fe1ca9c..6d70c1aa0ac2 100644
--- a/apps/demos/Demos/Charts/LogarithmicAxis/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/LogarithmicAxis/Angular/app/app.component.html
@@ -4,19 +4,20 @@
   title="Relative Masses of the Heaviest Solar System Objects"
   [customizePoint]="customizePoint"
 >
-  <dxi-series type="scatter" valueField="mass" argumentField="name">
-    <dxo-point [size]="20"></dxo-point>
-  </dxi-series>
-  <dxo-common-pane-settings>
-    <dxo-border [visible]="true"></dxo-border>
-  </dxo-common-pane-settings>
-  <dxo-argument-axis>
-    <dxo-grid [visible]="true"></dxo-grid>
-    <dxo-label rotationAngle="20" overlappingBehavior="rotate"> </dxo-label>
-  </dxo-argument-axis>
-  <dxi-value-axis type="logarithmic" title="Mass Relative to the Earth">
-  </dxi-value-axis>
-  <dxo-tooltip [enabled]="true"></dxo-tooltip>
-  <dxo-legend [visible]="false"></dxo-legend>
-  <dxo-export [enabled]="true"></dxo-export>
+  <dxi-chart-series type="scatter" valueField="mass" argumentField="name">
+    <dxo-chart-point [size]="20"></dxo-chart-point>
+  </dxi-chart-series>
+  <dxo-chart-common-pane-settings>
+    <dxo-chart-border [visible]="true"></dxo-chart-border>
+  </dxo-chart-common-pane-settings>
+  <dxo-chart-argument-axis>
+    <dxo-chart-grid [visible]="true"></dxo-chart-grid>
+    <dxo-chart-label rotationAngle="20" overlappingBehavior="rotate">
+    </dxo-chart-label>
+  </dxo-chart-argument-axis>
+  <dxi-chart-value-axis type="logarithmic" title="Mass Relative to the Earth">
+  </dxi-chart-value-axis>
+  <dxo-chart-tooltip [enabled]="true"></dxo-chart-tooltip>
+  <dxo-chart-legend [visible]="false"></dxo-chart-legend>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/LogarithmicVsLinearAxes/Angular/app/app.component.html b/apps/demos/Demos/Charts/LogarithmicVsLinearAxes/Angular/app/app.component.html
index e850eb54f386..14f46c7c4985 100644
--- a/apps/demos/Demos/Charts/LogarithmicVsLinearAxes/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/LogarithmicVsLinearAxes/Angular/app/app.component.html
@@ -1,22 +1,26 @@
 <dx-chart id="chart" title="Damped Sine Wave" [dataSource]="dataSource">
-  <dxi-pane name="top"></dxi-pane>
-  <dxi-pane name="bottom"></dxi-pane>
-  <dxi-series pane="top"></dxi-series>
-  <dxi-series pane="bottom"></dxi-series>
-  <dxo-common-axis-settings [endOnTick]="false"> </dxo-common-axis-settings>
-  <dxi-value-axis
+  <dxi-chart-pane name="top"></dxi-chart-pane>
+  <dxi-chart-pane name="bottom"></dxi-chart-pane>
+  <dxi-chart-series pane="top"></dxi-chart-series>
+  <dxi-chart-series pane="bottom"></dxi-chart-series>
+  <dxo-chart-common-axis-settings [endOnTick]="false">
+  </dxo-chart-common-axis-settings>
+  <dxi-chart-value-axis
     title="Logarithmic Axis"
     type="logarithmic"
     pane="top"
     [linearThreshold]="-3"
-  ></dxi-value-axis>
-  <dxi-value-axis title="Linear Axis" pane="bottom"></dxi-value-axis>
-  <dxo-tooltip [enabled]="true" format="exponential"></dxo-tooltip>
-  <dxo-crosshair [enabled]="true">
-    <dxo-label [visible]="true">
-      <dxo-format type="fixedPoint" [precision]="2"></dxo-format>
-    </dxo-label>
-    <dxo-horizontal-line [visible]="false"> </dxo-horizontal-line>
-  </dxo-crosshair>
-  <dxo-legend [visible]="false"> </dxo-legend>
+  ></dxi-chart-value-axis>
+  <dxi-chart-value-axis
+    title="Linear Axis"
+    pane="bottom"
+  ></dxi-chart-value-axis>
+  <dxo-chart-tooltip [enabled]="true" format="exponential"></dxo-chart-tooltip>
+  <dxo-chart-crosshair [enabled]="true">
+    <dxo-chart-label [visible]="true">
+      <dxo-chart-format type="fixedPoint" [precision]="2"></dxo-chart-format>
+    </dxo-chart-label>
+    <dxo-chart-horizontal-line [visible]="false"> </dxo-chart-horizontal-line>
+  </dxo-chart-crosshair>
+  <dxo-chart-legend [visible]="false"> </dxo-chart-legend>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/MultipleAxes/Angular/app/app.component.html b/apps/demos/Demos/Charts/MultipleAxes/Angular/app/app.component.html
index 3689b2539c26..1514749d6717 100644
--- a/apps/demos/Demos/Charts/MultipleAxes/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/MultipleAxes/Angular/app/app.component.html
@@ -4,40 +4,43 @@
   [dataSource]="populationData"
   title="Evolution of Population by Continent"
 >
-  <dxi-series valueField="africa" name="Africa"></dxi-series>
-  <dxi-series valueField="asia" name="Asia"></dxi-series>
-  <dxi-series valueField="europe" name="Europe"></dxi-series>
-  <dxi-series
+  <dxi-chart-series valueField="africa" name="Africa"></dxi-chart-series>
+  <dxi-chart-series valueField="asia" name="Asia"></dxi-chart-series>
+  <dxi-chart-series valueField="europe" name="Europe"></dxi-chart-series>
+  <dxi-chart-series
     valueField="latinamerica"
     name="Latin America & Caribbean"
-  ></dxi-series>
-  <dxi-series valueField="northamerica" name="Northern America"></dxi-series>
-  <dxi-series valueField="oceania" name="Oceania"></dxi-series>
-  <dxi-series
+  ></dxi-chart-series>
+  <dxi-chart-series
+    valueField="northamerica"
+    name="Northern America"
+  ></dxi-chart-series>
+  <dxi-chart-series valueField="oceania" name="Oceania"></dxi-chart-series>
+  <dxi-chart-series
     axis="total"
     type="spline"
     valueField="total"
     name="Total"
     color="#008fd8"
   >
-  </dxi-series>
-  <dxo-common-series-settings argumentField="year" type="fullstackedbar">
-  </dxo-common-series-settings>
-  <dxi-value-axis>
-    <dxo-grid [visible]="true"></dxo-grid>
-  </dxi-value-axis>
-  <dxi-value-axis name="total" position="right">
-    <dxo-grid [visible]="true"></dxo-grid>
-    <dxo-title text="Total Population, billions"></dxo-title>
-  </dxi-value-axis>
-  <dxo-legend verticalAlignment="bottom" horizontalAlignment="center">
-  </dxo-legend>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxo-tooltip
+  </dxi-chart-series>
+  <dxo-chart-common-series-settings argumentField="year" type="fullstackedbar">
+  </dxo-chart-common-series-settings>
+  <dxi-chart-value-axis>
+    <dxo-chart-grid [visible]="true"></dxo-chart-grid>
+  </dxi-chart-value-axis>
+  <dxi-chart-value-axis name="total" position="right">
+    <dxo-chart-grid [visible]="true"></dxo-chart-grid>
+    <dxo-chart-title text="Total Population, billions"></dxo-chart-title>
+  </dxi-chart-value-axis>
+  <dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center">
+  </dxo-chart-legend>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
+  <dxo-chart-tooltip
     [enabled]="true"
     [shared]="true"
     [customizeTooltip]="customizeTooltip"
   >
-    <dxo-format type="largeNumber" [precision]="1"></dxo-format>
-  </dxo-tooltip>
+    <dxo-chart-format type="largeNumber" [precision]="1"></dxo-chart-format>
+  </dxo-chart-tooltip>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/MultiplePanes/Angular/app/app.component.html b/apps/demos/Demos/Charts/MultiplePanes/Angular/app/app.component.html
index 7c4674b610b1..58e0d31fa9a0 100644
--- a/apps/demos/Demos/Charts/MultiplePanes/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/MultiplePanes/Angular/app/app.component.html
@@ -4,7 +4,7 @@
   defaultPane="bottomPane"
   title="Weather in Glendale, CA"
 >
-  <dxi-series
+  <dxi-chart-series
     pane="topPane"
     color="#b0daff"
     type="rangeArea"
@@ -12,29 +12,39 @@
     rangeValue2Field="maxT"
     name="Monthly Temperature Ranges, °C"
   >
-  </dxi-series>
-  <dxi-series pane="topPane" valueField="avgT" name="Average Temperature, °C">
-    <dxo-label [visible]="true" [customizeText]="temperatureCustomizeText">
-    </dxo-label>
-  </dxi-series>
-  <dxi-series type="bar" valueField="prec" name="prec, mm">
-    <dxo-label [visible]="true" [customizeText]="precipitationCustomizeText">
-    </dxo-label>
-  </dxi-series>
-  <dxo-common-series-settings
+  </dxi-chart-series>
+  <dxi-chart-series
+    pane="topPane"
+    valueField="avgT"
+    name="Average Temperature, °C"
+  >
+    <dxo-chart-label
+      [visible]="true"
+      [customizeText]="temperatureCustomizeText"
+    >
+    </dxo-chart-label>
+  </dxi-chart-series>
+  <dxi-chart-series type="bar" valueField="prec" name="prec, mm">
+    <dxo-chart-label
+      [visible]="true"
+      [customizeText]="precipitationCustomizeText"
+    >
+    </dxo-chart-label>
+  </dxi-chart-series>
+  <dxo-chart-common-series-settings
     argumentField="month"
-  ></dxo-common-series-settings>
-  <dxi-pane name="topPane"></dxi-pane>
-  <dxi-pane name="bottomPane"></dxi-pane>
-  <dxi-value-axis pane="bottomPane">
-    <dxo-grid [visible]="true"></dxo-grid>
-    <dxo-title text="Precipitation, mm"></dxo-title>
-  </dxi-value-axis>
-  <dxi-value-axis pane="topPane">
-    <dxo-grid [visible]="true"></dxo-grid>
-    <dxo-title text="Temperature, °C"></dxo-title>
-  </dxi-value-axis>
-  <dxo-legend verticalAlignment="bottom" horizontalAlignment="center">
-  </dxo-legend>
-  <dxo-export [enabled]="true"></dxo-export>
+  ></dxo-chart-common-series-settings>
+  <dxi-chart-pane name="topPane"></dxi-chart-pane>
+  <dxi-chart-pane name="bottomPane"></dxi-chart-pane>
+  <dxi-chart-value-axis pane="bottomPane">
+    <dxo-chart-grid [visible]="true"></dxo-chart-grid>
+    <dxo-chart-title text="Precipitation, mm"></dxo-chart-title>
+  </dxi-chart-value-axis>
+  <dxi-chart-value-axis pane="topPane">
+    <dxo-chart-grid [visible]="true"></dxo-chart-grid>
+    <dxo-chart-title text="Temperature, °C"></dxo-chart-title>
+  </dxi-chart-value-axis>
+  <dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center">
+  </dxo-chart-legend>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/MultiplePointSelection/Angular/app/app.component.html b/apps/demos/Demos/Charts/MultiplePointSelection/Angular/app/app.component.html
index eea821d11ef0..be3f8a3837b2 100644
--- a/apps/demos/Demos/Charts/MultiplePointSelection/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/MultiplePointSelection/Angular/app/app.component.html
@@ -6,23 +6,27 @@
   title="Olympic Medals in 2008"
   (onPointClick)="pointClick($event)"
 >
-  <dxi-series valueField="gold" name="Gold Medals" color="#ffd700"></dxi-series>
-  <dxi-series
+  <dxi-chart-series
+    valueField="gold"
+    name="Gold Medals"
+    color="#ffd700"
+  ></dxi-chart-series>
+  <dxi-chart-series
     valueField="silver"
     name="Silver Medals"
     color="#c0c0c0"
-  ></dxi-series>
-  <dxi-series
+  ></dxi-chart-series>
+  <dxi-chart-series
     valueField="bronze"
     name="Bronze Medals"
     color="#cd7f32"
-  ></dxi-series>
-  <dxo-common-series-settings argumentField="country" type="stackedbar">
-    <dxo-selection-style>
-      <dxo-hatching direction="left"></dxo-hatching>
-    </dxo-selection-style>
-  </dxo-common-series-settings>
-  <dxo-legend verticalAlignment="bottom" horizontalAlignment="center">
-  </dxo-legend>
-  <dxo-export [enabled]="true"></dxo-export>
+  ></dxi-chart-series>
+  <dxo-chart-common-series-settings argumentField="country" type="stackedbar">
+    <dxo-chart-selection-style>
+      <dxo-chart-hatching direction="left"></dxo-chart-hatching>
+    </dxo-chart-selection-style>
+  </dxo-chart-common-series-settings>
+  <dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center">
+  </dxo-chart-legend>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/MultipleSeriesSelection/Angular/app/app.component.html b/apps/demos/Demos/Charts/MultipleSeriesSelection/Angular/app/app.component.html
index 2cc13cd1cbb5..48969676104b 100644
--- a/apps/demos/Demos/Charts/MultipleSeriesSelection/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/MultipleSeriesSelection/Angular/app/app.component.html
@@ -5,21 +5,33 @@
   title="Internet Explorer Statistics"
   (onSeriesClick)="seriesClick($event)"
 >
-  <dxi-series valueField="IE7" name="Internet Explorer 7"></dxi-series>
-  <dxi-series valueField="IE8" name="Internet Explorer 8"></dxi-series>
-  <dxi-series valueField="IE9" name="Internet Explorer 9"></dxi-series>
-  <dxi-series valueField="IE10" name="Internet Explorer 10"></dxi-series>
-  <dxo-common-series-settings argumentField="year" type="stackedarea">
-  </dxo-common-series-settings>
-  <dxo-common-axis-settings [valueMarginsEnabled]="false">
-  </dxo-common-axis-settings>
-  <dxo-argument-axis type="discrete"></dxo-argument-axis>
-  <dxi-value-axis>
-    <dxo-label>
-      <dxo-format type="percent"> </dxo-format>
-    </dxo-label>
-  </dxi-value-axis>
-  <dxo-legend verticalAlignment="bottom" horizontalAlignment="center">
-  </dxo-legend>
-  <dxo-export [enabled]="true"></dxo-export>
+  <dxi-chart-series
+    valueField="IE7"
+    name="Internet Explorer 7"
+  ></dxi-chart-series>
+  <dxi-chart-series
+    valueField="IE8"
+    name="Internet Explorer 8"
+  ></dxi-chart-series>
+  <dxi-chart-series
+    valueField="IE9"
+    name="Internet Explorer 9"
+  ></dxi-chart-series>
+  <dxi-chart-series
+    valueField="IE10"
+    name="Internet Explorer 10"
+  ></dxi-chart-series>
+  <dxo-chart-common-series-settings argumentField="year" type="stackedarea">
+  </dxo-chart-common-series-settings>
+  <dxo-chart-common-axis-settings [valueMarginsEnabled]="false">
+  </dxo-chart-common-axis-settings>
+  <dxo-chart-argument-axis type="discrete"></dxo-chart-argument-axis>
+  <dxi-chart-value-axis>
+    <dxo-chart-label>
+      <dxo-chart-format type="percent"> </dxo-chart-format>
+    </dxo-chart-label>
+  </dxi-chart-value-axis>
+  <dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center">
+  </dxo-chart-legend>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/NullPointSupport/Angular/app/app.component.html b/apps/demos/Demos/Charts/NullPointSupport/Angular/app/app.component.html
index 50475cb9a5fe..cb44791bd303 100644
--- a/apps/demos/Demos/Charts/NullPointSupport/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/NullPointSupport/Angular/app/app.component.html
@@ -1,21 +1,25 @@
 <dx-chart id="chart" [dataSource]="medalsInfo" title="France Olympic Medals">
-  <dxi-series valueField="gold" name="Gold Medals" color="#ffd700"></dxi-series>
-  <dxi-series
+  <dxi-chart-series
+    valueField="gold"
+    name="Gold Medals"
+    color="#ffd700"
+  ></dxi-chart-series>
+  <dxi-chart-series
     valueField="silver"
     name="Silver Medals"
     color="#c0c0c0"
-  ></dxi-series>
-  <dxo-common-series-settings argumentField="year" type="steparea">
+  ></dxi-chart-series>
+  <dxo-chart-common-series-settings argumentField="year" type="steparea">
     <dxo-steparea>
-      <dxo-point [visible]="true"></dxo-point>
+      <dxo-chart-point [visible]="true"></dxo-chart-point>
     </dxo-steparea>
-  </dxo-common-series-settings>
-  <dxo-argument-axis>
-    <dxo-label>
-      <dxo-format type="decimal"></dxo-format>
-    </dxo-label>
-  </dxo-argument-axis>
-  <dxo-legend verticalAlignment="bottom" horizontalAlignment="center">
-  </dxo-legend>
-  <dxo-export [enabled]="true"></dxo-export>
+  </dxo-chart-common-series-settings>
+  <dxo-chart-argument-axis>
+    <dxo-chart-label>
+      <dxo-chart-format type="decimal"></dxo-chart-format>
+    </dxo-chart-label>
+  </dxo-chart-argument-axis>
+  <dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center">
+  </dxo-chart-legend>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/Overview/Angular/app/app.component.html b/apps/demos/Demos/Charts/Overview/Angular/app/app.component.html
index c01d1926d18c..c4722640dfae 100644
--- a/apps/demos/Demos/Charts/Overview/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/Overview/Angular/app/app.component.html
@@ -4,52 +4,52 @@
   title="Pizza Shop Complaints"
   palette="Harmony Light"
 >
-  <dxi-value-axis name="frequency" position="left" [tickInterval]="300">
-  </dxi-value-axis>
-  <dxi-value-axis
+  <dxi-chart-value-axis name="frequency" position="left" [tickInterval]="300">
+  </dxi-chart-value-axis>
+  <dxi-chart-value-axis
     name="percentage"
     position="right"
     [showZero]="true"
     [tickInterval]="20"
     [valueMarginsEnabled]="false"
   >
-    <dxo-label [customizeText]="customizeLabelText"></dxo-label>
-    <dxi-constant-line
+    <dxo-chart-label [customizeText]="customizeLabelText"></dxo-chart-label>
+    <dxi-chart-constant-line
       [value]="80"
       color="#fc3535"
       dashStyle="dash"
       [width]="2"
     >
-      <dxo-label [visible]="false"></dxo-label>
-    </dxi-constant-line>
-  </dxi-value-axis>
-  <dxo-argument-axis>
-    <dxo-label overlappingBehavior="stagger"></dxo-label>
-  </dxo-argument-axis>
-  <dxo-tooltip
+      <dxo-chart-label [visible]="false"></dxo-chart-label>
+    </dxi-chart-constant-line>
+  </dxi-chart-value-axis>
+  <dxo-chart-argument-axis>
+    <dxo-chart-label overlappingBehavior="stagger"></dxo-chart-label>
+  </dxo-chart-argument-axis>
+  <dxo-chart-tooltip
     [enabled]="true"
     [shared]="true"
     [customizeTooltip]="customizeTooltip"
   >
-  </dxo-tooltip>
-  <dxo-common-series-settings argumentField="complaint">
-  </dxo-common-series-settings>
-  <dxi-series
+  </dxo-chart-tooltip>
+  <dxo-chart-common-series-settings argumentField="complaint">
+  </dxo-chart-common-series-settings>
+  <dxi-chart-series
     type="bar"
     valueField="count"
     axis="frequency"
     name="Complaint frequency"
     color="#fac29a"
   >
-  </dxi-series>
-  <dxi-series
+  </dxi-chart-series>
+  <dxi-chart-series
     type="spline"
     valueField="cumulativePercent"
     axis="percentage"
     name="Cumulative percentage"
     color="#6b71c3"
   >
-  </dxi-series>
-  <dxo-legend verticalAlignment="top" horizontalAlignment="center">
-  </dxo-legend>
+  </dxi-chart-series>
+  <dxo-chart-legend verticalAlignment="top" horizontalAlignment="center">
+  </dxo-chart-legend>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/Palette/Angular/app/app.component.html b/apps/demos/Demos/Charts/Palette/Angular/app/app.component.html
index a9e74d25736c..07bd04f37c62 100644
--- a/apps/demos/Demos/Charts/Palette/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/Palette/Angular/app/app.component.html
@@ -5,9 +5,9 @@
     [dataSource]="data"
     [paletteExtensionMode]="paletteExtensionMode"
   >
-    <dxo-size [width]="500"></dxo-size>
-    <dxo-legend [visible]="false"></dxo-legend>
-    <dxi-series></dxi-series>
+    <dxo-pie-chart-size [width]="500"></dxo-pie-chart-size>
+    <dxo-pie-chart-legend [visible]="false"></dxo-pie-chart-legend>
+    <dxi-pie-chart-series></dxi-pie-chart-series>
   </dx-pie-chart>
 
   <div class="palette-container flex-block">
diff --git a/apps/demos/Demos/Charts/ParetoChart/Angular/app/app.component.html b/apps/demos/Demos/Charts/ParetoChart/Angular/app/app.component.html
index 2e47c1f2a889..ce287c5bbdb0 100644
--- a/apps/demos/Demos/Charts/ParetoChart/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/ParetoChart/Angular/app/app.component.html
@@ -30,33 +30,33 @@
     }
   ]"
 >
-  <dxo-argument-axis>
-    <dxo-label overlappingBehavior="stagger"></dxo-label>
-  </dxo-argument-axis>
-  <dxo-tooltip
+  <dxo-chart-argument-axis>
+    <dxo-chart-label overlappingBehavior="stagger"></dxo-chart-label>
+  </dxo-chart-argument-axis>
+  <dxo-chart-tooltip
     [enabled]="true"
     [shared]="true"
     [customizeTooltip]="customizeTooltip"
   >
-  </dxo-tooltip>
-  <dxo-common-series-settings argumentField="complaint">
-  </dxo-common-series-settings>
-  <dxi-series
+  </dxo-chart-tooltip>
+  <dxo-chart-common-series-settings argumentField="complaint">
+  </dxo-chart-common-series-settings>
+  <dxi-chart-series
     type="bar"
     valueField="count"
     axis="frequency"
     name="Complaint frequency"
     color="#fac29a"
   >
-  </dxi-series>
-  <dxi-series
+  </dxi-chart-series>
+  <dxi-chart-series
     type="spline"
     valueField="cumulativePercent"
     axis="percentage"
     name="Cumulative percentage"
     color="#6b71c3"
   >
-  </dxi-series>
-  <dxo-legend verticalAlignment="top" horizontalAlignment="center">
-  </dxo-legend>
+  </dxi-chart-series>
+  <dxo-chart-legend verticalAlignment="top" horizontalAlignment="center">
+  </dxo-chart-legend>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/PeriodicData/Angular/app/app.component.html b/apps/demos/Demos/Charts/PeriodicData/Angular/app/app.component.html
index 833e9f3af353..6fa0131c4c25 100644
--- a/apps/demos/Demos/Charts/PeriodicData/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/PeriodicData/Angular/app/app.component.html
@@ -3,14 +3,18 @@
   title="Archimedean Spiral"
   [dataSource]="coordinates"
 >
-  <dxi-series type="line" name="Function" [closed]="false"></dxi-series>
-  <dxo-argument-axis
+  <dxi-polar-chart-series
+    type="line"
+    name="Function"
+    [closed]="false"
+  ></dxi-polar-chart-series>
+  <dxo-polar-chart-argument-axis
     [inverted]="true"
     [startAngle]="90"
     [tickInterval]="45"
     [period]="360"
   >
-  </dxo-argument-axis>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxo-legend [visible]="false"></dxo-legend>
+  </dxo-polar-chart-argument-axis>
+  <dxo-polar-chart-export [enabled]="true"></dxo-polar-chart-export>
+  <dxo-polar-chart-legend [visible]="false"></dxo-polar-chart-legend>
 </dx-polar-chart>
diff --git a/apps/demos/Demos/Charts/Pie/Angular/app/app.component.html b/apps/demos/Demos/Charts/Pie/Angular/app/app.component.html
index 71e4b8a9af7c..deb7ec726727 100644
--- a/apps/demos/Demos/Charts/Pie/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/Pie/Angular/app/app.component.html
@@ -6,11 +6,14 @@
   (onPointClick)="pointClickHandler($event)"
   (onLegendClick)="legendClickHandler($event)"
 >
-  <dxi-series argumentField="country" valueField="area">
-    <dxo-label [visible]="true">
-      <dxo-connector [visible]="true" [width]="1"></dxo-connector>
-    </dxo-label>
-  </dxi-series>
-  <dxo-size [width]="500"></dxo-size>
-  <dxo-export [enabled]="true"></dxo-export>
+  <dxi-pie-chart-series argumentField="country" valueField="area">
+    <dxo-pie-chart-label [visible]="true">
+      <dxo-pie-chart-connector
+        [visible]="true"
+        [width]="1"
+      ></dxo-pie-chart-connector>
+    </dxo-pie-chart-label>
+  </dxi-pie-chart-series>
+  <dxo-pie-chart-size [width]="500"></dxo-pie-chart-size>
+  <dxo-pie-chart-export [enabled]="true"></dxo-pie-chart-export>
 </dx-pie-chart>
diff --git a/apps/demos/Demos/Charts/PieAnnotations/Angular/app/app.component.html b/apps/demos/Demos/Charts/PieAnnotations/Angular/app/app.component.html
index ae6a2d9127d7..4ecce5655de6 100644
--- a/apps/demos/Demos/Charts/PieAnnotations/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/PieAnnotations/Angular/app/app.component.html
@@ -1,15 +1,15 @@
 <dx-pie-chart id="pie" palette="Vintage" [dataSource]="champions">
-  <dxo-common-annotation-settings
+  <dxo-pie-chart-common-annotation-settings
     type="image"
     color="transparent"
     [paddingLeftRight]="0"
     [paddingTopBottom]="0"
     tooltipTemplate="tooltipTemplate"
   >
-    <dxo-image [height]="60" [width]="90"></dxo-image>
-    <dxo-border color="transparent"></dxo-border>
-  </dxo-common-annotation-settings>
-  <dxi-annotation
+    <dxo-pie-chart-image [height]="60" [width]="90"></dxo-pie-chart-image>
+    <dxo-pie-chart-border color="transparent"></dxo-pie-chart-border>
+  </dxo-pie-chart-common-annotation-settings>
+  <dxi-pie-chart-annotation
     *ngFor="let item of annotations"
     [argument]="item.country"
     [data]="item.data"
@@ -18,25 +18,28 @@
     [offsetY]="item.offsetY"
     [color]="item.color"
   >
-    <dxo-image [url]="item.image"></dxo-image>
-    <dxo-border [color]="item.borderColor"></dxo-border>
-    <dxo-shadow [opacity]="item.shadowOpacity"></dxo-shadow>
-  </dxi-annotation>
-  <dxi-series argumentField="country" valueField="gold">
-    <dxo-label
+    <dxo-pie-chart-image [url]="item.image"></dxo-pie-chart-image>
+    <dxo-pie-chart-border [color]="item.borderColor"></dxo-pie-chart-border>
+    <dxo-pie-chart-shadow [opacity]="item.shadowOpacity"></dxo-pie-chart-shadow>
+  </dxi-pie-chart-annotation>
+  <dxi-pie-chart-series argumentField="country" valueField="gold">
+    <dxo-pie-chart-label
       [visible]="true"
       position="inside"
       [radialOffset]="83"
       backgroundColor="transparent"
     >
-      <dxo-font [size]="16" [weight]="600"></dxo-font>
-    </dxo-label>
-  </dxi-series>
-  <dxo-tooltip [paddingLeftRight]="12" [paddingTopBottom]="10"></dxo-tooltip>
-  <dxo-legend [visible]="false"></dxo-legend>
-  <dxo-title
+      <dxo-pie-chart-font [size]="16" [weight]="600"></dxo-pie-chart-font>
+    </dxo-pie-chart-label>
+  </dxi-pie-chart-series>
+  <dxo-pie-chart-tooltip
+    [paddingLeftRight]="12"
+    [paddingTopBottom]="10"
+  ></dxo-pie-chart-tooltip>
+  <dxo-pie-chart-legend [visible]="false"></dxo-pie-chart-legend>
+  <dxo-pie-chart-title
     text="Ice Hockey World Championship Gold Medal Winners"
-  ></dxo-title>
+  ></dxo-pie-chart-title>
   <div *dxTemplate="let annotation of 'tooltipTemplate'" class="medal-tooltip">
     <div class="country-name"
       >{{ annotation.data.country }}
diff --git a/apps/demos/Demos/Charts/PieResolveLabelOverlap/Angular/app/app.component.html b/apps/demos/Demos/Charts/PieResolveLabelOverlap/Angular/app/app.component.html
index 31a95ea46921..76455563a81b 100644
--- a/apps/demos/Demos/Charts/PieResolveLabelOverlap/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/PieResolveLabelOverlap/Angular/app/app.component.html
@@ -6,12 +6,13 @@
     [dataSource]="olympicMedals"
     [resolveLabelOverlapping]="resolveOverlappingTypes[0]"
   >
-    <dxo-margin [bottom]="20"></dxo-margin>
-    <dxo-legend [visible]="false"></dxo-legend>
-    <dxo-export [enabled]="true"></dxo-export>
-    <dxi-series argumentField="country" valueField="medals">
-      <dxo-label [visible]="true" [customizeText]="customizeLabel"> </dxo-label>
-    </dxi-series>
+    <dxo-pie-chart-margin [bottom]="20"></dxo-pie-chart-margin>
+    <dxo-pie-chart-legend [visible]="false"></dxo-pie-chart-legend>
+    <dxo-pie-chart-export [enabled]="true"></dxo-pie-chart-export>
+    <dxi-pie-chart-series argumentField="country" valueField="medals">
+      <dxo-pie-chart-label [visible]="true" [customizeText]="customizeLabel">
+      </dxo-pie-chart-label>
+    </dxi-pie-chart-series>
   </dx-pie-chart>
   <div class="options">
     <div class="caption">Options</div>
diff --git a/apps/demos/Demos/Charts/PieWithMultipleSeries/Angular/app/app.component.html b/apps/demos/Demos/Charts/PieWithMultipleSeries/Angular/app/app.component.html
index e2cba935c94c..2a7810a10e81 100644
--- a/apps/demos/Demos/Charts/PieWithMultipleSeries/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/PieWithMultipleSeries/Angular/app/app.component.html
@@ -5,27 +5,27 @@
   innerRadius="0.2"
   [dataSource]="exportImportData"
 >
-  <dxo-title text="Imports/Exports of Goods and Services">
-    <dxo-subtitle text="(billion US$, 2012)"></dxo-subtitle>
-  </dxo-title>
-  <dxo-legend [visible]="true"></dxo-legend>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxo-common-series-settings>
-    <dxo-label [visible]="false"></dxo-label>
-  </dxo-common-series-settings>
-  <dxo-tooltip
+  <dxo-pie-chart-title text="Imports/Exports of Goods and Services">
+    <dxo-pie-chart-subtitle text="(billion US$, 2012)"></dxo-pie-chart-subtitle>
+  </dxo-pie-chart-title>
+  <dxo-pie-chart-legend [visible]="true"></dxo-pie-chart-legend>
+  <dxo-pie-chart-export [enabled]="true"></dxo-pie-chart-export>
+  <dxo-pie-chart-common-series-settings>
+    <dxo-pie-chart-label [visible]="false"></dxo-pie-chart-label>
+  </dxo-pie-chart-common-series-settings>
+  <dxo-pie-chart-tooltip
     [enabled]="true"
     format="currency"
     [customizeTooltip]="customizeTooltip"
-  ></dxo-tooltip>
-  <dxi-series
+  ></dxo-pie-chart-tooltip>
+  <dxi-pie-chart-series
     name="Export"
     argumentField="Country"
     valueField="Export"
-  ></dxi-series>
-  <dxi-series
+  ></dxi-pie-chart-series>
+  <dxi-pie-chart-series
     name="Import"
     argumentField="Country"
     valueField="Import"
-  ></dxi-series>
+  ></dxi-pie-chart-series>
 </dx-pie-chart>
diff --git a/apps/demos/Demos/Charts/PointImage/Angular/app/app.component.html b/apps/demos/Demos/Charts/PointImage/Angular/app/app.component.html
index f96a9dd6bc78..1063e42ea3ec 100644
--- a/apps/demos/Demos/Charts/PointImage/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/PointImage/Angular/app/app.component.html
@@ -4,25 +4,28 @@
   [title]="title"
   [customizePoint]="customizePoint"
 >
-  <dxi-series color="#888888"></dxi-series>
-  <dxo-common-series-settings
+  <dxi-chart-series color="#888888"></dxi-chart-series>
+  <dxo-chart-common-series-settings
     argumentField="year"
     valueField="place"
     type="spline"
   >
-    <dxo-point [visible]="false"></dxo-point>
-  </dxo-common-series-settings>
-  <dxo-argument-axis [allowDecimals]="false" [axisDivisionFactor]="60">
-    <dxo-grid [visible]="true"></dxo-grid>
-    <dxo-label>
-      <dxo-format type="decimal"></dxo-format>
-    </dxo-label>
-  </dxo-argument-axis>
-  <dxi-value-axis [inverted]="true">
-    <dxo-grid [visible]="false"></dxo-grid>
-    <dxo-label [customizeText]="customizeText"></dxo-label>
-  </dxi-value-axis>
-  <dxo-legend [visible]="false"></dxo-legend>
-  <dxo-export [enabled]="true" [formats]="['PNG', 'PDF', 'JPEG', 'GIF', 'SVG']">
-  </dxo-export>
+    <dxo-chart-point [visible]="false"></dxo-chart-point>
+  </dxo-chart-common-series-settings>
+  <dxo-chart-argument-axis [allowDecimals]="false" [axisDivisionFactor]="60">
+    <dxo-chart-grid [visible]="true"></dxo-chart-grid>
+    <dxo-chart-label>
+      <dxo-chart-format type="decimal"></dxo-chart-format>
+    </dxo-chart-label>
+  </dxo-chart-argument-axis>
+  <dxi-chart-value-axis [inverted]="true">
+    <dxo-chart-grid [visible]="false"></dxo-chart-grid>
+    <dxo-chart-label [customizeText]="customizeText"></dxo-chart-label>
+  </dxi-chart-value-axis>
+  <dxo-chart-legend [visible]="false"></dxo-chart-legend>
+  <dxo-chart-export
+    [enabled]="true"
+    [formats]="['PNG', 'PDF', 'JPEG', 'GIF', 'SVG']"
+  >
+  </dxo-chart-export>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/PointSelectionAPI/Angular/app/app.component.html b/apps/demos/Demos/Charts/PointSelectionAPI/Angular/app/app.component.html
index f70d7fb27c4c..e92eed10431a 100644
--- a/apps/demos/Demos/Charts/PointSelectionAPI/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/PointSelectionAPI/Angular/app/app.component.html
@@ -6,13 +6,13 @@
   (onDone)="done($event)"
   (onPointClick)="pointClick($event)"
 >
-  <dxi-series valueField="count" name="breeds" color="#a3d6d2">
-    <dxo-selection-style color="#ec2e7a">
-      <dxo-hatching direction="none"></dxo-hatching>
-    </dxo-selection-style>
-  </dxi-series>
-  <dxo-common-series-settings argumentField="breed" type="bar">
-  </dxo-common-series-settings>
-  <dxo-legend [visible]="false"></dxo-legend>
-  <dxo-export [enabled]="true"></dxo-export>
+  <dxi-chart-series valueField="count" name="breeds" color="#a3d6d2">
+    <dxo-chart-selection-style color="#ec2e7a">
+      <dxo-chart-hatching direction="none"></dxo-chart-hatching>
+    </dxo-chart-selection-style>
+  </dxi-chart-series>
+  <dxo-chart-common-series-settings argumentField="breed" type="bar">
+  </dxo-chart-common-series-settings>
+  <dxo-chart-legend [visible]="false"></dxo-chart-legend>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/PointsAggregation/Angular/app/app.component.html b/apps/demos/Demos/Charts/PointsAggregation/Angular/app/app.component.html
index 3bff05b1f713..3d9ab71d6b36 100644
--- a/apps/demos/Demos/Charts/PointsAggregation/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/PointsAggregation/Angular/app/app.component.html
@@ -4,17 +4,17 @@
     title="Weather in Las Vegas, NV (2017)"
     [dataSource]="weatherIndicators"
   >
-    <dxo-common-series-settings argumentField="date">
-    </dxo-common-series-settings>
-    <dxi-series
+    <dxo-chart-common-series-settings argumentField="date">
+    </dxo-chart-common-series-settings>
+    <dxi-chart-series
       axis="precipitation"
       color="#03a9f4"
       type="bar"
       valueField="precip"
       name="Precipitation"
     >
-    </dxi-series>
-    <dxi-series
+    </dxi-chart-series>
+    <dxi-chart-series
       axis="temperature"
       color="#ffc0bb"
       type="rangeArea"
@@ -22,53 +22,53 @@
       rangeValue2Field="maxTemp"
       name="Temperature range"
     >
-      <dxo-aggregation
+      <dxo-chart-aggregation
         [enabled]="useAggregation"
         method="custom"
         [calculate]="calculateRangeArea"
       >
-      </dxo-aggregation>
-    </dxi-series>
-    <dxi-series
+      </dxo-chart-aggregation>
+    </dxi-chart-series>
+    <dxi-chart-series
       axis="temperature"
       color="#e91e63"
       valueField="temp"
       name="Average temperature"
     >
-      <dxo-point [size]="7"></dxo-point>
-      <dxo-aggregation
+      <dxo-chart-point [size]="7"></dxo-chart-point>
+      <dxo-chart-aggregation
         #pointsAggregationSettings
         [enabled]="useAggregation"
         method="avg"
       >
-      </dxo-aggregation>
-    </dxi-series>
-    <dxo-argument-axis
+      </dxo-chart-aggregation>
+    </dxi-chart-series>
+    <dxo-chart-argument-axis
       #argumentAxisSettings
       argumentType="datetime"
       aggregationInterval="week"
       [valueMarginsEnabled]="false"
     >
-    </dxo-argument-axis>
-    <dxi-value-axis name="temperature">
-      <dxo-title text="Temperature, °C">
-        <dxo-font color="#e91e63"></dxo-font>
-      </dxo-title>
-      <dxo-label>
-        <dxo-font color="#e91e63"></dxo-font>
-      </dxo-label>
-    </dxi-value-axis>
-    <dxi-value-axis name="precipitation" position="right">
-      <dxo-title text="Precipitation, mm">
-        <dxo-font color="#03a9f4"></dxo-font>
-      </dxo-title>
-      <dxo-label>
-        <dxo-font color="#03a9f4"></dxo-font>
-      </dxo-label>
-    </dxi-value-axis>
-    <dxo-legend [visible]="false"></dxo-legend>
-    <dxo-tooltip [enabled]="true" [customizeTooltip]="customizeTooltip">
-    </dxo-tooltip>
+    </dxo-chart-argument-axis>
+    <dxi-chart-value-axis name="temperature">
+      <dxo-chart-title text="Temperature, °C">
+        <dxo-chart-font color="#e91e63"></dxo-chart-font>
+      </dxo-chart-title>
+      <dxo-chart-label>
+        <dxo-chart-font color="#e91e63"></dxo-chart-font>
+      </dxo-chart-label>
+    </dxi-chart-value-axis>
+    <dxi-chart-value-axis name="precipitation" position="right">
+      <dxo-chart-title text="Precipitation, mm">
+        <dxo-chart-font color="#03a9f4"></dxo-chart-font>
+      </dxo-chart-title>
+      <dxo-chart-label>
+        <dxo-chart-font color="#03a9f4"></dxo-chart-font>
+      </dxo-chart-label>
+    </dxi-chart-value-axis>
+    <dxo-chart-legend [visible]="false"></dxo-chart-legend>
+    <dxo-chart-tooltip [enabled]="true" [customizeTooltip]="customizeTooltip">
+    </dxo-chart-tooltip>
   </dx-chart>
   <div class="options">
     <div class="caption">Options</div>
diff --git a/apps/demos/Demos/Charts/PointsAggregationFinancialChart/Angular/app/app.component.html b/apps/demos/Demos/Charts/PointsAggregationFinancialChart/Angular/app/app.component.html
index c9791c435756..31e994c5bc6d 100644
--- a/apps/demos/Demos/Charts/PointsAggregationFinancialChart/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/PointsAggregationFinancialChart/Angular/app/app.component.html
@@ -4,7 +4,7 @@
     [dataSource]="stockPrices"
     title="Google Inc. Stock Prices"
   >
-    <dxi-series
+    <dxi-chart-series
       type="candleStick"
       openValueField="Open"
       highValueField="High"
@@ -12,38 +12,49 @@
       closeValueField="Close"
       argumentField="Date"
     >
-      <dxo-aggregation [enabled]="true"></dxo-aggregation>
-    </dxi-series>
-    <dxo-margin [right]="10"></dxo-margin>
-    <dxi-value-axis valueType="numeric"></dxi-value-axis>
-    <dxo-argument-axis
+      <dxo-chart-aggregation [enabled]="true"></dxo-chart-aggregation>
+    </dxi-chart-series>
+    <dxo-chart-margin [right]="10"></dxo-chart-margin>
+    <dxi-chart-value-axis valueType="numeric"></dxi-chart-value-axis>
+    <dxo-chart-argument-axis
       [valueMarginsEnabled]="false"
       argumentType="datetime"
       [visualRange]="visualRange"
     >
-      <dxo-grid [visible]="true"></dxo-grid>
-      <dxo-label [visible]="false"></dxo-label>
-    </dxo-argument-axis>
-    <dxo-legend [visible]="false"></dxo-legend>
-    <dxo-tooltip [enabled]="true"></dxo-tooltip>
+      <dxo-chart-grid [visible]="true"></dxo-chart-grid>
+      <dxo-chart-label [visible]="false"></dxo-chart-label>
+    </dxo-chart-argument-axis>
+    <dxo-chart-legend [visible]="false"></dxo-chart-legend>
+    <dxo-chart-tooltip [enabled]="true"></dxo-chart-tooltip>
   </dx-chart>
   <dx-range-selector [dataSource]="stockPrices" [(value)]="visualRange">
-    <dxo-size [height]="120"></dxo-size>
-    <dxo-scale
+    <dxo-range-selector-size [height]="120"></dxo-range-selector-size>
+    <dxo-range-selector-scale
       minorTickInterval="day"
       tickInterval="month"
       valueType="datetime"
       aggregationInterval="week"
       [placeholderHeight]="20"
     >
-    </dxo-scale>
-    <dxo-behavior valueChangeMode="onHandleMove" [snapToTicks]="false">
-    </dxo-behavior>
-    <dxo-chart>
-      <dxo-value-axis valueType="numeric"></dxo-value-axis>
-      <dxi-series type="line" valueField="Open" argumentField="Date">
-        <dxo-aggregation [enabled]="true"></dxo-aggregation>
-      </dxi-series>
-    </dxo-chart>
+    </dxo-range-selector-scale>
+    <dxo-range-selector-behavior
+      valueChangeMode="onHandleMove"
+      [snapToTicks]="false"
+    >
+    </dxo-range-selector-behavior>
+    <dxo-range-selector-chart>
+      <dxo-range-selector-value-axis
+        valueType="numeric"
+      ></dxo-range-selector-value-axis>
+      <dxi-range-selector-series
+        type="line"
+        valueField="Open"
+        argumentField="Date"
+      >
+        <dxo-range-selector-aggregation
+          [enabled]="true"
+        ></dxo-range-selector-aggregation>
+      </dxi-range-selector-series>
+    </dxo-range-selector-chart>
   </dx-range-selector>
 </div>
diff --git a/apps/demos/Demos/Charts/PolarChartAnnotations/Angular/app/app.component.html b/apps/demos/Demos/Charts/PolarChartAnnotations/Angular/app/app.component.html
index c93ecf77af84..a6966737f3a7 100644
--- a/apps/demos/Demos/Charts/PolarChartAnnotations/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/PolarChartAnnotations/Angular/app/app.component.html
@@ -3,17 +3,27 @@
   [dataSource]="temperaturesData"
   title="Average temperature in London"
 >
-  <dxo-common-series-settings type="bar" [opacity]="0.75">
-  </dxo-common-series-settings>
-  <dxi-series valueField="day" name="Day" color="#fdff5e"> </dxi-series>
-  <dxi-series valueField="night" name="Night" color="#0f3b59"> </dxi-series>
-  <dxo-common-annotation-settings type="text" [opacity]="0.7" [arrowLength]="0">
-  </dxo-common-annotation-settings>
-  <dxi-annotation text="WINTER" [angle]="45" [radius]="180"> </dxi-annotation>
-  <dxi-annotation text="SPRING" [angle]="135" [radius]="180"> </dxi-annotation>
-  <dxi-annotation text="SUMMER" [angle]="225" [radius]="180"> </dxi-annotation>
-  <dxi-annotation text="FALL" [angle]="315" [radius]="180"> </dxi-annotation>
-  <dxi-annotation
+  <dxo-polar-chart-common-series-settings type="bar" [opacity]="0.75">
+  </dxo-polar-chart-common-series-settings>
+  <dxi-polar-chart-series valueField="day" name="Day" color="#fdff5e">
+  </dxi-polar-chart-series>
+  <dxi-polar-chart-series valueField="night" name="Night" color="#0f3b59">
+  </dxi-polar-chart-series>
+  <dxo-polar-chart-common-annotation-settings
+    type="text"
+    [opacity]="0.7"
+    [arrowLength]="0"
+  >
+  </dxo-polar-chart-common-annotation-settings>
+  <dxi-polar-chart-annotation text="WINTER" [angle]="45" [radius]="180">
+  </dxi-polar-chart-annotation>
+  <dxi-polar-chart-annotation text="SPRING" [angle]="135" [radius]="180">
+  </dxi-polar-chart-annotation>
+  <dxi-polar-chart-annotation text="SUMMER" [angle]="225" [radius]="180">
+  </dxi-polar-chart-annotation>
+  <dxi-polar-chart-annotation text="FALL" [angle]="315" [radius]="180">
+  </dxi-polar-chart-annotation>
+  <dxi-polar-chart-annotation
     [argument]="maxDay.arg"
     series="Day"
     text="Highest temperature: {{ maxDay.day }} °C"
@@ -22,8 +32,8 @@
     [paddingTopBottom]="15"
     [paddingLeftRight]="15"
   >
-  </dxi-annotation>
-  <dxi-annotation
+  </dxi-polar-chart-annotation>
+  <dxi-polar-chart-annotation
     [argument]="minNight.arg"
     series="Night"
     text="Lowest temperature: {{ minNight.night }} °C"
@@ -32,15 +42,28 @@
     [paddingTopBottom]="15"
     [paddingLeftRight]="15"
   >
-  </dxi-annotation>
-  <dxo-argument-axis>
-    <dxi-strip startValue="December" endValue="February" color="#0076d1">
-    </dxi-strip>
-    <dxi-strip startValue="March" endValue="May" color="#3ca3b0"> </dxi-strip>
-    <dxi-strip startValue="June" endValue="August" color="#3fbc1e"> </dxi-strip>
-    <dxi-strip startValue="September" endValue="November" color="#f0bb00">
-    </dxi-strip>
-  </dxo-argument-axis>
-  <dxo-legend horizontalAlignment="center" verticalAlignment="bottom">
-  </dxo-legend>
+  </dxi-polar-chart-annotation>
+  <dxo-polar-chart-argument-axis>
+    <dxi-polar-chart-strip
+      startValue="December"
+      endValue="February"
+      color="#0076d1"
+    >
+    </dxi-polar-chart-strip>
+    <dxi-polar-chart-strip startValue="March" endValue="May" color="#3ca3b0">
+    </dxi-polar-chart-strip>
+    <dxi-polar-chart-strip startValue="June" endValue="August" color="#3fbc1e">
+    </dxi-polar-chart-strip>
+    <dxi-polar-chart-strip
+      startValue="September"
+      endValue="November"
+      color="#f0bb00"
+    >
+    </dxi-polar-chart-strip>
+  </dxo-polar-chart-argument-axis>
+  <dxo-polar-chart-legend
+    horizontalAlignment="center"
+    verticalAlignment="bottom"
+  >
+  </dxo-polar-chart-legend>
 </dx-polar-chart>
diff --git a/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/Angular/app/app.component.html b/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/Angular/app/app.component.html
index 2d94c3527f88..a03c495eb372 100644
--- a/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/Angular/app/app.component.html
@@ -3,34 +3,49 @@
   title="Stochastic Process"
   [dataSource]="dataSource"
 >
-  <dxi-series type="scatter" name="Test results" valueField="value">
-    <dxo-point [size]="8"></dxo-point>
-  </dxi-series>
-  <dxi-series type="line" name="Expected average" valueField="originalValue">
-    <dxo-point [visible]="false"></dxo-point>
-  </dxi-series>
-  <dxo-common-series-settings argumentField="argument" [closed]="false">
-  </dxo-common-series-settings>
-  <dxo-argument-axis [startAngle]="90" [tickInterval]="30"> </dxo-argument-axis>
-  <dxo-value-axis [visualRange]="visualRange"></dxo-value-axis>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxo-legend
+  <dxi-polar-chart-series type="scatter" name="Test results" valueField="value">
+    <dxo-polar-chart-point [size]="8"></dxo-polar-chart-point>
+  </dxi-polar-chart-series>
+  <dxi-polar-chart-series
+    type="line"
+    name="Expected average"
+    valueField="originalValue"
+  >
+    <dxo-polar-chart-point [visible]="false"></dxo-polar-chart-point>
+  </dxi-polar-chart-series>
+  <dxo-polar-chart-common-series-settings
+    argumentField="argument"
+    [closed]="false"
+  >
+  </dxo-polar-chart-common-series-settings>
+  <dxo-polar-chart-argument-axis [startAngle]="90" [tickInterval]="30">
+  </dxo-polar-chart-argument-axis>
+  <dxo-polar-chart-value-axis
+    [visualRange]="visualRange"
+  ></dxo-polar-chart-value-axis>
+  <dxo-polar-chart-export [enabled]="true"></dxo-polar-chart-export>
+  <dxo-polar-chart-legend
     hoverMode="excludePoints"
     verticalAlignment="top"
     horizontalAlignment="center"
   >
-  </dxo-legend>
+  </dxo-polar-chart-legend>
 </dx-polar-chart>
 <dx-range-selector [(value)]="visualRange">
-  <dxo-size [height]="100"></dxo-size>
-  <dxo-margin [top]="10" [left]="60" [bottom]="10" [right]="50"> </dxo-margin>
-  <dxo-scale
+  <dxo-range-selector-size [height]="100"></dxo-range-selector-size>
+  <dxo-range-selector-margin [top]="10" [left]="60" [bottom]="10" [right]="50">
+  </dxo-range-selector-margin>
+  <dxo-range-selector-scale
     [startValue]="0"
     [endValue]="8"
     [minorTickInterval]="0.1"
     [tickInterval]="1"
   >
-    <dxo-minor-tick [visible]="false"></dxo-minor-tick>
-  </dxo-scale>
-  <dxo-behavior valueChangeMode="onHandleMove"></dxo-behavior>
+    <dxo-range-selector-minor-tick
+      [visible]="false"
+    ></dxo-range-selector-minor-tick>
+  </dxo-range-selector-scale>
+  <dxo-range-selector-behavior
+    valueChangeMode="onHandleMove"
+  ></dxo-range-selector-behavior>
 </dx-range-selector>
diff --git a/apps/demos/Demos/Charts/PyramidChart/Angular/app/app.component.html b/apps/demos/Demos/Charts/PyramidChart/Angular/app/app.component.html
index f22122c87257..53e81b039a71 100644
--- a/apps/demos/Demos/Charts/PyramidChart/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/PyramidChart/Angular/app/app.component.html
@@ -8,15 +8,19 @@
   algorithm="dynamicHeight"
   [sortData]="false"
 >
-  <dxo-title text="Team Composition">
-    <dxo-margin [bottom]="30"></dxo-margin>
-  </dxo-title>
-  <dxo-tooltip [enabled]="true"></dxo-tooltip>
-  <dxo-item>
-    <dxo-border [visible]="true"></dxo-border>
-  </dxo-item>
-  <dxo-legend [visible]="true"></dxo-legend>
-  <dxo-label visible="true" horizontalAlignment="left" backgroundColor="none">
-    <dxo-font [size]="16"></dxo-font>
-  </dxo-label>
+  <dxo-funnel-title text="Team Composition">
+    <dxo-funnel-margin [bottom]="30"></dxo-funnel-margin>
+  </dxo-funnel-title>
+  <dxo-funnel-tooltip [enabled]="true"></dxo-funnel-tooltip>
+  <dxo-funnel-item>
+    <dxo-funnel-border [visible]="true"></dxo-funnel-border>
+  </dxo-funnel-item>
+  <dxo-funnel-legend [visible]="true"></dxo-funnel-legend>
+  <dxo-funnel-label
+    visible="true"
+    horizontalAlignment="left"
+    backgroundColor="none"
+  >
+    <dxo-funnel-font [size]="16"></dxo-funnel-font>
+  </dxo-funnel-label>
 </dx-funnel>
diff --git a/apps/demos/Demos/Charts/RangeArea/Angular/app/app.component.html b/apps/demos/Demos/Charts/RangeArea/Angular/app/app.component.html
index 5ddfc6e6f251..a4901b8a3173 100644
--- a/apps/demos/Demos/Charts/RangeArea/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/RangeArea/Angular/app/app.component.html
@@ -4,27 +4,27 @@
   title="Annual Inflation Rate in 2010 and 2011"
   [dataSource]="inflationData"
 >
-  <dxo-common-series-settings
+  <dxo-chart-common-series-settings
     argumentField="date"
     type="rangeArea"
-  ></dxo-common-series-settings>
-  <dxi-value-axis
+  ></dxo-chart-common-series-settings>
+  <dxi-chart-value-axis
     [tickInterval]="0.5"
     [valueMarginsEnabled]="false"
     [visualRange]="{ startValue: 0.5, endValue: 4 }"
   >
-    <dxo-label [customizeText]="customizeValueAxisText">
-      <dxo-format type="fixedPoint" [precision]="2"></dxo-format>
-    </dxo-label>
-  </dxi-value-axis>
-  <dxo-argument-axis [valueMarginsEnabled]="false">
-    <dxo-label format="month"></dxo-label>
-  </dxo-argument-axis>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxo-legend [visible]="false"></dxo-legend>
-  <dxi-series
+    <dxo-chart-label [customizeText]="customizeValueAxisText">
+      <dxo-chart-format type="fixedPoint" [precision]="2"></dxo-chart-format>
+    </dxo-chart-label>
+  </dxi-chart-value-axis>
+  <dxo-chart-argument-axis [valueMarginsEnabled]="false">
+    <dxo-chart-label format="month"></dxo-chart-label>
+  </dxo-chart-argument-axis>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
+  <dxo-chart-legend [visible]="false"></dxo-chart-legend>
+  <dxi-chart-series
     rangeValue1Field="val2010"
     rangeValue2Field="val2011"
     name="2010 - 2011"
-  ></dxi-series>
+  ></dxi-chart-series>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/RangeBar/Angular/app/app.component.html b/apps/demos/Demos/Charts/RangeBar/Angular/app/app.component.html
index 651f672cb4a6..736747a49d10 100644
--- a/apps/demos/Demos/Charts/RangeBar/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/RangeBar/Angular/app/app.component.html
@@ -4,31 +4,31 @@
   title="Crude Oil Prices in 2005"
   [dataSource]="oilPrices"
 >
-  <dxo-common-series-settings
+  <dxo-chart-common-series-settings
     argumentField="date"
     type="rangeBar"
     [minBarSize]="2"
-  ></dxo-common-series-settings>
-  <dxi-value-axis>
-    <dxo-title text="$ per barrel"></dxo-title>
-  </dxi-value-axis>
-  <dxo-argument-axis>
-    <dxo-label format="month"></dxo-label>
-  </dxo-argument-axis>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxo-legend
+  ></dxo-chart-common-series-settings>
+  <dxi-chart-value-axis>
+    <dxo-chart-title text="$ per barrel"></dxo-chart-title>
+  </dxi-chart-value-axis>
+  <dxo-chart-argument-axis>
+    <dxo-chart-label format="month"></dxo-chart-label>
+  </dxo-chart-argument-axis>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
+  <dxo-chart-legend
     verticalAlignment="bottom"
     horizontalAlignment="center"
-  ></dxo-legend>
-  <dxi-series
+  ></dxo-chart-legend>
+  <dxi-chart-series
     rangeValue1Field="aVal1"
     rangeValue2Field="aVal2"
     name="ANS West Coast"
-  ></dxi-series>
-  <dxi-series
+  ></dxi-chart-series>
+  <dxi-chart-series
     rangeValue1Field="tVal1"
     rangeValue2Field="tVal2"
     name="West Texas Intermediate"
-  ></dxi-series>
-  <dxo-tooltip [enabled]="true"></dxo-tooltip>
+  ></dxi-chart-series>
+  <dxo-chart-tooltip [enabled]="true"></dxo-chart-tooltip>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/ResolveLabelOverlap/Angular/app/app.component.html b/apps/demos/Demos/Charts/ResolveLabelOverlap/Angular/app/app.component.html
index 3d1c0fbbc2ca..8e39b60fc531 100644
--- a/apps/demos/Demos/Charts/ResolveLabelOverlap/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/ResolveLabelOverlap/Angular/app/app.component.html
@@ -1,9 +1,12 @@
 <dx-chart id="chart" [dataSource]="population" title="Population by Countries">
-  <dxi-series argumentField="country"></dxi-series>
-  <dxo-argument-axis>
-    <dxo-label wordWrap="none" [overlappingBehavior]="currentMode"></dxo-label>
-  </dxo-argument-axis>
-  <dxo-legend [visible]="false"></dxo-legend>
+  <dxi-chart-series argumentField="country"></dxi-chart-series>
+  <dxo-chart-argument-axis>
+    <dxo-chart-label
+      wordWrap="none"
+      [overlappingBehavior]="currentMode"
+    ></dxo-chart-label>
+  </dxo-chart-argument-axis>
+  <dxo-chart-legend [visible]="false"></dxo-chart-legend>
 </dx-chart>
 <div class="options">
   <div class="caption">Options</div>
diff --git a/apps/demos/Demos/Charts/SankeyChart/Angular/app/app.component.html b/apps/demos/Demos/Charts/SankeyChart/Angular/app/app.component.html
index 6adf70f35c61..a2b2cb110b77 100644
--- a/apps/demos/Demos/Charts/SankeyChart/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/SankeyChart/Angular/app/app.component.html
@@ -6,8 +6,11 @@
   weightField="weight"
   title="Commodity Turnover in 2017"
 >
-  <dxo-tooltip [enabled]="true" [customizeLinkTooltip]="customizeLinkTooltip">
-  </dxo-tooltip>
-  <dxo-link colorMode="gradient"> </dxo-link>
-  <dxo-node [width]="8" [padding]="30"> </dxo-node>
+  <dxo-sankey-tooltip
+    [enabled]="true"
+    [customizeLinkTooltip]="customizeLinkTooltip"
+  >
+  </dxo-sankey-tooltip>
+  <dxo-sankey-link colorMode="gradient"> </dxo-sankey-link>
+  <dxo-sankey-node [width]="8" [padding]="30"> </dxo-sankey-node>
 </dx-sankey>
diff --git a/apps/demos/Demos/Charts/ScaleBreaks/Angular/app/app.component.html b/apps/demos/Demos/Charts/ScaleBreaks/Angular/app/app.component.html
index d9b0640ac6b9..a5d0ca0af44f 100644
--- a/apps/demos/Demos/Charts/ScaleBreaks/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/ScaleBreaks/Angular/app/app.component.html
@@ -1,14 +1,15 @@
 <dx-chart id="chart" [title]="title" [dataSource]="data">
-  <dxi-series valueField="mass" argumentField="name" type="bar"> </dxi-series>
-  <dxi-value-axis
+  <dxi-chart-series valueField="mass" argumentField="name" type="bar">
+  </dxi-chart-series>
+  <dxi-chart-value-axis
     [visible]="true"
     [autoBreaksEnabled]="autoBreaksEnabledValue"
     [maxAutoBreakCount]="breaksCountValue"
   >
-    <dxo-break-style [line]="lineStyleValue"> </dxo-break-style>
-  </dxi-value-axis>
-  <dxo-legend [visible]="false"> </dxo-legend>
-  <dxo-tooltip [enabled]="true"> </dxo-tooltip>
+    <dxo-chart-break-style [line]="lineStyleValue"> </dxo-chart-break-style>
+  </dxi-chart-value-axis>
+  <dxo-chart-legend [visible]="false"> </dxo-chart-legend>
+  <dxo-chart-tooltip [enabled]="true"> </dxo-chart-tooltip>
 </dx-chart>
 
 <div class="options">
diff --git a/apps/demos/Demos/Charts/Scatter/Angular/app/app.component.html b/apps/demos/Demos/Charts/Scatter/Angular/app/app.component.html
index 5e69aa4048ff..a400930bf542 100644
--- a/apps/demos/Demos/Charts/Scatter/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/Scatter/Angular/app/app.component.html
@@ -1,16 +1,18 @@
 <dx-chart id="chart" [dataSource]="dataSource">
-  <dxi-series argumentField="x1" valueField="y1"></dxi-series>
-  <dxi-series argumentField="x2" valueField="y2">
-    <dxo-point symbol="triangleDown"></dxo-point>
-  </dxi-series>
-  <dxi-value-axis [tickInterval]="50"></dxi-value-axis>
-  <dxo-common-series-settings type="scatter"></dxo-common-series-settings>
-  <dxo-argument-axis [tickInterval]="5">
-    <dxo-grid [visible]="true"></dxo-grid>
-    <dxo-minor-grid [visible]="true"></dxo-minor-grid>
-  </dxo-argument-axis>
-  <dxo-legend [visible]="false"></dxo-legend>
-  <dxo-common-pane-settings>
-    <dxo-border [visible]="true"></dxo-border>
-  </dxo-common-pane-settings>
+  <dxi-chart-series argumentField="x1" valueField="y1"></dxi-chart-series>
+  <dxi-chart-series argumentField="x2" valueField="y2">
+    <dxo-chart-point symbol="triangleDown"></dxo-chart-point>
+  </dxi-chart-series>
+  <dxi-chart-value-axis [tickInterval]="50"></dxi-chart-value-axis>
+  <dxo-chart-common-series-settings
+    type="scatter"
+  ></dxo-chart-common-series-settings>
+  <dxo-chart-argument-axis [tickInterval]="5">
+    <dxo-chart-grid [visible]="true"></dxo-chart-grid>
+    <dxo-chart-minor-grid [visible]="true"></dxo-chart-minor-grid>
+  </dxo-chart-argument-axis>
+  <dxo-chart-legend [visible]="false"></dxo-chart-legend>
+  <dxo-chart-common-pane-settings>
+    <dxo-chart-border [visible]="true"></dxo-chart-border>
+  </dxo-chart-common-pane-settings>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/Selection/Angular/app/app.component.html b/apps/demos/Demos/Charts/Selection/Angular/app/app.component.html
index 651161449ad6..904a8b01123f 100644
--- a/apps/demos/Demos/Charts/Selection/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/Selection/Angular/app/app.component.html
@@ -6,24 +6,24 @@
   (onPointClick)="pointClick($event)"
   (onLegendClick)="legendClick($event)"
 >
-  <dxi-series valueField="year2007" name="2007 - 2008"></dxi-series>
-  <dxi-series valueField="year2008" name="2008 - 2009"></dxi-series>
-  <dxo-common-series-settings
+  <dxi-chart-series valueField="year2007" name="2007 - 2008"></dxi-chart-series>
+  <dxi-chart-series valueField="year2008" name="2008 - 2009"></dxi-chart-series>
+  <dxo-chart-common-series-settings
     argumentField="country"
     type="bar"
     hoverMode="allArgumentPoints"
     selectionMode="allArgumentPoints"
   >
-    <dxo-label [visible]="true">
-      <dxo-format type="percent" [precision]="1"> </dxo-format>
-    </dxo-label>
-  </dxo-common-series-settings>
-  <dxi-value-axis>
-    <dxo-label>
-      <dxo-format type="percent" [precision]="1"> </dxo-format>
-    </dxo-label>
-  </dxi-value-axis>
-  <dxo-legend verticalAlignment="bottom" horizontalAlignment="center">
-  </dxo-legend>
-  <dxo-export [enabled]="true"></dxo-export>
+    <dxo-chart-label [visible]="true">
+      <dxo-chart-format type="percent" [precision]="1"> </dxo-chart-format>
+    </dxo-chart-label>
+  </dxo-chart-common-series-settings>
+  <dxi-chart-value-axis>
+    <dxo-chart-label>
+      <dxo-chart-format type="percent" [precision]="1"> </dxo-chart-format>
+    </dxo-chart-label>
+  </dxi-chart-value-axis>
+  <dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center">
+  </dxo-chart-legend>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/ServerSideDataProcessing/Angular/app/app.component.html b/apps/demos/Demos/Charts/ServerSideDataProcessing/Angular/app/app.component.html
index 5b8b3756b31e..ad0fef1360c0 100644
--- a/apps/demos/Demos/Charts/ServerSideDataProcessing/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/ServerSideDataProcessing/Angular/app/app.component.html
@@ -12,31 +12,33 @@
       }
     }"
   >
-    <dxo-size [height]="420"></dxo-size>
-    <dxi-series
+    <dxo-chart-size [height]="420"></dxo-chart-size>
+    <dxi-chart-series
       argumentField="Date"
       valueField="Temperature"
       type="spline"
-    ></dxi-series>
-    <dxo-legend [visible]="false"></dxo-legend>
-    <dxo-common-pane-settings>
-      <dxo-border
+    ></dxi-chart-series>
+    <dxo-chart-legend [visible]="false"></dxo-chart-legend>
+    <dxo-chart-common-pane-settings>
+      <dxo-chart-border
         [visible]="true"
         [width]="2"
         [top]="false"
         [right]="false"
-      ></dxo-border>
-    </dxo-common-pane-settings>
-    <dxo-export [enabled]="true"></dxo-export>
-    <dxo-tooltip
+      ></dxo-chart-border>
+    </dxo-chart-common-pane-settings>
+    <dxo-chart-export [enabled]="true"></dxo-chart-export>
+    <dxo-chart-tooltip
       [enabled]="true"
       [customizeTooltip]="customizeTooltip"
-    ></dxo-tooltip>
-    <dxo-argument-axis type="discrete">
-      <dxo-grid [visible]="true" [opacity]="0.5"></dxo-grid>
-      <dxo-label [customizeText]="customizeArgumentAxisText"></dxo-label>
-    </dxo-argument-axis>
-    <dxo-loading-indicator [enabled]="true"></dxo-loading-indicator>
+    ></dxo-chart-tooltip>
+    <dxo-chart-argument-axis type="discrete">
+      <dxo-chart-grid [visible]="true" [opacity]="0.5"></dxo-chart-grid>
+      <dxo-chart-label
+        [customizeText]="customizeArgumentAxisText"
+      ></dxo-chart-label>
+    </dxo-chart-argument-axis>
+    <dxo-chart-loading-indicator [enabled]="true"></dxo-chart-loading-indicator>
   </dx-chart>
   <div class="action">
     <div class="label">Choose a month:</div>
diff --git a/apps/demos/Demos/Charts/SideBySideBar/Angular/app/app.component.html b/apps/demos/Demos/Charts/SideBySideBar/Angular/app/app.component.html
index 4595aad78e4b..ab198d237d57 100644
--- a/apps/demos/Demos/Charts/SideBySideBar/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/SideBySideBar/Angular/app/app.component.html
@@ -4,25 +4,25 @@
   [dataSource]="grossProductData"
   (onPointClick)="onPointClick($event)"
 >
-  <dxi-series valueField="year2018" name="2018"></dxi-series>
-  <dxi-series valueField="year2017" name="2017"></dxi-series>
-  <dxi-series valueField="year2016" name="2016"></dxi-series>
-  <dxo-common-series-settings
+  <dxi-chart-series valueField="year2018" name="2018"></dxi-chart-series>
+  <dxi-chart-series valueField="year2017" name="2017"></dxi-chart-series>
+  <dxi-chart-series valueField="year2016" name="2016"></dxi-chart-series>
+  <dxo-chart-common-series-settings
     argumentField="state"
     type="bar"
     hoverMode="allArgumentPoints"
     selectionMode="allArgumentPoints"
   >
-    <dxo-label
+    <dxo-chart-label
       [visible]="true"
       [format]="{
         type: 'fixedPoint',
         precision: '0'
       }"
     >
-    </dxo-label>
-  </dxo-common-series-settings>
-  <dxo-legend verticalAlignment="bottom" horizontalAlignment="center">
-  </dxo-legend>
-  <dxo-export [enabled]="true"></dxo-export>
+    </dxo-chart-label>
+  </dxo-chart-common-series-settings>
+  <dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center">
+  </dxo-chart-legend>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/SideBySideFullStackedBar/Angular/app/app.component.html b/apps/demos/Demos/Charts/SideBySideFullStackedBar/Angular/app/app.component.html
index c5c3147db6d3..614a8d412b93 100644
--- a/apps/demos/Demos/Charts/SideBySideFullStackedBar/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/SideBySideFullStackedBar/Angular/app/app.component.html
@@ -3,27 +3,35 @@
   [dataSource]="populationData"
   title="Population: Age Structure"
 >
-  <dxi-series valueField="maleyoung" name="Male: 0-14" stack="male">
-  </dxi-series>
-  <dxi-series valueField="malemiddle" name="Male: 15-64" stack="male">
-  </dxi-series>
-  <dxi-series valueField="maleolder" name="Male: 65 and older" stack="male">
-  </dxi-series>
-  <dxi-series valueField="femaleyoung" name="Female: 0-14" stack="female">
-  </dxi-series>
-  <dxi-series valueField="femalemiddle" name="Female: 15-64" stack="female">
-  </dxi-series>
-  <dxi-series
+  <dxi-chart-series valueField="maleyoung" name="Male: 0-14" stack="male">
+  </dxi-chart-series>
+  <dxi-chart-series valueField="malemiddle" name="Male: 15-64" stack="male">
+  </dxi-chart-series>
+  <dxi-chart-series
+    valueField="maleolder"
+    name="Male: 65 and older"
+    stack="male"
+  >
+  </dxi-chart-series>
+  <dxi-chart-series valueField="femaleyoung" name="Female: 0-14" stack="female">
+  </dxi-chart-series>
+  <dxi-chart-series
+    valueField="femalemiddle"
+    name="Female: 15-64"
+    stack="female"
+  >
+  </dxi-chart-series>
+  <dxi-chart-series
     valueField="femaleolder"
     name="Female: 65 and older"
     stack="female"
   >
-  </dxi-series>
-  <dxo-common-series-settings argumentField="state" type="fullStackedBar">
-  </dxo-common-series-settings>
-  <dxo-legend verticalAlignment="bottom" horizontalAlignment="center">
-  </dxo-legend>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxo-tooltip [enabled]="true" [customizeTooltip]="customizeTooltip">
-  </dxo-tooltip>
+  </dxi-chart-series>
+  <dxo-chart-common-series-settings argumentField="state" type="fullStackedBar">
+  </dxo-chart-common-series-settings>
+  <dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center">
+  </dxo-chart-legend>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
+  <dxo-chart-tooltip [enabled]="true" [customizeTooltip]="customizeTooltip">
+  </dxo-chart-tooltip>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/SideBySideStackedBar/Angular/app/app.component.html b/apps/demos/Demos/Charts/SideBySideStackedBar/Angular/app/app.component.html
index c53c059e19f8..779778f5f523 100644
--- a/apps/demos/Demos/Charts/SideBySideStackedBar/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/SideBySideStackedBar/Angular/app/app.component.html
@@ -3,35 +3,43 @@
   [dataSource]="populationData"
   title="Population: Age Structure"
 >
-  <dxi-series valueField="maleyoung" name="Male: 0-14" stack="male">
-  </dxi-series>
-  <dxi-series valueField="malemiddle" name="Male: 15-64" stack="male">
-  </dxi-series>
-  <dxi-series valueField="maleolder" name="Male: 65 and older" stack="male">
-  </dxi-series>
-  <dxi-series valueField="femaleyoung" name="Female: 0-14" stack="female">
-  </dxi-series>
-  <dxi-series valueField="femalemiddle" name="Female: 15-64" stack="female">
-  </dxi-series>
-  <dxi-series
+  <dxi-chart-series valueField="maleyoung" name="Male: 0-14" stack="male">
+  </dxi-chart-series>
+  <dxi-chart-series valueField="malemiddle" name="Male: 15-64" stack="male">
+  </dxi-chart-series>
+  <dxi-chart-series
+    valueField="maleolder"
+    name="Male: 65 and older"
+    stack="male"
+  >
+  </dxi-chart-series>
+  <dxi-chart-series valueField="femaleyoung" name="Female: 0-14" stack="female">
+  </dxi-chart-series>
+  <dxi-chart-series
+    valueField="femalemiddle"
+    name="Female: 15-64"
+    stack="female"
+  >
+  </dxi-chart-series>
+  <dxi-chart-series
     valueField="femaleolder"
     name="Female: 65 and older"
     stack="female"
   >
-  </dxi-series>
-  <dxi-value-axis>
-    <dxo-title text="Populations, millions"></dxo-title>
-  </dxi-value-axis>
-  <dxo-common-series-settings argumentField="state" type="stackedBar">
-  </dxo-common-series-settings>
-  <dxo-legend
+  </dxi-chart-series>
+  <dxi-chart-value-axis>
+    <dxo-chart-title text="Populations, millions"></dxo-chart-title>
+  </dxi-chart-value-axis>
+  <dxo-chart-common-series-settings argumentField="state" type="stackedBar">
+  </dxo-chart-common-series-settings>
+  <dxo-chart-legend
     horizontalAlignment="right"
     columnCount="2"
     [customizeItems]="customizeItems"
     position="inside"
   >
-    <dxo-border [visible]="true"></dxo-border>
-  </dxo-legend>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxo-tooltip [enabled]="true"></dxo-tooltip>
+    <dxo-chart-border [visible]="true"></dxo-chart-border>
+  </dxo-chart-legend>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
+  <dxo-chart-tooltip [enabled]="true"></dxo-chart-tooltip>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/SignalRService/Angular/app/app.component.html b/apps/demos/Demos/Charts/SignalRService/Angular/app/app.component.html
index 0241117bb76c..f17e683ce566 100644
--- a/apps/demos/Demos/Charts/SignalRService/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/SignalRService/Angular/app/app.component.html
@@ -5,15 +5,15 @@
     title="Stock Price"
     [customizePoint]="customizePoint"
   >
-    <dxi-series pane="Price" argumentField="date" type="candlestick">
-      <dxo-aggregation
+    <dxi-chart-series pane="Price" argumentField="date" type="candlestick">
+      <dxo-chart-aggregation
         [enabled]="true"
         method="custom"
         [calculate]="calculateCandle"
       >
-      </dxo-aggregation>
-    </dxi-series>
-    <dxi-series
+      </dxo-chart-aggregation>
+    </dxi-chart-series>
+    <dxi-chart-series
       pane="Volume"
       name="Volume"
       argumentField="date"
@@ -21,31 +21,32 @@
       color="red"
       type="bar"
     >
-      <dxo-aggregation [enabled]="true" method="sum"> </dxo-aggregation>
-    </dxi-series>
-    <dxi-pane name="Price"></dxi-pane>
-    <dxi-pane name="Volume" [height]="80"></dxi-pane>
-    <dxo-tooltip
+      <dxo-chart-aggregation [enabled]="true" method="sum">
+      </dxo-chart-aggregation>
+    </dxi-chart-series>
+    <dxi-chart-pane name="Price"></dxi-chart-pane>
+    <dxi-chart-pane name="Volume" [height]="80"></dxi-chart-pane>
+    <dxo-chart-tooltip
       [enabled]="true"
       [shared]="true"
       argumentFormat="shortDateShortTime"
       contentTemplate="tooltipTemplate"
-    ></dxo-tooltip>
-    <dxo-crosshair
+    ></dxo-chart-tooltip>
+    <dxo-chart-crosshair
       [enabled]="true"
       [horizontalLine]="{ visible: false }"
-    ></dxo-crosshair>
-    <dxo-margin [right]="30"></dxo-margin>
-    <dxo-scroll-bar [visible]="true"></dxo-scroll-bar>
-    <dxo-legend [visible]="false"></dxo-legend>
-    <dxi-value-axis [placeholderSize]="50"></dxi-value-axis>
-    <dxo-zoom-and-pan argumentAxis="both"></dxo-zoom-and-pan>
-    <dxo-argument-axis
+    ></dxo-chart-crosshair>
+    <dxo-chart-margin [right]="30"></dxo-chart-margin>
+    <dxo-chart-scroll-bar [visible]="true"></dxo-chart-scroll-bar>
+    <dxo-chart-legend [visible]="false"></dxo-chart-legend>
+    <dxi-chart-value-axis [placeholderSize]="50"></dxi-chart-value-axis>
+    <dxo-chart-zoom-and-pan argumentAxis="both"></dxo-chart-zoom-and-pan>
+    <dxo-chart-argument-axis
       argumentType="datetime"
       [minVisualRangeLength]="{ minutes: 10 }"
       [visualRange]="{ length: 'hour' }"
-    ></dxo-argument-axis>
-    <dxo-loading-indicator [enabled]="true"></dxo-loading-indicator>
+    ></dxo-chart-argument-axis>
+    <dxo-chart-loading-indicator [enabled]="true"></dxo-chart-loading-indicator>
     <div *dxTemplate="let pointInfo of 'tooltipTemplate'">
       <div class="tooltip-template">
         <div>{{ pointInfo.argumentText }}</div>
diff --git a/apps/demos/Demos/Charts/SimpleArray/Angular/app/app.component.html b/apps/demos/Demos/Charts/SimpleArray/Angular/app/app.component.html
index f26604c63660..8fbf50fffe55 100644
--- a/apps/demos/Demos/Charts/SimpleArray/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/SimpleArray/Angular/app/app.component.html
@@ -3,11 +3,11 @@
   title="World Population by Decade"
   [dataSource]="populationData"
 >
-  <dxo-legend [visible]="false"></dxo-legend>
-  <dxi-series type="bar"></dxi-series>
-  <dxo-argument-axis [tickInterval]="10">
-    <dxo-label>
-      <dxo-format type="decimal"></dxo-format>
-    </dxo-label>
-  </dxo-argument-axis>
+  <dxo-chart-legend [visible]="false"></dxo-chart-legend>
+  <dxi-chart-series type="bar"></dxi-chart-series>
+  <dxo-chart-argument-axis [tickInterval]="10">
+    <dxo-chart-label>
+      <dxo-chart-format type="decimal"></dxo-chart-format>
+    </dxo-chart-label>
+  </dxo-chart-argument-axis>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/SimpleBullets/Angular/app/app.component.html b/apps/demos/Demos/Charts/SimpleBullets/Angular/app/app.component.html
index 397881c75aaf..640f5c0cbe09 100644
--- a/apps/demos/Demos/Charts/SimpleBullets/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/SimpleBullets/Angular/app/app.component.html
@@ -18,7 +18,9 @@
           [target]="bullet.target"
           [color]="bullet.color"
         >
-          <dxo-tooltip [customizeTooltip]="customizeTooltip"></dxo-tooltip>
+          <dxo-bullet-tooltip
+            [customizeTooltip]="customizeTooltip"
+          ></dxo-bullet-tooltip>
         </dx-bullet>
       </td>
     </tr>
diff --git a/apps/demos/Demos/Charts/SmallValueGroups/Angular/app/app.component.html b/apps/demos/Demos/Charts/SmallValueGroups/Angular/app/app.component.html
index d401a45ebfba..29d480081cb5 100644
--- a/apps/demos/Demos/Charts/SmallValueGroups/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/SmallValueGroups/Angular/app/app.component.html
@@ -4,22 +4,25 @@
   palette="bright"
   [dataSource]="internetLanguages"
 >
-  <dxo-legend
+  <dxo-pie-chart-legend
     horizontalAlignment="center"
     verticalAlignment="bottom"
-  ></dxo-legend>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxi-series argumentField="language" valueField="percent">
-    <dxo-label
+  ></dxo-pie-chart-legend>
+  <dxo-pie-chart-export [enabled]="true"></dxo-pie-chart-export>
+  <dxi-pie-chart-series argumentField="language" valueField="percent">
+    <dxo-pie-chart-label
       [visible]="true"
       format="fixedPoint"
       [customizeText]="customizeLabel"
     >
-      <dxo-connector [visible]="true" [width]="0.5"></dxo-connector>
-    </dxo-label>
-    <dxo-small-values-grouping
+      <dxo-pie-chart-connector
+        [visible]="true"
+        [width]="0.5"
+      ></dxo-pie-chart-connector>
+    </dxo-pie-chart-label>
+    <dxo-pie-chart-small-values-grouping
       mode="smallValueThreshold"
       [threshold]="4.5"
-    ></dxo-small-values-grouping>
-  </dxi-series>
+    ></dxo-pie-chart-small-values-grouping>
+  </dxi-pie-chart-series>
 </dx-pie-chart>
diff --git a/apps/demos/Demos/Charts/SpiderWeb/Angular/app/app.component.html b/apps/demos/Demos/Charts/SpiderWeb/Angular/app/app.component.html
index c645c2f3fd21..24f21231989c 100644
--- a/apps/demos/Demos/Charts/SpiderWeb/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/SpiderWeb/Angular/app/app.component.html
@@ -4,11 +4,25 @@
   title="Fruit Production in 2010 (Millions of Tons)"
   [dataSource]="productionData"
 >
-  <dxi-series valueField="apples" name="Apples"></dxi-series>
-  <dxi-series valueField="grapes" name="Grapes"></dxi-series>
-  <dxi-series valueField="lemons" name="Lemons"></dxi-series>
-  <dxi-series valueField="oranges" name="Oranges"></dxi-series>
-  <dxo-common-series-settings type="line"></dxo-common-series-settings>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxo-tooltip [enabled]="true"></dxo-tooltip>
+  <dxi-polar-chart-series
+    valueField="apples"
+    name="Apples"
+  ></dxi-polar-chart-series>
+  <dxi-polar-chart-series
+    valueField="grapes"
+    name="Grapes"
+  ></dxi-polar-chart-series>
+  <dxi-polar-chart-series
+    valueField="lemons"
+    name="Lemons"
+  ></dxi-polar-chart-series>
+  <dxi-polar-chart-series
+    valueField="oranges"
+    name="Oranges"
+  ></dxi-polar-chart-series>
+  <dxo-polar-chart-common-series-settings
+    type="line"
+  ></dxo-polar-chart-common-series-settings>
+  <dxo-polar-chart-export [enabled]="true"></dxo-polar-chart-export>
+  <dxo-polar-chart-tooltip [enabled]="true"></dxo-polar-chart-tooltip>
 </dx-polar-chart>
diff --git a/apps/demos/Demos/Charts/Spline/Angular/app/app.component.html b/apps/demos/Demos/Charts/Spline/Angular/app/app.component.html
index aa88545bef77..991d3a30297b 100644
--- a/apps/demos/Demos/Charts/Spline/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/Spline/Angular/app/app.component.html
@@ -4,29 +4,29 @@
     [dataSource]="architecturesInfo"
     title="Architecture Share Over Time (Count)"
   >
-    <dxi-series valueField="smp" name="SMP"></dxi-series>
-    <dxi-series valueField="mmp" name="MMP"></dxi-series>
-    <dxi-series valueField="cnstl" name="Cnstl"></dxi-series>
-    <dxi-series valueField="cluster" name="Cluster"></dxi-series>
-    <dxo-common-series-settings
+    <dxi-chart-series valueField="smp" name="SMP"></dxi-chart-series>
+    <dxi-chart-series valueField="mmp" name="MMP"></dxi-chart-series>
+    <dxi-chart-series valueField="cnstl" name="Cnstl"></dxi-chart-series>
+    <dxi-chart-series valueField="cluster" name="Cluster"></dxi-chart-series>
+    <dxo-chart-common-series-settings
       #seriesSettings
       argumentField="year"
       [type]="types[0]"
     >
-    </dxo-common-series-settings>
-    <dxo-margin [bottom]="20"></dxo-margin>
-    <dxo-common-axis-settings>
-      <dxo-grid [visible]="true"></dxo-grid>
-    </dxo-common-axis-settings>
-    <dxo-legend verticalAlignment="top" horizontalAlignment="right">
-    </dxo-legend>
-    <dxo-argument-axis [allowDecimals]="false" [axisDivisionFactor]="60">
-      <dxo-label>
-        <dxo-format type="decimal"></dxo-format>
-      </dxo-label>
-    </dxo-argument-axis>
-    <dxo-export [enabled]="true"></dxo-export>
-    <dxo-tooltip [enabled]="true"></dxo-tooltip>
+    </dxo-chart-common-series-settings>
+    <dxo-chart-margin [bottom]="20"></dxo-chart-margin>
+    <dxo-chart-common-axis-settings>
+      <dxo-chart-grid [visible]="true"></dxo-chart-grid>
+    </dxo-chart-common-axis-settings>
+    <dxo-chart-legend verticalAlignment="top" horizontalAlignment="right">
+    </dxo-chart-legend>
+    <dxo-chart-argument-axis [allowDecimals]="false" [axisDivisionFactor]="60">
+      <dxo-chart-label>
+        <dxo-chart-format type="decimal"></dxo-chart-format>
+      </dxo-chart-label>
+    </dxo-chart-argument-axis>
+    <dxo-chart-export [enabled]="true"></dxo-chart-export>
+    <dxo-chart-tooltip [enabled]="true"></dxo-chart-tooltip>
   </dx-chart>
   <div class="options">
     <div class="caption">Options</div>
diff --git a/apps/demos/Demos/Charts/SplineArea/Angular/app/app.component.html b/apps/demos/Demos/Charts/SplineArea/Angular/app/app.component.html
index 2f73fbd05129..f41a90b12469 100644
--- a/apps/demos/Demos/Charts/SplineArea/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/SplineArea/Angular/app/app.component.html
@@ -4,18 +4,20 @@
     palette="Harmony Light"
     [dataSource]="corporationsInfo"
   >
-    <dxi-series valueField="y2005" name="2005"></dxi-series>
-    <dxi-series valueField="y2004" name="2004"></dxi-series>
-    <dxo-common-series-settings
+    <dxi-chart-series valueField="y2005" name="2005"></dxi-chart-series>
+    <dxi-chart-series valueField="y2004" name="2004"></dxi-chart-series>
+    <dxo-chart-common-series-settings
       #commonSeries
       argumentField="company"
       [type]="types[0]"
-    ></dxo-common-series-settings>
-    <dxo-margin [bottom]="20"></dxo-margin>
-    <dxo-argument-axis [valueMarginsEnabled]="false"></dxo-argument-axis>
-    <dxo-export [enabled]="true"></dxo-export>
-    <dxo-legend verticalAlignment="bottom" horizontalAlignment="center">
-    </dxo-legend>
+    ></dxo-chart-common-series-settings>
+    <dxo-chart-margin [bottom]="20"></dxo-chart-margin>
+    <dxo-chart-argument-axis
+      [valueMarginsEnabled]="false"
+    ></dxo-chart-argument-axis>
+    <dxo-chart-export [enabled]="true"></dxo-chart-export>
+    <dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center">
+    </dxo-chart-legend>
   </dx-chart>
   <div class="options">
     <div class="caption">Options</div>
diff --git a/apps/demos/Demos/Charts/StackedBar/Angular/app/app.component.html b/apps/demos/Demos/Charts/StackedBar/Angular/app/app.component.html
index d025a9e9d4fc..2fa62c96c743 100644
--- a/apps/demos/Demos/Charts/StackedBar/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/StackedBar/Angular/app/app.component.html
@@ -1,23 +1,23 @@
 <dx-chart id="chart" title="Male Age Structure" [dataSource]="dataSource">
-  <dxi-series valueField="young" name="0-14"></dxi-series>
-  <dxi-series valueField="middle" name="15-64"></dxi-series>
-  <dxi-series valueField="older" name="65 and older"></dxi-series>
-  <dxi-value-axis position="right">
-    <dxo-title text="millions"></dxo-title>
-  </dxi-value-axis>
-  <dxo-common-series-settings argumentField="state" type="stackedBar">
-  </dxo-common-series-settings>
-  <dxo-legend
+  <dxi-chart-series valueField="young" name="0-14"></dxi-chart-series>
+  <dxi-chart-series valueField="middle" name="15-64"></dxi-chart-series>
+  <dxi-chart-series valueField="older" name="65 and older"></dxi-chart-series>
+  <dxi-chart-value-axis position="right">
+    <dxo-chart-title text="millions"></dxo-chart-title>
+  </dxi-chart-value-axis>
+  <dxo-chart-common-series-settings argumentField="state" type="stackedBar">
+  </dxo-chart-common-series-settings>
+  <dxo-chart-legend
     verticalAlignment="bottom"
     horizontalAlignment="center"
     itemTextPosition="top"
   >
-  </dxo-legend>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxo-tooltip
+  </dxo-chart-legend>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
+  <dxo-chart-tooltip
     [enabled]="true"
     location="edge"
     [customizeTooltip]="customizeTooltip"
   >
-  </dxo-tooltip>
+  </dxo-chart-tooltip>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/StandardBar/Angular/app/app.component.html b/apps/demos/Demos/Charts/StandardBar/Angular/app/app.component.html
index 3d78aec354a0..1f7c9c9b03fb 100644
--- a/apps/demos/Demos/Charts/StandardBar/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/StandardBar/Angular/app/app.component.html
@@ -1,10 +1,10 @@
 <dx-chart id="chart" [dataSource]="dataSource">
-  <dxi-series
+  <dxi-chart-series
     argumentField="day"
     valueField="oranges"
     name="My oranges"
     type="bar"
     color="#ffaa66"
   >
-  </dxi-series>
+  </dxi-chart-series>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/StepArea/Angular/app/app.component.html b/apps/demos/Demos/Charts/StepArea/Angular/app/app.component.html
index 411ca6cb7d25..21a658fde473 100644
--- a/apps/demos/Demos/Charts/StepArea/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/StepArea/Angular/app/app.component.html
@@ -1,26 +1,30 @@
 <dx-chart id="chart" title="Australian Medal Count" [dataSource]="medalsInfo">
-  <dxi-series
+  <dxi-chart-series
     valueField="bronze"
     name="Bronze Medals"
     color="#cd7f32"
-  ></dxi-series>
-  <dxi-series
+  ></dxi-chart-series>
+  <dxi-chart-series
     valueField="silver"
     name="Silver Medals"
     color="#c0c0c0"
-  ></dxi-series>
-  <dxi-series valueField="gold" name="Gold Medals" color="#ffd700"></dxi-series>
-  <dxo-common-series-settings argumentField="year" type="steparea">
+  ></dxi-chart-series>
+  <dxi-chart-series
+    valueField="gold"
+    name="Gold Medals"
+    color="#ffd700"
+  ></dxi-chart-series>
+  <dxo-chart-common-series-settings argumentField="year" type="steparea">
     <dxo-steparea>
-      <dxo-border [visible]="false"></dxo-border>
+      <dxo-chart-border [visible]="false"></dxo-chart-border>
     </dxo-steparea>
-  </dxo-common-series-settings>
-  <dxo-argument-axis [valueMarginsEnabled]="false">
-    <dxo-label>
-      <dxo-format type="decimal"></dxo-format>
-    </dxo-label>
-  </dxo-argument-axis>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxo-legend verticalAlignment="bottom" horizontalAlignment="center">
-  </dxo-legend>
+  </dxo-chart-common-series-settings>
+  <dxo-chart-argument-axis [valueMarginsEnabled]="false">
+    <dxo-chart-label>
+      <dxo-chart-format type="decimal"></dxo-chart-format>
+    </dxo-chart-label>
+  </dxo-chart-argument-axis>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
+  <dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center">
+  </dxo-chart-legend>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/StepLine/Angular/app/app.component.html b/apps/demos/Demos/Charts/StepLine/Angular/app/app.component.html
index d8ad07ceeba9..249364e88cf5 100644
--- a/apps/demos/Demos/Charts/StepLine/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/StepLine/Angular/app/app.component.html
@@ -3,28 +3,32 @@
   [dataSource]="dataSource"
   title="Australian Olympic Medal Count"
 >
-  <dxi-series
+  <dxi-chart-series
     valueField="bronze"
     name="Bronze Medals"
     color="#cd7f32"
-  ></dxi-series>
-  <dxi-series
+  ></dxi-chart-series>
+  <dxi-chart-series
     valueField="silver"
     name="Silver Medals"
     color="#c0c0c0"
-  ></dxi-series>
-  <dxi-series valueField="gold" name="Gold Medals" color="#ffd700"></dxi-series>
-  <dxo-common-series-settings type="stepline" argumentField="year">
+  ></dxi-chart-series>
+  <dxi-chart-series
+    valueField="gold"
+    name="Gold Medals"
+    color="#ffd700"
+  ></dxi-chart-series>
+  <dxo-chart-common-series-settings type="stepline" argumentField="year">
     <dxo-stepline>
-      <dxo-point [visible]="false"></dxo-point>
+      <dxo-chart-point [visible]="false"></dxo-chart-point>
     </dxo-stepline>
-  </dxo-common-series-settings>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxo-argument-axis>
-    <dxo-label>
-      <dxo-format type="decimal"></dxo-format>
-    </dxo-label>
-  </dxo-argument-axis>
-  <dxo-legend verticalAlignment="bottom" horizontalAlignment="center">
-  </dxo-legend>
+  </dxo-chart-common-series-settings>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
+  <dxo-chart-argument-axis>
+    <dxo-chart-label>
+      <dxo-chart-format type="decimal"></dxo-chart-format>
+    </dxo-chart-label>
+  </dxo-chart-argument-axis>
+  <dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center">
+  </dxo-chart-legend>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/Stock/Angular/app/app.component.html b/apps/demos/Demos/Charts/Stock/Angular/app/app.component.html
index a422f97defd1..b2564bc3cc80 100644
--- a/apps/demos/Demos/Charts/Stock/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/Stock/Angular/app/app.component.html
@@ -1,29 +1,29 @@
 <dx-chart id="chart" title="Stock Price" [dataSource]="stockPrices">
-  <dxi-series
+  <dxi-chart-series
     name="E-Mart"
     openValueField="o"
     highValueField="h"
     lowValueField="l"
     closeValueField="c"
   >
-    <dxo-reduction color="red"></dxo-reduction>
-  </dxi-series>
-  <dxo-common-series-settings argumentField="date" type="stock">
-  </dxo-common-series-settings>
-  <dxi-value-axis [tickInterval]="1">
-    <dxo-title text="US dollars"></dxo-title>
-    <dxo-label>
-      <dxo-format type="currency" [precision]="0"> </dxo-format>
-    </dxo-label>
-  </dxi-value-axis>
-  <dxo-argument-axis [workdaysOnly]="true">
-    <dxo-label format="shortDate"></dxo-label>
-  </dxo-argument-axis>
-  <dxo-export [enabled]="true"></dxo-export>
-  <dxo-tooltip
+    <dxo-chart-reduction color="red"></dxo-chart-reduction>
+  </dxi-chart-series>
+  <dxo-chart-common-series-settings argumentField="date" type="stock">
+  </dxo-chart-common-series-settings>
+  <dxi-chart-value-axis [tickInterval]="1">
+    <dxo-chart-title text="US dollars"></dxo-chart-title>
+    <dxo-chart-label>
+      <dxo-chart-format type="currency" [precision]="0"> </dxo-chart-format>
+    </dxo-chart-label>
+  </dxi-chart-value-axis>
+  <dxo-chart-argument-axis [workdaysOnly]="true">
+    <dxo-chart-label format="shortDate"></dxo-chart-label>
+  </dxo-chart-argument-axis>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
+  <dxo-chart-tooltip
     [enabled]="true"
     location="edge"
     [customizeTooltip]="customizeTooltip"
   >
-  </dxo-tooltip>
+  </dxo-chart-tooltip>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/Strips/Angular/app/app.component.html b/apps/demos/Demos/Charts/Strips/Angular/app/app.component.html
index 324667ff6e9a..806b9247fb72 100644
--- a/apps/demos/Demos/Charts/Strips/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/Strips/Angular/app/app.component.html
@@ -5,30 +5,30 @@
   [customizePoint]="customizePoint"
   [customizeLabel]="customizeLabel"
 >
-  <dxi-series
+  <dxi-chart-series
     argumentField="day"
     valueField="temperature"
     type="spline"
     color="#a3aaaa"
-  ></dxi-series>
-  <dxi-value-axis>
-    <dxo-label [customizeText]="customizeText"></dxo-label>
-    <dxi-strip [startValue]="highAverage" color="rgba(255,155,85,0.15)">
-      <dxo-label text="Above average high">
-        <dxo-font [color]="highAverageColor"></dxo-font>
-      </dxo-label>
-    </dxi-strip>
-    <dxi-strip [endValue]="lowAverage" color="rgba(97,153,230,0.10)">
-      <dxo-label text="Below average low">
-        <dxo-font [color]="lowAverageColor"></dxo-font>
-      </dxo-label>
-    </dxi-strip>
-    <dxo-strip-style>
-      <dxo-label>
-        <dxo-font weight="500" size="14"></dxo-font>
-      </dxo-label>
-    </dxo-strip-style>
-  </dxi-value-axis>
-  <dxo-legend [visible]="false"></dxo-legend>
-  <dxo-export [enabled]="true"></dxo-export>
+  ></dxi-chart-series>
+  <dxi-chart-value-axis>
+    <dxo-chart-label [customizeText]="customizeText"></dxo-chart-label>
+    <dxi-chart-strip [startValue]="highAverage" color="rgba(255,155,85,0.15)">
+      <dxo-chart-label text="Above average high">
+        <dxo-chart-font [color]="highAverageColor"></dxo-chart-font>
+      </dxo-chart-label>
+    </dxi-chart-strip>
+    <dxi-chart-strip [endValue]="lowAverage" color="rgba(97,153,230,0.10)">
+      <dxo-chart-label text="Below average low">
+        <dxo-chart-font [color]="lowAverageColor"></dxo-chart-font>
+      </dxo-chart-label>
+    </dxi-chart-strip>
+    <dxo-chart-strip-style>
+      <dxo-chart-label>
+        <dxo-chart-font weight="500" size="14"></dxo-chart-font>
+      </dxo-chart-label>
+    </dxo-chart-strip-style>
+  </dxi-chart-value-axis>
+  <dxo-chart-legend [visible]="false"></dxo-chart-legend>
+  <dxo-chart-export [enabled]="true"></dxo-chart-export>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/Timeline/Angular/app/app.component.html b/apps/demos/Demos/Charts/Timeline/Angular/app/app.component.html
index c13053c8b281..d32d105507aa 100644
--- a/apps/demos/Demos/Charts/Timeline/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/Timeline/Angular/app/app.component.html
@@ -4,19 +4,19 @@
   [rotated]="true"
   [barGroupPadding]="0.2"
 >
-  <dxo-argument-axis [categories]="['Royal Houses']">
-    <dxo-tick [visible]="false"></dxo-tick>
-  </dxo-argument-axis>
-  <dxo-title
+  <dxo-chart-argument-axis [categories]="['Royal Houses']">
+    <dxo-chart-tick [visible]="false"></dxo-chart-tick>
+  </dxo-chart-argument-axis>
+  <dxo-chart-title
     text="The British Monarchy"
     subtitle="An Abbreviated Timeline"
-  ></dxo-title>
-  <dxo-animation [enabled]="false"></dxo-animation>
-  <dxo-legend verticalAlignment="bottom" horizontalAlignment="center">
-    <dxo-title text="Royal Houses"></dxo-title>
-  </dxo-legend>
-  <dxo-series-template nameField="house"></dxo-series-template>
-  <dxo-common-series-settings
+  ></dxo-chart-title>
+  <dxo-chart-animation [enabled]="false"></dxo-chart-animation>
+  <dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center">
+    <dxo-chart-title text="Royal Houses"></dxo-chart-title>
+  </dxo-chart-legend>
+  <dxo-chart-series-template nameField="house"></dxo-chart-series-template>
+  <dxo-chart-common-series-settings
     argumentField="monarch"
     type="rangeBar"
     rangeValue1Field="start"
@@ -24,5 +24,5 @@
     barOverlapGroup="monarchs"
     [minBarSize]="4"
   >
-  </dxo-common-series-settings>
+  </dxo-chart-common-series-settings>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/TooltipAPI/Angular/app/app.component.html b/apps/demos/Demos/Charts/TooltipAPI/Angular/app/app.component.html
index d89091c6f4e1..975bc87b7c37 100644
--- a/apps/demos/Demos/Charts/TooltipAPI/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/TooltipAPI/Angular/app/app.component.html
@@ -6,15 +6,15 @@
   title="The Population of Continents and Regions"
   (onPointClick)="pointClick($event)"
 >
-  <dxi-series argumentField="region"></dxi-series>
-  <dxo-tooltip
+  <dxi-pie-chart-series argumentField="region"></dxi-pie-chart-series>
+  <dxo-pie-chart-tooltip
     [enabled]="false"
     format="millions"
     [customizeTooltip]="customizeTooltip"
   >
-  </dxo-tooltip>
-  <dxo-size [height]="350"></dxo-size>
-  <dxo-legend [visible]="false"></dxo-legend>
+  </dxo-pie-chart-tooltip>
+  <dxo-pie-chart-size [height]="350"></dxo-pie-chart-size>
+  <dxo-pie-chart-legend [visible]="false"></dxo-pie-chart-legend>
 </dx-pie-chart>
 <div class="controls-pane">
   <dx-select-box
diff --git a/apps/demos/Demos/Charts/TooltipCustomization/Angular/app/app.component.html b/apps/demos/Demos/Charts/TooltipCustomization/Angular/app/app.component.html
index 0b12d6917ea2..3a341cc72291 100644
--- a/apps/demos/Demos/Charts/TooltipCustomization/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/TooltipCustomization/Angular/app/app.component.html
@@ -4,9 +4,11 @@
   palette="bright"
   title="Top 10 Most Populated States in US"
 >
-  <dxi-series argumentField="name" valueField="population"> </dxi-series>
-  <dxo-tooltip [enabled]="true" contentTemplate="content"> </dxo-tooltip>
-  <dxo-export [enabled]="true"></dxo-export>
+  <dxi-pie-chart-series argumentField="name" valueField="population">
+  </dxi-pie-chart-series>
+  <dxo-pie-chart-tooltip [enabled]="true" contentTemplate="content">
+  </dxo-pie-chart-tooltip>
+  <dxo-pie-chart-export [enabled]="true"></dxo-pie-chart-export>
   <div *dxTemplate="let info of 'content'" class="state-tooltip">
     <img src="{{ getImagePath(info.point) }}" /><h4 class="state">{{
       info.argument
diff --git a/apps/demos/Demos/Charts/WindRose/Angular/app/app.component.html b/apps/demos/Demos/Charts/WindRose/Angular/app/app.component.html
index bee26e62565b..0d4ad99f0ce2 100644
--- a/apps/demos/Demos/Charts/WindRose/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/WindRose/Angular/app/app.component.html
@@ -7,21 +7,26 @@
     [dataSource]="windRoseData[0].values"
     (onLegendClick)="onLegendClick($event)"
   >
-    <dxi-series
+    <dxi-polar-chart-series
       *ngFor="let item of windSources"
       [valueField]="item.valueField"
       [name]="item.name"
     >
-    </dxi-series>
-    <dxo-common-series-settings type="stackedbar"></dxo-common-series-settings>
-    <dxo-margin [bottom]="50" [left]="100"> </dxo-margin>
-    <dxo-argument-axis
+    </dxi-polar-chart-series>
+    <dxo-polar-chart-common-series-settings
+      type="stackedbar"
+    ></dxo-polar-chart-common-series-settings>
+    <dxo-polar-chart-margin [bottom]="50" [left]="100">
+    </dxo-polar-chart-margin>
+    <dxo-polar-chart-argument-axis
       discreteAxisDivisionMode="crossLabels"
       [firstPointOnStartAngle]="true"
     >
-    </dxo-argument-axis>
-    <dxo-value-axis [valueMarginsEnabled]="false"></dxo-value-axis>
-    <dxo-export [enabled]="true"></dxo-export>
+    </dxo-polar-chart-argument-axis>
+    <dxo-polar-chart-value-axis
+      [valueMarginsEnabled]="false"
+    ></dxo-polar-chart-value-axis>
+    <dxo-polar-chart-export [enabled]="true"></dxo-polar-chart-export>
   </dx-polar-chart>
   <div class="center">
     <dx-select-box
diff --git a/apps/demos/Demos/Charts/ZoomingAndScrolling/Angular/app/app.component.html b/apps/demos/Demos/Charts/ZoomingAndScrolling/Angular/app/app.component.html
index b502d389920d..fc69b56c1c2a 100644
--- a/apps/demos/Demos/Charts/ZoomingAndScrolling/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/ZoomingAndScrolling/Angular/app/app.component.html
@@ -1,9 +1,9 @@
 <dx-chart id="chart" palette="Harmony Light" [dataSource]="zoomingData">
-  <dxo-zoom-and-pan argumentAxis="both"></dxo-zoom-and-pan>
-  <dxi-series argumentField="arg" valueField="y1"></dxi-series>
-  <dxo-argument-axis [visualRange]="{ startValue: 300, endValue: 500 }">
-  </dxo-argument-axis>
-  <dxi-series argumentField="arg" valueField="y2"></dxi-series>
-  <dxo-scroll-bar [visible]="true"></dxo-scroll-bar>
-  <dxo-legend [visible]="false"></dxo-legend>
+  <dxo-chart-zoom-and-pan argumentAxis="both"></dxo-chart-zoom-and-pan>
+  <dxi-chart-series argumentField="arg" valueField="y1"></dxi-chart-series>
+  <dxo-chart-argument-axis [visualRange]="{ startValue: 300, endValue: 500 }">
+  </dxo-chart-argument-axis>
+  <dxi-chart-series argumentField="arg" valueField="y2"></dxi-chart-series>
+  <dxo-chart-scroll-bar [visible]="true"></dxo-chart-scroll-bar>
+  <dxo-chart-legend [visible]="false"></dxo-chart-legend>
 </dx-chart>
diff --git a/apps/demos/Demos/Charts/ZoomingAndScrollingAPI/Angular/app/app.component.html b/apps/demos/Demos/Charts/ZoomingAndScrollingAPI/Angular/app/app.component.html
index f5e1a7f46238..dd52a1c1fe31 100644
--- a/apps/demos/Demos/Charts/ZoomingAndScrollingAPI/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/ZoomingAndScrollingAPI/Angular/app/app.component.html
@@ -1,21 +1,33 @@
 <dx-chart #zoomedChart palette="Harmony Light" [dataSource]="zoomingData">
-  <dxi-series argumentField="arg" valueField="y1"></dxi-series>
-  <dxi-series argumentField="arg" valueField="y2"></dxi-series>
-  <dxi-series argumentField="arg" valueField="y3"></dxi-series>
-  <dxo-common-series-settings>
-    <dxo-point [size]="7"></dxo-point>
-  </dxo-common-series-settings>
-  <dxo-legend [visible]="false"></dxo-legend>
-  <dxo-argument-axis [visualRange]="visualRange"> </dxo-argument-axis>
+  <dxi-chart-series argumentField="arg" valueField="y1"></dxi-chart-series>
+  <dxi-chart-series argumentField="arg" valueField="y2"></dxi-chart-series>
+  <dxi-chart-series argumentField="arg" valueField="y3"></dxi-chart-series>
+  <dxo-chart-common-series-settings>
+    <dxo-chart-point [size]="7"></dxo-chart-point>
+  </dxo-chart-common-series-settings>
+  <dxo-chart-legend [visible]="false"></dxo-chart-legend>
+  <dxo-chart-argument-axis [visualRange]="visualRange">
+  </dxo-chart-argument-axis>
 </dx-chart>
 <dx-range-selector [dataSource]="zoomingData" [(value)]="visualRange">
-  <dxo-size [height]="120"></dxo-size>
-  <dxo-margin [left]="10"></dxo-margin>
-  <dxo-scale [minorTickCount]="1"></dxo-scale>
-  <dxo-behavior valueChangeMode="onHandleMove"></dxo-behavior>
-  <dxo-chart palette="Harmony Light">
-    <dxi-series argumentField="arg" valueField="y1"></dxi-series>
-    <dxi-series argumentField="arg" valueField="y2"></dxi-series>
-    <dxi-series argumentField="arg" valueField="y3"></dxi-series>
-  </dxo-chart>
+  <dxo-range-selector-size [height]="120"></dxo-range-selector-size>
+  <dxo-range-selector-margin [left]="10"></dxo-range-selector-margin>
+  <dxo-range-selector-scale [minorTickCount]="1"></dxo-range-selector-scale>
+  <dxo-range-selector-behavior
+    valueChangeMode="onHandleMove"
+  ></dxo-range-selector-behavior>
+  <dxo-range-selector-chart palette="Harmony Light">
+    <dxi-range-selector-series
+      argumentField="arg"
+      valueField="y1"
+    ></dxi-range-selector-series>
+    <dxi-range-selector-series
+      argumentField="arg"
+      valueField="y2"
+    ></dxi-range-selector-series>
+    <dxi-range-selector-series
+      argumentField="arg"
+      valueField="y3"
+    ></dxi-range-selector-series>
+  </dxo-range-selector-chart>
 </dx-range-selector>
diff --git a/apps/demos/Demos/Scheduler/AppointmentCountPerCell/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/AppointmentCountPerCell/Angular/app/app.component.html
index 629a705a0b10..a5f00b796700 100644
--- a/apps/demos/Demos/Scheduler/AppointmentCountPerCell/Angular/app/app.component.html
+++ b/apps/demos/Demos/Scheduler/AppointmentCountPerCell/Angular/app/app.component.html
@@ -5,16 +5,24 @@
   [currentDate]="currentDate"
   [height]="730"
 >
-  <dxi-view name="Auto Mode" type="month" maxAppointmentsPerCell="auto">
-  </dxi-view>
-  <dxi-view
+  <dxi-scheduler-view
+    name="Auto Mode"
+    type="month"
+    maxAppointmentsPerCell="auto"
+  >
+  </dxi-scheduler-view>
+  <dxi-scheduler-view
     name="Unlimited Mode"
     type="month"
     maxAppointmentsPerCell="unlimited"
   >
-  </dxi-view>
-  <dxi-view name="Numeric Mode" type="month" [maxAppointmentsPerCell]="2">
-  </dxi-view>
+  </dxi-scheduler-view>
+  <dxi-scheduler-view
+    name="Numeric Mode"
+    type="month"
+    [maxAppointmentsPerCell]="2"
+  >
+  </dxi-scheduler-view>
   <dxi-scheduler-resource
     fieldExpr="roomId"
     label="room"
diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Angular/app/app.component.html
index c473935e309f..49370cd12e33 100644
--- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Angular/app/app.component.html
+++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Angular/app/app.component.html
@@ -14,7 +14,8 @@
   (onAppointmentClick)="onAppointmentClick($event)"
   (onAppointmentDblClick)="onAppointmentDblClick($event)"
 >
-  <dxi-resource fieldExpr="movieId" [dataSource]="moviesData"> </dxi-resource>
+  <dxi-scheduler-resource fieldExpr="movieId" [dataSource]="moviesData">
+  </dxi-scheduler-resource>
 
   <div *dxTemplate="let model of 'appointment-template'">
     <ng-container
diff --git a/apps/demos/Demos/Scheduler/CustomViewDuration/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/CustomViewDuration/Angular/app/app.component.html
index cda79a21387e..ec012c1c80bc 100644
--- a/apps/demos/Demos/Scheduler/CustomViewDuration/Angular/app/app.component.html
+++ b/apps/demos/Demos/Scheduler/CustomViewDuration/Angular/app/app.component.html
@@ -7,19 +7,20 @@
   [currentDate]="currentDate"
   [height]="580"
 >
-  <dxi-view
+  <dxi-scheduler-view
     name="3 Days"
     type="day"
     [intervalCount]="3"
     [startDate]="daysViewStartDate"
   >
-  </dxi-view>
-  <dxi-view
+  </dxi-scheduler-view>
+  <dxi-scheduler-view
     name="2 Work Weeks"
     type="workWeek"
     [intervalCount]="2"
     [startDate]="weeksViewStartDate"
   >
-  </dxi-view>
-  <dxi-view name="2 Months" type="month" [intervalCount]="2"> </dxi-view>
+  </dxi-scheduler-view>
+  <dxi-scheduler-view name="2 Months" type="month" [intervalCount]="2">
+  </dxi-scheduler-view>
 </dx-scheduler>
diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/DragAndDrop/Angular/app/app.component.html
index 73c4496f3353..1c1280958367 100644
--- a/apps/demos/Demos/Scheduler/DragAndDrop/Angular/app/app.component.html
+++ b/apps/demos/Demos/Scheduler/DragAndDrop/Angular/app/app.component.html
@@ -28,12 +28,12 @@
   [height]="600"
   [editing]="true"
 >
-  <dxi-view type="day" [intervalCount]="3"> </dxi-view>
+  <dxi-scheduler-view type="day" [intervalCount]="3"> </dxi-scheduler-view>
 
-  <dxo-appointment-dragging
+  <dxo-scheduler-appointment-dragging
     [group]="draggingGroupName"
     [onRemove]="onAppointmentRemove"
     [onAdd]="onAppointmentAdd"
   >
-  </dxo-appointment-dragging>
+  </dxo-scheduler-appointment-dragging>
 </dx-scheduler>
diff --git a/apps/demos/Demos/Scheduler/Editing/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/Editing/Angular/app/app.component.html
index b5ea596af0d7..de4baec5b614 100644
--- a/apps/demos/Demos/Scheduler/Editing/Angular/app/app.component.html
+++ b/apps/demos/Demos/Scheduler/Editing/Angular/app/app.component.html
@@ -11,14 +11,14 @@
   (onAppointmentUpdated)="onAppointmentUpdated($event)"
   (onAppointmentDeleted)="onAppointmentDeleted($event)"
 >
-  <dxo-editing
+  <dxo-scheduler-editing
     #editingOptions
     [allowAdding]="true"
     [allowDeleting]="true"
     [allowUpdating]="true"
     [allowResizing]="true"
     [allowDragging]="true"
-  ></dxo-editing>
+  ></dxo-scheduler-editing>
 </dx-scheduler>
 <div class="options">
   <div class="caption">Options</div>
diff --git a/apps/demos/Demos/Scheduler/GroupByDate/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/GroupByDate/Angular/app/app.component.html
index ef0c87327897..91d0e792dd61 100644
--- a/apps/demos/Demos/Scheduler/GroupByDate/Angular/app/app.component.html
+++ b/apps/demos/Demos/Scheduler/GroupByDate/Angular/app/app.component.html
@@ -10,8 +10,8 @@
   [height]="730"
   [crossScrollingEnabled]="true"
 >
-  <dxi-view type="week" name="Week"> </dxi-view>
-  <dxi-view type="month" name="Month"> </dxi-view>
+  <dxi-scheduler-view type="week" name="Week"> </dxi-scheduler-view>
+  <dxi-scheduler-view type="month" name="Month"> </dxi-scheduler-view>
   <dxi-scheduler-resource
     [dataSource]="prioritiesData"
     fieldExpr="priorityId"
diff --git a/apps/demos/Demos/Scheduler/GroupingByResources/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/GroupingByResources/Angular/app/app.component.html
index 4b790b1621bd..7df3ec227e01 100644
--- a/apps/demos/Demos/Scheduler/GroupingByResources/Angular/app/app.component.html
+++ b/apps/demos/Demos/Scheduler/GroupingByResources/Angular/app/app.component.html
@@ -10,22 +10,22 @@
   [showAllDayPanel]="false"
   [crossScrollingEnabled]="true"
 >
-  <dxi-view
+  <dxi-scheduler-view
     type="workWeek"
     name="Vertical Grouping"
     groupOrientation="vertical"
     [cellDuration]="60"
     [intervalCount]="2"
   >
-  </dxi-view>
-  <dxi-view
+  </dxi-scheduler-view>
+  <dxi-scheduler-view
     type="workWeek"
     name="Horizontal Grouping"
     groupOrientation="horizontal"
     [cellDuration]="30"
     [intervalCount]="2"
   >
-  </dxi-view>
+  </dxi-scheduler-view>
   <dxi-scheduler-resource
     [dataSource]="prioritiesData"
     fieldExpr="priorityId"
diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/Angular/app/app.component.html
index d9a55f22c2bf..58fa841d07f3 100644
--- a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/Angular/app/app.component.html
+++ b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/Angular/app/app.component.html
@@ -9,20 +9,20 @@
   [startDayHour]="7"
   [endDayHour]="23"
 >
-  <dxi-view type="day"></dxi-view>
-  <dxi-view
+  <dxi-scheduler-view type="day"></dxi-scheduler-view>
+  <dxi-scheduler-view
     type="week"
     [groups]="['typeId']"
     dateCellTemplate="dateCellTemplate"
-  ></dxi-view>
-  <dxi-view
+  ></dxi-scheduler-view>
+  <dxi-scheduler-view
     type="workWeek"
     [startDayHour]="9"
     [endDayHour]="18"
     [groups]="['priorityId']"
     dateCellTemplate="dateCellTemplate"
-  ></dxi-view>
-  <dxi-view type="month"></dxi-view>
+  ></dxi-scheduler-view>
+  <dxi-scheduler-view type="month"></dxi-scheduler-view>
 
   <dxi-scheduler-resource
     fieldExpr="priorityId"
diff --git a/apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.html
index 9df7cbf6c83c..a6b90637229f 100644
--- a/apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.html
+++ b/apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.html
@@ -20,17 +20,17 @@ <h3>DXCinema Show Times</h3>
   appointmentTooltipTemplate="tooltip-template"
   (onAppointmentFormOpening)="onAppointmentFormOpening($event)"
 >
-  <dxo-editing [allowAdding]="false"></dxo-editing>
+  <dxo-scheduler-editing [allowAdding]="false"></dxo-scheduler-editing>
 
-  <dxi-resource
+  <dxi-scheduler-resource
     fieldExpr="movieId"
     [useColorAsDefault]="true"
     [dataSource]="moviesData"
   >
-  </dxi-resource>
+  </dxi-scheduler-resource>
 
-  <dxi-resource fieldExpr="theatreId" [dataSource]="theatreData">
-  </dxi-resource>
+  <dxi-scheduler-resource fieldExpr="theatreId" [dataSource]="theatreData">
+  </dxi-scheduler-resource>
 
   <div *dxTemplate="let model of 'appointment-template'">
     <div class="showtime-preview">
diff --git a/apps/demos/Demos/Scheduler/TimeZonesSupport/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/TimeZonesSupport/Angular/app/app.component.html
index 76bdc7129591..ebee4d4b2489 100644
--- a/apps/demos/Demos/Scheduler/TimeZonesSupport/Angular/app/app.component.html
+++ b/apps/demos/Demos/Scheduler/TimeZonesSupport/Angular/app/app.component.html
@@ -21,5 +21,5 @@
   (onAppointmentFormOpening)="onAppointmentFormOpening($event)"
   (onOptionChanged)="onOptionChanged($event)"
 >
-  <dxo-editing [allowTimeZoneEditing]="true"> </dxo-editing>
+  <dxo-scheduler-editing [allowTimeZoneEditing]="true"> </dxo-scheduler-editing>
 </dx-scheduler>
diff --git a/apps/demos/Demos/Scheduler/VirtualScrolling/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/VirtualScrolling/Angular/app/app.component.html
index cb8e518e7d03..b3f7c6fcf12b 100644
--- a/apps/demos/Demos/Scheduler/VirtualScrolling/Angular/app/app.component.html
+++ b/apps/demos/Demos/Scheduler/VirtualScrolling/Angular/app/app.component.html
@@ -9,13 +9,19 @@
   [showAllDayPanel]="false"
   [groups]="['humanId']"
 >
-  <dxi-view
+  <dxi-scheduler-view
     type="timelineWorkWeek"
     name="Timeline"
     groupOrientation="vertical"
-  ></dxi-view>
-  <dxi-view type="workWeek" groupOrientation="vertical"></dxi-view>
-  <dxi-view type="month" groupOrientation="horizontal"></dxi-view>
+  ></dxi-scheduler-view>
+  <dxi-scheduler-view
+    type="workWeek"
+    groupOrientation="vertical"
+  ></dxi-scheduler-view>
+  <dxi-scheduler-view
+    type="month"
+    groupOrientation="horizontal"
+  ></dxi-scheduler-view>
   <dxi-scheduler-resource
     fieldExpr="humanId"
     [dataSource]="resources"
@@ -23,5 +29,5 @@
     icon="group"
   >
   </dxi-scheduler-resource>
-  <dxo-scrolling mode="virtual"> </dxo-scrolling>
+  <dxo-scheduler-scrolling mode="virtual"> </dxo-scheduler-scrolling>
 </dx-scheduler>