smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
819 lines (814 loc) • 64.3 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.chart';
import { __awaiter } from 'tslib';
import * as i0 from '@angular/core';
import { EventEmitter, Directive, Output, Input, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
class BaseElement {
constructor(ref) {
this.onCreate = new EventEmitter();
this.onReady = new EventEmitter();
this.onAttach = new EventEmitter();
this.onDetach = new EventEmitter();
const that = this;
this.nativeElement = ref.nativeElement;
that.nativeElement.onAttached = () => {
that.onAttach.emit(that.nativeElement);
};
that.nativeElement.onDetached = () => {
that.onDetach.emit(that.nativeElement);
};
}
addEventListener(type, listener, options = false) {
this.nativeElement.addEventListener(type, listener, options);
}
removeEventListener(type, listener, options = false) {
this.nativeElement.removeEventListener(type, listener, options);
}
dispatchEvent(event) {
return this.nativeElement.dispatchEvent(event);
}
blur() {
this.nativeElement.blur();
}
click() {
this.nativeElement.click();
}
focus(options) {
this.nativeElement.focus(options);
}
/** @description Sets or gets the license. */
get license() {
return this.nativeElement ? this.nativeElement.license : undefined;
}
set license(value) {
this.nativeElement ? this.nativeElement.license = value : undefined;
}
/** @description Sets or gets the language. Used in conjunction with the property messages. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Determines the theme. Theme defines the look of the element */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
}
BaseElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
BaseElement.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: BaseElement, inputs: { license: "license", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", rightToLeft: "rightToLeft", theme: "theme" }, outputs: { onCreate: "onCreate", onReady: "onReady", onAttach: "onAttach", onDetach: "onDetach" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onCreate: [{
type: Output
}], onReady: [{
type: Output
}], onAttach: [{
type: Output
}], onDetach: [{
type: Output
}], license: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], rightToLeft: [{
type: Input
}], theme: [{
type: Input
}] } });
let Smart;
if (typeof window !== "undefined") {
Smart = window.Smart;
}
class ChartComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/** @description This event is triggered whenever a user clicks on an annotation element within the chart. It allows developers to respond to user interactions with chart annotations, such as displaying additional information, modifying the annotation, or performing custom actions based on the selected annotation.
* @param event. The custom event. */
this.onAnnotationClick = new EventEmitter();
/** @description The event is triggered when the user positions the cursor over a chart annotation, such as a label, marker, or highlighted region, within the chart area. This event can be used to implement interactive features like displaying tooltips, highlighting the annotation, or providing additional contextual information related to the annotation being hovered.
* @param event. The custom event. */
this.onAnnotationMouseenter = new EventEmitter();
/** @description This event is triggered when the user's cursor moves outside the boundaries of a chart annotation. It allows developers to detect when the cursor leaves an annotation area, enabling actions such as hiding tooltips, resetting highlight effects, or performing cleanup tasks related to annotation interactions.
* @param event. The custom event. */
this.onAnnotationMouseleave = new EventEmitter();
/** @description The event is triggered when the user clicks on a series element within the chart. This allows developers to respond to user interactions with individual data points, such as displaying details, highlighting the selected element, or performing custom actions based on the clicked series element.
* @param event. The custom event. */
this.onClick = new EventEmitter();
/** @description This event is triggered when the user's cursor leaves or exits a specific series element within the chart. It can be used to detect when a user stops hovering over a particular data series, allowing you to perform actions such as hiding tooltips, resetting styles, or updating related interface elements.
* @param event. The custom event. */
this.onMouseout = new EventEmitter();
/** @description The event is triggered when the user's cursor hovers over a series element, such as a bar, line, or data point, within the chart. This event typically occurs as soon as the cursor enters the boundary of a specific series element, allowing you to respond to user interactions like highlighting the element, displaying tooltips, or updating related UI components.
* @param event. The custom event. */
this.onMouseover = new EventEmitter();
/** @description This event is triggered after the position of the chart's range selector has changed and the chart has finished rendering. It allows you to perform additional actions or updates in response to user interactions with the range selector, ensuring that any changes occur only after the chart rendering is complete.
* @param event. The custom event. */
this.onRangeSelectionChanged = new EventEmitter();
/** @description The event is triggered whenever the position of the chart's range selector is modified, occurring just before the chart begins its rendering process. This allows you to intercept and handle any changes to the range selector position prior to the chart's visual update.
* @param event. The custom event. */
this.onRangeSelectionChanging = new EventEmitter();
/** @description The event is triggered when the chart rendering process starts, indicating that the chart is about to be displayed but has not yet completed drawing. This event can be used to execute custom code or display a loading indicator at the beginning of the chart rendering sequence.
* @param event. The custom event. */
this.onRefreshBegin = new EventEmitter();
/** @description This event is triggered when the chart has completed rendering all of its visual elements and is fully displayed in the browser. At this point, the chart is ready for user interaction or for further manipulation through scripts.
* @param event. The custom event. */
this.onRefreshEnd = new EventEmitter();
/** @description This event is triggered whenever a series in the chart is shown or hidden, either by a user clicking on the series label in the chart's legend or programmatically via an API call. The event allows you to respond to visibility changes of chart series, enabling custom behaviors or updates when users interact with the legend or when series visibility is modified through code.
* @param event. The custom event. */
this.onToggle = new EventEmitter();
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-chart');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Specifies or retrieves the current animation mode. When the property is set to 'none', all animations are disabled and no animation effects will be applied. For other supported values, the property enables the corresponding animation behavior. */
get animation() {
return this.nativeElement ? this.nativeElement.animation : undefined;
}
set animation(value) {
this.nativeElement ? this.nativeElement.animation = value : undefined;
}
/** @description Specifies the duration of the animation, in milliseconds. Acceptable values range from 0 to 5000 inclusive. If a value outside this range is provided, jqxChart will automatically revert the animation duration to its default setting. */
get animationDuration() {
return this.nativeElement ? this.nativeElement.animationDuration : undefined;
}
set animationDuration(value) {
this.nativeElement ? this.nativeElement.animationDuration = value : undefined;
}
/** @description Specifies the color used for the chart’s background. Accepts any valid CSS color format, such as hexadecimal (e.g., '#DDFFE8'), RGB (e.g., 'rgb(221,255,232)'), or color names (e.g., 'lightgreen'). This property controls the area behind all chart elements, providing visual distinction or branding. */
get backgroundColor() {
return this.nativeElement ? this.nativeElement.backgroundColor : undefined;
}
set backgroundColor(value) {
this.nativeElement ? this.nativeElement.backgroundColor = value : undefined;
}
/** @description Specifies the URL of an image to be used as the chart’s background. For example, setting this property to 'https://www.htmlelements.com/demos/images/carousel-large-1.jpg' will display that image as the backdrop behind the chart elements. This allows you to customize the chart’s appearance with any image of your choice. */
get backgroundImage() {
return this.nativeElement ? this.nativeElement.backgroundImage : undefined;
}
set backgroundImage(value) {
this.nativeElement ? this.nativeElement.backgroundImage = value : undefined;
}
/** @description Defines the color of the chart's border. Accepts any valid CSS color value, such as a hexadecimal code (e.g., "#098700"), RGB, RGBA, HSL, or named color. This property allows you to customize the appearance of the chart's outline to match your application's design. */
get borderLineColor() {
return this.nativeElement ? this.nativeElement.borderLineColor : undefined;
}
set borderLineColor(value) {
this.nativeElement ? this.nativeElement.borderLineColor = value : undefined;
}
/** @description Specifies the thickness, in pixels, of the chart’s border line. A higher value results in a thicker border around the chart area. */
get borderLineWidth() {
return this.nativeElement ? this.nativeElement.borderLineWidth : undefined;
}
set borderLineWidth(value) {
this.nativeElement ? this.nativeElement.borderLineWidth = value : undefined;
}
/** @description Defines the main title displayed at the top of the chart, providing a concise summary or description of the chart's data or purpose. */
get caption() {
return this.nativeElement ? this.nativeElement.caption : undefined;
}
set caption(value) {
this.nativeElement ? this.nativeElement.caption = value : undefined;
}
/** @description Specifies whether plotted elements that extend beyond the axis boundaries should be visually clipped (hidden) rather than drawn outside the plotting area. When enabled, any portion of the elements that overflows the axis limits will not be displayed. */
get clip() {
return this.nativeElement ? this.nativeElement.clip : undefined;
}
set clip(value) {
this.nativeElement ? this.nativeElement.clip = value : undefined;
}
/** @description Defines the color palette used for rendering the chart elements. jqxChart supports 32 built-in color schemes, which can be specified by setting this property to a string value from 'scheme01' to 'scheme32'. Each scheme applies a predefined set of colors to series, data points, and chart backgrounds, allowing you to easily customize the chart's appearance. */
get colorScheme() {
return this.nativeElement ? this.nativeElement.colorScheme : undefined;
}
set colorScheme(value) {
this.nativeElement ? this.nativeElement.colorScheme = value : undefined;
}
/** @description Controls whether the columns in the series are displayed overlapping each other or spaced apart. When enabled, columns from different series will overlap along the category axis. When disabled, columns will be shown side by side without overlapping. */
get columnSeriesOverlap() {
return this.nativeElement ? this.nativeElement.columnSeriesOverlap : undefined;
}
set columnSeriesOverlap(value) {
this.nativeElement ? this.nativeElement.columnSeriesOverlap = value : undefined;
}
/** @description Specifies the color of the crosshairs lines displayed on the chart. This property is only effective when the 'enableCrosshairs' option is set to 'true'. Use a valid CSS color value (e.g., hex, RGB, or color name) to customize the appearance of the crosshairs. */
get crosshairsColor() {
return this.nativeElement ? this.nativeElement.crosshairsColor : undefined;
}
set crosshairsColor(value) {
this.nativeElement ? this.nativeElement.crosshairsColor = value : undefined;
}
/** @description Specifies the dash pattern for the crosshairs lines by accepting a comma-separated sequence of numbers. Each number represents the length (in pixels) of dashes and gaps, alternating between line segments and spaces. For example, a value of "3,3" will create a dashed line with 3 pixels of line followed by 3 pixels of space, repeating along the length of the crosshair. This property is only effective when the "enableCrosshairs" property is set to true. */
get crosshairsDashStyle() {
return this.nativeElement ? this.nativeElement.crosshairsDashStyle : undefined;
}
set crosshairsDashStyle(value) {
this.nativeElement ? this.nativeElement.crosshairsDashStyle = value : undefined;
}
/** @description Sets or retrieves the thickness (in pixels) of the crosshair lines displayed on the chart. This property is only effective when 'enableCrosshairs' is set to 'true'; otherwise, the crosshair lines will not be shown regardless of this value. */
get crosshairsLineWidth() {
return this.nativeElement ? this.nativeElement.crosshairsLineWidth : undefined;
}
set crosshairsLineWidth(value) {
this.nativeElement ? this.nativeElement.crosshairsLineWidth = value : undefined;
}
/** @description Specifies the data set to be used as the source for the chart, determining which values and categories will be displayed. This property should be assigned an array or object containing the chart’s data points. */
get dataSource() {
return this.nativeElement ? this.nativeElement.dataSource : undefined;
}
set dataSource(value) {
this.nativeElement ? this.nativeElement.dataSource = value : undefined;
}
/** @description Specifies the descriptive text that appears on the chart, providing context or additional information to help users understand the chart’s content and purpose. */
get description() {
return this.nativeElement ? this.nativeElement.description : undefined;
}
set description(value) {
this.nativeElement ? this.nativeElement.description = value : undefined;
}
/** @description Determines whether the chart is visible and interactive. Set to true to display and activate the chart; set to false to deactivate it. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description Specifies the custom drawing function for jqxChart. By setting this property, you can override the default rendering behavior of jqxChart and implement your own drawing logic. This allows you to customize how chart elements are displayed according to your specific requirements. */
get draw() {
return this.nativeElement ? this.nativeElement.draw : undefined;
}
set draw(value) {
this.nativeElement ? this.nativeElement.draw = value : undefined;
}
/** @description Allows you to draw custom graphics on the chart canvas before rendering the caption and all other standard chart elements. Use this function to add background visuals, watermarks, or any additional graphics that should appear beneath the main chart components. */
get drawBefore() {
return this.nativeElement ? this.nativeElement.drawBefore : undefined;
}
set drawBefore(value) {
this.nativeElement ? this.nativeElement.drawBefore = value : undefined;
}
/** @description Specifies whether the animation effect for the axis labels (text displayed along the axes) is enabled or disabled. When set to true, the axis labels will animate during rendering or updates; when set to false, the labels will remain static. */
get enableAxisTextAnimation() {
return this.nativeElement ? this.nativeElement.enableAxisTextAnimation : undefined;
}
set enableAxisTextAnimation(value) {
this.nativeElement ? this.nativeElement.enableAxisTextAnimation = value : undefined;
}
/** @description Controls the visibility of crosshair lines on the chart. When enabled, vertical and/or horizontal lines appear as you hover over data points in line and area series, helping to highlight the precise location of your cursor in relation to the data. Disabling this option will hide these crosshair indicators. */
get enableCrosshairs() {
return this.nativeElement ? this.nativeElement.enableCrosshairs : undefined;
}
set enableCrosshairs(value) {
this.nativeElement ? this.nativeElement.enableCrosshairs = value : undefined;
}
/** @description Specifies whether the chart should be rendered using greyscale colors instead of the default color palette. When enabled, all chart elements (such as bars, lines, or areas) will appear in shades of grey rather than in color. */
get greyScale() {
return this.nativeElement ? this.nativeElement.greyScale : undefined;
}
set greyScale(value) {
this.nativeElement ? this.nativeElement.greyScale = value : undefined;
}
/** @description Specifies the arrangement of items within the legend, such as displaying them in a vertical stack, a horizontal row, or a custom configuration. This property determines how legend entries are organized and presented in the chart. */
get legendLayout() {
return this.nativeElement ? this.nativeElement.legendLayout : undefined;
}
set legendLayout(value) {
this.nativeElement ? this.nativeElement.legendLayout = value : undefined;
}
/** @description Sets or retrieves the unlockKey, a unique code or token required to unlock and access the full features of the product. Use this property to assign an unlock key for activation or to obtain the current key that allows authorized access. */
get unlockKey() {
return this.nativeElement ? this.nativeElement.unlockKey : undefined;
}
set unlockKey(value) {
this.nativeElement ? this.nativeElement.unlockKey = value : undefined;
}
/** @description Specifies or retrieves the current locale setting, which determines the language and regional formatting used by the component. This property works together with the messages property to display localized text and content based on the selected locale. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description A comprehensive localization object that includes culture-specific properties necessary for accurately formatting currencies, numbers, dates, and other locale-dependent values according to regional conventions. */
get localization() {
return this.nativeElement ? this.nativeElement.localization : undefined;
}
set localization(value) {
this.nativeElement ? this.nativeElement.localization = value : undefined;
}
/** @description Configures or retrieves an object containing all user-facing text strings displayed by the widget, enabling localization into different languages. This property is used together with the locale option to provide translated text based on the selected language, ensuring the widget’s interface adapts to users’ regional preferences. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Specifies the amount of padding to apply to the left, top, right, and bottom sides of the Chart, creating space between the chart's content and its outer edges. This padding can be used to adjust the position of the chart elements and prevent them from overlapping with the chart's border or surrounding elements. */
get padding() {
return this.nativeElement ? this.nativeElement.padding : undefined;
}
set padding(value) {
this.nativeElement ? this.nativeElement.padding = value : undefined;
}
/** @description Specifies the rendering engine responsible for displaying the chart. If this property is left as an empty string, jqxChart will automatically detect and select the most suitable rendering engine based on the browser’s capabilities (such as SVG, Canvas, or VML). This ensures optimal performance and compatibility across different browsers. */
get renderEngine() {
return this.nativeElement ? this.nativeElement.renderEngine : undefined;
}
set renderEngine(value) {
this.nativeElement ? this.nativeElement.renderEngine = value : undefined;
}
/** @description Gets or sets a boolean value that determines whether the chart's layout is displayed in a mirrored (reversed) orientation. When set to true, all chart elements, such as axes and data series, are rendered as a mirror image of the default layout. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description The 'seriesGroups' property defines the configuration for all data series displayed within the chart. jqxChart supports visualizing multiple series, even of different chart types, by organizing them into groups called "series groups." Each series group is an object within the 'seriesGroups' array, and allows you to configure a set of series that will share common settings, such as the chart type, value axis (Y-axis), and appearance options.Importantly, each series group can have its own independently configured value axis (Y-axis). This flexibility enables you to plot data series with different value ranges or units on the same chart, as each group’s Y-axis can be scaled and labeled differently. Additionally, you can mix different visualization types (such as 'line', 'area', or 'column')—for instance, displaying one group as lines while representing another as columns—providing richer and more informative data presentations.In summary, the 'seriesGroups' property is an array where:- Each element is an object defining a series group.- Each group specifies its chart type and contains its own array of series, along with settings for axes, styling, and more.- Multiple series groups enable the chart to display series of different types and with different Y-axis scales simultaneously.This property is essential for building complex and customizable charts that present heterogeneous data in a clear and visually compelling way. */
get seriesGroups() {
return this.nativeElement ? this.nativeElement.seriesGroups : undefined;
}
set seriesGroups(value) {
this.nativeElement ? this.nativeElement.seriesGroups = value : undefined;
}
/** @description Specifies whether a visible border line should be rendered around the chart area. Set this option to true to display the border, or false to hide it. */
get showBorderLine() {
return this.nativeElement ? this.nativeElement.showBorderLine : undefined;
}
set showBorderLine(value) {
this.nativeElement ? this.nativeElement.showBorderLine = value : undefined;
}
/** @description Specifies whether the chart series legend should be displayed or hidden. When set to true, the legend appears on the chart, providing information about each data series. When set to false, the legend is not shown, resulting in a cleaner chart without series labels. */
get showLegend() {
return this.nativeElement ? this.nativeElement.showLegend : undefined;
}
set showLegend(value) {
this.nativeElement ? this.nativeElement.showLegend = value : undefined;
}
/** @description Controls the visibility of chart tooltips by enabling or disabling them. When enabled, informational tooltips appear when users hover over or interact with chart elements; when disabled, tooltips are hidden and no additional information is displayed on interaction. */
get showToolTips() {
return this.nativeElement ? this.nativeElement.showToolTips : undefined;
}
set showToolTips(value) {
this.nativeElement ? this.nativeElement.showToolTips = value : undefined;
}
/** @description Specifies whether to display a single, combined tooltip that presents information for all data series at the hovered data point, instead of individual tooltips for each series. */
get showToolTipsOnAllSeries() {
return this.nativeElement ? this.nativeElement.showToolTipsOnAllSeries : undefined;
}
set showToolTipsOnAllSeries(value) {
this.nativeElement ? this.nativeElement.showToolTipsOnAllSeries = value : undefined;
}
/** @description Specifies the default set of colors to be applied to various chart elements, including the background, lines, text, and bands. These colors will be automatically used for the corresponding components in the chart unless individually overridden, ensuring a consistent visual theme throughout the chart. */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
/** @description Specifies the amount of space (padding) applied around the chart’s title (caption), controlling the distance between the title text and the edges of its container. This affects the overall appearance and readability of the chart title. */
get titlePadding() {
return this.nativeElement ? this.nativeElement.titlePadding : undefined;
}
set titlePadding(value) {
this.nativeElement ? this.nativeElement.titlePadding = value : undefined;
}
/** @description Specifies the background color of the tooltip element, which appears when a user hovers over or focuses on a target component. This setting determines the visual background behind the tooltip text. */
get toolTipBackground() {
return this.nativeElement ? this.nativeElement.toolTipBackground : undefined;
}
set toolTipBackground(value) {
this.nativeElement ? this.nativeElement.toolTipBackground = value : undefined;
}
/** @description Specifies the duration, in milliseconds, to wait before hiding the tooltip after a user interaction (such as mouseleave or blur) occurs. This delay allows the tooltip to remain visible for a short period before disappearing, improving the user experience. */
get toolTipFormatFunction() {
return this.nativeElement ? this.nativeElement.toolTipFormatFunction : undefined;
}
set toolTipFormatFunction(value) {
this.nativeElement ? this.nativeElement.toolTipFormatFunction = value : undefined;
}
/** @description Specifies the color of the lines (borders or dividers) displayed within the tooltip, such as axis markers or grid lines, enhancing tooltip visibility and aesthetics. Accepts any valid CSS color value (e.g., hexadecimal, RGB, or color name). */
get toolTipHideDelay() {
return this.nativeElement ? this.nativeElement.toolTipHideDelay : undefined;
}
set toolTipHideDelay(value) {
this.nativeElement ? this.nativeElement.toolTipHideDelay = value : undefined;
}
/** @description Specifies the delay, in milliseconds, before a tooltip appears after a triggering event (such as mouse hover or focus). Acceptable values range from 0 to 10,000 milliseconds (ms), where 0 shows the tooltip immediately and 10,000 sets a maximum delay of 10 seconds. */
get toolTipLineColor() {
return this.nativeElement ? this.nativeElement.toolTipLineColor : undefined;
}
set toolTipLineColor(value) {
this.nativeElement ? this.nativeElement.toolTipLineColor = value : undefined;
}
/** @description An object containing configuration settings for the chart's y-axis (also known as the value axis). This includes options for labels, scaling, grid lines, tick marks, axis titles, formatting, and other properties that control the appearance and behavior of the y-axis. */
get toolTipShowDelay() {
return this.nativeElement ? this.nativeElement.toolTipShowDelay : undefined;
}
set toolTipShowDelay(value) {
this.nativeElement ? this.nativeElement.toolTipShowDelay = value : undefined;
}
/** @description Configures the x-axis properties of the chart, including its scale, labels, formatting, and appearance. This determines how data is displayed horizontally on the chart. */
get valueAxis() {
return this.nativeElement ? this.nativeElement.valueAxis : undefined;
}
set valueAxis(value) {
this.nativeElement ? this.nativeElement.valueAxis = value : undefined;
}
/** @description undefined */
get xAxis() {
return this.nativeElement ? this.nativeElement.xAxis : undefined;
}
set xAxis(value) {
this.nativeElement ? this.nativeElement.xAxis = value : undefined;
}
/** @description Enhances the application's color scheme functionality by allowing you to add a new color scheme. If a color scheme with the specified name already exists, this method updates its color values instead of creating a duplicate. This ensures seamless management and updating of color schemes within the application.
* @param {string} schemeName. The name of the custom color scheme.
* @param {any[]} colorsArray. An array of color values.
*/
addColorScheme(schemeName, colorsArray) {
if (this.nativeElement.isRendered) {
this.nativeElement.addColorScheme(schemeName, colorsArray);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.addColorScheme(schemeName, colorsArray);
});
}
}
/** @description Returns the list of colors associated with the specified color scheme name. If the specified scheme does not exist, the method returns undefined.
* @param {string} schemeName. The name of the color scheme.
* @returns {any[]}
*/
getColorScheme(schemeName) {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getColorScheme(schemeName);
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
getColorSchemeSync(schemeName) {
if (this.nativeElement.isRendered) {
return this.nativeElement.getColorScheme(schemeName);
}
return null;
}
/** @description Retrieves the on-screen (pixel) coordinates where a specific data point element is rendered within the visualization. This allows you to determine the exact position of the data point as displayed to the user.
* @param {number} groupIndex. Series group index.
* @param {number} serieIndex. Series index.
* @param {number} itemIndex. Item (data point) index.
* @returns {{ x: number, y: number, width: number, height: number, center: number, centerOffset: number, innerRadius: number, outerRadius: number, selectedRadiusChange: number, fromAngle: number, toAngle: number, radius: number }}
*/
getItemCoord(groupIndex, serieIndex, itemIndex) {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getItemCoord(groupIndex, serieIndex, itemIndex);
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
getItemCoordSync(groupIndex, serieIndex, itemIndex) {
if (this.nativeElement.isRendered) {
return this.nativeElement.getItemCoord(groupIndex, serieIndex, itemIndex);
}
return null;
}
/** @description Retrieves the total count of items that have been rendered within a specified series. This includes only those items currently visible or present in the rendered output for the given series.
* @param {number} groupIndex. Series group index.
* @param {number} serieIndex. Series index.
* @returns {number}
*/
getItemsCount(groupIndex, serieIndex) {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getItemsCount(groupIndex, serieIndex);
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
getItemsCountSync(groupIndex, serieIndex) {
if (this.nativeElement.isRendered) {
return this.nativeElement.getItemsCount(groupIndex, serieIndex);
}
return null;
}
/** @description Retrieves the computed coordinates (positions) and corresponding values of the labels displayed along the valueAxis after rendering. This includes the exact pixel positions and the label values as they appear on the axis within the rendered chart, allowing for precise placement and manipulation of these labels in the UI.
* @param {number} groupIndex. Series group index.
* @returns {any}
*/
getValueAxisLabels(groupIndex) {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getValueAxisLabels(groupIndex);
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
getValueAxisLabelsSync(groupIndex) {
if (this.nativeElement.isRendered) {
return this.nativeElement.getValueAxisLabels(groupIndex);
}
return null;
}
/** @description Retrieves the pixel coordinates and dimensions (as a rectangle) of the value axis associated with a specified series group after rendering. This includes the axis's position (x, y) and size (width, height) within the chart area, enabling precise alignment, customization, or interaction with the value axis for the targeted series group.
* @param {number} groupIndex. Series group index.
* @returns {DOMRect}
*/
getValueAxisRect(groupIndex) {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getValueAxisRect(groupIndex);
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
getValueAxisRectSync(groupIndex) {
if (this.nativeElement.isRendered) {
return this.nativeElement.getValueAxisRect(groupIndex);
}
return null;
}
/** @description Retrieves the current value of the vertical axis (valueAxis), which represents the data values plotted along the y-axis of the chart.
* @param {number} offset. Vertical offset.
* @param {number} groupIndex. Series group index.
* @returns {any}
*/
getValueAxisValue(offset, groupIndex) {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getValueAxisValue(offset, groupIndex);
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
getValueAxisValueSync(offset, groupIndex) {
if (this.nativeElement.isRendered) {
return this.nativeElement.getValueAxisValue(offset, groupIndex);
}
return null;
}
/** @description Retrieves the calculated screen coordinates and corresponding values for each label displayed on the xAxis after rendering. This includes both the label text/value and its precise position within the rendered chart, enabling advanced positioning or custom interactions with the xAxis labels.
* @param {number} groupIndex. Series group index.
* @returns {any}
*/
getXAxisLabels(groupIndex) {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getXAxisLabels(groupIndex);
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
getXAxisLabelsSync(groupIndex) {
if (this.nativeElement.isRendered) {
return this.nativeElement.getXAxisLabels(groupIndex);
}
return null;
}
/** @description Retrieves the rendered bounding rectangle coordinates (position and dimensions) of the x-axis associated with a specified series group. This includes properties such as top, left, width, and height, allowing precise placement and measurement of the x-axis within the chart layout.
* @param {number} groupIndex. Series group index.
* @returns {DOMRect}
*/
getXAxisRect(groupIndex) {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getXAxisRect(groupIndex);
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
getXAxisRectSync(groupIndex) {
if (this.nativeElement.isRendered) {
return this.nativeElement.getXAxisRect(groupIndex);
}
return null;
}
/** @description Retrieves the current value or position of the xAxis (horizontal axis), representing the horizontal coordinate in the relevant context (such as a chart, graph, or UI component). This value typically corresponds to the data point's horizontal placement or the current state of the axis.
* @param {number} offset. Horizontal offset.
* @param {number} groupIndex. Series group index.
* @returns {any}
*/
getXAxisValue(offset, groupIndex) {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getXAxisValue(offset, groupIndex);
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
getXAxisValueSync(offset, groupIndex) {
if (this.nativeElement.isRendered) {
return this.nativeElement.getXAxisValue(offset, groupIndex);
}
return null;
}
/** @description Programmatically hides a chart series from view. This function produces the same effect as if the user manually unchecked the corresponding series in the chart's legend, making the series invisible on the chart without deleting its data.
* @param {number} groupIndex. Series group index.
* @param {number} serieIndex. Series index.
* @param {number} itemIndex?. Item (data point) index. Applicable to pie and donut series only.
*/
hideSerie(groupIndex, serieIndex, itemIndex) {
if (this.nativeElement.isRendered) {
this.nativeElement.hideSerie(groupIndex, serieIndex, itemIndex);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.hideSerie(groupIndex, serieIndex, itemIndex);
});
}
}
/** @description Hides the currently displayed tooltip, if one is visible, by removing it from view and ensuring it is no longer accessible to the user.
* @param {number} hideDelay?. Hide delay.
*/
hideToolTip(hideDelay) {
if (this.nativeElement.isRendered) {
this.nativeElement.hideToolTip(hideDelay);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.hideToolTip(hideDelay);
});
}
}
/** @description Generates a printer-friendly version of the current chart and sends it to the print dialog, allowing the user to print a physical copy or save it as a PDF.
*/
print() {
if (this.nativeElement.isRendered) {
this.nativeElement.print();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.print();
});
}
}
/** @description Automatically updates and redraws the chart element to reflect the latest changes made to its properties or data, ensuring the displayed information is current and accurate.
*/
refresh() {
if (this.nativeElement.isRendered) {
this.nativeElement.refresh();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.refresh();
});
}
}
/** @description Removes a specified color scheme from the system. If the color scheme with the given identifier does not exist, this method performs no action and does not produce an error.
* @param {string} schemeName. The name of the custom color scheme.
*/
removeColorScheme(schemeName) {
if (this.nativeElement.isRendered) {
this.nativeElement.removeColorScheme(schemeName);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.removeColorScheme(schemeName);
});
}
}
/** @description Exports the current chart as a JPEG image file, capturing all visible chart elements and data in the image for easy sharing or saving.
* @param {string} fileName?. File name.
*/
saveAsJPEG(fileName) {
if (this.nativeElement.isRendered) {
this.nativeElement.saveAsJPEG(fileName);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.saveAsJPEG(fileName);
});
}
}
/** @description Exports the current chart, including all visual elements and data, as a PNG image file. This allows users to save or download a snapshot of the chart in a widely supported image format for sharing, reporting, or offline use.
* @param {string} fileName?. File name.
*/
saveAsPNG(fileName) {
if (this.nativeElement.isRendered) {
this.nativeElement.saveAsPNG(fileName);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.saveAsPNG(fileName);
});
}
}
/** @description Generates and exports the current chart content as a PDF file, preserving the chart’s layout, styles, and data for easy sharing or printing.
* @param {string} fileName?. File name.
* @param {string} pageOrientation?. PDF page orientation. <strong>Possible values:</strong> 'portrait' (default), 'landscape'.
*/
saveAsPDF(fileName, pageOrientation) {
if (this.nativeElement.isRendered) {
this.nativeElement.saveAsPDF(fileName, pageOrientation);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.saveAsPDF(fileName, pageOrientation);
});
}
}
/** @description Reveals a previously hidden chart series, making it visible on the chart. Calling this function programmatically has the same effect as a user manually selecting (checking) the corresponding legend item to display the series.
* @param {number} groupIndex. Series group index.
* @param {number} serieIndex. Series index.
* @param {number} itemIndex?. Item (data point) index. Applicable to pie and donut series only.
*/
showSerie(groupIndex, serieIndex, itemIndex) {
if (this.nativeElement.isRendered) {