diff --git a/samples/charts/category-chart/area-chart-multiple-sources/src/app.component.html b/samples/charts/category-chart/area-chart-multiple-sources/src/app.component.html
index ec95210b7..f0694b05b 100644
--- a/samples/charts/category-chart/area-chart-multiple-sources/src/app.component.html
+++ b/samples/charts/category-chart/area-chart-multiple-sources/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/area-chart-styling/src/app.component.html b/samples/charts/category-chart/area-chart-styling/src/app.component.html
index b288f512f..72a39165d 100644
--- a/samples/charts/category-chart/area-chart-styling/src/app.component.html
+++ b/samples/charts/category-chart/area-chart-styling/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/axis-gridlines/src/app.component.html b/samples/charts/category-chart/axis-gridlines/src/app.component.html
index 80ec4e8fc..315431877 100644
--- a/samples/charts/category-chart/axis-gridlines/src/app.component.html
+++ b/samples/charts/category-chart/axis-gridlines/src/app.component.html
@@ -48,7 +48,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/axis-labels/src/app.component.html b/samples/charts/category-chart/axis-labels/src/app.component.html
index c7a48abd3..ef6906779 100644
--- a/samples/charts/category-chart/axis-labels/src/app.component.html
+++ b/samples/charts/category-chart/axis-labels/src/app.component.html
@@ -48,7 +48,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/axis-locations/src/app.component.html b/samples/charts/category-chart/axis-locations/src/app.component.html
index a7afeedff..4100a30df 100644
--- a/samples/charts/category-chart/axis-locations/src/app.component.html
+++ b/samples/charts/category-chart/axis-locations/src/app.component.html
@@ -22,7 +22,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/axis-overlap/src/app.component.html b/samples/charts/category-chart/axis-overlap/src/app.component.html
index 308abdb9b..6cf8e4fe3 100644
--- a/samples/charts/category-chart/axis-overlap/src/app.component.html
+++ b/samples/charts/category-chart/axis-overlap/src/app.component.html
@@ -27,7 +27,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/axis-range/src/app.component.html b/samples/charts/category-chart/axis-range/src/app.component.html
index 50268a291..01471732a 100644
--- a/samples/charts/category-chart/axis-range/src/app.component.html
+++ b/samples/charts/category-chart/axis-range/src/app.component.html
@@ -39,7 +39,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/axis-tickmarks/src/app.component.html b/samples/charts/category-chart/axis-tickmarks/src/app.component.html
index 31fab1fed..2fd1c3b52 100644
--- a/samples/charts/category-chart/axis-tickmarks/src/app.component.html
+++ b/samples/charts/category-chart/axis-tickmarks/src/app.component.html
@@ -26,7 +26,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/axis-titles/src/app.component.html b/samples/charts/category-chart/axis-titles/src/app.component.html
index 70d0fa22d..c6795a87b 100644
--- a/samples/charts/category-chart/axis-titles/src/app.component.html
+++ b/samples/charts/category-chart/axis-titles/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/chart-highlight-filter/src/app.component.html b/samples/charts/category-chart/chart-highlight-filter/src/app.component.html
index 8ba9bc475..20053d1c9 100644
--- a/samples/charts/category-chart/chart-highlight-filter/src/app.component.html
+++ b/samples/charts/category-chart/chart-highlight-filter/src/app.component.html
@@ -10,7 +10,7 @@
       isWrappingEnabled="true">
           <igx-property-editor-property-description
           propertyPath="HighlightedValuesDisplayMode"
-          name="HighlightedValuesDisplayModeEditor"
+          name="highlightedValuesDisplayModeEditor"
           #highlightedValuesDisplayModeEditor
           label="Highlight Display Mode: "
           primitiveValue="Hidden">
diff --git a/samples/charts/category-chart/column-chart-multiple-sources/src/app.component.html b/samples/charts/category-chart/column-chart-multiple-sources/src/app.component.html
index 4b6c5ce40..52d34b3f7 100644
--- a/samples/charts/category-chart/column-chart-multiple-sources/src/app.component.html
+++ b/samples/charts/category-chart/column-chart-multiple-sources/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/column-chart-styling/src/app.component.html b/samples/charts/category-chart/column-chart-styling/src/app.component.html
index bbfb7cf7c..7df8aafe2 100644
--- a/samples/charts/category-chart/column-chart-styling/src/app.component.html
+++ b/samples/charts/category-chart/column-chart-styling/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/column-chart-with-tooltips/src/app.component.html b/samples/charts/category-chart/column-chart-with-tooltips/src/app.component.html
index 12c804bb1..9f2845478 100644
--- a/samples/charts/category-chart/column-chart-with-tooltips/src/app.component.html
+++ b/samples/charts/category-chart/column-chart-with-tooltips/src/app.component.html
@@ -22,7 +22,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend>
       </igx-legend>
   </div>
diff --git a/samples/charts/category-chart/custom-selection/src/app.component.html b/samples/charts/category-chart/custom-selection/src/app.component.html
index 4639fc79b..c2497b129 100644
--- a/samples/charts/category-chart/custom-selection/src/app.component.html
+++ b/samples/charts/category-chart/custom-selection/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-data-legend
-      name="Legend"
+      name="legend"
       #legend
       summaryType="None"
       valueFormatMaxFractions="0"
diff --git a/samples/charts/category-chart/data-filter/src/app.component.html b/samples/charts/category-chart/data-filter/src/app.component.html
index 21b390d29..e7e76ee22 100644
--- a/samples/charts/category-chart/data-filter/src/app.component.html
+++ b/samples/charts/category-chart/data-filter/src/app.component.html
@@ -26,7 +26,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/data-legend-formatting-decimals/src/app.component.html b/samples/charts/category-chart/data-legend-formatting-decimals/src/app.component.html
index 24a7489af..53651e8f4 100644
--- a/samples/charts/category-chart/data-legend-formatting-decimals/src/app.component.html
+++ b/samples/charts/category-chart/data-legend-formatting-decimals/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-data-legend
-      name="Legend"
+      name="legend"
       #legend
       [target]="chart"
       valueFormatMode="Decimal"
diff --git a/samples/charts/category-chart/data-legend/src/app.component.html b/samples/charts/category-chart/data-legend/src/app.component.html
index 3cb1a5d10..ef81e40a9 100644
--- a/samples/charts/category-chart/data-legend/src/app.component.html
+++ b/samples/charts/category-chart/data-legend/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-data-legend
-      name="Legend"
+      name="legend"
       #legend
       unitsText="B"
       [target]="chart">
diff --git a/samples/charts/category-chart/format-specifiers/src/app.component.html b/samples/charts/category-chart/format-specifiers/src/app.component.html
index 43b0fd08f..69ce8abe6 100644
--- a/samples/charts/category-chart/format-specifiers/src/app.component.html
+++ b/samples/charts/category-chart/format-specifiers/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-data-legend
-      name="Legend"
+      name="legend"
       #legend
       [target]="chart"
       valueFormatString="{0} Billion"
diff --git a/samples/charts/category-chart/legend-highlighting/src/app.component.html b/samples/charts/category-chart/legend-highlighting/src/app.component.html
index b27619e74..cffac685e 100644
--- a/samples/charts/category-chart/legend-highlighting/src/app.component.html
+++ b/samples/charts/category-chart/legend-highlighting/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend>
       </igx-legend>
   </div>
diff --git a/samples/charts/category-chart/line-chart-multiple-sources/src/app.component.html b/samples/charts/category-chart/line-chart-multiple-sources/src/app.component.html
index 156f9fd7b..e2ca6655d 100644
--- a/samples/charts/category-chart/line-chart-multiple-sources/src/app.component.html
+++ b/samples/charts/category-chart/line-chart-multiple-sources/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/line-chart-styling/src/app.component.html b/samples/charts/category-chart/line-chart-styling/src/app.component.html
index 6d39f86ee..acddb5184 100644
--- a/samples/charts/category-chart/line-chart-styling/src/app.component.html
+++ b/samples/charts/category-chart/line-chart-styling/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/overview/src/app.component.html b/samples/charts/category-chart/overview/src/app.component.html
index e60c290af..49329a19c 100644
--- a/samples/charts/category-chart/overview/src/app.component.html
+++ b/samples/charts/category-chart/overview/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/point-chart-multiple-sources/src/app.component.html b/samples/charts/category-chart/point-chart-multiple-sources/src/app.component.html
index 47f81f5b7..7dfb2e496 100644
--- a/samples/charts/category-chart/point-chart-multiple-sources/src/app.component.html
+++ b/samples/charts/category-chart/point-chart-multiple-sources/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/point-chart-styling/src/app.component.html b/samples/charts/category-chart/point-chart-styling/src/app.component.html
index 8381cd34d..94cab8e52 100644
--- a/samples/charts/category-chart/point-chart-styling/src/app.component.html
+++ b/samples/charts/category-chart/point-chart-styling/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/selection-multiple-modes/src/app.component.html b/samples/charts/category-chart/selection-multiple-modes/src/app.component.html
index 7ac3f38ea..7da2fea73 100644
--- a/samples/charts/category-chart/selection-multiple-modes/src/app.component.html
+++ b/samples/charts/category-chart/selection-multiple-modes/src/app.component.html
@@ -29,7 +29,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/spline-area-multiple-sources/src/app.component.html b/samples/charts/category-chart/spline-area-multiple-sources/src/app.component.html
index f431fb599..e49261ce6 100644
--- a/samples/charts/category-chart/spline-area-multiple-sources/src/app.component.html
+++ b/samples/charts/category-chart/spline-area-multiple-sources/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/spline-area-styling/src/app.component.html b/samples/charts/category-chart/spline-area-styling/src/app.component.html
index bdabdf454..4b22a28bd 100644
--- a/samples/charts/category-chart/spline-area-styling/src/app.component.html
+++ b/samples/charts/category-chart/spline-area-styling/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/spline-multiple-sources/src/app.component.html b/samples/charts/category-chart/spline-multiple-sources/src/app.component.html
index 54d7a896b..af8c8d355 100644
--- a/samples/charts/category-chart/spline-multiple-sources/src/app.component.html
+++ b/samples/charts/category-chart/spline-multiple-sources/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/spline-styling/src/app.component.html b/samples/charts/category-chart/spline-styling/src/app.component.html
index f9d3a0129..79b749493 100644
--- a/samples/charts/category-chart/spline-styling/src/app.component.html
+++ b/samples/charts/category-chart/spline-styling/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/step-area-multiple-sources/src/app.component.html b/samples/charts/category-chart/step-area-multiple-sources/src/app.component.html
index 07d25c305..ec5f6348b 100644
--- a/samples/charts/category-chart/step-area-multiple-sources/src/app.component.html
+++ b/samples/charts/category-chart/step-area-multiple-sources/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/step-area-styling/src/app.component.html b/samples/charts/category-chart/step-area-styling/src/app.component.html
index a77cbd89e..74cac2ae4 100644
--- a/samples/charts/category-chart/step-area-styling/src/app.component.html
+++ b/samples/charts/category-chart/step-area-styling/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/step-line-multiple-sources/src/app.component.html b/samples/charts/category-chart/step-line-multiple-sources/src/app.component.html
index 9f0fd089a..d038730d9 100644
--- a/samples/charts/category-chart/step-line-multiple-sources/src/app.component.html
+++ b/samples/charts/category-chart/step-line-multiple-sources/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/step-line-styling/src/app.component.html b/samples/charts/category-chart/step-line-styling/src/app.component.html
index 742425d37..664b89d9a 100644
--- a/samples/charts/category-chart/step-line-styling/src/app.component.html
+++ b/samples/charts/category-chart/step-line-styling/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/category-chart/value-lines/src/app.component.html b/samples/charts/category-chart/value-lines/src/app.component.html
index 6e9d10450..03afaa78d 100644
--- a/samples/charts/category-chart/value-lines/src/app.component.html
+++ b/samples/charts/category-chart/value-lines/src/app.component.html
@@ -27,7 +27,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/data-chart/annotations-custom/src/app.component.html b/samples/charts/data-chart/annotations-custom/src/app.component.html
index ff0127ed9..1abea53e1 100644
--- a/samples/charts/data-chart/annotations-custom/src/app.component.html
+++ b/samples/charts/data-chart/annotations-custom/src/app.component.html
@@ -17,7 +17,7 @@
           #yAxis>
           </igx-numeric-y-axis>
           <igx-line-series
-          name="LineSeries1"
+          name="lineSeries1"
           #lineSeries1
           title="Electricity"
           [xAxis]="xAxis"
diff --git a/samples/charts/data-chart/axis-annotations-corner-radius/src/app.component.html b/samples/charts/data-chart/axis-annotations-corner-radius/src/app.component.html
index abc0481ac..0ebe1a081 100644
--- a/samples/charts/data-chart/axis-annotations-corner-radius/src/app.component.html
+++ b/samples/charts/data-chart/axis-annotations-corner-radius/src/app.component.html
@@ -18,7 +18,7 @@
           title="TWh">
           </igx-numeric-y-axis>
           <igx-line-series
-          name="LineSeries1"
+          name="lineSeries1"
           #lineSeries1
           title="Electricity"
           [xAxis]="xAxis"
diff --git a/samples/charts/data-chart/bar-chart-multiple-sources/src/app.component.html b/samples/charts/data-chart/bar-chart-multiple-sources/src/app.component.html
index 67b33a256..4cc6c0813 100644
--- a/samples/charts/data-chart/bar-chart-multiple-sources/src/app.component.html
+++ b/samples/charts/data-chart/bar-chart-multiple-sources/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/data-chart/bar-chart-overlapping/src/app.component.html b/samples/charts/data-chart/bar-chart-overlapping/src/app.component.html
index 48f694037..90fea6fb0 100644
--- a/samples/charts/data-chart/bar-chart-overlapping/src/app.component.html
+++ b/samples/charts/data-chart/bar-chart-overlapping/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/data-chart/callout-layer-styling/src/app.component.html b/samples/charts/data-chart/callout-layer-styling/src/app.component.html
index 5111f2a4f..23dc0c0f4 100644
--- a/samples/charts/data-chart/callout-layer-styling/src/app.component.html
+++ b/samples/charts/data-chart/callout-layer-styling/src/app.component.html
@@ -21,7 +21,7 @@
           labelLocation="OutsideRight">
           </igx-numeric-y-axis>
           <igx-line-series
-          name="LineSeries1"
+          name="lineSeries1"
           #lineSeries1
           [xAxis]="xAxis"
           [yAxis]="yAxis"
diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/app.component.html b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/app.component.html
index cefd8cb52..e1ee99a94 100644
--- a/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/app.component.html
+++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/app.component.html
@@ -1,7 +1,7 @@
 <div class="container vertical sample">
   <div class="legend">
       <igx-data-legend
-      name="Legend"
+      name="legend"
       #legend
       [target]="chart"
       groupRowVisible="true">
diff --git a/samples/charts/data-chart/data-legend-grouping/src/app.component.html b/samples/charts/data-chart/data-legend-grouping/src/app.component.html
index cea9e8230..b8c11bae7 100644
--- a/samples/charts/data-chart/data-legend-grouping/src/app.component.html
+++ b/samples/charts/data-chart/data-legend-grouping/src/app.component.html
@@ -1,7 +1,7 @@
 <div class="container vertical sample">
   <div class="legend">
       <igx-data-legend
-      name="Legend"
+      name="legend"
       #legend
       [target]="chart"
       groupRowVisible="true">
diff --git a/samples/charts/data-chart/data-legend-styling/src/app.component.html b/samples/charts/data-chart/data-legend-styling/src/app.component.html
index dc9c7a2e2..923b2c932 100644
--- a/samples/charts/data-chart/data-legend-styling/src/app.component.html
+++ b/samples/charts/data-chart/data-legend-styling/src/app.component.html
@@ -1,7 +1,7 @@
 <div class="container vertical sample">
   <div class="legend">
       <igx-data-legend
-      name="Legend"
+      name="legend"
       #legend
       [target]="chart"
       groupRowVisible="true"
@@ -40,7 +40,7 @@
           highlightedTitleSuffix="America">
           </igx-column-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer
           groupRowVisible="true"
           groupingMode="Grouped">
diff --git a/samples/charts/data-chart/data-legend/src/app.component.html b/samples/charts/data-chart/data-legend/src/app.component.html
index 555001940..ddc9c80dc 100644
--- a/samples/charts/data-chart/data-legend/src/app.component.html
+++ b/samples/charts/data-chart/data-legend/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-data-legend
-      name="Legend"
+      name="legend"
       #legend
       [target]="chart">
       </igx-data-legend>
@@ -30,7 +30,7 @@
           maximumValue="60">
           </igx-numeric-y-axis>
           <igx-bubble-series
-          name="BubbleSeries1"
+          name="bubbleSeries1"
           #bubbleSeries1
           [xAxis]="xAxis"
           [yAxis]="yAxis"
@@ -45,7 +45,7 @@
           yMemberAsLegendLabel="Birth Rate: ">
           </igx-bubble-series>
           <igx-bubble-series
-          name="BubbleSeries2"
+          name="bubbleSeries2"
           #bubbleSeries2
           [xAxis]="xAxis"
           [yAxis]="yAxis"
diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/app.component.html b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/app.component.html
index 7e21a56ee..38bce5d67 100644
--- a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/app.component.html
+++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/app.component.html
@@ -56,7 +56,7 @@
           highlightedTitleSuffix="">
           </igx-column-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer
           groupRowVisible="true"
           groupingMode="Grouped">
diff --git a/samples/charts/data-chart/data-tooltip-grouping/src/app.component.html b/samples/charts/data-chart/data-tooltip-grouping/src/app.component.html
index 7522afd73..34d8ab158 100644
--- a/samples/charts/data-chart/data-tooltip-grouping/src/app.component.html
+++ b/samples/charts/data-chart/data-tooltip-grouping/src/app.component.html
@@ -46,7 +46,7 @@
           dataLegendGroup="Medals by Country">
           </igx-column-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer
           groupRowVisible="true"
           groupingMode="Grouped">
diff --git a/samples/charts/data-chart/data-tooltip-styling/src/app.component.html b/samples/charts/data-chart/data-tooltip-styling/src/app.component.html
index 7df3aecb4..56b6ce09c 100644
--- a/samples/charts/data-chart/data-tooltip-styling/src/app.component.html
+++ b/samples/charts/data-chart/data-tooltip-styling/src/app.component.html
@@ -30,7 +30,7 @@
           highlightedTitleSuffix="America">
           </igx-column-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer
           groupRowVisible="true"
           groupingMode="Grouped"
diff --git a/samples/charts/data-chart/data-tooltip/src/app.component.html b/samples/charts/data-chart/data-tooltip/src/app.component.html
index fd3c33ce7..c377fd8f2 100644
--- a/samples/charts/data-chart/data-tooltip/src/app.component.html
+++ b/samples/charts/data-chart/data-tooltip/src/app.component.html
@@ -23,7 +23,7 @@
           maximumValue="60">
           </igx-numeric-y-axis>
           <igx-bubble-series
-          name="BubbleSeries1"
+          name="bubbleSeries1"
           #bubbleSeries1
           [xAxis]="xAxis"
           [yAxis]="yAxis"
@@ -38,7 +38,7 @@
           yMemberAsLegendLabel="Birth Rate: ">
           </igx-bubble-series>
           <igx-bubble-series
-          name="BubbleSeries2"
+          name="bubbleSeries2"
           #bubbleSeries2
           [xAxis]="xAxis"
           [yAxis]="yAxis"
@@ -53,7 +53,7 @@
           yMemberAsLegendLabel="Birth Rate: ">
           </igx-bubble-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/financial-price-series/src/app.component.html b/samples/charts/data-chart/financial-price-series/src/app.component.html
index 9484d2724..e31cfe956 100644
--- a/samples/charts/data-chart/financial-price-series/src/app.component.html
+++ b/samples/charts/data-chart/financial-price-series/src/app.component.html
@@ -22,7 +22,7 @@
           labelLocation="OutsideRight">
           </igx-numeric-y-axis>
           <igx-financial-price-series
-          name="Series1"
+          name="series1"
           #series1
           title="Stock Price"
           displayType="Candlestick"
diff --git a/samples/charts/data-chart/polar-area-chart-styling/src/app.component.html b/samples/charts/data-chart/polar-area-chart-styling/src/app.component.html
index b1468abdd..cd8b665ea 100644
--- a/samples/charts/data-chart/polar-area-chart-styling/src/app.component.html
+++ b/samples/charts/data-chart/polar-area-chart-styling/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/data-chart/polar-area-chart/src/app.component.html b/samples/charts/data-chart/polar-area-chart/src/app.component.html
index 9e1839d64..e59246f49 100644
--- a/samples/charts/data-chart/polar-area-chart/src/app.component.html
+++ b/samples/charts/data-chart/polar-area-chart/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -62,7 +62,7 @@
           markerType="Circle">
           </igx-polar-area-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/polar-line-chart/src/app.component.html b/samples/charts/data-chart/polar-line-chart/src/app.component.html
index bb643e2c7..3d14c27f0 100644
--- a/samples/charts/data-chart/polar-line-chart/src/app.component.html
+++ b/samples/charts/data-chart/polar-line-chart/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -60,7 +60,7 @@
           markerType="Circle">
           </igx-polar-line-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/polar-scatter-chart/src/app.component.html b/samples/charts/data-chart/polar-scatter-chart/src/app.component.html
index 3a7c4cf84..6ea7100a9 100644
--- a/samples/charts/data-chart/polar-scatter-chart/src/app.component.html
+++ b/samples/charts/data-chart/polar-scatter-chart/src/app.component.html
@@ -50,7 +50,7 @@
           markerType="Circle">
           </igx-polar-scatter-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/polar-spline-area-chart/src/app.component.html b/samples/charts/data-chart/polar-spline-area-chart/src/app.component.html
index de82a5929..ea1de1b9c 100644
--- a/samples/charts/data-chart/polar-spline-area-chart/src/app.component.html
+++ b/samples/charts/data-chart/polar-spline-area-chart/src/app.component.html
@@ -54,7 +54,7 @@
           markerType="Circle">
           </igx-polar-spline-area-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/polar-spline-chart/src/app.component.html b/samples/charts/data-chart/polar-spline-chart/src/app.component.html
index f8c396a77..55779c5ae 100644
--- a/samples/charts/data-chart/polar-spline-chart/src/app.component.html
+++ b/samples/charts/data-chart/polar-spline-chart/src/app.component.html
@@ -52,7 +52,7 @@
           markerType="Circle">
           </igx-polar-spline-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/radial-area-chart-styling/src/app.component.html b/samples/charts/data-chart/radial-area-chart-styling/src/app.component.html
index b4f1099b9..834c6283f 100644
--- a/samples/charts/data-chart/radial-area-chart-styling/src/app.component.html
+++ b/samples/charts/data-chart/radial-area-chart-styling/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/data-chart/radial-area-chart/src/app.component.html b/samples/charts/data-chart/radial-area-chart/src/app.component.html
index 008d11264..d90822101 100644
--- a/samples/charts/data-chart/radial-area-chart/src/app.component.html
+++ b/samples/charts/data-chart/radial-area-chart/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -57,7 +57,7 @@
           markerType="Circle">
           </igx-radial-area-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/radial-column-chart-selection/src/app.component.html b/samples/charts/data-chart/radial-column-chart-selection/src/app.component.html
index 6220b57fe..ed99e275b 100644
--- a/samples/charts/data-chart/radial-column-chart-selection/src/app.component.html
+++ b/samples/charts/data-chart/radial-column-chart-selection/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/data-chart/radial-column-chart/src/app.component.html b/samples/charts/data-chart/radial-column-chart/src/app.component.html
index 3e0d70c4d..5f152ddb2 100644
--- a/samples/charts/data-chart/radial-column-chart/src/app.component.html
+++ b/samples/charts/data-chart/radial-column-chart/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -55,7 +55,7 @@
           title="Messi">
           </igx-radial-column-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/radial-line-chart/src/app.component.html b/samples/charts/data-chart/radial-line-chart/src/app.component.html
index 6148393eb..f2d7d4bf0 100644
--- a/samples/charts/data-chart/radial-line-chart/src/app.component.html
+++ b/samples/charts/data-chart/radial-line-chart/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -57,7 +57,7 @@
           markerType="Circle">
           </igx-radial-line-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/radial-pie-chart/src/app.component.html b/samples/charts/data-chart/radial-pie-chart/src/app.component.html
index 03d5cb588..a980bb74b 100644
--- a/samples/charts/data-chart/radial-pie-chart/src/app.component.html
+++ b/samples/charts/data-chart/radial-pie-chart/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -55,7 +55,7 @@
           title="Messi">
           </igx-radial-pie-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/range-area-chart/src/app.component.html b/samples/charts/data-chart/range-area-chart/src/app.component.html
index acf4284d5..859bfd596 100644
--- a/samples/charts/data-chart/range-area-chart/src/app.component.html
+++ b/samples/charts/data-chart/range-area-chart/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -31,7 +31,7 @@
           titleLeftMargin="10">
           </igx-numeric-y-axis>
           <igx-range-area-series
-          name="RangeAreaSeries1"
+          name="rangeAreaSeries1"
           #rangeAreaSeries1
           [xAxis]="xAxis"
           [yAxis]="yAxis"
@@ -42,7 +42,7 @@
           [dataSource]="temperatureRangeData">
           </igx-range-area-series>
           <igx-range-area-series
-          name="RangeAreaSeries2"
+          name="rangeAreaSeries2"
           #rangeAreaSeries2
           [xAxis]="xAxis"
           [yAxis]="yAxis"
@@ -53,7 +53,7 @@
           [dataSource]="temperatureRangeData">
           </igx-range-area-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/range-column-chart/src/app.component.html b/samples/charts/data-chart/range-column-chart/src/app.component.html
index b85b0c225..15bd4927d 100644
--- a/samples/charts/data-chart/range-column-chart/src/app.component.html
+++ b/samples/charts/data-chart/range-column-chart/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -53,7 +53,7 @@
           [dataSource]="temperatureRangeData">
           </igx-range-column-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/app.component.html b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/app.component.html
index cb8de07c5..2f44a0e95 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/app.component.html
+++ b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/app.component.html
@@ -24,7 +24,7 @@
           title="Public Debt per GDP">
           </igx-numeric-y-axis>
           <igx-bubble-series
-          name="BubbleSeries1"
+          name="bubbleSeries1"
           #bubbleSeries1
           xMemberPath="population"
           yMemberPath="publicDebt"
diff --git a/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/src/app.component.html b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/src/app.component.html
index fc39d6b1b..b5ca6c8fb 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/src/app.component.html
+++ b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -29,7 +29,7 @@
           abbreviateLargeNumbers="true">
           </igx-numeric-y-axis>
           <igx-bubble-series
-          name="BubbleSeries1"
+          name="bubbleSeries1"
           #bubbleSeries1
           title="African Countries"
           [xAxis]="xAxis"
@@ -43,7 +43,7 @@
           [radiusScale]="sizeScale1">
           </igx-bubble-series>
           <igx-bubble-series
-          name="BubbleSeries2"
+          name="bubbleSeries2"
           #bubbleSeries2
           title="European Countries"
           [xAxis]="xAxis"
diff --git a/samples/charts/data-chart/scatter-bubble-chart-single-source/src/app.component.html b/samples/charts/data-chart/scatter-bubble-chart-single-source/src/app.component.html
index 1b499f158..a5b2133e0 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-single-source/src/app.component.html
+++ b/samples/charts/data-chart/scatter-bubble-chart-single-source/src/app.component.html
@@ -22,7 +22,7 @@
           maximumValue="120">
           </igx-numeric-y-axis>
           <igx-bubble-series
-          name="BubbleSeries1"
+          name="bubbleSeries1"
           #bubbleSeries1
           xMemberPath="population"
           yMemberPath="publicDebt"
@@ -36,7 +36,7 @@
           showDefaultTooltip="true">
           </igx-bubble-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/scatter-bubble-chart-styling/src/app.component.html b/samples/charts/data-chart/scatter-bubble-chart-styling/src/app.component.html
index 7ec0ba1aa..6ac2211e3 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-styling/src/app.component.html
+++ b/samples/charts/data-chart/scatter-bubble-chart-styling/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -29,7 +29,7 @@
           abbreviateLargeNumbers="true">
           </igx-numeric-y-axis>
           <igx-bubble-series
-          name="BubbleSeries1"
+          name="bubbleSeries1"
           #bubbleSeries1
           title="African Countries"
           [xAxis]="xAxis"
@@ -47,7 +47,7 @@
           [radiusScale]="sizeScale1">
           </igx-bubble-series>
           <igx-bubble-series
-          name="BubbleSeries2"
+          name="bubbleSeries2"
           #bubbleSeries2
           title="European Countries"
           [xAxis]="xAxis"
@@ -65,7 +65,7 @@
           [radiusScale]="sizeScale2">
           </igx-bubble-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/scatter-line-chart/src/app.component.html b/samples/charts/data-chart/scatter-line-chart/src/app.component.html
index 7ef0d135d..f62a346b8 100644
--- a/samples/charts/data-chart/scatter-line-chart/src/app.component.html
+++ b/samples/charts/data-chart/scatter-line-chart/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -56,7 +56,7 @@
           showDefaultTooltip="true">
           </igx-scatter-line-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/scatter-point-chart/src/app.component.html b/samples/charts/data-chart/scatter-point-chart/src/app.component.html
index e21af6017..3ecca0294 100644
--- a/samples/charts/data-chart/scatter-point-chart/src/app.component.html
+++ b/samples/charts/data-chart/scatter-point-chart/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -30,7 +30,7 @@
           interval="10">
           </igx-numeric-y-axis>
           <igx-scatter-series
-          name="ScatterSeries1"
+          name="scatterSeries1"
           #scatterSeries1
           title="Europe"
           [xAxis]="xAxis"
@@ -42,7 +42,7 @@
           showDefaultTooltip="true">
           </igx-scatter-series>
           <igx-scatter-series
-          name="ScatterSeries2"
+          name="scatterSeries2"
           #scatterSeries2
           title="Africa"
           [xAxis]="xAxis"
diff --git a/samples/charts/data-chart/scatter-spline-chart/src/app.component.html b/samples/charts/data-chart/scatter-spline-chart/src/app.component.html
index 981902314..62b8d14fa 100644
--- a/samples/charts/data-chart/scatter-spline-chart/src/app.component.html
+++ b/samples/charts/data-chart/scatter-spline-chart/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -32,7 +32,7 @@
           interval="1000">
           </igx-numeric-y-axis>
           <igx-scatter-spline-series
-          name="ScatterSplineSeries1"
+          name="scatterSplineSeries1"
           #scatterSplineSeries1
           title="Germany"
           [xAxis]="xAxis"
@@ -44,7 +44,7 @@
           showDefaultTooltip="true">
           </igx-scatter-spline-series>
           <igx-scatter-spline-series
-          name="ScatterSplineSeries2"
+          name="scatterSplineSeries2"
           #scatterSplineSeries2
           title="France"
           [xAxis]="xAxis"
@@ -56,7 +56,7 @@
           showDefaultTooltip="true">
           </igx-scatter-spline-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/stacked-100-area-chart/src/app.component.html b/samples/charts/data-chart/stacked-100-area-chart/src/app.component.html
index 470fcf9ed..7dd2d0c11 100644
--- a/samples/charts/data-chart/stacked-100-area-chart/src/app.component.html
+++ b/samples/charts/data-chart/stacked-100-area-chart/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -31,7 +31,7 @@
           labelFormat="{0}%">
           </igx-numeric-y-axis>
           <igx-stacked-100-area-series
-          name="Stacked100AreaSeries"
+          name="stacked100AreaSeries"
           #stacked100AreaSeries
           [dataSource]="continentsBirthRate"
           [xAxis]="xAxis"
@@ -70,7 +70,7 @@
               </igx-stacked-fragment-series>
           </igx-stacked-100-area-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/stacked-100-bar-chart/src/app.component.html b/samples/charts/data-chart/stacked-100-bar-chart/src/app.component.html
index 6b943b6eb..420da700b 100644
--- a/samples/charts/data-chart/stacked-100-bar-chart/src/app.component.html
+++ b/samples/charts/data-chart/stacked-100-bar-chart/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -30,7 +30,7 @@
           title="TWh">
           </igx-numeric-x-axis>
           <igx-stacked-100-bar-series
-          name="Stacked100BarSeries"
+          name="stacked100BarSeries"
           #stacked100BarSeries
           [dataSource]="energyRenewableConsumption"
           [xAxis]="xAxis"
@@ -63,7 +63,7 @@
               </igx-stacked-fragment-series>
           </igx-stacked-100-bar-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/stacked-100-column-chart/src/app.component.html b/samples/charts/data-chart/stacked-100-column-chart/src/app.component.html
index be0312c48..31e9cd584 100644
--- a/samples/charts/data-chart/stacked-100-column-chart/src/app.component.html
+++ b/samples/charts/data-chart/stacked-100-column-chart/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -29,7 +29,7 @@
           minimumValue="0">
           </igx-numeric-y-axis>
           <igx-stacked-100-column-series
-          name="Stacked100ColumnSeries"
+          name="stacked100ColumnSeries"
           #stacked100ColumnSeries
           [dataSource]="onlineTrafficByDevice"
           [xAxis]="xAxis"
@@ -56,7 +56,7 @@
               </igx-stacked-fragment-series>
           </igx-stacked-100-column-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/stacked-100-line-chart/src/app.component.html b/samples/charts/data-chart/stacked-100-line-chart/src/app.component.html
index b9a8733ab..da688b1bb 100644
--- a/samples/charts/data-chart/stacked-100-line-chart/src/app.component.html
+++ b/samples/charts/data-chart/stacked-100-line-chart/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -30,7 +30,7 @@
           labelFormat="{0}%">
           </igx-numeric-y-axis>
           <igx-stacked-100-line-series
-          name="Stacked100LineSeries"
+          name="stacked100LineSeries"
           #stacked100LineSeries
           [dataSource]="continentsBirthRate"
           [xAxis]="xAxis"
@@ -69,7 +69,7 @@
               </igx-stacked-fragment-series>
           </igx-stacked-100-line-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/stacked-100-spline-area-chart/src/app.component.html b/samples/charts/data-chart/stacked-100-spline-area-chart/src/app.component.html
index ec34dba3a..0591352de 100644
--- a/samples/charts/data-chart/stacked-100-spline-area-chart/src/app.component.html
+++ b/samples/charts/data-chart/stacked-100-spline-area-chart/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -30,7 +30,7 @@
           labelFormat="{0}%">
           </igx-numeric-y-axis>
           <igx-stacked-100-spline-area-series
-          name="Stacked100SplineAreaSeries"
+          name="stacked100SplineAreaSeries"
           #stacked100SplineAreaSeries
           [dataSource]="continentsBirthRate"
           [xAxis]="xAxis"
@@ -69,7 +69,7 @@
               </igx-stacked-fragment-series>
           </igx-stacked-100-spline-area-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/stacked-100-spline-chart/src/app.component.html b/samples/charts/data-chart/stacked-100-spline-chart/src/app.component.html
index ca069041c..aadbdc0e8 100644
--- a/samples/charts/data-chart/stacked-100-spline-chart/src/app.component.html
+++ b/samples/charts/data-chart/stacked-100-spline-chart/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -29,7 +29,7 @@
           labelFormat="{0}%">
           </igx-numeric-y-axis>
           <igx-stacked-100-spline-series
-          name="Stacked100SplineSeries"
+          name="stacked100SplineSeries"
           #stacked100SplineSeries
           [dataSource]="continentsBirthRate"
           [xAxis]="xAxis"
@@ -68,7 +68,7 @@
               </igx-stacked-fragment-series>
           </igx-stacked-100-spline-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/stacked-area-chart/src/app.component.html b/samples/charts/data-chart/stacked-area-chart/src/app.component.html
index 3f3053fbf..bc6847608 100644
--- a/samples/charts/data-chart/stacked-area-chart/src/app.component.html
+++ b/samples/charts/data-chart/stacked-area-chart/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -34,7 +34,7 @@
           labelFormat="{0} m">
           </igx-numeric-y-axis>
           <igx-stacked-area-series
-          name="StackedAreaSeries"
+          name="stackedAreaSeries"
           #stackedAreaSeries
           [dataSource]="continentsBirthRate"
           [xAxis]="xAxis"
@@ -73,7 +73,7 @@
               </igx-stacked-fragment-series>
           </igx-stacked-area-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/stacked-bar-chart/src/app.component.html b/samples/charts/data-chart/stacked-bar-chart/src/app.component.html
index 68311341b..41fc0d1be 100644
--- a/samples/charts/data-chart/stacked-bar-chart/src/app.component.html
+++ b/samples/charts/data-chart/stacked-bar-chart/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -31,7 +31,7 @@
           title="TWh">
           </igx-numeric-x-axis>
           <igx-stacked-bar-series
-          name="StackedBarSeries"
+          name="stackedBarSeries"
           #stackedBarSeries
           [dataSource]="energyRenewableConsumption"
           [xAxis]="xAxis"
@@ -64,7 +64,7 @@
               </igx-stacked-fragment-series>
           </igx-stacked-bar-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/stacked-column-chart/src/app.component.html b/samples/charts/data-chart/stacked-column-chart/src/app.component.html
index 480da2e17..1d4a9358b 100644
--- a/samples/charts/data-chart/stacked-column-chart/src/app.component.html
+++ b/samples/charts/data-chart/stacked-column-chart/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -33,7 +33,7 @@
           labelFormat="{0} m">
           </igx-numeric-y-axis>
           <igx-stacked-column-series
-          name="StackedColumnSeries"
+          name="stackedColumnSeries"
           #stackedColumnSeries
           [dataSource]="continentsBirthRate"
           [xAxis]="xAxis"
@@ -71,7 +71,7 @@
               </igx-stacked-fragment-series>
           </igx-stacked-column-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/stacked-line-chart/src/app.component.html b/samples/charts/data-chart/stacked-line-chart/src/app.component.html
index 6542937c3..0b703fb48 100644
--- a/samples/charts/data-chart/stacked-line-chart/src/app.component.html
+++ b/samples/charts/data-chart/stacked-line-chart/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -34,7 +34,7 @@
           labelFormat="{0} m">
           </igx-numeric-y-axis>
           <igx-stacked-line-series
-          name="StackedLineSeries"
+          name="stackedLineSeries"
           #stackedLineSeries
           [dataSource]="continentsBirthRate"
           [xAxis]="xAxis"
@@ -73,7 +73,7 @@
               </igx-stacked-fragment-series>
           </igx-stacked-line-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/stacked-spline-area-chart/src/app.component.html b/samples/charts/data-chart/stacked-spline-area-chart/src/app.component.html
index 7ff162074..25d41205b 100644
--- a/samples/charts/data-chart/stacked-spline-area-chart/src/app.component.html
+++ b/samples/charts/data-chart/stacked-spline-area-chart/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -34,7 +34,7 @@
           labelFormat="{0} m">
           </igx-numeric-y-axis>
           <igx-stacked-spline-area-series
-          name="StackedSplineAreaSeries"
+          name="stackedSplineAreaSeries"
           #stackedSplineAreaSeries
           [dataSource]="continentsBirthRate"
           [xAxis]="xAxis"
@@ -73,7 +73,7 @@
               </igx-stacked-fragment-series>
           </igx-stacked-spline-area-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/data-chart/stacked-spline-chart/src/app.component.html b/samples/charts/data-chart/stacked-spline-chart/src/app.component.html
index 9072efef0..b90e954cd 100644
--- a/samples/charts/data-chart/stacked-spline-chart/src/app.component.html
+++ b/samples/charts/data-chart/stacked-spline-chart/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
@@ -34,7 +34,7 @@
           labelFormat="{0} m">
           </igx-numeric-y-axis>
           <igx-stacked-spline-series
-          name="StackedSplineSeries"
+          name="stackedSplineSeries"
           #stackedSplineSeries
           [dataSource]="continentsBirthRate"
           [xAxis]="xAxis"
@@ -73,7 +73,7 @@
               </igx-stacked-fragment-series>
           </igx-stacked-spline-series>
           <igx-data-tool-tip-layer
-          name="DataToolTipLayer"
+          name="dataToolTipLayer"
           #dataToolTipLayer>
           </igx-data-tool-tip-layer>
       </igx-data-chart>
diff --git a/samples/charts/doughnut-chart/legend/src/app.component.html b/samples/charts/doughnut-chart/legend/src/app.component.html
index 3c78e15c6..8e9f9be36 100644
--- a/samples/charts/doughnut-chart/legend/src/app.component.html
+++ b/samples/charts/doughnut-chart/legend/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-item-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-item-legend>
diff --git a/samples/charts/financial-chart/data-legend-formatting-currency/src/app.component.html b/samples/charts/financial-chart/data-legend-formatting-currency/src/app.component.html
index 3a26739ff..15cadf420 100644
--- a/samples/charts/financial-chart/data-legend-formatting-currency/src/app.component.html
+++ b/samples/charts/financial-chart/data-legend-formatting-currency/src/app.component.html
@@ -1,7 +1,7 @@
 <div class="container vertical sample">
   <div class="legend">
       <igx-data-legend
-      name="Legend"
+      name="legend"
       #legend
       [target]="chart"
       includedColumns="Close, Change, Value"
diff --git a/samples/charts/financial-chart/data-legend-styling-props/src/app.component.html b/samples/charts/financial-chart/data-legend-styling-props/src/app.component.html
index cc1ce9e76..f39ce24ff 100644
--- a/samples/charts/financial-chart/data-legend-styling-props/src/app.component.html
+++ b/samples/charts/financial-chart/data-legend-styling-props/src/app.component.html
@@ -1,7 +1,7 @@
 <div class="container vertical sample">
   <div class="legend">
       <igx-data-legend
-      name="Legend"
+      name="legend"
       #legend
       [target]="chart"
       includedColumns="Open, Close, High, Low, Change"
diff --git a/samples/charts/financial-chart/data-legend/src/app.component.html b/samples/charts/financial-chart/data-legend/src/app.component.html
index 1cdd47930..2a9c0a204 100644
--- a/samples/charts/financial-chart/data-legend/src/app.component.html
+++ b/samples/charts/financial-chart/data-legend/src/app.component.html
@@ -1,7 +1,7 @@
 <div class="container vertical sample">
   <div class="legend">
       <igx-data-legend
-      name="Legend"
+      name="legend"
       #legend
       [target]="chart"
       includedColumns="Open, Close, High, Low, Change">
diff --git a/samples/charts/financial-chart/format-specifiers/src/app.component.html b/samples/charts/financial-chart/format-specifiers/src/app.component.html
index ca0cc5312..cf4bc77ec 100644
--- a/samples/charts/financial-chart/format-specifiers/src/app.component.html
+++ b/samples/charts/financial-chart/format-specifiers/src/app.component.html
@@ -1,7 +1,7 @@
 <div class="container vertical sample">
   <div class="legend">
       <igx-data-legend
-      name="Legend"
+      name="legend"
       #legend
       [target]="chart"
       includedColumns="Close, Change, Value"
diff --git a/samples/charts/pie-chart/legend/src/app.component.html b/samples/charts/pie-chart/legend/src/app.component.html
index 8cbcfaf43..881283f7c 100644
--- a/samples/charts/pie-chart/legend/src/app.component.html
+++ b/samples/charts/pie-chart/legend/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-item-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-item-legend>
diff --git a/samples/charts/pie-chart/others/src/app.component.html b/samples/charts/pie-chart/others/src/app.component.html
index a6cb902e6..e6de1a362 100644
--- a/samples/charts/pie-chart/others/src/app.component.html
+++ b/samples/charts/pie-chart/others/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-item-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-item-legend>
diff --git a/samples/charts/pie-chart/overview/src/app.component.html b/samples/charts/pie-chart/overview/src/app.component.html
index 8a819ae74..800909193 100644
--- a/samples/charts/pie-chart/overview/src/app.component.html
+++ b/samples/charts/pie-chart/overview/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-item-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-item-legend>
diff --git a/samples/charts/pie-chart/styling/src/app.component.html b/samples/charts/pie-chart/styling/src/app.component.html
index 409e1a558..9930d2140 100644
--- a/samples/charts/pie-chart/styling/src/app.component.html
+++ b/samples/charts/pie-chart/styling/src/app.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="legend">
       <igx-item-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-item-legend>
diff --git a/samples/charts/toolbar/actions-built-in-category-chart/src/app.component.html b/samples/charts/toolbar/actions-built-in-category-chart/src/app.component.html
index 5fb53ffab..a9213c581 100644
--- a/samples/charts/toolbar/actions-built-in-category-chart/src/app.component.html
+++ b/samples/charts/toolbar/actions-built-in-category-chart/src/app.component.html
@@ -5,7 +5,7 @@
   <div class="aboveContentSplit">
     <div class="aboveContentLeftContainer">
       <igx-toolbar
-      name="Toolbar"
+      name="toolbar"
       #toolbar
       [target]="chart"
       orientation="Horizontal">
@@ -13,7 +13,7 @@
     </div>
     <div class="aboveContentRightContainer">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/toolbar/actions-built-in-data-chart/src/app.component.html b/samples/charts/toolbar/actions-built-in-data-chart/src/app.component.html
index 6f83235f6..74f01086c 100644
--- a/samples/charts/toolbar/actions-built-in-data-chart/src/app.component.html
+++ b/samples/charts/toolbar/actions-built-in-data-chart/src/app.component.html
@@ -2,7 +2,7 @@
   <div class="aboveContentSplit">
     <div class="aboveContentLeftContainer">
       <igx-toolbar
-      name="Toolbar"
+      name="toolbar"
       #toolbar
       [target]="chart"
       orientation="Horizontal">
@@ -33,7 +33,7 @@
           labelLocation="OutsideRight">
           </igx-numeric-y-axis>
           <igx-line-series
-          name="LineSeries1"
+          name="lineSeries1"
           #lineSeries1
           title="Electricity"
           [xAxis]="xAxis"
diff --git a/samples/charts/toolbar/custom-tool/src/app.component.html b/samples/charts/toolbar/custom-tool/src/app.component.html
index ef2cfac61..f69db0b31 100644
--- a/samples/charts/toolbar/custom-tool/src/app.component.html
+++ b/samples/charts/toolbar/custom-tool/src/app.component.html
@@ -18,7 +18,7 @@
     </div>
     <div class="aboveContentRightContainer">
       <igx-legend
-      name="Legend"
+      name="legend"
       #legend
       orientation="Horizontal">
       </igx-legend>
diff --git a/samples/charts/toolbar/layout-actions-for-data-chart/src/app.component.html b/samples/charts/toolbar/layout-actions-for-data-chart/src/app.component.html
index 7072069c4..fde3de103 100644
--- a/samples/charts/toolbar/layout-actions-for-data-chart/src/app.component.html
+++ b/samples/charts/toolbar/layout-actions-for-data-chart/src/app.component.html
@@ -2,7 +2,7 @@
   <div class="aboveContentSplit">
     <div class="aboveContentLeftContainer">
       <igx-toolbar
-      name="Toolbar"
+      name="toolbar"
       #toolbar
       [target]="chart"
       orientation="Horizontal"
@@ -15,13 +15,13 @@
           commandId="EnableTooltips">
           </igx-tool-action-checkbox>
           <igx-tool-action-label
-          name="ZoomResetHidden"
+          name="zoomResetHidden"
           #zoomResetHidden
           overlayId="ZoomReset"
           visibility="Collapsed">
           </igx-tool-action-label>
           <igx-tool-action-label
-          name="ZoomResetLabel"
+          name="zoomResetLabel"
           #zoomResetLabel
           title="Reset"
           afterId="ZoomOut"
@@ -62,7 +62,7 @@
           labelLocation="OutsideRight">
           </igx-numeric-y-axis>
           <igx-line-series
-          name="LineSeries1"
+          name="lineSeries1"
           #lineSeries1
           title="Electricity"
           [xAxis]="xAxis"
diff --git a/samples/charts/toolbar/layout-in-vertical-orientation/src/app.component.html b/samples/charts/toolbar/layout-in-vertical-orientation/src/app.component.html
index 5cb70cf3b..eb52c4905 100644
--- a/samples/charts/toolbar/layout-in-vertical-orientation/src/app.component.html
+++ b/samples/charts/toolbar/layout-in-vertical-orientation/src/app.component.html
@@ -1,7 +1,7 @@
 <div class="container vertical sample">
   <div class="aboveContent">
     <igx-toolbar
-    name="Toolbar"
+    name="toolbar"
     #toolbar
     [target]="chart"
     orientation="Vertical">
@@ -25,7 +25,7 @@
           labelLocation="OutsideRight">
           </igx-numeric-y-axis>
           <igx-line-series
-          name="LineSeries1"
+          name="lineSeries1"
           #lineSeries1
           title="Electricity"
           [xAxis]="xAxis"
diff --git a/samples/charts/toolbar/theming/src/app.component.html b/samples/charts/toolbar/theming/src/app.component.html
index d5ee6b581..791d511ff 100644
--- a/samples/charts/toolbar/theming/src/app.component.html
+++ b/samples/charts/toolbar/theming/src/app.component.html
@@ -19,7 +19,7 @@
   </div>
   <div class="aboveContent">
     <igx-toolbar
-    name="Toolbar"
+    name="toolbar"
     #toolbar
     [target]="chart"
     orientation="Horizontal"
@@ -46,7 +46,7 @@
           labelLocation="OutsideRight">
           </igx-numeric-y-axis>
           <igx-line-series
-          name="LineSeries1"
+          name="lineSeries1"
           #lineSeries1
           title="Electricity"
           [xAxis]="xAxis"