Skip to content

Commit 0130754

Browse files
author
pipeline
committed
bug(EJ2-4407): TS chart samples changed
1 parent ed7dae9 commit 0130754

File tree

6 files changed

+7
-7
lines changed

6 files changed

+7
-7
lines changed

‎src/chart/data-label-template-plnkr.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { Chart, LineSeries, DataLabel, Marker, ILoadedEventArgs, ChartTheme, Category, ITextRenderEventArgs } from '@syncfusion/ej2-charts';\nChart.Inject(LineSeries, DataLabel, Marker, Category);\n/**\n * dataLabel template\n */\n\n let theme: ChartTheme;\n let chart: Chart = new Chart({\n title: 'Population of India ( 2010 - 2016 )',\n titleStyle: {\n color: '#606060', fontFamily: 'Roboto',\n fontStyle: 'medium', size: '14px'\n },\n chartArea: { border: { width: 0 }},\n primaryXAxis: {\n minimum: 2010, maximum: 2016,\n interval: 1,\n edgeLabelPlacement: 'Shift',\n labelStyle: {\n color: '#606060',\n fontFamily: 'Roboto',\n fontStyle: 'medium',\n size: '14px'\n },\n majorGridLines: { width: 0 },\n lineStyle: { color: '#eaeaea', width: 1 }\n },\n primaryYAxis: {\n minimum: 900, maximum: 1300,\n labelFormat: '{value}M',\n labelStyle: {\n color: '#606060',\n fontFamily: 'Roboto',\n fontStyle: 'medium',\n size: '14px'\n },\n interval: 80,\n majorGridLines: {\n color: '#eaeaea',\n width: 1\n },\n lineStyle: {\n color: '#eaeaea',\n width: 1\n }\n },\n series: [\n {\n name: 'Male',\n dataSource: [\n { x: 2010, y: 1014 }, { x: 2011, y: 1040 },\n { x: 2012, y: 1065 }, { x: 2013, y: 1110 },\n { x: 2014, y: 1130 }, { x: 2015, y: 1153 },\n { x: 2016, y: 1175 }\n ], xName: 'x', yName: 'y',\n marker: {\n visible: true,\n shape: 'Circle',\n dataLabel: {\n visible: true,\n position: 'Top',\n margin: { right : 30},\n template: '#Male-Material'\n }\n }, legendShape: 'Rectangle', width: 2\n }, {\n name: 'Female',\n dataSource: [\n { x: 2010, y: 990 }, { x: 2011, y: 1010 },\n { x: 2012, y: 1030 }, { x: 2013, y: 1070 },\n { x: 2014, y: 1105 }, { x: 2015, y: 1138 },\n { x: 2016, y: 1155 }\n ], xName: 'x', yName: 'y',\n marker: {\n visible: true,\n shape: 'Rectangle',\n dataLabel: {\n visible: true,\n position: 'Bottom',\n margin: { right : 15},\n template: '#Female-Material'\n }\n }, legendShape: 'Rectangle', width: 2\n }\n ],\n textRender: (args: ITextRenderEventArgs) => {\n args.template = '#' + args.series.name + '-' + theme;\n },\n load: (args: ILoadedEventArgs) => {\n let selectedTheme: string = location.hash.split('/')[1];\n theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';\n args.chart.theme = theme;\n },\n legendSettings: {\n visible: true,\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 style=\"float: right; margin-right: 10px;\">\n </div>\n</div>\n\n<style>\n #control-container {\n padding: 0px !important;\n }\n \n #templateWrap img {\n border-radius: 0px;\n width: 24px;\n padding: 2px;\n height: 24px;\n }\n \n #templateWrap .des {\n float: right;\n padding: 2px;\n line-height: 20px;\n text-align: center;\n }\n</style>\n<script id=\"Male-Fabric\" type=\"text/x-template\">\n <div id='templateWrap' style=\"background-color:#4472c4;border-radius: 3px;\">\n <img src='http://npmci.syncfusion.com/production/demos/src/chart/images/male.png' />\n <div class='des' style=\"color:white; font-family:Roboto; font-style: medium; fontp-size:14px; padding-right:6px\">\n <span>${point.y}M </span>\n </div>\n </div>\n</script>\n<script id=\"Female-Fabric\" type=\"text/x-template\">\n <div id='templateWrap' style=\"background-color:#ed7d31;border-radius: 3px;\">\n <img src='http://npmci.syncfusion.com/production/demos/src/chart/images/female.png' />\n <div class='des' style=\"color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px\">\n <span>${point.y}M </span>\n </div>\n </div>\n</script>\n<script id=\"Male-Material\" type=\"text/x-template\">\n <div id='templateWrap' style=\"background-color:#00bdae;border-radius: 3px;\">\n <img src='http://npmci.syncfusion.com/production/demos/src/chart/images/male.png' />\n <div class='des' style=\"color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px\">\n <span>${point.y}M </span>\n </div>\n </div>\n</script>\n<script id=\"Female-Material\" type=\"text/x-template\">\n <div id='templateWrap' style=\"background-color:#404041;border-radius: 3px;\">\n <img src='http://npmci.syncfusion.com/production/demos/src/chart/images/female.png' />\n <div class='des' style=\"color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px\">\n <span>${point.y}M </span>\n </div>\n </div>\n</script>\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));"}
1+
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { Chart, LineSeries, DataLabel, Marker, ILoadedEventArgs, ChartTheme, Category, ITextRenderEventArgs } from '@syncfusion/ej2-charts';\nChart.Inject(LineSeries, DataLabel, Marker, Category);\n/**\n * dataLabel template\n */\n\n let theme: ChartTheme;\n let chart: Chart = new Chart({\n title: 'Population of India ( 2010 - 2016 )',\n titleStyle: {\n color: '#606060', fontFamily: 'Roboto',\n fontStyle: 'medium', size: '14px'\n },\n chartArea: { border: { width: 0 }},\n primaryXAxis: {\n minimum: 2010, maximum: 2016,\n interval: 1,\n edgeLabelPlacement: 'Shift',\n labelStyle: {\n color: '#606060',\n fontFamily: 'Roboto',\n fontStyle: 'medium',\n size: '14px'\n },\n majorGridLines: { width: 0 },\n lineStyle: { color: '#eaeaea', width: 1 }\n },\n primaryYAxis: {\n minimum: 900, maximum: 1300,\n labelFormat: '{value}M',\n labelStyle: {\n color: '#606060',\n fontFamily: 'Roboto',\n fontStyle: 'medium',\n size: '14px'\n },\n interval: 80,\n majorGridLines: {\n color: '#eaeaea',\n width: 1\n },\n lineStyle: {\n color: '#eaeaea',\n width: 1\n }\n },\n series: [\n {\n name: 'Male',\n dataSource: [\n { x: 2010, y: 1014 }, { x: 2011, y: 1040 },\n { x: 2012, y: 1065 }, { x: 2013, y: 1110 },\n { x: 2014, y: 1130 }, { x: 2015, y: 1153 },\n { x: 2016, y: 1175 }\n ], xName: 'x', yName: 'y',\n marker: {\n visible: true,\n shape: 'Circle',\n dataLabel: {\n visible: true,\n position: 'Top',\n margin: { right : 30},\n template: '#Male-Material'\n }\n }, width: 2\n }, {\n name: 'Female',\n dataSource: [\n { x: 2010, y: 990 }, { x: 2011, y: 1010 },\n { x: 2012, y: 1030 }, { x: 2013, y: 1070 },\n { x: 2014, y: 1105 }, { x: 2015, y: 1138 },\n { x: 2016, y: 1155 }\n ], xName: 'x', yName: 'y',\n marker: {\n visible: true,\n shape: 'Rectangle',\n dataLabel: {\n visible: true,\n position: 'Bottom',\n margin: { right : 15},\n template: '#Female-Material'\n }\n }, width: 2\n }\n ],\n textRender: (args: ITextRenderEventArgs) => {\n args.template = '#' + args.series.name + '-' + theme;\n },\n load: (args: ILoadedEventArgs) => {\n let selectedTheme: string = location.hash.split('/')[1];\n theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';\n args.chart.theme = theme;\n },\n legendSettings: {\n visible: true,\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 style=\"float: right; margin-right: 10px;\">\n </div>\n</div>\n\n<style>\n #control-container {\n padding: 0px !important;\n }\n \n #templateWrap img {\n border-radius: 0px;\n width: 24px;\n padding: 2px;\n height: 24px;\n }\n \n #templateWrap .des {\n float: right;\n padding: 2px;\n line-height: 20px;\n text-align: center;\n }\n</style>\n<script id=\"Male-Fabric\" type=\"text/x-template\">\n <div id='templateWrap' style=\"background-color:#4472c4;border-radius: 3px;\">\n <img src='http://npmci.syncfusion.com/production/demos/src/chart/images/male.png' />\n <div class='des' style=\"color:white; font-family:Roboto; font-style: medium; fontp-size:14px; padding-right:6px\">\n <span>${point.y}M </span>\n </div>\n </div>\n</script>\n<script id=\"Female-Fabric\" type=\"text/x-template\">\n <div id='templateWrap' style=\"background-color:#ed7d31;border-radius: 3px;\">\n <img src='http://npmci.syncfusion.com/production/demos/src/chart/images/female.png' />\n <div class='des' style=\"color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px\">\n <span>${point.y}M </span>\n </div>\n </div>\n</script>\n<script id=\"Male-Material\" type=\"text/x-template\">\n <div id='templateWrap' style=\"background-color:#00bdae;border-radius: 3px;\">\n <img src='http://npmci.syncfusion.com/production/demos/src/chart/images/male.png' />\n <div class='des' style=\"color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px\">\n <span>${point.y}M </span>\n </div>\n </div>\n</script>\n<script id=\"Female-Material\" type=\"text/x-template\">\n <div id='templateWrap' style=\"background-color:#404041;border-radius: 3px;\">\n <img src='http://npmci.syncfusion.com/production/demos/src/chart/images/female.png' />\n <div class='des' style=\"color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px\">\n <span>${point.y}M </span>\n </div>\n </div>\n</script>\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/data-label-template.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ this.default = (): void => {
6262
margin: { right : 30},
6363
template: '#Male-Material'
6464
}
65-
}, legendShape: 'Rectangle', width: 2
65+
}, width: 2
6666
}, {
6767
name: 'Female',
6868
dataSource: [
@@ -80,7 +80,7 @@ this.default = (): void => {
8080
margin: { right : 15},
8181
template: '#Female-Material'
8282
}
83-
}, legendShape: 'Rectangle', width: 2
83+
}, width: 2
8484
}
8585
],
8686
textRender: (args: ITextRenderEventArgs) => {

0 commit comments

Comments
 (0)