feature(EJ2-5307): Added description changes to chart.

Author: pipeline

src/chart/annotation-plnkr.json

@@ -1,7 +1,7 @@
 import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
 import {
     ILoadedEventArgs, IMouseEventArgs, ChartComponent, IAccLoadedEventArgs, AccumulationTheme,
-    SelectionMode, ChartTheme, Series
+    SelectionMode, ChartTheme, Series, IAccResizeEventArgs
 } from '@syncfusion/ej2-ng-charts';
 import {
     AccumulationChart, AccumulationDataLabel
@@ -129,7 +129,10 @@ export class AnnotationChartComponent {
                 selectedTheme = selectedTheme ? selectedTheme : 'Material';
                 args.accumulation.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
             },
-            legendSettings: { visible: false }
+            legendSettings: { visible: false },
+            resized:  (args: IAccResizeEventArgs) => {
+                location.reload();
+            }
         });
         this.pie.appendTo('#chart_annotation');
     }

src/chart/annotation.component.ts

@@ -14,8 +14,13 @@
     </div>
 </div>
 <div id="description">
-    <p> In this example, you can see how to render doughnut chart. You can use <code>radius</code> and <code>innerRadius</code> properties to render the doughnut and also use <code>border</code>, <code>fill</code> properties to customize the point. <code>dataLabel</code>        are used to represent individual data and its value.</p>
+    <p> In this example, you can see how to render doughnut chart. You can use <code>radius</code> and <code>innerRadius</code> properties to render the doughnut and also use <code>border</code>, <code>fill</code> properties to customize the point. <code>dataLabel</code> is used to represent individual data and its value.</p>
     <p> <code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
+    <p style="font-weight: 500">Injecting Module</p>
+    <p>
+        AccumulationChart component features are segregated into individual feature-wise modules. To use legend, we need to Inject
+        <code>AccumulationLegend</code> into the <code>@NgModule.providers</code> section.
+    </p>
 </div>
 <style>
     .control-section {

src/chart/default-doughnut.html

@@ -71,7 +71,7 @@
     </div>
 </div>
 <div id="description">
-    <p> In this example, you can see how to render and configure the pie chart. You can use <code>border</code>, <code>fill</code> properties to customize the pie point. <code>dataLabel</code> are used to represent individual data and its value.</p>
+    <p> In this example, you can see how to render and configure the pie chart. You can use <code>border</code>, <code>fill</code> properties to customize the pie point. <code>dataLabel</code> is used to represent individual data and its value.</p>
     <p> <code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
 </div>
 <style>

src/chart/default-pie.html

@@ -16,7 +16,7 @@
         <p> In this example, you can see how to render and configure the pie chart. You can use
             <code>border</code>,
             <code>fill</code> properties to customize the pie point.
-            <code>dataLabel</code> are used to represent individual data and its value.</p>
+            <code>dataLabel</code> is used to represent individual data and its value.</p>
         <p>
             <code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
     </div>

src/chart/doughnut.html

@@ -24,9 +24,9 @@
 <div id="description">
     <p> In this example, you can see how to achieve <code>drilldown</code> concept using pie control. An automobile sales has been shown by different category, on clicking each category, you can navigate to next level, which shows the sales of those category
         in terms of company.</p>
-    <p> Legend and datalabel is used in this sample.</p>
+    <p> Datalabel is used in this sample.</p>
     <p style="font-weight: 500">Injecting Module</p>
-    <p> Accumulation chart component features are segregated into individual feature-wise modules. To use legend, we need to inject <code>AccumulationLegendService</code> into the <code>@NgModule.providers</code> section.. </p>
+    <p> Accumulation chart component features are segregated into individual feature-wise modules. To use datalabel, we need to inject <code>AccumulationDataLabelService</code> into the <code>@NgModule.providers</code> section.. </p>
 </div>
 <style>
     .control-section {

src/chart/drilldown-pie.html

@@ -91,8 +91,8 @@
     <p>
         In this example, you can see how to render and configure the error bar charts. Line type charts are used for cartesian type
         series. You can use error bar by set <code>visible</code> property to true. You can change the error bar
-        rendering type using <code>type</code> property. like fixedValue, percentage, standardDeviation, standardError and
-        custom) option of errorBar. To change the error bar line length you can use <code>verticalError</code> property.
+        rendering type using <code>type</code> property like fixedValue, percentage, standardDeviation, standardError and
+        custom option of errorBar. To change the error bar line length you can use <code>verticalError</code> property.
     </p>
     <p>Chart supports the following error bar types.
     </p>

src/chart/error-bar.html

@@ -48,7 +48,7 @@
     </p>
 </div>
 <div id="description">
-    <p> In this example, you can see how to render and configure the funnel chart.<code>dataLabel</code> are used to represent individual data and its value.</p>
+    <p> In this example, you can see how to render and configure the funnel chart.<code>dataLabel</code> is used to represent individual data and its value.</p>
     <p> <code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
     <p style="font-weight: 500">Injecting Module</p>
     <p>

src/chart/funnel.html

@@ -37,7 +37,7 @@
 <div id="description">
     <p> In this example, you can see how to <code>group</code> points in pie chart</p>
     <p> Points having value below  the <code>'groupTo'</code> value are grouped and showed as separate point. You can customise the apearance of the point using <code>'poinRender'</code> event.</p>
-    <p> DataLabel are used to represent individual data and its value.</p>
+    <p> DataLabel is used to represent individual data and its value.</p>
 </div>
 <style>
     .control-section {

src/chart/grouping.html

@@ -26,7 +26,7 @@
         Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
     </p>
     <p>
-        More information on the multipe axis can be found in this
+        More information on the multiple axis can be found in this
         <a target="_blank" href="http://ej2.syncfusion.com/angular/documentation/chart/api-chartComponent.html#axes-axismodel">documentation section</a>.
     </p>
 </div>