Ej2 4407 chart ts sb mas

Author: pipeline

src/chart/data-label-template.html

@@ -12,7 +12,11 @@
     <p>
         To use dataLabel, we need to inject
         <code>dataLabel</code> module using <code>Chart.Inject(dataLabel)</code> method.
-    </p>   
+    </p>
+    <p>
+        More information on the Crosshair can be found in this &nbsp;
+        <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-dataLabelSettingsModel.html">documentation section</a>.
+    </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, 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));"}
+{"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

@@ -1,20 +1,23 @@
 <div class="control-section">
-    <div id="container"></div>    
+    <div id="container"></div>
 </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>
     <br>
     <p style="font-weight: 500">Injecting Module</p>
     <p>
-        Chart component features are segregated into individual feature-wise modules. To annotation feature in chart, we need 
-        to inject
-        <code>ChartAnnotation</code> module using <code>Chart.Inject(ChartAnnotation)</code> method. 
+        Chart component features are segregated into individual feature-wise modules. To annotation feature in chart, we need to
+        inject
+        <code>ChartAnnotation</code> module using <code>Chart.Inject(ChartAnnotation)</code> method.
     </p>
     <p>
         More information on the chart annotation can be found in this
-        <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-annotation.html">documentation section</a>.
+        <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-chartAnnotation.html">documentation section</a>.
     </p>
 </div>
 <style>