feature(EJ2-4407): annotation samples changes

Author: pipeline

src/chart/data-label-template.html

@@ -5,13 +5,14 @@
 </div>
 <div id="description">
     <p>
-        Datalabel template is acheived by <code>template</code> property in datalabel. This is used to depicts each point in series.
-    </p>    
+        Label content can be formatted by using the template option in dataLabel. Inside the template, you can add the placeholder
+        text ${point.y}M to display corresponding data points value.
+    </p>
     <br>
     <p>
-        More information on the Category axis can be found in this
-        <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-axis.html#valuetype-valuetype">documentation section</a>.
-    </p>
+        To use dataLabel, we need to inject
+        <code>dataLabel</code> module using <code>Chart.Inject(dataLabel)</code> method.
+    </p>   
 </div>
 <style>
     #control-container {

src/chart/pie-annotation-plnkr.json

@@ -1 +1 @@
-{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport {\n    Chart, StackingColumnSeries, Category, Legend, ILoadedEventArgs, Selection, IMouseEventArgs, IAccLoadedEventArgs,\n    ChartAnnotation, AccumulationChart, AccumulationDataLabel\n} from '@syncfusion/ej2-charts';\nChart.Inject(StackingColumnSeries, Category, Legend, Selection, ChartAnnotation);\nAccumulationChart.Inject(AccumulationChart, AccumulationDataLabel);\n/**\n * Pie chart annootation\n */\n\n    let pie: AccumulationChart;\n    let dataSource: Object = [\n        { x: '2014', y0: 51.1, y1: 76.9, y2: 66.1, y3: 34.1 },\n        { x: '2015', y0: 67.3, y1: 49.5, y2: 19.3, y3: 38.2 },\n        { x: '2016', y0: 143.4, y1: 121.7, y2: 91.4, y3: 44.0 },\n        { x: '2017', y0: 19.9, y1: 28.5, y2: 65.4, y3: 51.6 },\n        { x: '2018', y0: 30, y1: 66.7, y2: 32.9, y3: 61.9 },\n        { x: '2019', y0: 189.0, y1: 128.9, y2: 122.4, y3: 76.5 },\n        { x: '2020', y0: 72.7, y1: 97.3, y2: 65.9, y3: 82.0 }\n    ];\n\n    let chart: Chart = new Chart({\n\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            title: 'Years', lineStyle: { width: 0 },\n            majorGridLines: { width: 0 }, minorGridLines: { width: 1 },\n            minorTickLines: { width: 1 }, interval: 1,\n            labelIntersectAction: 'Rotate45',\n            valueType: 'Category'\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis:\n        {\n            title: 'Sales in Billions',\n            minimum: 0, maximum: 700, interval: 100,\n            majorGridLines: { width: 1 }, minorGridLines: { width: 1 },\n            minorTickLines: { width: 1 }, labelFormat: '{value}B',\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'StackingColumn', xName: 'x', width: 2, yName: 'y0', name: 'UK',\n                dataSource: dataSource,\n            },\n            {\n                type: 'StackingColumn', xName: 'x', width: 2, yName: 'y1', name: 'Germany',\n                dataSource: dataSource,\n            },\n            {\n                type: 'StackingColumn', xName: 'x', width: 2, yName: 'y2', name: 'France',\n                dataSource: dataSource,\n            },\n            {\n                type: 'StackingColumn', xName: 'x', width: 2, yName: 'y3', name: 'Italy',\n                dataSource: dataSource,\n            }\n        ],\n        title: 'Mobile Game Market by Country',\n        selectionMode: 'Cluster',\n        selectedDataIndexes: [{ series: 0, point: 0 }],\n        tooltip: { enable: true, format: '${series.name}<br>${point.x} : ${point.y}' },\n        load: (args: ILoadedEventArgs) => {\n            let selectedTheme: string = location.hash.split('/')[1];\n            args.chart.theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';\n        },\n        annotations: [{\n            content: '<div id=\"chart_annotation\" style=\"width: 200px; height: 200px\"></div>',\n            x: '20%',\n            y: '25%',\n            coordinateUnits: 'Pixel',\n            region: 'Series'\n        }],\n        chartMouseUp: (args: IMouseEventArgs) => {\n            if (args.target.indexOf('Point') > -1) {\n                let pointIndex: number = parseInt(args.target[args.target.length - 1], 10);\n                let pieDataSurce: Object[] = [];\n                for (let series of chart.visibleSeries) {\n                    let data: Object = {\n                        'x': series.name,\n                        'y': series.points[pointIndex].y\n                    };\n                    pieDataSurce.push(data);\n                }\n                pie.series[0].dataSource = pieDataSurce;\n                pie.series[0].xName = 'x';\n                pie.series[0].yName = 'y';\n                pie.refresh();\n            }\n        },\n        loaded: (args: ILoadedEventArgs) => {\n            pie = new AccumulationChart({\n                background: 'transparent',\n                series: [{\n                        radius: '65%', animation: { enable: false},\n                        dataSource: [{ x: 'UK', y: 111.1 }, { x: 'Germany', y: 76.9 }, { x: 'France', y: 66.1 }, { x: 'Italy', y: 34.1 }],\n                        xName: 'x', yName: 'y', dataLabel: { visible: true, position: 'Inside', font : { color: 'white'}},\n                    }],\n                load: (args: IAccLoadedEventArgs) => {\n                    let selectedTheme: string = location.hash.split('/')[1];\n                    args.accumulation.theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';\n                },\n                legendSettings: { visible: false }\n            });\n            pie.appendTo('#chart_annotation');\n        }\n    });\n    chart.appendTo('#container');\n","index.html":"<!DOCTYPE html><html><head>\n    <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n    <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"control-section\">\n    <div id=\"container\"></div>    \n</div>\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n    transpiler: \"typescript\",\n    typescriptOptions: {\n        compilerOptions: {\n            target: \"umd\",\n            module: \"commonjs\",\n            moduleResolution: \"node\",\n            emitDecoratorMetadata: true,\n            experimentalDecorators: true\n        }\n    },\n    paths: {\n        \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n    },\n    map: {\n        main: \"index.ts\",\n        typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n        'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n        \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",        \n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",        \n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",        \n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\"\n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
+{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport {\n    Chart, StackingColumnSeries, Category, Legend, ILoadedEventArgs, Selection, IMouseEventArgs, IAccLoadedEventArgs,\n    ChartAnnotation, AccumulationChart, AccumulationDataLabel, IAnimationCompleteEventArgs,\n} from '@syncfusion/ej2-charts';\nChart.Inject(StackingColumnSeries, Category, Legend, Selection, ChartAnnotation);\nAccumulationChart.Inject(AccumulationChart, AccumulationDataLabel);\n/**\n * Pie chart annootation\n */\n\n    let pie: AccumulationChart;\n    let isRender: boolean = false;\n    let dataSource: Object = [\n        { x: '2014', y0: 51, y1: 77, y2: 66, y3: 34 }, { x: '2015', y0: 67, y1: 49, y2: 19, y3: 38 },\n        { x: '2016', y0: 143, y1: 121, y2: 91, y3: 44 }, { x: '2017', y0: 19, y1: 28, y2: 65, y3: 51 },\n        { x: '2018', y0: 30, y1: 66, y2: 32, y3: 61 }, { x: '2019', y0: 189, y1: 128, y2: 122, y3: 76 },\n        { x: '2020', y0: 72, y1: 97, y2: 65, y3: 82 }\n    ];\n    let pieDataSource: Object[] = [\n        { x: 'UK', y: 111 }, { x: 'Germany', y: 76 },\n        { x: 'France', y: 66 }, { x: 'Italy', y: 34 }\n    ];\n    let chart: Chart = new Chart({\n\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            title: 'Years', valueType: 'Category', majorGridLines: { width: 0 }, minorGridLines: { width: 1 },\n            minorTickLines: { width: 1 }, interval: 1, labelIntersectAction: 'Rotate45',\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis:\n        {\n            title: 'Sales in Billions', lineStyle: { width: 0 },\n            minimum: 0, maximum: 700, interval: 100,\n            majorGridLines: { width: 1 }, minorGridLines: { width: 1 },\n            minorTickLines: { width: 0 }, labelFormat: '{value}B',\n            majorTickLines: { width: 0 }\n        },\n        //Initializing Chart Series\n        series: [\n            { type: 'StackingColumn', xName: 'x', width: 2, yName: 'y0', name: 'UK', dataSource: dataSource },\n            { type: 'StackingColumn', xName: 'x', width: 2, yName: 'y1', name: 'Germany', dataSource: dataSource },\n            { type: 'StackingColumn', xName: 'x', width: 2, yName: 'y2', name: 'France', dataSource: dataSource },\n            { type: 'StackingColumn', xName: 'x', width: 2, yName: 'y3', name: 'Italy', dataSource: dataSource }\n        ],\n        chartArea: { border: { width: 0 } }, title: 'Mobile Game Market by Country',\n        selectionMode: 'Cluster',\n        selectedDataIndexes: [{ series: 0, point: 0 }],\n        load: (args: ILoadedEventArgs) => {\n            let selectedTheme: string = location.hash.split('/')[1];\n            args.chart.theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';\n        },\n        legendSettings: { visible: false },\n        annotations: [{\n            content: '<div id=\"chart_annotation\" style=\"width: 200px; height: 200px\"></div>',\n            x: '20%', y: '25%', coordinateUnits: 'Pixel', region: 'Series'\n        }],\n        chartMouseUp: (args: IMouseEventArgs) => {\n            if (args.target.indexOf('Point') > -1) {\n                let pointIndex: number = parseInt(args.target[args.target.length - 1], 10);\n                pieDataSource = [];\n                for (let series of chart.visibleSeries) {\n                    pieDataSource.push({ 'x': series.name, 'y': series.points[pointIndex].y });\n                }\n                pie.series[0].dataSource = pieDataSource;\n                pie.series[0].xName = 'x'; pie.series[0].yName = 'y';\n                pie.refresh();\n            }\n        },\n        loaded: (args: ILoadedEventArgs) => {\n            if (isRender) {\n                pie.destroy();\n                pie = new AccumulationChart(pie = new AccumulationChart({\n                    background: 'transparent',\n                    series: [{\n                        radius: '65%', animation: { enable: false },\n                        dataSource: pieDataSource,\n                        xName: 'x', yName: 'y', dataLabel: { visible: true, position: 'Inside', font: { color: 'white' } },\n                    }],\n                    load: (args: IAccLoadedEventArgs) => {\n                        let selectedTheme: string = location.hash.split('/')[1];\n                        args.accumulation.theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';\n                    },\n                    legendSettings: { visible: false }\n                }));\n                pie.appendTo('#chart_annotation');\n            }\n        },\n        animationComplete: (args: IAnimationCompleteEventArgs) => {\n            isRender = true;\n            pie = new AccumulationChart({\n                background: 'transparent',\n                series: [{\n                    radius: '65%', animation: { enable: false },\n                    dataSource: pieDataSource,\n                    xName: 'x', yName: 'y', dataLabel: { visible: true, position: 'Inside', font: { color: 'white' } },\n                }],\n                load: (args: IAccLoadedEventArgs) => {\n                    let selectedTheme: string = location.hash.split('/')[1];\n                    args.accumulation.theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';\n                },\n                legendSettings: { visible: false }\n            });\n            pie.appendTo('#chart_annotation');\n        }\n    });\n    chart.appendTo('#container');\n","index.html":"<!DOCTYPE html><html><head>\n    <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n    <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"control-section\">\n    <div id=\"container\"></div>    \n</div>\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n    transpiler: \"typescript\",\n    typescriptOptions: {\n        compilerOptions: {\n            target: \"umd\",\n            module: \"commonjs\",\n            moduleResolution: \"node\",\n            emitDecoratorMetadata: true,\n            experimentalDecorators: true\n        }\n    },\n    paths: {\n        \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n    },\n    map: {\n        main: \"index.ts\",\n        typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n        'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n        \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",        \n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",        \n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",        \n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\"\n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}

src/chart/pie-annotation.html

@@ -3,7 +3,7 @@
 </div>
 <div id="description">
     <p>
-        In this example, you can see how to render and configure annotation feature in chart. In this cartesian chart, accumulation chart is placed as a annotation. While selecting, clustered values are shown in pie chart as a annotation.
+       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. 
     </p>
     <br>
     <p style="font-weight: 500">Injecting Module</p>