This repository was archived by the owner on Jul 30, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy patherror-bar-plnkr.json
More file actions
1 lines (1 loc) · 31.6 KB
/
error-bar-plnkr.json
File metadata and controls
1 lines (1 loc) · 31.6 KB
1
{"index.css":"","app/property-pane.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nexport class PropertyPane extends React.Component<{ title: string }, {}>{\r\n\r\n render() {\r\n return (\r\n <div className='property-panel-section'>\r\n <div className=\"property-panel-header\">\r\n {this.props.title}\r\n </div>\r\n <div className=\"property-panel-content\">\r\n {this.props.children}\r\n </div>\r\n </div>\r\n\r\n )\r\n }\r\n}\r\n","theme-color":"/**\r\n * Initialize the Theme colors\r\n */\r\nexport let materialColors: string[] = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',\r\n '#ea7a57', '#404041', '#00bdae'];\r\nexport let fabricColors: string[] = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',\r\n '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31'];\r\nexport let bootstrapColors: string[] = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6',\r\n '#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];\r\nexport let highContrastColors: string[] = ['#79ECE4', '#E98272', '#DFE6B6', '#C6E773', '#BA98FF',\r\n '#FA83C3', '#00C27A', '#43ACEF', '#D681EF', '#D8BC6E'];\r\n","systemjs.config.js":"System.config({\r\n transpiler: \"ts\",\r\n typescriptOptions: {\r\n target: \"es5\",\r\n module: \"commonjs\",\r\n moduleResolution: \"node\",\r\n emitDecoratorMetadata: true,\r\n experimentalDecorators: true,\r\n \"jsx\": \"react\"\r\n },\r\n meta: {\r\n 'typescript': {\r\n \"exports\": \"ts\"\r\n },\r\n '*.json': { loader: 'plugin-json' }\r\n },\r\n paths: {\r\n \"syncfusion:\": \"http://cdn.syncfusion.com/ej2/\"},\r\n map: {\r\n app: 'app',\r\n ts: \"https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js\",\r\n typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\r\n \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\r\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\r\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\r\n \"@syncfusion/ej2-splitbuttons\": \"syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js\",\r\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\r\n \"@syncfusion/ej2-maps\": \"syncfusion:ej2-maps/dist/ej2-maps.umd.min.js\",\r\n \"@syncfusion/ej2-treemap\": \"syncfusion:ej2-treemap/dist/ej2-treemap.umd.min.js\",\r\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\r\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\r\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\r\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\r\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\r\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\r\n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\r\n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\r\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\r\n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\r\n \"@syncfusion/ej2-schedule\": \"syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js\",\r\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\", \r\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\r\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\", \r\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\",\r\n \"@syncfusion/ej2-documenteditor\": \"syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js\",\r\n \"@syncfusion/ej2-notifications\": \"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js\",\r\n \"@syncfusion/ej2-richtexteditor\": \"syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js\",\r\n\t\t\"@syncfusion/ej2-svg-base\": \"syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js\",\r\n \"@syncfusion/ej2-pivotview\": \"syncfusion:ej2-pivotview/dist/ej2-pivotview.umd.min.js\",\r\n \"@syncfusion/ej2-heatmap\": \"syncfusion:ej2-heatmap/dist/ej2-heatmap.umd.min.js\",\r\n \"@syncfusion/ej2-react-base\": \"syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js\",\r\n \"@syncfusion/ej2-react-buttons\": \"syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js\",\r\n \"@syncfusion/ej2-react-splitbuttons\": \"syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js\",\r\n \"@syncfusion/ej2-react-charts\": \"syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js\",\r\n \"@syncfusion/ej2-react-maps\": \"syncfusion:ej2-react-maps/dist/ej2-react-maps.umd.min.js\",\r\n \"@syncfusion/ej2-react-treemap\": \"syncfusion:ej2-react-treemap/dist/ej2-react-treemap.umd.min.js\",\r\n \"@syncfusion/ej2-react-circulargauge\": \"syncfusion:ej2-react-circulargauge/dist/ej2-react-circulargauge.umd.min.js\",\r\n \"@syncfusion/ej2-react-lineargauge\": \"syncfusion:ej2-react-lineargauge/dist/ej2-react-lineargauge.umd.min.js\",\r\n \"@syncfusion/ej2-react-calendars\": \"syncfusion:ej2-react-calendars/dist/ej2-react-calendars.umd.min.js\",\r\n \"@syncfusion/ej2-react-dropdowns\": \"syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js\",\r\n \"@syncfusion/ej2-react-grids\": \"syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js\",\r\n \"@syncfusion/ej2-react-inputs\": \"syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js\",\r\n \"@syncfusion/ej2-react-lists\": \"syncfusion:ej2-react-lists/dist/ej2-react-lists.umd.min.js\",\r\n \"@syncfusion/ej2-react-navigations\": \"syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js\",\r\n \"@syncfusion/ej2-react-popups\": \"syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js\",\r\n \"@syncfusion/ej2-react-schedule\": \"syncfusion:ej2-react-schedule/dist/ej2-react-schedule.umd.min.js\",\r\n \"@syncfusion/ej2-react-documenteditor\": \"syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js\",\r\n \"@syncfusion/ej2-react-notifications\": \"syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.min.js\",\r\n \"@syncfusion/ej2-react-richtexteditor\": \"syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js\",\r\n \"@syncfusion/ej2-react-pivotview\": \"syncfusion:ej2-react-pivotview/dist/ej2-react-pivotview.umd.min.js\",\r\n \"@syncfusion/ej2-react-heatmap\": \"syncfusion:ej2-react-heatmap/dist/ej2-react-heatmap.umd.min.js\",\r\n \"react-dom\":\"https://unpkg.com/react-dom@15.5.4/dist/react-dom.min.js\",\r\n \"react\":\"https://unpkg.com/react@15.5.4/dist/react.min.js\",\r\n },\r\n packages: {\r\n 'app': { main: 'index', defaultExtension: 'tsx' },\r\n }\r\n});\r\n\r\nSystem.import('app');","index.html":"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>Chart · ErrorBarChart · Essential JS 2 for React · Syncfusion</title>\r\n <meta charset=\"utf-8\" />\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\" />\r\n <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\r\n <!-- {{:meta}} -->\r\n <meta name=\"author\" content=\"Syncfusion\" />\r\n <script type=\"text/javascript\">\r\n var themeName = location.hash || 'material';\r\n themeName = themeName.replace('#','');\r\n window.ripple = (themeName === \"material\")\r\n document.write('<link href=\"http://cdn.syncfusion.com/ej2/' + themeName + '.css\" rel=\"stylesheet\">');\r\n </script>\r\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\" />\r\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\r\n <script src=\"systemjs.config.js\"></script>\r\n <link href=\"index.css\" rel=\"stylesheet\" />\r\n <style>\r\n #loader {\r\n color: #008cff;\r\n height: 40px;\r\n left: 45%;\r\n position: absolute;\r\n top: 45%;\r\n width: 30%;\r\n }\r\n body {\r\n touch-action:none;\r\n }\r\n .body {\r\n font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n }\r\n\r\n .e-view {\r\n bottom: 0;\r\n left: 0;\r\n overflow: hidden;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n }\r\n\r\n .sb-left {\r\n float: left;\r\n }\r\n\r\n .sb-right {\r\n float: right;\r\n }\r\n\r\n .sb-block {\r\n display: block;\r\n }\r\n\r\n .sb-table {\r\n display: table;\r\n }\r\n\r\n .sb-table-cell {\r\n display: table-cell;\r\n vertical-align: middle;\r\n }\r\n\r\n /*sample header*/\r\n\r\n\r\n .sb-header {\r\n height: 48px;\r\n background: #FFFFFF;\r\n box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);\r\n z-index: 1001;\r\n opacity: 100;\r\n }\r\n\r\n\r\n .sb-header-left, .sb-header-right {\r\n height: 100%;\r\n }\r\n\r\n #sb-header-text {\r\n padding-left: 22px;\r\n opacity: 0.87;\r\n font-family: Roboto;\r\n font-weight: 500;\r\n font-size: 15px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n .header-logo {\r\n float: left;\r\n padding-left: 8px;\r\n padding-right: 22px;\r\n }\r\n\r\n .footer-logo {\r\n background: url(https://ej2.syncfusion.com/home/images/footer-logo.svg) no-repeat right;\r\n height: 40px;\r\n width: 140px;\r\n }\r\n\r\n .sb-header-splitter {\r\n float: left;\r\n border-left: 1px solid rgb(196, 196, 196);\r\n height: 32px;\r\n margin-top: 8px;\r\n padding-left: 22 px;\r\n }\r\n\r\n .sb-header-settings {\r\n display: none;\r\n }\r\n\r\n .product-style a{\r\n padding-right: 15px;\r\n font-family:Roboto;\r\n font-weight: 500;\r\n font-size: 13px;\r\n color: #363636;\r\n text-align: center;\r\n text-decoration: none;\r\n }\r\n .product-style a:hover {\r\n color:#3C78EF;\r\n }\r\n\r\n .sb-download-btn a {\r\n text-decoration: none;\r\n }\r\n\r\n .sb-download-text {\r\n color: #FFFFFF;\r\n }\r\n\r\n .sb-download-wrapper {\r\n padding-right: 27px;\r\n }\r\n\r\n .sb-download-btn:hover .sb-download-btn:focus .sb-download-btn.active {\r\n border-radius: 2px;\r\n font-family: \"Roboto\";\r\n font-weight: bold;\r\n color: #FFFFFF;\r\n }\r\n\r\n .sb-download-btn:hover {\r\n background: #006CE6;\r\n }\r\n\r\n .sb-download-btn:focus {\r\n background: #0051CB;\r\n }\r\n\r\n .sb-download-btn.active {\r\n background: #0036B1;\r\n }\r\n\r\n .sb-download-btn {\r\n background-color: #3C78EF;\r\n opacity: 100;\r\n border-radius: 2px;\r\n font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n font-weight: 500;\r\n line-height: 18px;\r\n height: 32px;\r\n border-color: transparent;\r\n }\r\n\r\n .sb-bread-crumb {\r\n padding-left: 20px;\r\n padding-top: 24px;\r\n padding-bottom: 10px;\r\n }\r\n\r\n .category-allcontrols a, .category-text a, .crumb-sample {\r\n display: table;\r\n opacity: 0.87;\r\n font-family: Roboto;\r\n font-weight: 500;\r\n font-size: 15px;\r\n color: #3C78EF;\r\n text-align: left;\r\n text-decoration: none;\r\n }\r\n\r\n .sb-bread-crumb .sb-bread-crumb-text>div {\r\n font-size: 15px;\r\n font-weight: 500;\r\n padding-right: 8px;\r\n cursor: default;\r\n display: table-cell;\r\n }\r\n\r\n .sb-bread-crumb-text>div.seperator {\r\n font-weight: 700;\r\n font-size: 15px;\r\n vertical-align: bottom;\r\n } \r\n\r\n .content {\r\n overflow: auto;\r\n height: calc(100% - 50px);\r\n top: 50px;\r\n }\r\n\r\n\r\n .sample-content {\r\n top: 48px;\r\n background: #FFFFFF;\r\n }\r\n\r\n .div {\r\n display: block;\r\n }\r\n\r\n .control-section {\r\n padding-left: 4px;\r\n }\r\n\r\n .crumb-sample {\r\n color: #000000;\r\n line-height: 18px;\r\n }\r\n\r\n #description {\r\n padding-bottom: 16px;\r\n padding-left: 20px;\r\n opacity: 0.75;\r\n font-family: Roboto;\r\n font-size: 13px;\r\n color: #000000;\r\n text-align: left;\r\n padding-top: 14px;\r\n }\r\n\r\n #action-description {\r\n padding-left: 20px;\r\n padding-bottom: 15px;\r\n opacity: 0.75;\r\n font-family: Roboto;\r\n font-size: 13px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n #description-section {\r\n padding-left: 20px;\r\n padding-top: 30px;\r\n opacity: 0.87;\r\n font-family:Roboto;\r\n font-weight: 700;\r\n font-size: 15px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n\r\n\r\n </style>\r\n</head>\r\n\r\n<body class='e-view ej2-new' aria-busy=\"true\">\r\n <div class=\"sample-browser\">\r\n <div id='sample-header' class=\"sb-header\" role=\"banner\">\r\n <div class='sb-header-left sb-left sb-table'>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class=\"header-logo\">\r\n <a href=\"https://ej2.syncfusion.com/home/react.html\" target=\"\" rel=\"noopener noreferrer\">\r\n <div class=\"footer-logo\"> </div>\r\n </a>\r\n </div>\r\n \r\n </div>\r\n <div class=\"sb-header-splitter sb-download-splitter\"></div>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div id='sb-header-text' class='e-sb-header-text'>\r\n \r\n <span class='sb-header-text-left'>Essential JS 2 for React</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class='sb-header-right sb-right sb-table'>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class='product-style'>\r\n <div><a href=\"https://www.syncfusion.com/products/react/chart\">PRODUCT DETAILS</a></div>\r\n </div>\r\n </div>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class=\"sb-header-item sb-table-cell sb-download-wrapper\">\r\n <a href=\"https://www.syncfusion.com/downloads/essential-js2\" target=\"_blank\">\r\n <button id=\"download-now\" class=\"sb-download-btn\">\r\n <span class=\"sb-download-text\">DOWNLOAD</span>\r\n </button>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class ='content e-view'>\r\n <div class='sample-content'>\r\n <div id=\"sample-bread-crumb\" class=\"sb-bread-crumb\">\r\n <div class=\"sb-bread-crumb-text\">\r\n <div class=\"category-allcontrols\"><a href=\"https://ej2.syncfusion.com/react/demos\"><span>All Controls</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"category-text bread-ctext\"><a href=\"https://ej2.syncfusion.com/react/demos/#/material/chart/default.html\"><span>Chart</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"crumb-sample\">ErrorBarChart</div>\r\n </div>\r\n </div>\r\n <div class=\"control-content\">\r\n <div id=\"action-description\">\r\n <p>\r\n \n <p>\n This sample visualizes the errors in sales distribution of a car for a certain period with error bar in the chart. In property panel, the options are available to change error bar type, drawing mode, and drawing direction of error bar by means of dropdown\n </p>\n \r\n </p>\r\n </div>\r\n <div class=\"container-fluid\">\r\n <div class=\"control-section\">\r\n <div id='sample'>\r\n <div id='loader'>Loading....</div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div id=\"description-section\">Description</div> \r\n <div id=\"description\">\r\n <p>\r\n \n <p>\n In this example, you can see how to render and configure the error bar charts. Line type charts are used for cartesian type\n series. You can use error bar by set <code>visible</code> property to true. You can change the error bar\n rendering type using <code>type</code> property like fixedValue, percentage, standardDeviation, standardError and\n custom option of errorBar. To change the error bar line length you can use <code>verticalError</code> property.\n </p>\n <p>Chart supports the following error bar types.</p>\n <ul>\n <li><code>Fixed</code> - Renders a fixed type error bar.</li>\n <li><code>Percentage</code> - Renders a percentage type error bar.</li>\n <li><code>StandardDeviation</code> - Renders a standard deviation type error bar.</li>\n <li><code>StandardError</code> - Renders a standard error type error bar.</li>\n <li><code>Custom</code> - Renders a custom type error bar.</li>\n </ul>\n <p><b>Injecting Module</b></p>\n <p>\n Chart component features are segregated into individual feature-wise modules. To use error bar, we need to inject\n <code>ErrorBar</code> into the <code>@services</code> section.\n </p>\n <p>\n More information on the smart axis labels can be found in this  \n <a target=\"_blank\" href=\"http://ej2.syncfusion.com/react/documentation/chart/api-series.html#type-chartseriestype\">documentation section</a>.\n </p>\n \r\n </p> \r\n </div> \r\n </div> \r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n</body>\r\n</html>\r\n","app/index.tsx":"/**\r\n * Sample for error bar\r\n */\r\nimport * as React from \"react\";\r\nimport * as ReactDOM from \"react-dom\";\r\nimport {\r\n ChartComponent, SeriesCollectionDirective, SeriesDirective, ErrorBar, ScatterSeries, Tooltip, Category,\r\n ILoadedEventArgs, ErrorBarMode, ErrorBarType, ErrorBarDirection, ChartTheme,\r\n IPointRenderEventArgs, Inject\r\n} from '@syncfusion/ej2-react-charts';\r\nimport { PropertyPane } from './property-pane';\r\nimport { EmitType } from '@syncfusion/ej2-base';\r\nimport { SampleBase } from './sample-base';\r\nimport { fabricColors, materialColors, bootstrapColors,highContrastColors } from '../theme-color';\r\nimport { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';\r\nimport { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';\r\nimport { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';\r\n\r\nexport let data1: any[] = [\r\n { x: 'IND', y: 24 }, { x: 'AUS', y: 20 }, { x: 'USA', y: 35 },\r\n { x: 'DEU', y: 27 }, { x: 'ITA', y: 30 },\r\n { x: 'UK', y: 41 }, { x: 'RUS', y: 26 }\r\n];\r\nexport let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {\r\n let selectedTheme: string = location.hash.split('/')[1];\r\n selectedTheme = selectedTheme ? selectedTheme : 'material';\r\n if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {\r\n args.fill = fabricColors[args.point.index % 10];\r\n } else if (selectedTheme === 'material') {\r\n args.fill = materialColors[args.point.index % 10];\r\n } else if (selectedTheme === 'highcontrast') {\r\n args.fill = highContrastColors[args.point.index % 10];\r\n } else {\r\n args.fill = bootstrapColors[args.point.index % 10];\r\n }\r\n};\r\n\r\nconst SAMPLE_CSS = `\r\n .control-fluid {\r\n\t\tpadding: 0px !important;\r\n\t}`;\r\nexport class ErrorBarChart extends SampleBase<{}, {}> {\r\n private chartInstance: ChartComponent;\r\n private checkElement: CheckBoxComponent;\r\n private dropElement: DropDownListComponent;\r\n private modeElement: DropDownListComponent;\r\n private lengthElement: NumericTextBoxComponent;\r\n private widthElement: NumericTextBoxComponent;\r\n private vErrElement: NumericTextBoxComponent;\r\n private hErrElement: NumericTextBoxComponent;\r\n private directionElement: DropDownListComponent;\r\n private change(): void {\r\n this.chartInstance.series[0].errorBar.type = this.dropElement.value as ErrorBarType;\r\n this.chartInstance.series[0].animation.enable = false;\r\n this.chartInstance.refresh();\r\n };\r\n private mode(): void {\r\n this.chartInstance.series[0].errorBar.mode = this.modeElement.value as ErrorBarMode;\r\n this.chartInstance.series[0].animation.enable = false;\r\n this.chartInstance.refresh();\r\n };\r\n private errorBarVisible(): void {\r\n this.chartInstance.series[0].errorBar.visible = this.checkElement.checked;\r\n this.chartInstance.series[0].animation.enable = false;\r\n this.chartInstance.refresh();\r\n }\r\n private errDirection(): void {\r\n this.chartInstance.series[0].errorBar.direction = this.directionElement.value as ErrorBarDirection;\r\n this.chartInstance.series[0].animation.enable = false;\r\n this.chartInstance.refresh();\r\n }\r\n private vError(): void {\r\n this.chartInstance.series[0].errorBar.verticalError = this.vErrElement.value;\r\n this.chartInstance.series[0].animation.enable = false;\r\n this.chartInstance.refresh();\r\n }\r\n private hError(): void {\r\n this.chartInstance.series[0].errorBar.horizontalError = this.hErrElement.value;\r\n this.chartInstance.series[0].animation.enable = false;\r\n this.chartInstance.refresh();\r\n }\r\n private type: { [key: string]: Object }[] = [\r\n { value: 'Fixed' },\r\n { value: 'Percentage' },\r\n { value: 'StandardDeviation' },\r\n { value: 'StandardError' },\r\n { value: 'Custom' }\r\n ];\r\n private emode: { [key: string]: Object }[] = [\r\n { value: 'Vertical' },\r\n { value: 'Horizontal' },\r\n { value: 'Both' }\r\n ];\r\n private directions: { [key: string]: Object }[] = [\r\n { value: 'Both' },\r\n { value: 'Minus' },\r\n { value: 'Plus' }\r\n ];\r\n render() {\r\n return (\r\n <div className='control-pane'>\r\n <style>\r\n {SAMPLE_CSS}\r\n </style>\r\n <div className='control-section row'>\r\n <div className='col-md-8'>\r\n <ChartComponent id='charts' ref={chart => this.chartInstance = chart}\r\n primaryXAxis={{\r\n valueType: 'Category', interval: 1,\r\n majorGridLines: { width: 0 }\r\n }}\r\n chartArea={{ border: { width: 0 } }}\r\n primaryYAxis={{\r\n labelFormat: '{value}%', minimum: 15, maximum: 45,\r\n lineStyle: { width: 0 }\r\n }}\r\n pointRender={pointRender}\r\n load={this.load.bind(this)}\r\n title=\"Sales Distribution of Car by Region\" loaded={this.onChartLoad.bind(this)}\r\n tooltip={{ enable: true }}>\r\n <Inject services={[ScatterSeries, Category, ErrorBar, Tooltip]} />\r\n <SeriesCollectionDirective>\r\n <SeriesDirective dataSource={data1} xName='x' yName='y' type='Scatter' marker={{ height: 10, width: 10 }}\r\n errorBar={{ visible: true, verticalError: 3, horizontalError: 3 }} width={2} name='Sales'>\r\n </SeriesDirective>\r\n </SeriesCollectionDirective>\r\n </ChartComponent>\r\n </div>\r\n <div className='col-md-4 property-section'>\r\n <PropertyPane title='Properties'>\r\n <table id='property' title='Properties' className='property-panel-table' style={{ width: '100%' }}>\r\n <tr style={{ height: '50px' }}>\r\n <td style={{ width: '60%' }}>\r\n <div>Error Bar Type: </div>\r\n </td>\r\n <td style={{ width: '40%' }}>\r\n <div>\r\n <DropDownListComponent width={120} id=\"type\" change={this.change.bind(this)} ref={d => this.dropElement = d} dataSource={this.type} fields={{ text: 'value', value: 'value' }} value=\"Fixed\" />\r\n </div>\r\n </td>\r\n </tr>\r\n <tr style={{ height: '50px' }}>\r\n <td style={{ width: '60%' }}>\r\n <div>Drawing Mode: </div></td>\r\n <td style={{ width: '40%' }}>\r\n <div>\r\n <DropDownListComponent width={120} id=\"modes\" change={this.mode.bind(this)} ref={d => this.modeElement = d} dataSource={this.emode} fields={{ text: 'value', value: 'value' }} value=\"Vertical\" />\r\n </div>\r\n </td>\r\n </tr>\r\n <tr style={{ height: '50px' }}>\r\n <td style={{ width: '60%' }}>\r\n <div>Drawing Direction: </div></td>\r\n <td style={{ width: '40%' }}>\r\n <div>\r\n <DropDownListComponent width={120} id=\"directions\" change={this.errDirection.bind(this)} ref={d => this.directionElement = d} dataSource={this.directions} fields={{ text: 'value', value: 'value' }} value=\"Both\" />\r\n </div>\r\n </td>\r\n </tr>\r\n <tr style={{ height: '50px' }}>\r\n <td style={{ width: '60%' }}>\r\n <div>Vertical Error:</div>\r\n </td>\r\n <td style={{ padding: 10, width: '40%' }}>\r\n <NumericTextBoxComponent width={120} value={3} min={1} max={20} step={1} change={this.vError.bind(this)} ref={d => this.vErrElement = d} />\r\n </td>\r\n </tr>\r\n <tr style={{ height: '50px' }}>\r\n <td style={{ width: '60%' }}>\r\n <div>Horizontal Error:</div>\r\n </td>\r\n <td style={{ padding: 10, width: '40%' }}>\r\n <NumericTextBoxComponent width={120} value={3} min={1} max={20} step={1} change={this.hError.bind(this)} ref={d => this.hErrElement = d} />\r\n </td>\r\n </tr>\r\n </table>\r\n </PropertyPane>\r\n </div>\r\n </div>\r\n </div >\r\n )\r\n }\r\n public onChartLoad(args: ILoadedEventArgs): void {\r\n document.getElementById('charts').setAttribute('title', '');\r\n };\r\n public load(args: ILoadedEventArgs): void {\r\n let selectedTheme: string = location.hash.split('/')[1];\r\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\r\n args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)) as ChartTheme;\r\n };\r\n}\nReactDOM.render(<ErrorBarChart />, document.getElementById('sample'));","app/sample-base.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { RouteComponentProps } from 'react-router-dom';\r\nimport { enableRipple } from '@syncfusion/ej2-base';\r\n\r\nenableRipple((window as any).ripple);\r\nexport class SampleBase<P, S> extends React.PureComponent<RouteComponentProps<any> & P, S>{\r\n public rendereComplete(): void {\r\n /**custom render complete function */\r\n }\r\n componentDidMount(): void {\r\n setTimeout(() => {\r\n this.rendereComplete();\r\n }\r\n );\r\n }\r\n}"}