import * as React from 'react';
import { IgRect } from "igniteui-react-core";
import { HorizontalAlignment } from "igniteui-react-core";
import { UnknownValuePlotting } from "igniteui-react-core";
import { TrendLineType } from "igniteui-react-core";
import { IgrChartSeriesEventArgs } from './igr-chart-series-event-args';
import { DomainChart } from "./DomainChart";
import { IgrDomainChartSeriesPointerEventArgs } from './igr-domain-chart-series-pointer-event-args';
import { IgrMarkerTypeCollection } from './igr-marker-type-collection';
import { ToolTipType } from "./ToolTipType";
import { CrosshairsDisplayMode } from "./CrosshairsDisplayMode";
import { IgrCalloutStyleUpdatingEventArgs } from "./igr-callout-style-updating-event-args";
import { IChartTooltipProps } from "igniteui-react-core";
import { ComputedPlotAreaMarginMode } from './ComputedPlotAreaMarginMode';
import { SeriesHighlightingMode } from './SeriesHighlightingMode';
import { SeriesHighlightingBehavior } from './SeriesHighlightingBehavior';
import { LegendHighlightingMode } from './LegendHighlightingMode';
import { SeriesOutlineMode } from './SeriesOutlineMode';
import { MarkerOutlineMode } from './MarkerOutlineMode';
import { MarkerFillMode } from './MarkerFillMode';
export declare abstract class IgrDomainChart<P extends IIgrDomainChartProps = IIgrDomainChartProps> extends React.Component<P, {}> {
    protected createImplementation(): DomainChart;
    protected _implementation: any;
    readonly i: DomainChart;
    private onImplementationCreated;
    constructor(props: P);
    componentDidMount(): void;
    shouldComponentUpdate(nextProps: any, nextState: any): boolean;
    render(): any;
    /**
    * Sets or gets the template reference to use for tooltips for all the series.
    *
    *
    */
    tooltipTemplate: React.SFC<IChartTooltipProps> | React.Component<IChartTooltipProps>;
    /**
    * Sets or gets the template references to use for tooltips for all the series, in order.
    *
    *
    */
    tooltipTemplates: (React.SFC<IChartTooltipProps> | React.Component<IChartTooltipProps>)[];
    legend: any;
    private _calloutsDataSource;
    calloutsDataSource: any[];
    bindCalloutsData(): void;
    /**
 * Gets or sets the scaling value used to affect the pixel density of the control.
 * A higher scaling ratio will produce crisper visuals at the expense of memory.  Lower values will cause the control
 * to appear blurry.
*/
    pixelScalingRatio: number;
    /**
     * Gets or sets the left margin of chart title
    *
    *  Use `titleLeftMargin` property for the left margin of chart title.
    *
    * ```ts
    * this.chart.titleLeftMargin = 10;
    * ```
    *
    * ```ts
    *  <IgrCategoryChart dataSource={this.state.data}
    *                    titleLeftMargin={20}>
    *  </IgrCategoryChart>
    * ```
    */
    titleLeftMargin: number;
    /**
     * Gets or sets the right margin of chart title
    *
    *  Use `titleLeftMargin` property for the right margin of chart title.
    *
    * ```ts
    * this.chart.titleRightMargin = 10;
    * ```
    *
    * ```ts
    * <IgrCategoryChart
    * 				dataSource={this.state.data}
    *                 titleRightMargin = 10>
    *  </IgrCategoryChart>
    * ```
    */
    titleRightMargin: number;
    /**
     * Gets or sets the top margin of chart title
    *
    *  Use `titleTopMargin` property for the top margin of chart title.
    *
    * ```ts
    * this.chart.titleTopMargin = 10;
    * ```
    *
    * ```ts
    * <IgrCategoryChart dataSource={this.state.data}
    *                titleTopMargin={10} />
    * ```
    */
    titleTopMargin: number;
    /**
     * Gets or sets the bottom margin of chart title
    *
    *  Use `titleBottomMargin` property for the bottom margin of chart title.
    *
    * ```ts
    *  this.chart.titleBottomMargin = 5;
    * ```
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	dataSource={this.categoryData}
    * 	subtitle= "CategoryChart Subtitle"
    * 	subtitleAlignment="Right"
    * 	titleBottomMargin={5}/>
    * ```
    */
    titleBottomMargin: number;
    /**
     * Gets or sets the left margin of chart subtitle
    *
    * Use `subtitleLeftMargin` property for the left margin of chart subtitle.
    *
    * ```ts
    * this.chart.subtitleLeftMargin = 20 ;
    * ```
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	dataSource={this.categoryData}
    * 	subtitle= "CategoryChart Subtitle"
    * 	subtitleLeftMargin= {20}/>
    * ```
    */
    subtitleLeftMargin: number;
    /**
     * Gets or sets the top margin of chart subtitle
    *
    * Use `subtitleTopMargin` property for the top margin of chart subtitle.
    *
    * ```ts
    * this.chart.subtitleTopMargin = 10;
    * ```
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	dataSource={this.categoryData}
    * 	subtitle= "CategoryChart Subtitle"
    * 	subtitleTopMargin= {10}/>
    * ```
    */
    subtitleTopMargin: number;
    /**
     * Gets or sets the right margin of chart subtitle
    *
    * Use `subtitleRightMargin` property for the right margin of chart subtitle.
    *
    * ```ts
    *  this.chart.subtitleRightMargin = 20 ;
    * ```
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	dataSource={this.categoryData}
    * 	subtitle= "CategoryChart Subtitle"
    * 	subtitleAlignment="Right"
    * 	subtitleRightMargin ={20}/>
    * ```
    */
    subtitleRightMargin: number;
    /**
     * Gets or sets the bottom margin of chart subtitle
    *
    * Use `subtitleBottomMargin` property for the bottom margin of chart subtitle.
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	dataSource={this.categoryData}
    * 	subtitle= "CategoryChart Subtitle"
    * 	subtitleBottomMargin= {10}/>
    * ```
    *
    * ```ts
    * this.chart.subtitleBottomMargin = 10 ;
    * ```
    */
    subtitleBottomMargin: number;
    /**
     * Gets or sets color of chart subtitle
    *
    * Use `subtitleTextColor` property to color the subtitle.
    *
    * ```ts
    * this.chart.subtitleTextColor = "#ff0000" ;
    * ```
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	dataSource={this.categoryData}
    * 	subtitle= "CategoryChart Subtitle"
    * 	subtitleTextColor="#ff0000"/>
    * ```
    */
    subtitleTextColor: string;
    /**
     * Gets or sets color of chart title
    *
    *  Use `titleTextColor` property to color the chart title
    *
    * ```ts
    *  this.chart.titleTextColor="red" ;
    * ```
    *
    * ```ts
    * <IgrCategoryChart
    * 		dataSource={this.state.data}
    * 		width="700px"
    * 		height="500px"
    * 		xAxisTitle="Countries"
    * 		titleTextColor="Red" />
    *
    * ```
    */
    titleTextColor: string;
    /**
     * Gets or sets the left margin of the chart content.
    *
    * Use the 'leftMargin' property for the left margin of the chart content.
    *
    * ```ts
    *  this.chart.leftMargin = 20;
    * ```
    *
    * ```ts
    *  <IgrCategoryChart dataSource={this.state.data}
    *                    leftMargin= {20}/>
    * ```
    */
    leftMargin: number;
    /**
     * Gets or sets the top margin of the chart content.
    *
    * Use `topMargin` property for the margin of the chart content.
    *
    * ```ts
    * this.chart.topMargin=20;
    * ```
    *
    * ```ts
    * <IgrCategoryChart dataSource={this.state.data}
    *                topMargin={10} />
    * ```
    */
    topMargin: number;
    /**
     * Gets or sets the right margin of the chart content.
    *
    * Use `rightMargin` property for the right margin of the chart content.
    *
    * ```ts
    *   this.chart.rightMargin = 20 ;
    * ```
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	markerTypes={this.state.markersTypes}
    * 	dataSource={this.categoryData}
    * 	rightMargin= {4}/>
    * ```
    */
    rightMargin: number;
    /**
     * Gets or sets the bottom margin around the chart content.
    *
    * Use the `bottomMargin` property for the bottom margin around the chart content.
    *
    * ```ts
    * this.chart.bottomMargin=20;
    * ```
    *
    * ```ts
    *  <IgrCategoryChart dataSource={this.state.data}
    *                    bottomMargin= 20 />
    * ```
    */
    bottomMargin: number;
    /**
     * Gets or sets the duration used for animating series plots when the data is changing
    *
    * Use the `transitionDuration` property to animating between data values.
    *
    * ```ts
    * this.chart.transitionDuratio= 500;
    * ```
    *
    * ```ts
    * <IgrCategoryChart dataSource={this.state.data}
    *                transitionDuratio={500} />
    * ```
    */
    transitionDuration: number;
    /**
     * Gets or sets the easing function used for animating series plots when the data is changing.
     * This can be set to one of the known values "linear" or "cubic," or it can be set to an easing function which takes a single numeric parameter and returns a number.
    *
    * The 'transitionInEasingFunction' property used for easing function for animating series plots when the chart is loading into view.
    *
    * ```ts
    * this.chart.transitionInEasingFunction=  this.cubicFunc;
    *
    * cubicFunc(time: number) : number
    *   {
    *     return time;
    *   }
    * ```
    *
    * ```ts
    * <IgrCategoryChart dataSource={this.state.data}
    *                transitionInEasingFunction="cubic" />
    * ```
    */
    transitionEasingFunction: (time: number) => number;
    /**
     * Gets or sets CSS font property for the chart subtitle
    *
    * Use `subtitleTextStyle` property for the CSS font of the chart subtitle.
    *
    * ```ts
    * this.chart.subtitleTextStyle= "16pt Verdona";
    * ```
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	dataSource={this.categoryData}
    * 	subtitleTextStyle="16pt Verdona"/>
    * ```
    */
    subtitleTextStyle: string;
    /**
     * Gets or sets CSS font property for the chart title
    *
    * Use `titleTextStyle` property for the CSS font property of the chart title
    *
    * ```ts
    * this.chart.xAxisTitleTextStyle = "24pt Verdona";
    * ```
    *
    * ```ts
    * <IgrCategoryChart dataSource={this.state.data}
    *                 width="700px"
    *                 height="500px"
    *                 xAxisTitle="Countries"
    *                 xAxisTitleTextColor="gray"
    *                 xAxisTitleTextStyle="12pt Verdana"
    *                 xAxisTitleAngle={0}
    *                 yAxisTitle="Trillions of Watt-hours (TWh)"
    *                 yAxisTitleTextStyle="12pt Verdana"
    *                 yAxisTitleTextColor="gray"
    *                 yAxisTitleAngle={90}
    *                 yAxisTitleLeftMargin={5}>
    *  </IgrCategoryChart>
    * ```
    */
    titleTextStyle: string;
    /**
     * Gets or sets a set of property paths that should be included for consideration by the category chart, leaving the remainder excluded. If null, all properties will be considered.
    *
    * The `includedProperties` property used to include the properties for the consideration of the category chart.
    *
    * ```ts
    * this.chart.includedProperties = ["ProductName", "Cost"];
    * ```
    *
    * ```ts
    * 	<IgrCategoryChart
    * 		chartType="Line"
    * 		markerTypes={this.state.markersTypes}
    * 		dataSource={this.categoryData}
    * 		excludedProperties="value" />
    * ```
    */
    includedProperties: string[];
    /**
     * Gets or sets a set of property paths that should be excluded from consideration by the category chart.
    *
    * The `excludedProperties` property used for the property paths that should be excluded from consideration by the category chart.
    *
    * ```ts
    * this.chart.excludedProperties = ["ID", "Discount"];
    * ```
    *
    * ```ts
    * 	<IgrCategoryChart
    * 	chartType="Line"
    * 	markerTypes={this.state.markersTypes}
    * 	dataSource={this.categoryData}
    * 	excludedProperties="value" />
    * ```
    */
    excludedProperties: string[];
    /**
     * Gets or sets the palette of brushes to use for coloring the chart series.
     * The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection
    *
    * Use the `brushes` property to  set the brushes.
    *
    * ```ts
    * this.chart.brushes = ["#ff0000","#00ff00"];
    * ```
    */
    brushes: string[];
    /**
     * Gets or sets the palette of brushes to use for outlines on the chart series.
     * The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection
    *
    *  Use the `outlines` property to sets the palette of brushes to use for outlines on the chart series
    *
    * ```ts
    * <IgrCategoryChart
    * 	chartType="Line"
    * 	outlines= "#ff0000"
    * 	dataSource={this.categoryData}/>
    * ```
    */
    outlines: string[];
    /**
     * Gets or sets whether the chart can be horizontally zoomed through user interactions.
    *
    * Use the `isHorizontalZoomEnabled` property to allow chart horizontally zoomed .
    *
    * ```ts
    *  <IgrCategoryChart dataSource={this.state.data}
    *                    width="700px"
    *                    height="500px"
    *                    xAxisLabelTextStyle="10pt Verdana"
    *                    xAxisLabelTopMargin={5}
    *                    xAxisLabelTextColor="gray"
    *                    yAxisLabelTextStyle="10pt Verdana"
    *                    yAxisLabelRightMargin={5}
    *                    yAxisLabelTextColor="gray"
    * 				   isHorizontalZoomEnabled= true/>
    * ```
    *
    * ```ts
    *  <IgrCategoryChart dataSource={this.state.data}
    *                    IsHorizontalZoomEnabled= true />
    * ```
    *
    * ```ts
    * this.chart.isHorizontalZoomEnabled = true;
    * ```
    */
    isHorizontalZoomEnabled: boolean;
    /**
     * Gets or sets whether the chart can be vertically zoomed through user interactions.
    *
    * Use the `isVerticalZoomEnabled` property to allow chart zoom vertically.
    *
    * ```ts
    *  this.chart.isVerticalZoomEnabled = true;
    * ```
    *
    * ```ts
    *  <IgrCategoryChart dataSource={this.state.data}
    *                   isVerticalZoomEnabled= "true"/>
    * ```
    */
    isVerticalZoomEnabled: boolean;
    /**
     * Gets or sets whether the chart can highlight series through user interactions.
     * This property applies to Category Chart and Financial Chart controls.
    */
    isSeriesHighlightingEnabled: boolean;
    /**
     * Gets or sets the rectangle representing the current scroll and zoom state of the chart.
     * WindowRect is expressed as a Rectangle with coordinates and sizes between 0 and 1.
    *
    * Use `windowRect` property representing the current scroll and zoom state of the chart.
    *
    * ```ts
    * this.chart.windowRect =[0,0,1,1];
    * ```
    *
    * ```ts
    * <IgrCategoryChart dataSource={this.state.data}
    *                WindowRect={1,0,1,1} />
    * ```
    */
    windowRect: IgRect;
    /**
     * Gets a rectangle representing the bounds of the plot area.
    *
    * `viewport` property representing the bounds of the plot area.
    *
    * ```ts
    * let viewport:Rect =  this.chart.viewport;
    * ```
    */
    readonly viewport: IgRect;
    /**
     * Gets or sets text to display above the plot area.
    *
    * Use the `chartTitle` property to display the text above the plot area.
    *
    * ```ts
    *  this.chart.title= "This is a Title";
    * ```
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	dataSource={this.categoryData}
    * 	title= "CategoryChart Subtitle"	/>
    * ```
    */
    chartTitle: string;
    /**
     * Gets or sets text to display below the Title, above the plot area.
    *
    * Use the `subtitle` property to display the text below  and above the plot area.
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	dataSource={this.categoryData}
    * 	subtitle= "CategoryChart Subtitle"/>
    * ```
    *
    * ```ts
    *  this.chart.subtitle ="CategoryChart Subtitle" ;
    * ```
    */
    subtitle: string;
    /**
     * Gets or sets horizontal alignment which determines the title position, relative to the left and right edges of the control.
    *
    * Use the `titleAlignment` property for the horizontal alignment of the title.
    *
    * ```ts
    * this.chart.titleAlignment = HorizontalAlignment.Center;
    * ```
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	dataSource={this.categoryData}
    * 	titleAlignment= "Center"/>
    * ```
    */
    titleAlignment: HorizontalAlignment;
    /**
     * Gets or sets horizontal alignment which determines the subtitle position, relative to the left and right edges of the control.
    *
    * Use the `subtitleAlignment` property to Gets or sets horizontal alignment.
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	dataSource={this.categoryData}
    * 	subtitle= "CategoryChart Subtitle"
    * 	subtitleAlignment="Right"/>
    * ```
    *
    * ```ts
    * this.chart.subtitleAlignment = HorizontalAlignment.Right;
    * ```
    */
    subtitleAlignment: HorizontalAlignment;
    /**
     * Gets or sets the behavior that determines how unknown values will be plotted on the chart.
     * Null and Double.NaN are two examples of unknown values.
    *
    * Use the `unknownValuePlotting` property to determines the behavior that how unknown values will be plotted on the chart.
    *
    * ```ts
    * this.chart.unknownValuePlotting =UnknownValuePlotting.DontPlot;
    * ```
    *
    * ```ts
    * <IgrCategoryChart dataSource={this.state.data}
    *                unknownValuePlotting= "dontPlot" />
    * ```
    */
    unknownValuePlotting: UnknownValuePlotting;
    /**
     * Gets or sets the rendering resolution for all series in this chart.
     * Where n = Resolution, for every n horizontal pixels, combine all items into a single data point.  When Resolution = 0, all data points will be rendered as graphical objects.  Charts with a higher resolution will have faster performance.
    *
    * Use the `resolution` property if the callouts should be display.
    *
    * ```ts
    *   this.chart.resolution = 2 ;
    * ```
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	markerTypes={this.state.markersTypes}
    * 	dataSource={this.categoryData}
    * 	calloutsVisible="true"
    * 	resolution= {2}/>
    * ```
    */
    resolution: number;
    /**
     * Gets or sets the thickness for all series in this chart. Depending on the ChartType, this can be the main brush used, or just the outline.
    *
    * Use the `thickness` property for the thickness of all the series in this chart.
    */
    thickness: number;
    /**
     * Gets or sets the OutlineMode for all series in this chart.
    */
    outlineMode: SeriesOutlineMode;
    /**
     * Gets or sets the MarkerOutlineMode for all series in this chart.
    */
    markerOutlineMode: MarkerOutlineMode;
    /**
     * Gets or sets the MarkerFillMode for all series in this chart.
    */
    markerFillMode: MarkerFillMode;
    /**
     * Gets or sets the MarkerFillOpacity for all series in this chart.
    */
    markerFillOpacity: number;
    private _markerTypes;
    /**
     * Gets or sets the marker shapes used for indicating location of data points in this chart.
     * This property applies only to these chart types: point, line, spline, bubble, and polygon
    */
    markerTypes: IgrMarkerTypeCollection;
    /**
     * Gets or sets the palette of brushes used for rendering fill area of data point markers.
     * This property applies only to these chart types: point, line, spline, bubble, and polygon
    *
    * `markerBrushes` property used for rendering fill area of data point markers.
    *
    * ```ts
    *  this.chart.markerBrushes=[ "#ff0000", "#ffff00", "#00ffff" ];
    * ```
    *
    * ```ts
    * <IgrCategoryChart
    *     chartType="Line"
    *     markerBrushes ="#ffff00"
    *     dataSource={this.categoryData}/>
    * ```
    */
    markerBrushes: string[];
    /**
     * Gets or sets the palette of brushes used for rendering outlines of data point markers.
     * This property applies only to these chart types: point, line, spline, bubble, and polygon
    *
    * `markerOutlines` property used for rendering outlines of data point markers.
    *
    * ```ts
    * this.chart.markerOutlines= ["#ff0000", "#ffff00", "#00ffff"] ;
    * ```
    *
    * ```ts
    * <IgrCategoryChart
    * 	chartType="Line"
    * 	markerOutlines= "#ff0000"
    * 	dataSource={this.categoryData}/>
    * ```
    */
    markerOutlines: string[];
    /**
     * Gets or sets the maximum number of markers displyed in the plot area of the chart.
    *
    * `markerMaxCount` property used to display maximum number of markers in the plot area of the chart.
    *
    * ```ts
    *  this.chart.markerMaxCount = 100 ;
    * ```
    *
    * ```ts
    * <IgrCategoryChart
    * 	chartType="Line"
    * 	markerMaxCount= {2}
    * 	dataSource={this.categoryData}/>
    * ```
    */
    markerMaxCount: number;
    /**
     * Gets or sets whether the series animations should be allowed when a range change has been detected on an axis.
    */
    animateSeriesWhenAxisRangeChanges: boolean;
    /**
     * Gets or sets the palette of brushes to used for coloring trend lines in this chart.
     * The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection
    *
    * Use the `trendLineBrushes` property for coloring trend lines in the chart.
    *
    * ```ts
    * this.chart.trendLineBrushes=["#ff0000", "#ffff00", "#00ffff"]	;
    * ```
    *
    * ```ts
    * <IgrCategoryChart dataSource={this.state.data}
    *                trendLineBrushes="#ffff00" />
    * ```
    */
    trendLineBrushes: string[];
    /**
     * Gets or sets the formula used for calculating trend lines in this chart.
     * This property applies only to these chart types: point, line, spline, and bubble
    *
    * Use the `trendLineType` property for calculating trend lines.
    *
    * ```ts
    * this.chart.trendLineType = TrendLineType.CubicFit;
    * ```
    *
    * ```ts
    * <IgrCategoryChart dataSource={this.state.data}
    *                trendLineType="CubicFit" />
    * ```
    */
    trendLineType: TrendLineType;
    /**
     * Gets or sets the thickness of the trend lines in this chart.
     * This property applies only to these chart types: point, line, spline, and bubble
    *
    * Use the `trendLineThickness` property for the thickness of the trend lines in the chart.
    *
    * ```ts
    * this.chart.trendLineThickness=2;
    * ```
    *
    * ```ts
    * <IgrCategoryChart dataSource={this.state.data}
    *                trendLineThickness={2} />
    * ```
    */
    trendLineThickness: number;
    /**
     * Gets or sets a value indicating whether grid and tick lines are aligned to device pixels.
    *
    * Use `alignsGridLinesToPixels` propert to indicat whether grid and tick lines are aligned to device pixels.
    *
    * ```ts
    *  this.chart.alignsGridLinesToPixels= true;
    * ```
    */
    alignsGridLinesToPixels: boolean;
    /**
     * Margin applied to the Left of the plot area.
    */
    plotAreaMarginLeft: number;
    /**
     * Margin applied to the Top of the plot area.
    */
    plotAreaMarginTop: number;
    /**
     * Margin applied to the right of the plot area.
    */
    plotAreaMarginRight: number;
    /**
     * Margin applied below the plot area.
    */
    plotAreaMarginBottom: number;
    /**
     * Gets or sets the highlighting mode to use for the series in the component, when supported. This takes precedence over the series level IsHightlightingEnabled.
    */
    computedPlotAreaMarginMode: ComputedPlotAreaMarginMode;
    /**
     * Gets or sets the highlighting mode to use for the series in the component, when supported. This takes precedence over the series level IsHightlightingEnabled.
    */
    highlightingMode: SeriesHighlightingMode;
    /**
     * Gets or sets the highlighting Behavior to use for the series in the component, when supported. This takes precedence over the series level IsHightlightingEnabled.
    */
    highlightingBehavior: SeriesHighlightingBehavior;
    /**
     * Gets or sets the highlighting mode to use for the legend linked to the component, when supported.
    */
    legendHighlightingMode: LegendHighlightingMode;
    /**
     * Gets or sets a whether the series viewer should auto expand margins to accomodate the initial horizontal axis labels.
    */
    shouldAutoExpandMarginForInitialLabels: boolean;
    /**
     * Gets or sets the extra amount the series viewer should auto expand margins to accommodate the initial horizontal axis labels.
    */
    autoExpandMarginExtraPadding: number;
    /**
     * Gets or sets the maximum amount the series viewer should auto expand margins to accommodate the initial horizontal axis labels.
    */
    autoExpandMarginMaximumValue: number;
    trendLinePeriod: number;
    /**
     * Gets or sets the style of tooltip to be displayed.
    */
    toolTipType: ToolTipType;
    /**
     * Gets or sets the crosshairs to be displayed.
    */
    crosshairsDisplayMode: CrosshairsDisplayMode;
    /**
     * Gets or sets whether crosshairs will snap to the nearest data point.
    */
    crosshairsSnapToData: boolean;
    /**
     * Gets or sets whether annotations are shown along the axis for crosshair values
    */
    crosshairsAnnotationEnabled: boolean;
    /**
     * Gets or sets whether annotations for the final value of each series is displayed on the axis.
    */
    finalValueAnnotationsVisible: boolean;
    /**
     * Gets or sets if callouts should be displayed.
    */
    calloutsVisible: boolean;
    /**
     * Gets or sets if event annotations should be displayed.
    */
    calloutStyleUpdatingEventEnabled: boolean;
    /**
     * Gets or sets the member path of the X data for the callouts.
    */
    calloutsXMemberPath: string;
    /**
     * Gets or sets the member path of the Y data for the callouts.
    */
    calloutsYMemberPath: string;
    /**
     * Gets or sets the member path of the label data for the callouts.
    */
    calloutsLabelMemberPath: string;
    /**
     * Gets or sets the member path of the content data for the callouts.
    */
    calloutsContentMemberPath: string;
    findByName(name: string): any;
    protected __p: string;
    protected _hasUserValues: Set<string>;
    protected readonly hasUserValues: Set<string>;
    protected __m(propertyName: string): void;
    protected _stylingContainer: any;
    protected _stylingParent: any;
    protected _inStyling: boolean;
    protected _styling(container: any, component: any, parent?: any): void;
    /**
 * Provides a container for this control

*
* `provideContainer` method provide container for the control.
*
* ```ts
*     this.chart.provideContainer("Container");
* ```
*/
    provideContainer(container: any): void;
    /**
     * Destroy this control
    
    *
    * Use the `destroy` property to destroy the chart.
    *
    * ```ts
    * this.chart.destroy();
    * ```
    */
    destroy(): void;
    /**
     * Called when the control has been resized.
    
    *
    * `notifyResized` method Called when the control has been resized.
    *
    * ```ts
    * this.chart.notifyResized();
    * ```
    */
    notifyResized(): void;
    notifyVisualPropertiesChanged(): void;
    /**
     * Forces any pending refresh to the chart to be finished.
    
    *
    * Method `flush` used to Forces any pending deferred work to render on the chart before continuing.
    *
    * ```ts
    * this.chart.flush();
    * ```
    */
    flush(): void;
    /**
     * Hides the active main tooltip, if displayed.
    
    *
    * Use the `hideToolTip` method to hide the active tooltip.
    *
    * ```ts
    * this.chart.hideToolTip();
    * ```
    */
    hideToolTip(): void;
    notifySetItem(source_: any, index: number, oldItem: any, newItem: any): void;
    /**
     * Used to manually notify the chart that the data source has reset or cleared its items.
    
    *
    * Use `notifyClearItems` method to notifies the chart that the items have been cleared from an associated data source.
    *
    * ```ts
    * this.chart.notifyClearItems(this.data);
    * ```
    */
    notifyClearItems(source_: any): void;
    notifyInsertItem(source_: any, index: number, newItem: any): void;
    notifyRemoveItem(source_: any, index: number, oldItem: any): void;
    private _seriesAdded;
    private _seriesAdded_wrapped;
    /**
     * Event raised when a series is initialized and added to this chart.
    *
    * `SeriesAdded` event raised when a series is initialized and added to this chart.
    *
    * ````ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	markerTypes={this.state.markersTypes}
    * 	dataSource={this.categoryData}
    * 	seriesAdded={this.CategoryChart_SeriesAdded}/>
    * ``
    *
    * ```ts
    * CategoryChart_SeriesAdded(sender:any ,aregs:ChartSeriesEventArgs)
    * {
    * }
    * ````
    */
    seriesAdded: (s: IgrDomainChart, e: IgrChartSeriesEventArgs) => void;
    private _seriesRemoved;
    private _seriesRemoved_wrapped;
    /**
     * Event raised when a series is removed from this chart.
    *
    * `SeriesRemoved` event raised when a series is removed from this chart.
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	markerTypes={this.state.markersTypes}
    * 	dataSource={this.categoryData}
    * 	seriesRemoved={this.CategoryChart_seriesRemoved}/>
    * ```
    *
    * ```ts
    *  CategoryChart_seriesRemoved(sender: any , aregs: ChartSeriesEventArgs)
    *   {
    *
    *   }
    * ```
    */
    seriesRemoved: (s: IgrDomainChart, e: IgrChartSeriesEventArgs) => void;
    private _seriesPointerEnter;
    private _seriesPointerEnter_wrapped;
    /**
     * Occurs when the pointer enters a Series.
    *
    * `SeriesPointerEnter` event raised when the pointer enters a Series.
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	markerTypes={this.state.markersTypes}
    * 	dataSource={this.categoryData}
    * 	seriesPointerEnter={this.CategoryChart_seriesPointerDown}/>
    * ```
    *
    * ```ts
    * CategoryChart_seriesPointerEnter(sender: any , aregs: ChartSeriesEventArgs)
    *   {
    *
    *   }
    * ```
    */
    seriesPointerEnter: (s: IgrDomainChart, e: IgrDomainChartSeriesPointerEventArgs) => void;
    private _seriesPointerLeave;
    private _seriesPointerLeave_wrapped;
    /**
     * Occurs when the pointer leaves a Series.
    *
    * `SeriesPointerLeave` event raised when the pointer leaves a Series.
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	markerTypes={this.state.markersTypes}
    * 	dataSource={this.categoryData}
    * 	seriesPointerLeave={this.CategoryChart_seriesPointerLeave}/>
    * ```
    *
    * ```ts
    * CategoryChart_seriesPointerLeave(sender: any , aregs: ChartSeriesEventArgs)
    *   {
    *
    *   }
    * ```
    */
    seriesPointerLeave: (s: IgrDomainChart, e: IgrDomainChartSeriesPointerEventArgs) => void;
    private _seriesPointerMove;
    private _seriesPointerMove_wrapped;
    /**
     * Occurs when the pointer moves over a Series.
    *
    * `SeriesPointerMove` event raised when the pointer moves over a Series.
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	markerTypes={this.state.markersTypes}
    * 	dataSource={this.categoryData}
    * 	seriesPointerMove={this.CategoryChart_seriesPointerMove}/>
    * ```
    *
    * ```ts
    *  CategoryChart_seriesPointerMove(sender: any , aregs: ChartSeriesEventArgs)
    *   {
    *
    *   }
    * ```
    */
    seriesPointerMove: (s: IgrDomainChart, e: IgrDomainChartSeriesPointerEventArgs) => void;
    private _seriesPointerDown;
    private _seriesPointerDown_wrapped;
    /**
     * Occurs when the pointer is pressed down over a Series.
    *
    * `SeriesPointerDown` event raised when the pointer is pressed down over a Series
    *
    * ````ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	markerTypes={this.state.markersTypes}
    * 	dataSource={this.categoryData}
    * 	seriesPointerDown={this.CategoryChart_seriesPointerDown}/>
    * ``
    *
    * ```ts
    * CategoryChart_seriesPointerDown(sender: any , aregs: ChartSeriesEventArgs)
    *   {
    *
    *   }
    * ````
    */
    seriesPointerDown: (s: IgrDomainChart, e: IgrDomainChartSeriesPointerEventArgs) => void;
    private _seriesPointerUp;
    private _seriesPointerUp_wrapped;
    /**
     * Occurs when the pointer is released over a Series.
    *
    * `SeriesPointerUp` event raised when the pointer is released over a Series.
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	markerTypes={this.state.markersTypes}
    * 	dataSource={this.categoryData}
    * 	seriesPointerUp={this.CategoryChart_seriesPointerUp}/>
    * ```
    *
    * ```ts
    *  CategoryChart_seriesPointerUp(sender: any , aregs: ChartSeriesEventArgs)
    *   {
    *
    *   }
    * ```
    */
    seriesPointerUp: (s: IgrDomainChart, e: IgrDomainChartSeriesPointerEventArgs) => void;
    private _calloutStyleUpdating;
    private _calloutStyleUpdating_wrapped;
    /**
     * Occurs when the style of a callout is updated.
    */
    calloutStyleUpdating: (s: IgrDomainChart, e: IgrCalloutStyleUpdatingEventArgs) => void;
}
export interface IIgrDomainChartProps {
    tooltipTemplate?: React.SFC<IChartTooltipProps> | React.Component<IChartTooltipProps>;
    tooltipTemplates?: (React.SFC<IChartTooltipProps> | React.Component<IChartTooltipProps>)[];
    calloutsDataSource?: any[];
    /**
 * Gets or sets the scaling value used to affect the pixel density of the control.
 * A higher scaling ratio will produce crisper visuals at the expense of memory.  Lower values will cause the control
 * to appear blurry.
*/
    pixelScalingRatio?: number | string;
    /**
     * Gets or sets the left margin of chart title
    *
    *  Use `titleLeftMargin` property for the left margin of chart title.
    *
    * ```ts
    * this.chart.titleLeftMargin = 10;
    * ```
    *
    * ```ts
    *  <IgrCategoryChart dataSource={this.state.data}
    *                    titleLeftMargin={20}>
    *  </IgrCategoryChart>
    * ```
    */
    titleLeftMargin?: number | string;
    /**
     * Gets or sets the right margin of chart title
    *
    *  Use `titleLeftMargin` property for the right margin of chart title.
    *
    * ```ts
    * this.chart.titleRightMargin = 10;
    * ```
    *
    * ```ts
    * <IgrCategoryChart
    * 				dataSource={this.state.data}
    *                 titleRightMargin = 10>
    *  </IgrCategoryChart>
    * ```
    */
    titleRightMargin?: number | string;
    /**
     * Gets or sets the top margin of chart title
    *
    *  Use `titleTopMargin` property for the top margin of chart title.
    *
    * ```ts
    * this.chart.titleTopMargin = 10;
    * ```
    *
    * ```ts
    * <IgrCategoryChart dataSource={this.state.data}
    *                titleTopMargin={10} />
    * ```
    */
    titleTopMargin?: number | string;
    /**
     * Gets or sets the bottom margin of chart title
    *
    *  Use `titleBottomMargin` property for the bottom margin of chart title.
    *
    * ```ts
    *  this.chart.titleBottomMargin = 5;
    * ```
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	dataSource={this.categoryData}
    * 	subtitle= "CategoryChart Subtitle"
    * 	subtitleAlignment="Right"
    * 	titleBottomMargin={5}/>
    * ```
    */
    titleBottomMargin?: number | string;
    /**
     * Gets or sets the left margin of chart subtitle
    *
    * Use `subtitleLeftMargin` property for the left margin of chart subtitle.
    *
    * ```ts
    * this.chart.subtitleLeftMargin = 20 ;
    * ```
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	dataSource={this.categoryData}
    * 	subtitle= "CategoryChart Subtitle"
    * 	subtitleLeftMargin= {20}/>
    * ```
    */
    subtitleLeftMargin?: number | string;
    /**
     * Gets or sets the top margin of chart subtitle
    *
    * Use `subtitleTopMargin` property for the top margin of chart subtitle.
    *
    * ```ts
    * this.chart.subtitleTopMargin = 10;
    * ```
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	dataSource={this.categoryData}
    * 	subtitle= "CategoryChart Subtitle"
    * 	subtitleTopMargin= {10}/>
    * ```
    */
    subtitleTopMargin?: number | string;
    /**
     * Gets or sets the right margin of chart subtitle
    *
    * Use `subtitleRightMargin` property for the right margin of chart subtitle.
    *
    * ```ts
    *  this.chart.subtitleRightMargin = 20 ;
    * ```
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	dataSource={this.categoryData}
    * 	subtitle= "CategoryChart Subtitle"
    * 	subtitleAlignment="Right"
    * 	subtitleRightMargin ={20}/>
    * ```
    */
    subtitleRightMargin?: number | string;
    /**
     * Gets or sets the bottom margin of chart subtitle
    *
    * Use `subtitleBottomMargin` property for the bottom margin of chart subtitle.
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	dataSource={this.categoryData}
    * 	subtitle= "CategoryChart Subtitle"
    * 	subtitleBottomMargin= {10}/>
    * ```
    *
    * ```ts
    * this.chart.subtitleBottomMargin = 10 ;
    * ```
    */
    subtitleBottomMargin?: number | string;
    /**
     * Gets or sets color of chart subtitle
    *
    * Use `subtitleTextColor` property to color the subtitle.
    *
    * ```ts
    * this.chart.subtitleTextColor = "#ff0000" ;
    * ```
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	dataSource={this.categoryData}
    * 	subtitle= "CategoryChart Subtitle"
    * 	subtitleTextColor="#ff0000"/>
    * ```
    */
    subtitleTextColor?: string;
    /**
     * Gets or sets color of chart title
    *
    *  Use `titleTextColor` property to color the chart title
    *
    * ```ts
    *  this.chart.titleTextColor="red" ;
    * ```
    *
    * ```ts
    * <IgrCategoryChart
    * 		dataSource={this.state.data}
    * 		width="700px"
    * 		height="500px"
    * 		xAxisTitle="Countries"
    * 		titleTextColor="Red" />
    *
    * ```
    */
    titleTextColor?: string;
    /**
     * Gets or sets the left margin of the chart content.
    *
    * Use the 'leftMargin' property for the left margin of the chart content.
    *
    * ```ts
    *  this.chart.leftMargin = 20;
    * ```
    *
    * ```ts
    *  <IgrCategoryChart dataSource={this.state.data}
    *                    leftMargin= {20}/>
    * ```
    */
    leftMargin?: number | string;
    /**
     * Gets or sets the top margin of the chart content.
    *
    * Use `topMargin` property for the margin of the chart content.
    *
    * ```ts
    * this.chart.topMargin=20;
    * ```
    *
    * ```ts
    * <IgrCategoryChart dataSource={this.state.data}
    *                topMargin={10} />
    * ```
    */
    topMargin?: number | string;
    /**
     * Gets or sets the right margin of the chart content.
    *
    * Use `rightMargin` property for the right margin of the chart content.
    *
    * ```ts
    *   this.chart.rightMargin = 20 ;
    * ```
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	markerTypes={this.state.markersTypes}
    * 	dataSource={this.categoryData}
    * 	rightMargin= {4}/>
    * ```
    */
    rightMargin?: number | string;
    /**
     * Gets or sets the bottom margin around the chart content.
    *
    * Use the `bottomMargin` property for the bottom margin around the chart content.
    *
    * ```ts
    * this.chart.bottomMargin=20;
    * ```
    *
    * ```ts
    *  <IgrCategoryChart dataSource={this.state.data}
    *                    bottomMargin= 20 />
    * ```
    */
    bottomMargin?: number | string;
    /**
     * Gets or sets the duration used for animating series plots when the data is changing
    *
    * Use the `transitionDuration` property to animating between data values.
    *
    * ```ts
    * this.chart.transitionDuratio= 500;
    * ```
    *
    * ```ts
    * <IgrCategoryChart dataSource={this.state.data}
    *                transitionDuratio={500} />
    * ```
    */
    transitionDuration?: number | string;
    /**
     * Gets or sets the easing function used for animating series plots when the data is changing.
     * This can be set to one of the known values "linear" or "cubic," or it can be set to an easing function which takes a single numeric parameter and returns a number.
    *
    * The 'transitionInEasingFunction' property used for easing function for animating series plots when the chart is loading into view.
    *
    * ```ts
    * this.chart.transitionInEasingFunction=  this.cubicFunc;
    *
    * cubicFunc(time: number) : number
    *   {
    *     return time;
    *   }
    * ```
    *
    * ```ts
    * <IgrCategoryChart dataSource={this.state.data}
    *                transitionInEasingFunction="cubic" />
    * ```
    */
    transitionEasingFunction?: (time: number) => number;
    /**
     * Gets or sets CSS font property for the chart subtitle
    *
    * Use `subtitleTextStyle` property for the CSS font of the chart subtitle.
    *
    * ```ts
    * this.chart.subtitleTextStyle= "16pt Verdona";
    * ```
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	dataSource={this.categoryData}
    * 	subtitleTextStyle="16pt Verdona"/>
    * ```
    */
    subtitleTextStyle?: string;
    /**
     * Gets or sets CSS font property for the chart title
    *
    * Use `titleTextStyle` property for the CSS font property of the chart title
    *
    * ```ts
    * this.chart.xAxisTitleTextStyle = "24pt Verdona";
    * ```
    *
    * ```ts
    * <IgrCategoryChart dataSource={this.state.data}
    *                 width="700px"
    *                 height="500px"
    *                 xAxisTitle="Countries"
    *                 xAxisTitleTextColor="gray"
    *                 xAxisTitleTextStyle="12pt Verdana"
    *                 xAxisTitleAngle={0}
    *                 yAxisTitle="Trillions of Watt-hours (TWh)"
    *                 yAxisTitleTextStyle="12pt Verdana"
    *                 yAxisTitleTextColor="gray"
    *                 yAxisTitleAngle={90}
    *                 yAxisTitleLeftMargin={5}>
    *  </IgrCategoryChart>
    * ```
    */
    titleTextStyle?: string;
    /**
     * Gets or sets a set of property paths that should be included for consideration by the category chart, leaving the remainder excluded. If null, all properties will be considered.
    *
    * The `includedProperties` property used to include the properties for the consideration of the category chart.
    *
    * ```ts
    * this.chart.includedProperties = ["ProductName", "Cost"];
    * ```
    *
    * ```ts
    * 	<IgrCategoryChart
    * 		chartType="Line"
    * 		markerTypes={this.state.markersTypes}
    * 		dataSource={this.categoryData}
    * 		excludedProperties="value" />
    * ```
    */
    includedProperties?: string[];
    /**
     * Gets or sets a set of property paths that should be excluded from consideration by the category chart.
    *
    * The `excludedProperties` property used for the property paths that should be excluded from consideration by the category chart.
    *
    * ```ts
    * this.chart.excludedProperties = ["ID", "Discount"];
    * ```
    *
    * ```ts
    * 	<IgrCategoryChart
    * 	chartType="Line"
    * 	markerTypes={this.state.markersTypes}
    * 	dataSource={this.categoryData}
    * 	excludedProperties="value" />
    * ```
    */
    excludedProperties?: string[];
    /**
     * Gets or sets the palette of brushes to use for coloring the chart series.
     * The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection
    *
    * Use the `brushes` property to  set the brushes.
    *
    * ```ts
    * this.chart.brushes = ["#ff0000","#00ff00"];
    * ```
    */
    brushes?: string[] | string;
    /**
     * Gets or sets the palette of brushes to use for outlines on the chart series.
     * The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection
    *
    *  Use the `outlines` property to sets the palette of brushes to use for outlines on the chart series
    *
    * ```ts
    * <IgrCategoryChart
    * 	chartType="Line"
    * 	outlines= "#ff0000"
    * 	dataSource={this.categoryData}/>
    * ```
    */
    outlines?: string[] | string;
    /**
     * Gets or sets whether the chart can be horizontally zoomed through user interactions.
    *
    * Use the `isHorizontalZoomEnabled` property to allow chart horizontally zoomed .
    *
    * ```ts
    *  <IgrCategoryChart dataSource={this.state.data}
    *                    width="700px"
    *                    height="500px"
    *                    xAxisLabelTextStyle="10pt Verdana"
    *                    xAxisLabelTopMargin={5}
    *                    xAxisLabelTextColor="gray"
    *                    yAxisLabelTextStyle="10pt Verdana"
    *                    yAxisLabelRightMargin={5}
    *                    yAxisLabelTextColor="gray"
    * 				   isHorizontalZoomEnabled= true/>
    * ```
    *
    * ```ts
    *  <IgrCategoryChart dataSource={this.state.data}
    *                    IsHorizontalZoomEnabled= true />
    * ```
    *
    * ```ts
    * this.chart.isHorizontalZoomEnabled = true;
    * ```
    */
    isHorizontalZoomEnabled?: boolean | string;
    /**
     * Gets or sets whether the chart can be vertically zoomed through user interactions.
    *
    * Use the `isVerticalZoomEnabled` property to allow chart zoom vertically.
    *
    * ```ts
    *  this.chart.isVerticalZoomEnabled = true;
    * ```
    *
    * ```ts
    *  <IgrCategoryChart dataSource={this.state.data}
    *                   isVerticalZoomEnabled= "true"/>
    * ```
    */
    isVerticalZoomEnabled?: boolean | string;
    /**
     * Gets or sets whether the chart can highlight series through user interactions.
     * This property applies to Category Chart and Financial Chart controls.
    */
    isSeriesHighlightingEnabled?: boolean | string;
    /**
     * Gets or sets the rectangle representing the current scroll and zoom state of the chart.
     * WindowRect is expressed as a Rectangle with coordinates and sizes between 0 and 1.
    *
    * Use `windowRect` property representing the current scroll and zoom state of the chart.
    *
    * ```ts
    * this.chart.windowRect =[0,0,1,1];
    * ```
    *
    * ```ts
    * <IgrCategoryChart dataSource={this.state.data}
    *                WindowRect={1,0,1,1} />
    * ```
    */
    windowRect?: IgRect | string;
    /**
     * Gets or sets text to display above the plot area.
    *
    * Use the `chartTitle` property to display the text above the plot area.
    *
    * ```ts
    *  this.chart.title= "This is a Title";
    * ```
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	dataSource={this.categoryData}
    * 	title= "CategoryChart Subtitle"	/>
    * ```
    */
    chartTitle?: string;
    /**
     * Gets or sets text to display below the Title, above the plot area.
    *
    * Use the `subtitle` property to display the text below  and above the plot area.
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	dataSource={this.categoryData}
    * 	subtitle= "CategoryChart Subtitle"/>
    * ```
    *
    * ```ts
    *  this.chart.subtitle ="CategoryChart Subtitle" ;
    * ```
    */
    subtitle?: string;
    /**
     * Gets or sets horizontal alignment which determines the title position, relative to the left and right edges of the control.
    *
    * Use the `titleAlignment` property for the horizontal alignment of the title.
    *
    * ```ts
    * this.chart.titleAlignment = HorizontalAlignment.Center;
    * ```
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	dataSource={this.categoryData}
    * 	titleAlignment= "Center"/>
    * ```
    */
    titleAlignment?: HorizontalAlignment | string;
    /**
     * Gets or sets horizontal alignment which determines the subtitle position, relative to the left and right edges of the control.
    *
    * Use the `subtitleAlignment` property to Gets or sets horizontal alignment.
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	dataSource={this.categoryData}
    * 	subtitle= "CategoryChart Subtitle"
    * 	subtitleAlignment="Right"/>
    * ```
    *
    * ```ts
    * this.chart.subtitleAlignment = HorizontalAlignment.Right;
    * ```
    */
    subtitleAlignment?: HorizontalAlignment | string;
    /**
     * Gets or sets the behavior that determines how unknown values will be plotted on the chart.
     * Null and Double.NaN are two examples of unknown values.
    *
    * Use the `unknownValuePlotting` property to determines the behavior that how unknown values will be plotted on the chart.
    *
    * ```ts
    * this.chart.unknownValuePlotting =UnknownValuePlotting.DontPlot;
    * ```
    *
    * ```ts
    * <IgrCategoryChart dataSource={this.state.data}
    *                unknownValuePlotting= "dontPlot" />
    * ```
    */
    unknownValuePlotting?: UnknownValuePlotting | string;
    /**
     * Gets or sets the rendering resolution for all series in this chart.
     * Where n = Resolution, for every n horizontal pixels, combine all items into a single data point.  When Resolution = 0, all data points will be rendered as graphical objects.  Charts with a higher resolution will have faster performance.
    *
    * Use the `resolution` property if the callouts should be display.
    *
    * ```ts
    *   this.chart.resolution = 2 ;
    * ```
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	markerTypes={this.state.markersTypes}
    * 	dataSource={this.categoryData}
    * 	calloutsVisible="true"
    * 	resolution= {2}/>
    * ```
    */
    resolution?: number | string;
    /**
     * Gets or sets the thickness for all series in this chart. Depending on the ChartType, this can be the main brush used, or just the outline.
    *
    * Use the `thickness` property for the thickness of all the series in this chart.
    */
    thickness?: number | string;
    /**
     * Gets or sets the OutlineMode for all series in this chart.
    */
    outlineMode?: SeriesOutlineMode | string;
    /**
     * Gets or sets the MarkerOutlineMode for all series in this chart.
    */
    markerOutlineMode?: MarkerOutlineMode | string;
    /**
     * Gets or sets the MarkerFillMode for all series in this chart.
    */
    markerFillMode?: MarkerFillMode | string;
    /**
     * Gets or sets the MarkerFillOpacity for all series in this chart.
    */
    markerFillOpacity?: number | string;
    /**
     * Gets or sets the marker shapes used for indicating location of data points in this chart.
     * This property applies only to these chart types: point, line, spline, bubble, and polygon
    */
    markerTypes?: IgrMarkerTypeCollection | string;
    /**
     * Gets or sets the palette of brushes used for rendering fill area of data point markers.
     * This property applies only to these chart types: point, line, spline, bubble, and polygon
    *
    * `markerBrushes` property used for rendering fill area of data point markers.
    *
    * ```ts
    *  this.chart.markerBrushes=[ "#ff0000", "#ffff00", "#00ffff" ];
    * ```
    *
    * ```ts
    * <IgrCategoryChart
    *     chartType="Line"
    *     markerBrushes ="#ffff00"
    *     dataSource={this.categoryData}/>
    * ```
    */
    markerBrushes?: string[] | string;
    /**
     * Gets or sets the palette of brushes used for rendering outlines of data point markers.
     * This property applies only to these chart types: point, line, spline, bubble, and polygon
    *
    * `markerOutlines` property used for rendering outlines of data point markers.
    *
    * ```ts
    * this.chart.markerOutlines= ["#ff0000", "#ffff00", "#00ffff"] ;
    * ```
    *
    * ```ts
    * <IgrCategoryChart
    * 	chartType="Line"
    * 	markerOutlines= "#ff0000"
    * 	dataSource={this.categoryData}/>
    * ```
    */
    markerOutlines?: string[] | string;
    /**
     * Gets or sets the maximum number of markers displyed in the plot area of the chart.
    *
    * `markerMaxCount` property used to display maximum number of markers in the plot area of the chart.
    *
    * ```ts
    *  this.chart.markerMaxCount = 100 ;
    * ```
    *
    * ```ts
    * <IgrCategoryChart
    * 	chartType="Line"
    * 	markerMaxCount= {2}
    * 	dataSource={this.categoryData}/>
    * ```
    */
    markerMaxCount?: number | string;
    /**
     * Gets or sets whether the series animations should be allowed when a range change has been detected on an axis.
    */
    animateSeriesWhenAxisRangeChanges?: boolean | string;
    /**
     * Gets or sets the palette of brushes to used for coloring trend lines in this chart.
     * The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection
    *
    * Use the `trendLineBrushes` property for coloring trend lines in the chart.
    *
    * ```ts
    * this.chart.trendLineBrushes=["#ff0000", "#ffff00", "#00ffff"]	;
    * ```
    *
    * ```ts
    * <IgrCategoryChart dataSource={this.state.data}
    *                trendLineBrushes="#ffff00" />
    * ```
    */
    trendLineBrushes?: string[] | string;
    /**
     * Gets or sets the formula used for calculating trend lines in this chart.
     * This property applies only to these chart types: point, line, spline, and bubble
    *
    * Use the `trendLineType` property for calculating trend lines.
    *
    * ```ts
    * this.chart.trendLineType = TrendLineType.CubicFit;
    * ```
    *
    * ```ts
    * <IgrCategoryChart dataSource={this.state.data}
    *                trendLineType="CubicFit" />
    * ```
    */
    trendLineType?: TrendLineType | string;
    /**
     * Gets or sets the thickness of the trend lines in this chart.
     * This property applies only to these chart types: point, line, spline, and bubble
    *
    * Use the `trendLineThickness` property for the thickness of the trend lines in the chart.
    *
    * ```ts
    * this.chart.trendLineThickness=2;
    * ```
    *
    * ```ts
    * <IgrCategoryChart dataSource={this.state.data}
    *                trendLineThickness={2} />
    * ```
    */
    trendLineThickness?: number | string;
    /**
     * Gets or sets a value indicating whether grid and tick lines are aligned to device pixels.
    *
    * Use `alignsGridLinesToPixels` propert to indicat whether grid and tick lines are aligned to device pixels.
    *
    * ```ts
    *  this.chart.alignsGridLinesToPixels= true;
    * ```
    */
    alignsGridLinesToPixels?: boolean | string;
    /**
     * Margin applied to the Left of the plot area.
    */
    plotAreaMarginLeft?: number | string;
    /**
     * Margin applied to the Top of the plot area.
    */
    plotAreaMarginTop?: number | string;
    /**
     * Margin applied to the right of the plot area.
    */
    plotAreaMarginRight?: number | string;
    /**
     * Margin applied below the plot area.
    */
    plotAreaMarginBottom?: number | string;
    /**
     * Gets or sets the highlighting mode to use for the series in the component, when supported. This takes precedence over the series level IsHightlightingEnabled.
    */
    computedPlotAreaMarginMode?: ComputedPlotAreaMarginMode | string;
    /**
     * Gets or sets the highlighting mode to use for the series in the component, when supported. This takes precedence over the series level IsHightlightingEnabled.
    */
    highlightingMode?: SeriesHighlightingMode | string;
    /**
     * Gets or sets the highlighting Behavior to use for the series in the component, when supported. This takes precedence over the series level IsHightlightingEnabled.
    */
    highlightingBehavior?: SeriesHighlightingBehavior | string;
    /**
     * Gets or sets the highlighting mode to use for the legend linked to the component, when supported.
    */
    legendHighlightingMode?: LegendHighlightingMode | string;
    /**
     * Gets or sets a whether the series viewer should auto expand margins to accomodate the initial horizontal axis labels.
    */
    shouldAutoExpandMarginForInitialLabels?: boolean | string;
    /**
     * Gets or sets the extra amount the series viewer should auto expand margins to accommodate the initial horizontal axis labels.
    */
    autoExpandMarginExtraPadding?: number | string;
    /**
     * Gets or sets the maximum amount the series viewer should auto expand margins to accommodate the initial horizontal axis labels.
    */
    autoExpandMarginMaximumValue?: number | string;
    trendLinePeriod?: number | string;
    /**
     * Gets or sets the style of tooltip to be displayed.
    */
    toolTipType?: ToolTipType | string;
    /**
     * Gets or sets the crosshairs to be displayed.
    */
    crosshairsDisplayMode?: CrosshairsDisplayMode | string;
    /**
     * Gets or sets whether crosshairs will snap to the nearest data point.
    */
    crosshairsSnapToData?: boolean | string;
    /**
     * Gets or sets whether annotations are shown along the axis for crosshair values
    */
    crosshairsAnnotationEnabled?: boolean | string;
    /**
     * Gets or sets whether annotations for the final value of each series is displayed on the axis.
    */
    finalValueAnnotationsVisible?: boolean | string;
    /**
     * Gets or sets if callouts should be displayed.
    */
    calloutsVisible?: boolean | string;
    /**
     * Gets or sets if event annotations should be displayed.
    */
    calloutStyleUpdatingEventEnabled?: boolean | string;
    /**
     * Gets or sets the member path of the X data for the callouts.
    */
    calloutsXMemberPath?: string;
    /**
     * Gets or sets the member path of the Y data for the callouts.
    */
    calloutsYMemberPath?: string;
    /**
     * Gets or sets the member path of the label data for the callouts.
    */
    calloutsLabelMemberPath?: string;
    /**
     * Gets or sets the member path of the content data for the callouts.
    */
    calloutsContentMemberPath?: string;
    /**
 * Event raised when a series is initialized and added to this chart.
*
* `SeriesAdded` event raised when a series is initialized and added to this chart.
*
* ````ts
*  <IgrCategoryChart
* 	width="100%"
* 	height="100%"
* 	chartType="Line"
* 	markerTypes={this.state.markersTypes}
* 	dataSource={this.categoryData}
* 	seriesAdded={this.CategoryChart_SeriesAdded}/>
* ``
*
* ```ts
* CategoryChart_SeriesAdded(sender:any ,aregs:ChartSeriesEventArgs)
* {
* }
* ````
*/
    seriesAdded?: (s: IgrDomainChart, e: IgrChartSeriesEventArgs) => void;
    /**
     * Event raised when a series is removed from this chart.
    *
    * `SeriesRemoved` event raised when a series is removed from this chart.
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	markerTypes={this.state.markersTypes}
    * 	dataSource={this.categoryData}
    * 	seriesRemoved={this.CategoryChart_seriesRemoved}/>
    * ```
    *
    * ```ts
    *  CategoryChart_seriesRemoved(sender: any , aregs: ChartSeriesEventArgs)
    *   {
    *
    *   }
    * ```
    */
    seriesRemoved?: (s: IgrDomainChart, e: IgrChartSeriesEventArgs) => void;
    /**
     * Occurs when the pointer enters a Series.
    *
    * `SeriesPointerEnter` event raised when the pointer enters a Series.
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	markerTypes={this.state.markersTypes}
    * 	dataSource={this.categoryData}
    * 	seriesPointerEnter={this.CategoryChart_seriesPointerDown}/>
    * ```
    *
    * ```ts
    * CategoryChart_seriesPointerEnter(sender: any , aregs: ChartSeriesEventArgs)
    *   {
    *
    *   }
    * ```
    */
    seriesPointerEnter?: (s: IgrDomainChart, e: IgrDomainChartSeriesPointerEventArgs) => void;
    /**
     * Occurs when the pointer leaves a Series.
    *
    * `SeriesPointerLeave` event raised when the pointer leaves a Series.
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	markerTypes={this.state.markersTypes}
    * 	dataSource={this.categoryData}
    * 	seriesPointerLeave={this.CategoryChart_seriesPointerLeave}/>
    * ```
    *
    * ```ts
    * CategoryChart_seriesPointerLeave(sender: any , aregs: ChartSeriesEventArgs)
    *   {
    *
    *   }
    * ```
    */
    seriesPointerLeave?: (s: IgrDomainChart, e: IgrDomainChartSeriesPointerEventArgs) => void;
    /**
     * Occurs when the pointer moves over a Series.
    *
    * `SeriesPointerMove` event raised when the pointer moves over a Series.
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	markerTypes={this.state.markersTypes}
    * 	dataSource={this.categoryData}
    * 	seriesPointerMove={this.CategoryChart_seriesPointerMove}/>
    * ```
    *
    * ```ts
    *  CategoryChart_seriesPointerMove(sender: any , aregs: ChartSeriesEventArgs)
    *   {
    *
    *   }
    * ```
    */
    seriesPointerMove?: (s: IgrDomainChart, e: IgrDomainChartSeriesPointerEventArgs) => void;
    /**
     * Occurs when the pointer is pressed down over a Series.
    *
    * `SeriesPointerDown` event raised when the pointer is pressed down over a Series
    *
    * ````ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	markerTypes={this.state.markersTypes}
    * 	dataSource={this.categoryData}
    * 	seriesPointerDown={this.CategoryChart_seriesPointerDown}/>
    * ``
    *
    * ```ts
    * CategoryChart_seriesPointerDown(sender: any , aregs: ChartSeriesEventArgs)
    *   {
    *
    *   }
    * ````
    */
    seriesPointerDown?: (s: IgrDomainChart, e: IgrDomainChartSeriesPointerEventArgs) => void;
    /**
     * Occurs when the pointer is released over a Series.
    *
    * `SeriesPointerUp` event raised when the pointer is released over a Series.
    *
    * ```ts
    *  <IgrCategoryChart
    * 	width="100%"
    * 	height="100%"
    * 	chartType="Line"
    * 	markerTypes={this.state.markersTypes}
    * 	dataSource={this.categoryData}
    * 	seriesPointerUp={this.CategoryChart_seriesPointerUp}/>
    * ```
    *
    * ```ts
    *  CategoryChart_seriesPointerUp(sender: any , aregs: ChartSeriesEventArgs)
    *   {
    *
    *   }
    * ```
    */
    seriesPointerUp?: (s: IgrDomainChart, e: IgrDomainChartSeriesPointerEventArgs) => void;
    /**
     * Occurs when the style of a callout is updated.
    */
    calloutStyleUpdating?: (s: IgrDomainChart, e: IgrCalloutStyleUpdatingEventArgs) => void;
}
