Ej2 4407 chart ng sb mas

Author: pipeline

src/chart/annotation.html

@@ -21,9 +21,11 @@
 </div>
 <div id="description">
     <p>
-        In this example, you can see how to render and configure annotation feature in chart. In this example, we have used a pie
-        chart in catesain axis using annotation support. While selecting a category, data's are showed in pie.
+        In this example, you can see how to render and configure annotation feature in chart. We have used a pie chart to depict the sales for each year using annotation support, while selecting a particular year from the StackedColumn series, the respective data's are showed in pie.
+An annotation can hold any html element as its content, here we have added the Pie chart as its content.   
     </p>
+
+
     <p style="font-weight: 500">Injecting Module</p>
     <p>
         Chart component features are segregated into individual feature-wise modules. To use Annotation feature, we need to inject

src/chart/datalabel-template-plnkr.json

@@ -2,9 +2,9 @@
         <ej-chart style='display:block' id='chartcontainer' [title]='title' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'
                 (load)='load($event)' (textRender)='textRender($event)'>
                 <e-series-collection>
-                        <e-series [dataSource]='data' type='Line' xName='x' yName='y' name='Male' width=2 [marker]='marker1' legendShape='Rectangle'>
+                        <e-series [dataSource]='data' type='Line' xName='x' yName='y' name='Male' width=2 [marker]='marker1'>
                         </e-series>
-                        <e-series [dataSource]='data1' type='Line' xName='x' yName='y' name='Female' width=2 [marker]='marker2' legendShape='Rectangle'>
+                        <e-series [dataSource]='data1' type='Line' xName='x' yName='y' name='Female' width=2 [marker]='marker2'>
                         </e-series>
                 </e-series-collection>
                 </ej-chart>

src/chart/datalabel-template.html

@@ -40,7 +40,7 @@ export class RangeColumnChartComponent {
     public title: string = 'Maximum and Minimum Temperature';
     public tooltip: Object = {
         enable: true,
-        format: '${point.x}<br>high: ${point.high}<br>low: ${point.low}'
+        format: '${point.x}<br>High: ${point.high}<br>Low: ${point.low}'
     };
     public load(args: ILoadedEventArgs): void {
         let selectedTheme: string = location.hash.split('/')[1];

src/chart/range-column-plnkr.json

@@ -21,12 +21,12 @@ import { DirectionComponent } from './direction.component';
 
 
 export const circulargaugeAppRoutes: Object[] = [
-    { path: ':theme/circulargauge/default', component: DefaultComponent, name: 'Default', order: '01', category: 'Circular Gauge'},
-    { path: ':theme/circulargauge/range', component: RangeComponent, name: 'Range', order: '01', category: 'Circular Gauge' },
-    { path: ':theme/circulargauge/label', component: LabelComponent, name: 'Ticks and Labels', order: '01', category: 'Circular Gauge'},
-    { path: ':theme/circulargauge/annotation', component: AnnotationComponent , name: 'Annotation', order: '01', category: 'Circular Gauge'},
-    { path: ':theme/circulargauge/customization', component: CustomizationComponent, name: 'Gauge Customization', order: '01', category: 'Circular Gauge'},
-    { path: ':theme/circulargauge/direction', component: DirectionComponent, name: 'Direction Compass', order: '01', category: 'Circular Gauge'},
+    { path: ':theme/circulargauge/default', component: DefaultComponent, name: 'Default', order: '01', category: 'CircularGauge'},
+    { path: ':theme/circulargauge/range', component: RangeComponent, name: 'Range', order: '01', category: 'CircularGauge' },
+    { path: ':theme/circulargauge/label', component: LabelComponent, name: 'Ticks and Labels', order: '01', category: 'CircularGauge'},
+    { path: ':theme/circulargauge/annotation', component: AnnotationComponent , name: 'Annotation', order: '01', category: 'CircularGauge'},
+    { path: ':theme/circulargauge/customization', component: CustomizationComponent, name: 'Gauge Customization', order: '01', category: 'CircularGauge'},
+    { path: ':theme/circulargauge/direction', component: DirectionComponent, name: 'Direction Compass', order: '01', category: 'CircularGauge'},
     { path: ':theme/circulargauge/pointer-image', component: PointerImageComponent, name: 'Pointer Image', order: '02', category: 'Pointer'},
     { path: ':theme/circulargauge/pointers', component: PointersComponent, name: 'Pointer Customization', order: '02', category: 'Pointer'},
     { path: ':theme/circulargauge/multiple-axis', component: MultipleAxisComponent, name: 'Multiple Axis', order: '03', category: 'Axes'},

src/chart/range-column.component.ts

@@ -15,14 +15,14 @@ import { TooltipComponent } from './tooltip.component';
 import { StyleComponent } from './style.component';
 
 export const lineargaugeAppRoutes: Object[] = [
-    { path: ':theme/lineargauge/default', component: DefaultComponent, name: 'Default', order: '01', category: 'Linear Gauge' },
-    { path: ':theme/lineargauge/container', component: ContainerComponent, name: 'Container', order: '01', category: 'Linear Gauge' },
-    { path: ':theme/lineargauge/ranges', component: RangesComponent, name: 'Ranges', order: '01', category: 'Linear Gauge' },
-    { path: ':theme/lineargauge/data', component: DataComponent, name: 'Data Sample', order: '01', category: 'Linear Gauge' },
-    { path: ':theme/lineargauge/axes', component: AxesComponent, name: 'Axes and Pointers', order: '01', category: 'Linear Gauge' },
-    { path: ':theme/lineargauge/annotation', component: AnnotationComponent, name: 'Annotation', order: '01', category: 'Linear Gauge' },
-    { path: ':theme/lineargauge/tooltip', component: TooltipComponent, name: 'Tooltip', order: '01', category: 'Linear Gauge' },
-    { path: ':theme/lineargauge/style', component: StyleComponent, name: 'Styles', order: '01', category: 'Linear Gauge' }
+    { path: ':theme/lineargauge/default', component: DefaultComponent, name: 'Default', order: '01', category: 'LinearGauge' },
+    { path: ':theme/lineargauge/container', component: ContainerComponent, name: 'Container', order: '01', category: 'LinearGauge' },
+    { path: ':theme/lineargauge/ranges', component: RangesComponent, name: 'Ranges', order: '01', category: 'LinearGauge' },
+    { path: ':theme/lineargauge/data', component: DataComponent, name: 'Data Sample', order: '01', category: 'LinearGauge' },
+    { path: ':theme/lineargauge/axes', component: AxesComponent, name: 'Axes and Pointers', order: '01', category: 'LinearGauge' },
+    { path: ':theme/lineargauge/annotation', component: AnnotationComponent, name: 'Annotation', order: '01', category: 'LinearGauge' },
+    { path: ':theme/lineargauge/tooltip', component: TooltipComponent, name: 'Tooltip', order: '01', category: 'LinearGauge' },
+    { path: ':theme/lineargauge/style', component: StyleComponent, name: 'Styles', order: '01', category: 'LinearGauge' }
 ];
 
 export const linearRouter: ModuleWithProviders = RouterModule.forChild(lineargaugeAppRoutes);