igniteui-react-charts
Version:
Ignite UI React charting components for building rich data visualizations using TypeScript APIs.
658 lines (655 loc) • 23.6 kB
TypeScript
import * as React from 'react';
import { IgrAxis } from './igr-axis';
import { IgrSeries } from './igr-series';
import { GridMode } from './GridMode';
import { IgrSeriesViewer, IIgrSeriesViewerProps } from './igr-series-viewer';
import { XamDataChart } from './XamDataChart';
import { IgrSeriesCollection } from './igr-series-collection';
import { IgrAxisCollection } from './igr-axis-collection';
import { ComputedPlotAreaMarginMode } from './ComputedPlotAreaMarginMode';
import { AutoMarginsAndAngleUpdateMode } from './AutoMarginsAndAngleUpdateMode';
import { SeriesPlotAreaMarginHorizontalMode } from './SeriesPlotAreaMarginHorizontalMode';
import { SeriesPlotAreaMarginVerticalMode } from './SeriesPlotAreaMarginVerticalMode';
/**
* Represents a chart area containing axes, series, an optional legend and other hosted content.
*/
export declare class IgrDataChart extends IgrSeriesViewer<IIgrDataChartProps> {
contentAxes: IgrAxis[];
contentSeries: IgrSeries[];
private _height;
private _width;
set height(value: string);
get height(): string;
/**
* Gets or sets the legend used for the current chart.
*/
get legend(): any;
set legend(v: any);
private _updateContentChildren;
private _getMainRef;
private _elRef;
render(): React.DetailedReactHTMLElement<{
className: string;
ref: (ref: any) => void;
children: any[];
}, any>;
protected _tooltipRef(t: any): void;
componentDidMount(): void;
set width(value: string);
get width(): string;
/**
* The series actually present in the chart. Do not directly modify this array.
* This array's contents can be modified by causing React to reproject the child content.
* Or adding and removing series from the manual series collection on the series property.
*/
actualSeries: IgrSeries[];
/**
* The axes actually present in the chart. Do not directly modify this array.
* This array's contents can be modified by causing React to reproject the child content.
* Or adding and removing axes from the manual axes collection on the axes property.
*/
actualAxes: IgrAxis[];
private _container;
private _series;
/**
* A collection or manually added series for the chart.
*/
get series(): IgrSeriesCollection;
private _axes;
/**
* A collection or manually added axes for the chart.
*/
get axes(): IgrAxisCollection;
constructor(props: IIgrDataChartProps);
destroy(): void;
componentWillUnmount(): void;
private _initialized;
private _wrapper;
protected createImplementation(): XamDataChart;
private _chart;
private _dataSource;
set dataSource(value: any);
get dataSource(): any;
private _highlightedDataSource;
set highlightedDataSource(value: any);
get highlightedDataSource(): any;
bindData(): void;
bindHighlightedData(): void;
private _axesAdapter;
private _seriesAdapter;
initializeContent(): void;
private _ensureTooltipCreated;
private _defaultTooltips;
private _ensureDefaultTooltip;
private _onDefaultTooltipsReady;
private _activeTooltips;
private _activeTooltipElements;
private _currentTooltips;
private _uniqueTooltipId;
private createTooltip;
private _updateTooltipState;
/**
* Gets or sets the channel with which to synchronize.
*
* Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the `syncChannel` and then specify whether or not synchronize chart horizontally and/or vertically.
*/
get syncChannel(): string;
set syncChannel(v: string);
/**
* Gets or sets the bool used to display the window preview shadow.
*
* Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the `syncChannel` and then specify whether or not synchronize chart horizontally and/or vertically.
*/
get synchronizeVertically(): boolean;
set synchronizeVertically(v: boolean);
/**
* Gets or sets the bool used to display the window preview shadow.
*
* Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the `syncChannel` and then specify whether or not synchronize chart horizontally and/or vertically.
*/
get synchronizeHorizontally(): boolean;
set synchronizeHorizontally(v: boolean);
/**
* @hidden
*/
get i(): XamDataChart;
/**
* Gets or sets whether to use a square aspect ratio for the chart. This is locked to true for polar and radial charts.
*
* Set `IsSquare` to true to constrain the chart to a square, using the minimum of its height and width.
*
* ```ts
* this.chart.isSquare="True";
* ```
*
* ```ts
* <IgrDataChart
* IsHorizontalZoomEnabled="True"
* dataSource={this.state.dataSource} >
*
* <IgrCategoryXAxis name="xAxis" />
* <IgrNumericYAxis name="yAxis" />
*
* <IgrColumnSeries
* name="series1"
* xAxisName="xAxis"
* yAxisName="yAxis"
* valueMemberPath="Value" />
* </IgrDataChart>
* ```
*/
get isSquare(): boolean;
set isSquare(v: boolean);
/**
* A number between 0 and 1 determining the scale of the horizontal zoom.
* This property is effectively a shortcut to the Width of the WindowRect property.
*
* To programmatically change the horizontal zoom level, set `WindowScaleHorizontal` to a value between 0 and 1.
*
* ```ts
* this.chart.windowScaleHorizontal="0.75";
* ```
*
* ```ts
* <IgrDataChart
* windowScaleHorizontal="0.75"
* dataSource={this.state.dataSource} >
*
* <IgrCategoryXAxis name="xAxis" />
* <IgrNumericYAxis name="yAxis" />
*
* <IgrColumnSeries
* name="series1"
* xAxisName="xAxis"
* yAxisName="yAxis"
* valueMemberPath="Value" />
* </IgrDataChart>
* ```
*/
get windowScaleHorizontal(): number;
set windowScaleHorizontal(v: number);
/**
* A number between 0 and 1 determining the scale of the vertical zoom.
* This property is effectively a shortcut to the Height of the WindowRect property.
*
* To programmatically change the vertical zoom level, set `WindowScaleVertical` to a value between 0 and 1.
*
* ```ts
* this.chart.windowScaleVertical="0.75";
* ```
*
* ```ts
* <IgrDataChart
* windowScaleVertical="0.75"
* dataSource={this.state.dataSource} >
*
* <IgrCategoryXAxis name="xAxis" />
* <IgrNumericYAxis name="yAxis" />
*
* <IgrColumnSeries
* name="series1"
* xAxisName="xAxis"
* yAxisName="yAxis"
* valueMemberPath="Value" />
* </IgrDataChart>
* ```
*/
get windowScaleVertical(): number;
set windowScaleVertical(v: number);
/**
* A number between 0 and 1 determining the scale of the horizontal zoom.
* This property is effectively a shortcut to the Width of the ActualWindowRect property.
*/
get actualWindowScaleHorizontal(): number;
set actualWindowScaleHorizontal(v: number);
/**
* A number between 0 and 1 determining the scale of the vertical zoom.
* This property is effectively a shortcut to the Height of the ActualWindowRect property.
*/
get actualWindowScaleVertical(): number;
set actualWindowScaleVertical(v: number);
/**
* Gets or sets horizontal zoomability of the current control
*
* Set `IsHorizontalZoomEnabled` to enable or disable horizontal zooming.
*
* ```ts
* this.chart.IsHorizontalZoomEnabled= true;
* ```
*
* ```ts
* <IgrDataChart
* IsHorizontalZoomEnabled="True"
* dataSource={this.state.dataSource} >
*
* <IgrCategoryXAxis name="xAxis" />
* <IgrNumericYAxis name="yAxis" />
*
* <IgrColumnSeries
* name="series1"
* xAxisName="xAxis"
* yAxisName="yAxis"
* valueMemberPath="Value" />
* </IgrDataChart>
* ```
*/
get isHorizontalZoomEnabled(): boolean;
set isHorizontalZoomEnabled(v: boolean);
/**
* Gets or sets vertical zoomability of the current control
*
* Set `IsVerticalZoomEnabled` to enable or disable vertical zooming.
*
* ```ts
* this.chart.isVerticalZoomEnabled="True";
* ```
*
* ```ts
* <IgrDataChart
* IsVerticalZoomEnabled="True"
* dataSource={this.state.dataSource} >
*
* <IgrCategoryXAxis name="xAxis" />
* <IgrNumericYAxis name="yAxis" />
*
* <IgrColumnSeries
* name="series1"
* xAxisName="xAxis"
* yAxisName="yAxis"
* valueMemberPath="Value" />
* </IgrDataChart>
* ```
*/
get isVerticalZoomEnabled(): boolean;
set isVerticalZoomEnabled(v: boolean);
/**
* Gets or sets how grid lines are rendered in relation to series.
*
* Try setting the `GridMode` property to bring your grid lines in front of the data series.
*/
get gridMode(): GridMode;
set gridMode(v: GridMode);
/**
* Gets or sets a value indicating whether grid and tick lines are aligned to device pixels.
*/
get alignsGridLinesToPixels(): boolean;
set alignsGridLinesToPixels(v: boolean);
/**
* Gets or sets the maximum amount the series viewer should auto expand margins to accomodate the initial horizontal axis labels.
*/
get autoExpandMarginMaximumValue(): number;
set autoExpandMarginMaximumValue(v: number);
/**
* Gets or sets the extra amount the series viewer should auto expand margins to accomodate the initial horizontal axis labels.
*/
get autoExpandMarginExtraPadding(): number;
set autoExpandMarginExtraPadding(v: number);
/**
* Gets or sets a whether the series viewer should suppress truncation of axis labels.
*/
get shouldSuppressAxisLabelTruncation(): boolean;
set shouldSuppressAxisLabelTruncation(v: boolean);
/**
* Gets or sets a whether the series viewer should auto expand margins to accomodate the initial horizontal axis labels.
*/
get shouldAutoExpandMarginForInitialLabels(): boolean;
set shouldAutoExpandMarginForInitialLabels(v: boolean);
/**
* Gets or sets a whether the series viewer should consider auto rotating labels to fit them in the initial view. This implies that ShouldAutoExpandMarginForInitialLabels is true.
*/
get shouldConsiderAutoRotationForInitialLabels(): boolean;
set shouldConsiderAutoRotationForInitialLabels(v: boolean);
/**
* Gets or sets a whether the series viewer should suppress auto recalculating margin and axis label angles.
*/
get suppressAutoMarginAndAngleRecalculation(): boolean;
set suppressAutoMarginAndAngleRecalculation(v: boolean);
/**
* Gets or sets a whether the series viewer should consider auto rotating labels to fit them in the initial view. This implies that ShouldAutoExpandMarginForInitialLabels is true.
*/
get autoMarginAndAngleUpdateMode(): AutoMarginsAndAngleUpdateMode;
set autoMarginAndAngleUpdateMode(v: AutoMarginsAndAngleUpdateMode);
/**
* Gets or sets the DefaultAxisStroke property.
* The DefaultAxisStroke property defines the brush which is used by the axes when no
* Axis.Stroke is set.
*/
get defaultAxisStroke(): string;
set defaultAxisStroke(v: string);
/**
* Gets or sets the DefaultAxisMajorStroke property.
* The DefaultAxisMajorStroke property defines the brush which is used by the axes when no
* Axis.MajorStroke is set.
*/
get defaultAxisMajorStroke(): string;
set defaultAxisMajorStroke(v: string);
/**
* Gets or sets the DefaultAxisMinorStroke property.
* The DefaultAxisMinorStroke property defines the brush which is used by the axes when no
* Axis.MinorStroke is set.
*/
get defaultAxisMinorStroke(): string;
set defaultAxisMinorStroke(v: string);
private _fullAxes;
get fullAxes(): IgrAxisCollection;
set fullAxes(v: IgrAxisCollection);
/**
* Gets the actual resolved left plot area margin;
*/
get actualPlotAreaMarginLeft(): number;
set actualPlotAreaMarginLeft(v: number);
/**
* Gets the actual resolved top plot area margin;
*/
get actualPlotAreaMarginTop(): number;
set actualPlotAreaMarginTop(v: number);
/**
* Gets the actual resolved right plot area margin;
*/
get actualPlotAreaMarginRight(): number;
set actualPlotAreaMarginRight(v: number);
/**
* Gets the actual resolved bottom plot area margin;
*/
get actualPlotAreaMarginBottom(): number;
set actualPlotAreaMarginBottom(v: number);
/**
* Gets or sets mode to use for automatically calculating the plot area margin.
*/
get computedPlotAreaMarginMode(): ComputedPlotAreaMarginMode;
set computedPlotAreaMarginMode(v: ComputedPlotAreaMarginMode);
/**
* Gets or sets horizontal mode to use for automatically calculating the plot area margin based ont the series.
*/
get seriesPlotAreaMarginHorizontalMode(): SeriesPlotAreaMarginHorizontalMode;
set seriesPlotAreaMarginHorizontalMode(v: SeriesPlotAreaMarginHorizontalMode);
/**
* Gets or sets vertical mode to use for automatically calculating the plot area margin based ont the series.
*/
get seriesPlotAreaMarginVerticalMode(): SeriesPlotAreaMarginVerticalMode;
set seriesPlotAreaMarginVerticalMode(v: SeriesPlotAreaMarginVerticalMode);
/**
* Margin applied to the left of the plot area.
*/
get plotAreaMarginLeft(): number;
set plotAreaMarginLeft(v: number);
/**
* Margin applied above the plot area.
*/
get plotAreaMarginTop(): number;
set plotAreaMarginTop(v: number);
/**
* Margin applied to the right of the plot area.
*/
get plotAreaMarginRight(): number;
set plotAreaMarginRight(v: number);
/**
* Margin applied below the plot area.
*/
get plotAreaMarginBottom(): number;
set plotAreaMarginBottom(v: number);
findByName(name: string): any;
refreshComputedPlotAreaMargin(): void;
recalculateMarginAutoExpansion(): void;
recalculateAutoLabelsAngle(): void;
/**
* Notifies the chart that the CSS styles in effect have been updated.
*/
styleUpdated(): void;
/**
* Export serialized visual data.
*/
exportSerializedVisualData(): string;
}
export interface IIgrDataChartProps extends IIgrSeriesViewerProps {
width?: string;
height?: string;
legend?: any;
/**
* Gets or sets the data for the chart to use. This can be overriden at the series and axis level.
*/
dataSource?: any[];
highlightedDataSource?: any[];
/**
* Gets or sets whether to use a square aspect ratio for the chart. This is locked to true for polar and radial charts.
*
* Set `IsSquare` to true to constrain the chart to a square, using the minimum of its height and width.
*
* ```ts
* this.chart.isSquare="True";
* ```
*
* ```ts
* <IgrDataChart
* IsHorizontalZoomEnabled="True"
* dataSource={this.state.dataSource} >
*
* <IgrCategoryXAxis name="xAxis" />
* <IgrNumericYAxis name="yAxis" />
*
* <IgrColumnSeries
* name="series1"
* xAxisName="xAxis"
* yAxisName="yAxis"
* valueMemberPath="Value" />
* </IgrDataChart>
* ```
*/
isSquare?: boolean | string;
/**
* A number between 0 and 1 determining the scale of the horizontal zoom.
* This property is effectively a shortcut to the Width of the WindowRect property.
*
* To programmatically change the horizontal zoom level, set `WindowScaleHorizontal` to a value between 0 and 1.
*
* ```ts
* this.chart.windowScaleHorizontal="0.75";
* ```
*
* ```ts
* <IgrDataChart
* windowScaleHorizontal="0.75"
* dataSource={this.state.dataSource} >
*
* <IgrCategoryXAxis name="xAxis" />
* <IgrNumericYAxis name="yAxis" />
*
* <IgrColumnSeries
* name="series1"
* xAxisName="xAxis"
* yAxisName="yAxis"
* valueMemberPath="Value" />
* </IgrDataChart>
* ```
*/
windowScaleHorizontal?: number | string;
/**
* A number between 0 and 1 determining the scale of the vertical zoom.
* This property is effectively a shortcut to the Height of the WindowRect property.
*
* To programmatically change the vertical zoom level, set `WindowScaleVertical` to a value between 0 and 1.
*
* ```ts
* this.chart.windowScaleVertical="0.75";
* ```
*
* ```ts
* <IgrDataChart
* windowScaleVertical="0.75"
* dataSource={this.state.dataSource} >
*
* <IgrCategoryXAxis name="xAxis" />
* <IgrNumericYAxis name="yAxis" />
*
* <IgrColumnSeries
* name="series1"
* xAxisName="xAxis"
* yAxisName="yAxis"
* valueMemberPath="Value" />
* </IgrDataChart>
* ```
*/
windowScaleVertical?: number | string;
/**
* A number between 0 and 1 determining the scale of the horizontal zoom.
* This property is effectively a shortcut to the Width of the ActualWindowRect property.
*/
actualWindowScaleHorizontal?: number | string;
/**
* A number between 0 and 1 determining the scale of the vertical zoom.
* This property is effectively a shortcut to the Height of the ActualWindowRect property.
*/
actualWindowScaleVertical?: number | string;
/**
* Gets or sets horizontal zoomability of the current control
*
* Set `IsHorizontalZoomEnabled` to enable or disable horizontal zooming.
*
* ```ts
* this.chart.IsHorizontalZoomEnabled= true;
* ```
*
* ```ts
* <IgrDataChart
* IsHorizontalZoomEnabled="True"
* dataSource={this.state.dataSource} >
*
* <IgrCategoryXAxis name="xAxis" />
* <IgrNumericYAxis name="yAxis" />
*
* <IgrColumnSeries
* name="series1"
* xAxisName="xAxis"
* yAxisName="yAxis"
* valueMemberPath="Value" />
* </IgrDataChart>
* ```
*/
isHorizontalZoomEnabled?: boolean | string;
/**
* Gets or sets vertical zoomability of the current control
*
* Set `IsVerticalZoomEnabled` to enable or disable vertical zooming.
*
* ```ts
* this.chart.isVerticalZoomEnabled="True";
* ```
*
* ```ts
* <IgrDataChart
* IsVerticalZoomEnabled="True"
* dataSource={this.state.dataSource} >
*
* <IgrCategoryXAxis name="xAxis" />
* <IgrNumericYAxis name="yAxis" />
*
* <IgrColumnSeries
* name="series1"
* xAxisName="xAxis"
* yAxisName="yAxis"
* valueMemberPath="Value" />
* </IgrDataChart>
* ```
*/
isVerticalZoomEnabled?: boolean | string;
/**
* Gets or sets how grid lines are rendered in relation to series.
*
* Try setting the `GridMode` property to bring your grid lines in front of the data series.
*/
gridMode?: GridMode | string;
/**
* Gets or sets a value indicating whether grid and tick lines are aligned to device pixels.
*/
alignsGridLinesToPixels?: boolean | string;
/**
* Gets or sets the maximum amount the series viewer should auto expand margins to accomodate the initial horizontal axis labels.
*/
autoExpandMarginMaximumValue?: number | string;
/**
* Gets or sets the extra amount the series viewer should auto expand margins to accomodate the initial horizontal axis labels.
*/
autoExpandMarginExtraPadding?: number | string;
/**
* Gets or sets a whether the series viewer should suppress truncation of axis labels.
*/
shouldSuppressAxisLabelTruncation?: boolean | 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 a whether the series viewer should consider auto rotating labels to fit them in the initial view. This implies that ShouldAutoExpandMarginForInitialLabels is true.
*/
shouldConsiderAutoRotationForInitialLabels?: boolean | string;
/**
* Gets or sets a whether the series viewer should suppress auto recalculating margin and axis label angles.
*/
suppressAutoMarginAndAngleRecalculation?: boolean | string;
/**
* Gets or sets a whether the series viewer should consider auto rotating labels to fit them in the initial view. This implies that ShouldAutoExpandMarginForInitialLabels is true.
*/
autoMarginAndAngleUpdateMode?: AutoMarginsAndAngleUpdateMode | string;
/**
* Gets or sets the DefaultAxisStroke property.
* The DefaultAxisStroke property defines the brush which is used by the axes when no
* Axis.Stroke is set.
*/
defaultAxisStroke?: string;
/**
* Gets or sets the DefaultAxisMajorStroke property.
* The DefaultAxisMajorStroke property defines the brush which is used by the axes when no
* Axis.MajorStroke is set.
*/
defaultAxisMajorStroke?: string;
/**
* Gets or sets the DefaultAxisMinorStroke property.
* The DefaultAxisMinorStroke property defines the brush which is used by the axes when no
* Axis.MinorStroke is set.
*/
defaultAxisMinorStroke?: string;
/**
* Gets the actual resolved left plot area margin;
*/
actualPlotAreaMarginLeft?: number | string;
/**
* Gets the actual resolved top plot area margin;
*/
actualPlotAreaMarginTop?: number | string;
/**
* Gets the actual resolved right plot area margin;
*/
actualPlotAreaMarginRight?: number | string;
/**
* Gets the actual resolved bottom plot area margin;
*/
actualPlotAreaMarginBottom?: number | string;
/**
* Gets or sets mode to use for automatically calculating the plot area margin.
*/
computedPlotAreaMarginMode?: ComputedPlotAreaMarginMode | string;
/**
* Gets or sets horizontal mode to use for automatically calculating the plot area margin based ont the series.
*/
seriesPlotAreaMarginHorizontalMode?: SeriesPlotAreaMarginHorizontalMode | string;
/**
* Gets or sets vertical mode to use for automatically calculating the plot area margin based ont the series.
*/
seriesPlotAreaMarginVerticalMode?: SeriesPlotAreaMarginVerticalMode | string;
/**
* Margin applied to the left of the plot area.
*/
plotAreaMarginLeft?: number | string;
/**
* Margin applied above 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;
}