UNPKG

@syncfusion/ej2-angular-charts

Version:

Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball. for Angular

1 lines 451 kB
{"version":3,"file":"syncfusion-ej2-angular-charts.mjs","sources":["../../src/chart/trendlines.directive.ts","../../src/chart/segments.directive.ts","../../src/chart/series.directive.ts","../../src/chart/striplines.directive.ts","../../src/chart/categories.directive.ts","../../src/chart/multilevellabels.directive.ts","../../src/chart/axes.directive.ts","../../src/chart/rows.directive.ts","../../src/chart/columns.directive.ts","../../src/chart/rangecolorsettings.directive.ts","../../src/chart/annotations.directive.ts","../../src/chart/selecteddataindexes.directive.ts","../../src/chart/indicators.directive.ts","../../src/chart/chart.component.ts","../../src/chart/chart.module.ts","../../src/chart/chart-all.module.ts","../../src/accumulation-chart/series.directive.ts","../../src/accumulation-chart/annotations.directive.ts","../../src/accumulation-chart/accumulationchart.component.ts","../../src/accumulation-chart/accumulationchart.module.ts","../../src/accumulation-chart/accumulationchart-all.module.ts","../../src/range-navigator/series.directive.ts","../../src/range-navigator/rangenavigator.component.ts","../../src/range-navigator/rangenavigator.module.ts","../../src/range-navigator/rangenavigator-all.module.ts","../../src/sparkline/rangebandsettings.directive.ts","../../src/sparkline/sparkline.component.ts","../../src/sparkline/sparkline.module.ts","../../src/sparkline/sparkline-all.module.ts","../../src/smithchart/series.directive.ts","../../src/smithchart/smithchart.component.ts","../../src/smithchart/smithchart.module.ts","../../src/smithchart/smithchart-all.module.ts","../../src/stock-chart/trendlines.directive.ts","../../src/stock-chart/series.directive.ts","../../src/stock-chart/axes.directive.ts","../../src/stock-chart/rows.directive.ts","../../src/stock-chart/annotations.directive.ts","../../src/stock-chart/selecteddataindexes.directive.ts","../../src/stock-chart/periods.directive.ts","../../src/stock-chart/stockevents.directive.ts","../../src/stock-chart/indicators.directive.ts","../../src/stock-chart/stockchart.component.ts","../../src/stock-chart/stockchart.module.ts","../../src/stock-chart/stockchart-all.module.ts","../../src/bullet-chart/ranges.directive.ts","../../src/bullet-chart/bulletchart.component.ts","../../src/bullet-chart/bulletchart.module.ts","../../src/bullet-chart/bulletchart-all.module.ts","../../src/chart3d/series.directive.ts","../../src/chart3d/axes.directive.ts","../../src/chart3d/rows.directive.ts","../../src/chart3d/columns.directive.ts","../../src/chart3d/selecteddataindexes.directive.ts","../../src/chart3d/chart3d.component.ts","../../src/chart3d/chart3d.module.ts","../../src/chart3d/chart3d-all.module.ts","../../src/circularchart3d/series.directive.ts","../../src/circularchart3d/selecteddataindexes.directive.ts","../../src/circularchart3d/circularchart3d.component.ts","../../src/circularchart3d/circularchart3d.module.ts","../../src/circularchart3d/circularchart3d-all.module.ts","../../syncfusion-ej2-angular-charts.ts"],"sourcesContent":["import { Directive, ViewContainerRef, ContentChildren } from '@angular/core';\nimport { ComplexBase, ArrayBase, setValue } from '@syncfusion/ej2-angular-base';\n\n\n\nlet input: string[] = ['accessibility', 'animation', 'backwardForecast', 'dashArray', 'enableTooltip', 'fill', 'forwardForecast', 'intercept', 'legendShape', 'marker', 'name', 'period', 'polynomialOrder', 'type', 'visible', 'width'];\nlet outputs: string[] = [];\n/**\n * Series Directive\n * ```html\n * <e-series-collection>\n * <e-series>\n * <e-trendlines>\n * <e-trendline>\n * </e-trendline>\n * </e-trendlines>\n * </e-series-collection>\n * ```\n */\n@Directive({\n selector: 'e-series>e-trendlines>e-trendline',\n inputs: input,\n outputs: outputs, \n queries: {\n\n }\n})\nexport class TrendlineDirective extends ComplexBase<TrendlineDirective> {\n public directivePropList: any;\n\t\n\n\n /** \n * Defines the type of trendline used in the series. \n * Available types are: \n * * Linear - A straight line that shows the general direction of data. \n * * Exponential - A curve that fits data with exponential growth or decay. \n * * Polynomial - A curve that fits data with a polynomial function. \n * * Power - A curve that represents data with a power function. \n * * Logarithmic - A curve that fits data with a logarithmic scale. \n * * MovingAverage - A trendline that smoothens data using a moving average calculation.\n * @default 'Linear'\n */\n public type: any;\n /** \n * Options to improve accessibility for chart trendline elements.\n */\n public accessibility: any;\n /** \n * Options to customize the animation for trendlines.\n */\n public animation: any;\n /** \n * Defines the period by which the trend is to be backward forecasted.\n * @default 0\n */\n public backwardForecast: any;\n /** \n * Configures the pattern of dashes and gaps in the trendline stroke using the `dashArray` property.\n * @default ''\n */\n public dashArray: any;\n /** \n * Enables or disables the tooltip for the trendline using the `enableTooltip` property. By default, it is set to true.\n * @default true\n */\n public enableTooltip: any;\n /** \n * The fill color for the trendline, which accepts values in hex or rgba as valid CSS color strings.\n * @default ''\n */\n public fill: any;\n /** \n * Defines the period by which the trend must be forward forecasted.\n * @default 0\n */\n public forwardForecast: any;\n /** \n * Specifies the intercept value of the trendline.\n * @default null\n * @aspdefaultvalueignore \n */\n public intercept: any;\n /** \n * The `legendShape` property defines the shape used to represent the trendline in the chart legend.\n * @default 'SeriesType'\n */\n public legendShape: any;\n /** \n * Options for customizing the markers for trendlines, including shape, size, color, and other visual aspects.\n * @deprecated \n */\n public marker: any;\n /** \n * The `name` property is used to assign a descriptive name to the trendline, which will be displayed in the chart as a legend.\n * @default ''\n */\n public name: any;\n /** \n * Defines the period, the price changes over which will be considered to predict the moving average trendline.\n * @default 2\n */\n public period: any;\n /** \n * Defines the polynomial order of the polynomial trendline.\n * @default 2\n */\n public polynomialOrder: any;\n /** \n * The `visible` property controls the display of the trendline. If set to true, the trendline will be rendered on the chart. If set to false, the trendline will be hidden.\n * @default true\n */\n public visible: any;\n /** \n * Defines the width of the trendline.\n * @default 1\n */\n public width: any;\n\n constructor(private viewContainerRef:ViewContainerRef) {\n super();\n setValue('currentInstance', this, this.viewContainerRef);\n this.registerEvents(outputs);\n this.directivePropList = input;\n }\n}\n\n/**\n * Trendline Array Directive\n * @private\n */\n@Directive({\n selector: 'e-series>e-trendlines',\n queries: {\n children: new ContentChildren(TrendlineDirective)\n },\n})\nexport class TrendlinesDirective extends ArrayBase<TrendlinesDirective> {\n constructor() {\n super('trendlines');\n }\n}","import { Directive, ViewContainerRef, ContentChildren } from '@angular/core';\nimport { ComplexBase, ArrayBase, setValue } from '@syncfusion/ej2-angular-base';\n\n\n\nlet input: string[] = ['color', 'dashArray', 'value'];\nlet outputs: string[] = [];\n/**\n * Series Directive\n * ```html\n * <e-series-collection>\n * <e-series>\n * <e-segments>\n * <e-segment>\n * </e-segment>\n * </e-segments>\n * </e-series-collection>\n * ```\n */\n@Directive({\n selector: 'e-series>e-segments>e-segment',\n inputs: input,\n outputs: outputs, \n queries: {\n\n }\n})\nexport class SegmentDirective extends ComplexBase<SegmentDirective> {\n public directivePropList: any;\n\t\n\n\n /** \n * Defines the fill color for the region using a color name, hex code, or rgba value.\n * @default null\n */\n public color: any;\n /** \n * Specifies the dash pattern for the stroke of the series. The string format allows defining various dash and gap lengths.\n * @default '0'\n */\n public dashArray: any;\n /** \n * Defines the starting point of region.\n * @default null\n */\n public value: any;\n\n constructor(private viewContainerRef:ViewContainerRef) {\n super();\n setValue('currentInstance', this, this.viewContainerRef);\n this.registerEvents(outputs);\n this.directivePropList = input;\n }\n}\n\n/**\n * Segment Array Directive\n * @private\n */\n@Directive({\n selector: 'e-series>e-segments',\n queries: {\n children: new ContentChildren(SegmentDirective)\n },\n})\nexport class SegmentsDirective extends ArrayBase<SegmentsDirective> {\n constructor() {\n super('segments');\n }\n}","import { Directive, ViewContainerRef, ContentChildren, ContentChild } from '@angular/core';\nimport { ComplexBase, ArrayBase, setValue } from '@syncfusion/ej2-angular-base';\nimport { Template } from '@syncfusion/ej2-angular-base';\nimport { TrendlinesDirective } from './trendlines.directive';\nimport { SegmentsDirective } from './segments.directive';\n\nlet input: string[] = ['accessibility', 'animation', 'bearFillColor', 'binInterval', 'border', 'boxPlotMode', 'bullFillColor', 'cardinalSplineTension', 'close', 'colorName', 'columnFacet', 'columnSpacing', 'columnWidth', 'columnWidthInPixel', 'connector', 'cornerRadius', 'dashArray', 'dataSource', 'dragSettings', 'drawType', 'emptyPointSettings', 'enableComplexProperty', 'enableSolidCandles', 'enableTooltip', 'errorBar', 'fill', 'groupName', 'high', 'intermediateSumIndexes', 'isClosed', 'legendImageUrl', 'legendShape', 'low', 'marker', 'maxRadius', 'minRadius', 'name', 'negativeFillColor', 'noRisers', 'nonHighlightStyle', 'opacity', 'open', 'paretoOptions', 'pointColorMapping', 'query', 'segmentAxis', 'segments', 'selectionStyle', 'showMean', 'showNearestTooltip', 'showNormalDistribution', 'showOutliers', 'size', 'splineType', 'stackingGroup', 'step', 'sumIndexes', 'summaryFillColor', 'tooltipFormat', 'tooltipMappingName', 'trendlines', 'type', 'unSelectedStyle', 'visible', 'volume', 'width', 'xAxisName', 'xName', 'yAxisName', 'yName', 'zOrder'];\nlet outputs: string[] = [];\n/**\n * Series Directive\n * ```html\n * <e-series-collection>\n * <e-series></e-series>\n * </e-series-collection>\n * ```\n */\n@Directive({\n selector: 'e-series-collection>e-series',\n inputs: input,\n outputs: outputs, \n queries: {\n childTrendlines: new ContentChild(TrendlinesDirective), \n childSegments: new ContentChild(SegmentsDirective)\n }\n})\nexport class SeriesDirective extends ComplexBase<SeriesDirective> {\n public directivePropList: any;\n\t\n public childTrendlines: any;\n public childSegments: any;\n public tags: string[] = ['trendlines', 'segments'];\n /** \n * The type of the series determines the visual representation of the data. \n * Available series types include: \n * * Line - Draws a line series. \n * * Column - Draws a column series. \n * * Area - Draws an area series. \n * * Bar - Draws a bar series. \n * * Histogram - Draws a histogram series. \n * * StackingColumn - Draws a stacking column series. \n * * StackingArea - Draws a stacking area series. \n * * StackingBar - Draws a stacking bar series. \n * * StepLine - Draws a step line series. \n * * StepArea - Draws a step area series. \n * * Scatter - Draws a scatter series. \n * * Spline - Draws a spline series. \n * * StackingColumn100 - Draws a 100% stacked column series. \n * * StackingBar100 - Draws a 100% stacked bar series. \n * * StackingArea100 - Draws a 100% stacked area series. \n * * RangeColumn - Draws a range column series. \n * * Hilo - Draws a Hilo series. \n * * HiloOpenClose - Draws a Hilo Open Close series. \n * * Waterfall - Draws a waterfall series. \n * * RangeArea - Draws a range area series. \n * * SplineRangeArea - Draws a spline range area series. \n * * Bubble - Draws a bubble series. \n * * Candle - Draws a candle series. \n * * Polar - Draws a polar series. \n * * Radar - Draws a radar series. \n * * BoxAndWhisker - Draws a box and whisker series. \n * * Pareto - Draws a Pareto series.\n * @default 'Line'\n */\n public type: any;\n /** \n * Options to improve accessibility for series elements.\n */\n public accessibility: any;\n /** \n * Options for customizing the animation of the series. \n * By default, animation is enabled with a duration of 1000 milliseconds (about 1 second). It can be disabled by setting enable to `false`. \n * The following properties are supported in animation: \n * * enable: If set to true, the series is animated on initial loading. \n * * duration: The duration of the animation in milliseconds. \n * * delay: The delay before the animation starts, in milliseconds.\n */\n public animation: any;\n /** \n * This property is used in financial charts to visualize price movements in stocks. \n * It defines the color of the candle/point when the opening price is less than the closing price.\n * @default null\n */\n public bearFillColor: any;\n /** \n * The `binInterval` property controls the width of each bin and the interval between bins for histogram points.\n * @default null\n * @aspdefaultvalueignore \n */\n public binInterval: any;\n /** \n * Options for customizing the border of the series. \n * > Note that this property is applicable only for `Column` and `Bar` type series.\n */\n public border: any;\n /** \n * Specifies the box plot mode for the box and whisker chart series. \n * The available modes are: \n * Exclusive - Renders the series based on the exclusive mode. \n * Inclusive - Renders the series based on the inclusive mode. \n * Normal - Renders the series based on the normal mode.\n * @default 'Normal'\n */\n public boxPlotMode: any;\n /** \n * This property is used in financial charts to visualize price movements in stocks. \n * It defines the color of the candle/point when the opening price is higher than the closing price.\n * @default null\n */\n public bullFillColor: any;\n /** \n * Specifies the tension parameter for cardinal splines. This affects the curvature of the spline.\n * @default 0.5\n */\n public cardinalSplineTension: any;\n /** \n * The data source field that contains the close value. \n * It is applicable for both financial series and technical indicators.\n * @default ''\n */\n public close: any;\n /** \n * The data source field that contains the color mapping value. \n * It is applicable for range color mapping.\n */\n public colorName: any;\n /** \n * Defines the shape of the data in a column and bar chart. \n * Available shapes are: \n * * Rectangle: Displays the data in a column and bar chart with a rectangular shape. \n * * Cylinder: Displays the data in a column and bar chart with a cylindrical shape.\n * @default 'Rectangle'\n */\n public columnFacet: any;\n /** \n * This property determines the space between columns in a column or bar chart. \n * > Note that it takes a value from 0 to 1.\n * @default 0\n */\n public columnSpacing: any;\n /** \n * The `columnWidth` property can be used to customize the width of the columns in a column series. \n * > Note that if the series type is histogram, the default value is 1; otherwise, it is 0.7.\n * @default null\n * @aspdefaultvalueignore \n * @blazordefaultvalue Double.NaN\n */\n public columnWidth: any;\n /** \n * To render the column series points with a specific column width in pixels.\n * @default null\n * @aspdefaultvalueignore \n * @blazordefaultvalue Double.NaN\n */\n public columnWidthInPixel: any;\n /** \n * Specifies the appearance of the line connecting adjacent points in waterfall charts.\n */\n public connector: any;\n /** \n * The `cornerRadius` property specifies the radius for the corners of the column series points to create a rounded appearance in the chart.\n */\n public cornerRadius: any;\n /** \n * Defines the pattern of dashes and gaps used to stroke the lines in `Line` type series.\n * @default ''\n */\n public dashArray: any;\n /** \n * Specifies the data source for the series. It can be an array of JSON objects, or an instance of DataManager. \n * \n * @default ''\n */\n public dataSource: any;\n /** \n * Customize the drag settings for the series with this property to configure drag behavior in the chart.\n */\n public dragSettings: any;\n /** \n * Specifies the type of series to be drawn in radar or polar charts. \n * The available options are: \n * * 'Line' - Renders a line series. \n * * 'Column' - Renders a column series. \n * * 'Area' - Renders an area series. \n * * 'Scatter' - Renders a scatter series. \n * * 'Spline' - Renders a spline series. \n * * 'StackingColumn' - Renders a stacking column series. \n * * 'StackingArea' - Renders a stacking area series. \n * * 'RangeColumn' - Renders a range column series. \n * * 'SplineArea' - Renders a spline area series.\n * @default 'Line'\n */\n public drawType: any;\n /** \n * Customization options for the appearance of empty points in the series. \n * `null` or `undefined` values are considered empty points.\n */\n public emptyPointSettings: any;\n /** \n * This property is used to improve chart performance through data mapping for the series data source.\n * @default false\n */\n public enableComplexProperty: any;\n /** \n * This property is applicable for the candle series. \n * It enables or disables the visual comparison of the current values with previous values in stock charts.\n * @default false\n */\n public enableSolidCandles: any;\n /** \n * Controls whether the tooltip for the chart series is enabled or disabled. Set to true to display tooltips on hover, or false to hide them.\n * @default true\n */\n public enableTooltip: any;\n /** \n * Options for displaying and customizing error bars for individual points in a series.\n */\n public errorBar: any;\n /** \n * The fill color for the series, which accepts values in hex or rgba as a valid CSS color string. \n * It also represents the color of the signal lines in technical indicators. \n * For technical indicators, the default value is 'blue', and for series, it is null.\n * @default null\n */\n public fill: any;\n /** \n * Defines the name that specifies the chart series are mutually exclusive and can be overlaid. \n * Series in the same group share the same baseline and location on the corresponding axis.\n * @default ''\n */\n public groupName: any;\n /** \n * The data source field that contains the high value. \n * It is applicable for both financial series and technical indicators.\n * @default ''\n */\n public high: any;\n /** \n * Defines the collection of indexes for the intermediate summary columns in waterfall charts.\n * @default []\n * @asptype int[]\n */\n public intermediateSumIndexes: any;\n /** \n * Specifies whether to join the start and end points of a line/area series used in a polar/radar chart to form a closed path.\n * @default true\n */\n public isClosed: any;\n /** \n * The URL for the image to be displayed as a legend icon. \n * > Note that `legendShape` must be set to `Image`.\n * @default ''\n */\n public legendImageUrl: any;\n /** \n * Specifies the shape of the legend icon for each series. \n * Available shapes for legend: \n * * Circle - Renders a circular icon. \n * * Rectangle - Renders a rectangular icon. \n * * Triangle - Renders a triangular icon. \n * * Diamond - Renders a diamond-shaped icon. \n * * Cross - Renders a cross-shaped icon. \n * * HorizontalLine - Renders a horizontal line icon. \n * * VerticalLine - Renders a vertical line icon. \n * * Pentagon - Renders a pentagon-shaped icon. \n * * InvertedTriangle - Renders an inverted triangle-shaped icon. \n * * SeriesType - Uses the default icon shape based on the series type. \n * * Image - Renders a custom image for the legend icon.\n * @default 'SeriesType'\n */\n public legendShape: any;\n /** \n * The data source field that contains the low value. \n * It is applicable for both financial series and technical indicators.\n * @default ''\n */\n public low: any;\n /** \n * Options for displaying and customizing markers for individual points in a series.\n */\n public marker: any;\n /** \n * Specifies the maximum radius for the data points in the series.\n * @default 3\n */\n public maxRadius: any;\n /** \n * Specifies the minimum radius for the data points in the series.\n * @default 1\n */\n public minRadius: any;\n /** \n * The `name` property allows setting a name for the series, which will be displayed in the legend, identifying different series in the chart, especially when multiple series are present.\n * @default ''\n */\n public name: any;\n /** \n * Defines the visual representation of negative changes in waterfall charts.\n * @default '#C64E4A'\n */\n public negativeFillColor: any;\n /** \n * When set to true, the step series will be rendered without the vertical lines (risers) connecting the horizontal steps. \n * > Note this property is only applicable to step series.\n * @default false\n */\n public noRisers: any;\n /** \n * The `nonHighlightStyle` property is used to specify custom CSS styles for the non-highlighted series or points.\n * @default null\n */\n public nonHighlightStyle: any;\n /** \n * Sets the opacity of the series, with a value between 0 and 1 where 0 is fully transparent and 1 is fully opaque.\n * @default 1\n */\n public opacity: any;\n /** \n * The data source field that contains the open value. \n * It is applicable for both financial series and technical indicators.\n * @default ''\n */\n public open: any;\n /** \n * Options for customizing the Pareto line series, including its appearance and behavior in the chart.\n */\n public paretoOptions: any;\n /** \n * The data source field that contains the color value of a point. \n * It is applicable for series.\n * @default ''\n */\n public pointColorMapping: any;\n /** \n * Specifies a query to select data from the data source. This property is applicable only when the data source is an `ej.DataManager`.\n * @default ''\n */\n public query: any;\n /** \n * Defines the axis along which the line series will be split.\n */\n public segmentAxis: any;\n /** \n * Specifies a collection of regions used to differentiate a line series.\n */\n public segments: any;\n /** \n * The `selectionStyle` property is used to specify custom CSS styles for the selected series or points.\n * @default null\n */\n public selectionStyle: any;\n /** \n * If set to true, the mean value for the box and whisker plot will be visible.\n * @default true\n */\n public showMean: any;\n /** \n * Enables or disables the display of tooltips for the nearest data point to the cursor for series.\n * @default true\n */\n public showNearestTooltip: any;\n /** \n * Specifies whether to display the normal distribution curve for the histogram series.\n * @default false\n */\n public showNormalDistribution: any;\n /** \n * Specifies whether to display outliers in the Box and Whisker chart.\n * \n * If set to `true`, outliers will be displayed as individual points beyond the whiskers, representing data points that significantly differ from the rest of the dataset.\n *If set to `false`, outliers will be hidden, and only the box, median, and whiskers will be rendered.\n *\n *Outliers are typically used to identify extreme values in statistical data representation.\n * \n * @default true\n */\n public showOutliers: any;\n /** \n * The data source field that contains the size value for the y-axis.\n * @default ''\n */\n public size: any;\n /** \n * Specifies the type of spline used for rendering. \n * Available options include: \n * * Natural - Renders a natural spline. \n * * Cardinal - Renders a cardinal spline. \n * * Clamped - Renders a clamped spline. \n * * Monotonic - Renders a monotonic spline.\n * @default 'Natural'\n */\n public splineType: any;\n /** \n * This property allows the grouping of series in stacked column and stacked bar charts. \n * Any string value can be assigned to the `stackingGroup` property. \n * Series with the same `stackingGroup` value will be grouped together in the chart.\n * @default ''\n */\n public stackingGroup: any;\n /** \n * The `step` property can be used to change the position of the steps in step line, step area, and step range area chart types. \n * * Left: Steps start from the left side of the 2nd point. \n * * Center: Steps start between the data points. \n * * Right: Steps start from the right side of the 1st point.\n * @default 'Left'\n */\n public step: any;\n /** \n * Defines the collection of indexes for the overall summary columns in waterfall charts.\n * @default []\n * @asptype int[]\n */\n public sumIndexes: any;\n /** \n * Defines the visual representation of summaries in waterfall charts.\n * @default '#4E81BC'\n */\n public summaryFillColor: any;\n /** \n * Use this property to define a custom format for how tooltips are displayed. \n * \n * @default ''\n */\n public tooltipFormat: any;\n /** \n * The data source field that contains the value to be displayed in the tooltip.\n * @default ''\n */\n public tooltipMappingName: any;\n /** \n * Defines the collection of trendlines used to predict the trend.\n */\n public trendlines: any;\n /** \n * The `unSelectedStyle` property is used to specify custom CSS styles for the deselected series or points.\n * @default null\n */\n public unSelectedStyle: any;\n /** \n * If set to `true`, the series will be visible. If set to `false`, the series will be hidden.\n * @default true\n */\n public visible: any;\n /** \n * Defines the data source field that contains the volume value in candle charts. \n * It is applicable for both financial series and technical indicators.\n * @default ''\n */\n public volume: any;\n /** \n * The stroke width for the series, applicable only for `Line` type series. \n * It also represents the stroke width of the signal lines in technical indicators.\n * @default 1\n */\n public width: any;\n /** \n * The name of the horizontal axis associated with the series. It requires `axes` of the chart. \n * It is applicable for series and technical indicators. \n * \n * @default null\n */\n public xAxisName: any;\n /** \n * The data source field that contains the x value. \n * It is applicable to both series and technical indicators.\n * @default ''\n */\n public xName: any;\n /** \n * The name of the vertical axis associated with the series. It requires `axes` of the chart. \n * It is applicable for series and technical indicators. \n * \n * @default null\n */\n public yAxisName: any;\n /** \n * The data source field that contains the y value.\n * @default ''\n */\n public yName: any;\n /** \n * The z-order of the series, which controls the stack order of the series. Higher values are drawn on top of lower values.\n * @default 0\n */\n public zOrder: any;\n @ContentChild('dataLabelTemplate')\n @Template()\n public dataLabel_template: any;\n\n constructor(private viewContainerRef:ViewContainerRef) {\n super();\n setValue('currentInstance', this, this.viewContainerRef);\n this.registerEvents(outputs);\n this.directivePropList = input;\n }\n}\n\n/**\n * Series Array Directive\n * @private\n */\n@Directive({\n selector: 'ej-chart>e-series-collection',\n queries: {\n children: new ContentChildren(SeriesDirective)\n },\n})\nexport class SeriesCollectionDirective extends ArrayBase<SeriesCollectionDirective> {\n constructor() {\n super('series');\n }\n}","import { Directive, ViewContainerRef, ContentChildren } from '@angular/core';\nimport { ComplexBase, ArrayBase, setValue } from '@syncfusion/ej2-angular-base';\n\n\n\nlet input: string[] = ['border', 'color', 'dashArray', 'end', 'horizontalAlignment', 'imageUrl', 'isRepeat', 'isSegmented', 'opacity', 'repeatEvery', 'repeatUntil', 'rotation', 'segmentAxisName', 'segmentEnd', 'segmentStart', 'size', 'sizeType', 'start', 'startFromAxis', 'text', 'textStyle', 'verticalAlignment', 'visible', 'zIndex'];\nlet outputs: string[] = [];\n/**\n * StripLine Directive\n * ```html\n * <e-axis>\n * <e-striplines>\n * <e-stripline></e-stripline>\n * </e-striplines>\n * </e-axis>\n * ```\n */\n@Directive({\n selector: 'e-axis>e-striplines>e-stripline',\n inputs: input,\n outputs: outputs, \n queries: {\n\n }\n})\nexport class StripLineDirective extends ComplexBase<StripLineDirective> {\n public directivePropList: any;\n\t\n\n\n /** \n * The `border` property allows customization of the border for the strip line. \n * It includes options to set the color and width of the border.\n */\n public border: any;\n /** \n * The `color` property specifies the color of the strip line.\n * @default '#808080'\n */\n public color: any;\n /** \n * Specifies the pattern of dashes and gaps used to render the strip line.\n * @default null\n * @aspdefaultvalueignore \n */\n public dashArray: any;\n /** \n * Specifies the ending value of the strip line.\n * @default null\n * @aspdefaultvalueignore \n */\n public end: any;\n /** \n * Defines the position of the strip line text horizontally. \n * Available options are: \n * * Start: Places the strip line text at the start. \n * * Middle: Places the strip line text in the middle. \n * * End: Places the strip line text at the end.\n * @default 'Middle'\n */\n public horizontalAlignment: any;\n /** \n * Specifies the URL of the background image for the strip line. The image will be displayed as the background.\n * @default ''\n */\n public imageUrl: any;\n /** \n * Specifies whether the strip line is repeated at regular intervals along the axis.\n * @default false\n * @aspdefaultvalueignore \n */\n public isRepeat: any;\n /** \n * Specifies whether the strip line is segmented.\n * @default false\n * @aspdefaultvalueignore \n */\n public isSegmented: any;\n /** \n * Specifies the opacity for the strip line.\n * @default 1\n */\n public opacity: any;\n /** \n * Specifies the interval at which the strip line is repeated.\n * @default null\n * @aspdefaultvalueignore \n */\n public repeatEvery: any;\n /** \n * Specifies the maximum value of the interval at which the strip line is repeated.\n * @default null\n * @aspdefaultvalueignore \n */\n public repeatUntil: any;\n /** \n * Defines the degree of rotation applied to the text on the strip line.\n * @default null\n * @aspdefaultvalueignore \n */\n public rotation: any;\n /** \n * The name of the axis where the strip line segment is applied.\n * @default null\n * @aspdefaultvalueignore \n */\n public segmentAxisName: any;\n /** \n * Specifies where a new segment of the strip line on the axis ends.\n * @default null\n * @aspdefaultvalueignore \n */\n public segmentEnd: any;\n /** \n * Specifies where a new segment of the strip line on the axis begins.\n * @default null\n * @aspdefaultvalueignore \n */\n public segmentStart: any;\n /** \n * Specifies the size of the strip line when starting from the origin.\n * @default null\n * @aspdefaultvalueignore \n */\n public size: any;\n /** \n * The `sizeType` property specifies how the size of the strip line is determined.\n * @default Auto\n */\n public sizeType: any;\n /** \n * Specifies the starting value of the strip line.\n * @default null\n * @aspdefaultvalueignore \n */\n public start: any;\n /** \n * If set to true, the strip line is rendered from the axis origin.\n * @default false\n */\n public startFromAxis: any;\n /** \n * Defines the text to be displayed on the strip line.\n * @default ''\n */\n public text: any;\n /** \n * The `textStyle` property enables customization of the text appearance on the strip line.\n */\n public textStyle: any;\n /** \n * Defines the position of the strip line text vertically. \n * Available options are: \n * * Start: Places the strip line text at the start. \n * * Middle: Places the strip line text in the middle. \n * * End: Places the strip line text at the end.\n * @default 'Middle'\n */\n public verticalAlignment: any;\n /** \n * If set to true, the strip line on the axis will render.\n * @default true\n */\n public visible: any;\n /** \n * Specifies the order of the strip line. \n * The options are: \n * * Behind: Places the strip line behind the series elements. \n * * Over: Places the strip line over the series elements.\n * @default 'Behind'\n */\n public zIndex: any;\n\n constructor(private viewContainerRef:ViewContainerRef) {\n super();\n setValue('currentInstance', this, this.viewContainerRef);\n this.registerEvents(outputs);\n this.directivePropList = input;\n }\n}\n\n/**\n * StripLine Array Directive\n * @private\n */\n@Directive({\n selector: 'e-axis>e-striplines',\n queries: {\n children: new ContentChildren(StripLineDirective)\n },\n})\nexport class StripLinesDirective extends ArrayBase<StripLinesDirective> {\n constructor() {\n super('striplines');\n }\n}","import { Directive, ViewContainerRef, ContentChildren } from '@angular/core';\nimport { ComplexBase, ArrayBase, setValue } from '@syncfusion/ej2-angular-base';\n\n\n\nlet input: string[] = ['customAttributes', 'end', 'maximumTextWidth', 'start', 'text', 'type'];\nlet outputs: string[] = [];\n/**\n * MultiLevelLabels Directive\n * ```html\n * <e-multilevellabels>\n * <e-multilevellabel>\n * <e-Categories>\n * <e-Category>\n * </e-Category>\n * </e-Categories>\n * </e-multilevellabel>\n * </e-multilevellabels>\n * ```\n */\n@Directive({\n selector: 'e-multilevellabel>e-categories>e-category',\n inputs: input,\n outputs: outputs, \n queries: {\n\n }\n})\nexport class CategoryDirective extends ComplexBase<CategoryDirective> {\n public directivePropList: any;\n\t\n\n\n /** \n * Specifies the type of border for labels. \n * Available border types: \n * * Rectangle \n * * Without Top Border \n * * Without Top and Bottom Border \n * * Without Border \n * * Brace \n * * Curly Brace\n * @default 'Rectangle'\n * @aspdefaultvalueignore \n * @blazordefaultvalueignore \n */\n public type: any;\n /** \n * Allows adding custom data for multi-level labels.\n * @default null\n */\n public customAttributes: any;\n /** \n * Specifies the end value for the multi-level labels.\n * @default null\n * @aspdefaultvalueignore \n */\n public end: any;\n /** \n * Specifies the maximum width of the text for multi-level labels.\n * @default null\n * @aspdefaultvalueignore \n */\n public maximumTextWidth: any;\n /** \n * Specifies the starting value for the multi-level labels.\n * @default null\n * @aspdefaultvalueignore \n */\n public start: any;\n /** \n * Specifies the text to be displayed for the multi-level labels.\n * @default ''\n */\n public text: any;\n\n constructor(private viewContainerRef:ViewContainerRef) {\n super();\n setValue('currentInstance', this, this.viewContainerRef);\n this.registerEvents(outputs);\n this.directivePropList = input;\n }\n}\n\n/**\n * Category Array Directive\n * @private\n */\n@Directive({\n selector: 'e-multilevellabel>e-categories',\n queries: {\n children: new ContentChildren(CategoryDirective)\n },\n})\nexport class CategoriesDirective extends ArrayBase<CategoriesDirective> {\n constructor() {\n super('categories');\n }\n}","import { Directive, ViewContainerRef, ContentChildren, ContentChild } from '@angular/core';\nimport { ComplexBase, ArrayBase, setValue } from '@syncfusion/ej2-angular-base';\n\nimport { CategoriesDirective } from './categories.directive';\n\nlet input: string[] = ['alignment', 'border', 'categories', 'overflow', 'textStyle'];\nlet outputs: string[] = [];\n/**\n * MultiLevelLabel Directive\n * ```html\n * <e-axis>\n * <e-multilevellabels>\n * <e-multilevellabel></e-multilevellabel>\n * </e-multilevellabels>\n * </e-axis>\n * ```\n */\n@Directive({\n selector: 'e-axis>e-multilevellabels>e-multilevellabel',\n inputs: input,\n outputs: outputs, \n queries: {\n childCategories: new ContentChild(CategoriesDirective)\n }\n})\nexport class MultiLevelLabelDirective extends ComplexBase<MultiLevelLabelDirective> {\n public directivePropList: any;\n\t\n public childCategories: any;\n public tags: string[] = ['categories'];\n /** \n * Defines the position of the multi-level labels. \n * The available options are: \n * * Near: Places the multi-level labels close to the chart elements. \n * * Center: Positions the multi-level labels in the center of the chart elements. \n * * Far: Places the multi-level labels further from the chart elements.\n * @default 'Center'\n */\n public alignment: any;\n /** \n * The `border` property allows customization of the border for multi-level labels. \n * It includes options to set the color, width, and type of the border.\n */\n public border: any;\n /** \n * Configures multi-level categories for multi-level labels.\n */\n public categories: any;\n /** \n * Defines the text overflow behavior for multi-level labels. \n * The available options are: \n * * Trim: Trims the text that overflows for multi-level labels. \n * * Wrap: Wraps the text that overflows for multi-level labels. \n * * None: No text overflow handling for multi-level labels.\n * @default 'Wrap'\n */\n public overflow: any;\n /** \n * Options to customize the multi-level labels.\n */\n public textStyle: any;\n\n constructor(private viewContainerRef:ViewContainerRef) {\n super();\n setValue('currentInstance', this, this.viewContainerRef);\n this.registerEvents(outputs);\n this.directivePropList = input;\n }\n}\n\n/**\n * MultiLevelLabel Array Directive\n * @private\n */\n@Directive({\n selector: 'e-axis>e-multilevellabels',\n queries: {\n children: new ContentChildren(MultiLevelLabelDirective)\n },\n})\nexport class MultiLevelLabelsDirective extends ArrayBase<MultiLevelLabelsDirective> {\n constructor() {\n super('multilevellabels');\n }\n}","import { Directive, ViewContainerRef, ContentChildren, ContentChild } from '@angular/core';\nimport { ComplexBase, ArrayBase, setValue } from '@syncfusion/ej2-angular-base';\n\nimport { StripLinesDirective } from './striplines.directive';\nimport { MultiLevelLabelsDirective } from './multilevellabels.directive';\n\nlet input: string[] = ['border', 'coefficient', 'columnIndex', 'crossesAt', 'crossesInAxis', 'crosshairTooltip', 'description', 'desiredIntervals', 'edgeLabelPlacement', 'enableAutoIntervalOnZooming', 'enableScrollbarOnZooming', 'enableTrim', 'enableWrap', 'interval', 'intervalType', 'isIndexed', 'isInversed', 'labelFormat', 'labelIntersectAction', 'labelPadding', 'labelPlacement', 'labelPosition', 'labelRotation', 'labelStyle', 'lineBreakAlignment', 'lineStyle', 'logBase', 'majorGridLines', 'majorTickLines', 'maximum', 'maximumLabelWidth', 'maximumLabels', 'minimum', 'minorGridLines', 'minorTickLines', 'minorTicksPerInterval', 'multiLevelLabels', 'name', 'opposedPosition', 'placeNextToAxisLine', 'plotOffset', 'plotOffsetBottom', 'plotOffsetLeft', 'plotOffsetRight', 'plotOffsetTop', 'rangePadding', 'rowIndex', 'scrollbarSettings', 'skeleton', 'skeletonType', 'span', 'startAngle', 'startFromZero', 'stripLines', 'tabIndex', 'tickPosition', 'title', 'titlePadding', 'titleRotation', 'titleStyle', 'valueType', 'visible', 'zoomFactor', 'zoomPosition'];\nlet outputs: string[] = [];\n/**\n * Axis Directive\n * ```html\n * <e-axes><e-axis></e-axis></e-axes>\n * ```\n */\n@Directive({\n selector: 'e-axes>e-axis',\n inputs: input,\n outputs: outputs, \n queries: {\n childStripLines: new ContentChild(StripLinesDirective), \n childMultiLevelLabels: new ContentChild(MultiLevelLabelsDirective)\n }\n})\nexport class AxisDirective extends ComplexBase<AxisDirective> {\n public directivePropList: any;\n\t\n public childStripLines: any;\n public childMultiLevelLabels: any;\n public tags: string[] = ['stripLines', 'multiLevelLabels'];\n /** \n * Configures the appearance of the border around multi-level labels, including the color, width, and type of the border.\n */\n public border: any;\n /** \n * The `coefficient` value adjusts the size of the polar radar chart's radius. A higher value increases the radius size, while a smaller value decreases it.\n * @default 100\n */\n public coefficient: any;\n /** \n * Specifies the index of the column where the axis is associated when the chart area is divided into multiple plot areas using `columns`. \n * \n * @default 0\n */\n public columnIndex: any;\n /** \n * Specifies the value at which the axis line intersects with the vertical axis or vice versa.\n * @default null\n */\n public crossesAt: any;\n /** \n * Specifies the name of the axis with which the axis line should intersect.\n * @default null\n */\n public crossesInAxis: any;\n /** \n * Options to customize the appearance and behavior of the crosshair tooltip that appears when hovering over the chart.\n */\n public crosshairTooltip: any;\n /** \n * A description for the axis that provides additional information about its content for screen readers.\n * @default null\n */\n public description: any;\n /** \n * The `desiredIntervals` property allows the axis to calculate intervals that are roughly equal to the specified number, promoting a more readable and evenly spaced axis.\n * @default null\n * @aspdefaultvalueignore \n */\n public desiredIntervals: any;\n /** \n * The `edgeLabelPlacement` property ensures that labels positioned at the edges of the axis do not overlap with the axis boundaries or other chart elements, offering several options to improve chart readability by managing edge labels effectively. \n * Available options are: \n * * None: No action will be performed on edge labels. \n * * Hide: Edge labels will be hidden to prevent overlap. \n * * Shift: Edge labels will be shifted to fit within the axis bounds without overlapping.\n * @default 'Shift'\n */\n public edgeLabelPlacement: any;\n /** \n * If set to true, the axis interval will be calculated automatically based on the zoomed range.\n * @default true\n */\n public enableAutoIntervalOnZooming: any;\n /** \n * If set to true, a scrollbar will appear while zooming to help navigate through the zoomed content.\n * @default true\n */\n public enableScrollbarOnZooming: any;\n /** \n * If set to true, axis labels will be trimmed based on the `maximumLabelWidth`.\n * @default false\n */\n public enableTrim: any;\n /** \n * Specifies whether the axis labels should be wrapped based on the specified `maximumLabelWidth`. \n * When set to `true`, the axis labels will automatically wrap to fit within the available width defined by `maximumLabelWidth`.\n * @default false\n */\n public enableWrap: any;\n /** \n * Specifies the interval for the axis.\n * @default null\n * @aspdefaultvalueignore \n */\n public interval: any;\n /** \n * The `intervalType` property defines how the intervals on a date-time axis are calculated and displayed. \n * Available options are: \n * * Auto: Automatically determines the interval type based on the data and chart settings. \n * * Years: Sets the interval of the axis in years. \n * * Months: Sets the interval of the axis in months. \n * * Days: Sets the interval of the axis in days. \n * * Hours: Sets the interval of the axis in hours. \n * * Minutes: Sets the interval of the axis in minutes.\n * @default 'Auto'\n */\n public intervalType: any;\n /** \n * If set to true, data points are rendered based on their index.\n * @default false\n */\n public isIndexed: any;\n /** \n * If set to true, the axis will be rendered in an inversed manner.\n * @default false\n */\n public isInversed: any;\n /** \n * Used to format the axis label. This property accepts global string formats such as `C`, `n1`, `P`, etc. \n * It also accepts placeholders like `{value}°C`, where `{value}` represents the axis label (e.g., 20°C).\n * @default ''\n */\n public labelFormat: any;\n /** \n * Specifies the action to take when axis labels intersect with each other. \n * The available options are: \n * * None: Shows all labels without any modification. \n * * Hide: Hides the label if it intersects with another label. \n * * Trim: Trims the label text to fit within the available space. \n * * Wrap: Wraps the label text to fit within the available space. \n * * MultipleRows: Displays the label text in multiple rows to avoid intersection. \n * * Rotate45: Rotates the label text by 45 degrees to avoid intersection. \n * * Rotate90: Rotates the label text by 90 degrees to avoid intersection.\n * @default Trim\n */\n public labelIntersectAction: any;\n /** \n * The `labelPadding` property adjusts the distance to ensure a clear space between the axis labels and the axis line.\n * @default 5\n */\n public labelPadding: any;\n /** \n * The `labelPlacement` property controls where the category axis labels are rendered in relation to the axis ticks. \n * Available options are: \n * * BetweenTicks: Renders the label between the axis ticks. \n * * OnTicks: Renders the label directly on the axis ticks.\n * @default 'BetweenTicks'\n */\n public labelPlacement: any;\n /** \n * The `labelPosition` property determines where the axis labels are rendered in relation to the axis line. \n * Available options are: \n * * Inside: Renders the labels inside the axis line. \n * * Outside: Renders the labels outside the axis line.\n * @default 'Outside'\n */\n public labelPosition: any;\n /** \n * The angle to which the axis label gets rotated.\n * @default 0\n */\n public labelRotation: any;\n /** \n * This property allows defining various font settings to control how the labels are displayed on the axis.\n */\n public labelStyle: any;\n /** \n * Determines the alignment of labels when a line break occurs in the axis labels.\n * @default 'Center'\n */\n public lineBreakAlignment: any;\n /** \n * Options for customizing the axis lines.\n */\n public lineStyle: any;\n /** \n * Specifies the base value for a logarithmic axis. \n * > Note that `valueType` must be set to `Logarithmic` for this feature to work.\n * @default 10\n */\n public logBase: any;\n /** \n * Options for customizing major grid lines on the axis.\n */\n public majorGridLines: any;\n /** \n * Options for customizing major tick lines on the axis.\n */\n public majorTickLines: any;\n /** \n * Specifies the maximum value of the axis range, which sets the upper bound of the axis and defines