igniteui-react-charts
Version:
Ignite UI React charting components for building rich data visualizations using TypeScript APIs.
1,577 lines (1,572 loc) • 58.9 kB
TypeScript
import * as React from 'react';
import { Visibility } from "igniteui-react-core";
import { HorizontalAlignment } from "igniteui-react-core";
import { VerticalAlignment } from "igniteui-react-core";
import { Axis } from './Axis';
import { AxisLabelsLocation } from './AxisLabelsLocation';
import { AxisTitlePosition } from './AxisTitlePosition';
import { IgrRenderRequestedEventArgs } from './igr-render-requested-event-args';
import { IgrAxisRangeChangedEventArgs } from './igr-axis-range-changed-event-args';
import { IgrAxisAnnotationCollection } from './igr-axis-annotation-collection';
import { FeatureState } from "igniteui-react-core";
/**
* Represents the base class from which all axis types are derived.
*
* The `Axis` is an array of axis objects.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource} >
*
* <IgrCategoryXAxis name="xAxis" label="Date" />
* <IgrNumericYAxis name="yAxis" />
* </IgrDataChart>
* ```
*/
export declare abstract class IgrAxis<P extends IIgrAxisProps = IIgrAxisProps> extends React.Component<P, {}> {
protected _implementation: any;
get i(): Axis;
private onImplementationCreated;
constructor(props: P);
componentDidMount(): void;
get axisInternal(): Axis;
protected createImplementation(): Axis;
shouldComponentUpdate(nextProps: any, nextState: any): boolean;
render(): any;
set name(value: string);
get name(): string;
provideData(data: any): void;
private _renderer;
private _provideRenderer;
static _createFromInternal(internal: any): IgrAxis;
/**
* Gets or sets if the current axis is of category axis type
*/
get isCategory(): boolean;
/**
* Gets or sets if the current axis is of numeric axis type
*
* Gets or sets if the current axis is of numeric axis type
*/
get isNumeric(): boolean;
/**
* Gets if the current axis is of angular axis type
*/
get isAngular(): boolean;
/**
* Gets or sets if the current axis is of radial axis type
*/
get isRadial(): boolean;
/**
* Gets if the current axis is a vertical axis.
*/
get isVertical(): boolean;
/**
* Gets if the current axis is a horizontal axis, e.g. not vertical axis, not radial axis, and not angular axis.
*/
get isHorizontal(): boolean;
/**
* Gets or sets if the current axis is sorting data items
*/
get isSorting(): boolean;
/**
* Gets or sets if the current axis is of date time axis type
*/
get isDateTime(): boolean;
/**
* Gets or sets if the current axis is of ordinal axis type
*/
get isOrdinal(): boolean;
/**
* Gets or sets if the axis is a piecewise scaling function.
*/
get isPiecewise(): boolean;
/**
* Gets if the current axis is of category date time axis type
*/
get isCategoryDateTime(): boolean;
/**
* Gets if the current axis is a continuous rather than a discrete scale
*/
get isContinuous(): boolean;
/**
* Sets or gets a function which takes an object that produces a formatted label for displaying in the chart.
*
* The `FormatLabel` function takes an object that produces a formatted label for displaying in the chart.
*
* ```ts
* <IgrDataChart dataSource={this.data} >
* <IgrCategoryXAxis
* name="xAxis"
* FormatLabel="xAxis_FormatLabel" />
* </IgrDataChart>
* ```
*/
get formatLabel(): (item: any) => string;
set formatLabel(v: (item: any) => string);
/**
* Gets or sets the Title property.
*
* Use `Title` property to display the title of the component.
*
* ```ts
* <IgrCategoryXAxis name="xAxis"
* title="Country"
* titleTextColor="gray"
* titleTextStyle="12pt Verdana"
* titleAngle={90} />
* ```
*/
get title(): string;
set title(v: string);
/**
* Gets or sets the Stroke property.
* Null is treated as auto. The axis stroke will be displayed or not based on the axis type and series used with it.
*
* Use `Stroke` property to set the stroke of the chart.
*
* ```ts
* <IgrCategoryChart
* ref={this.onChartRef}
* width="100%"
* height="100%"
* dataSource={this.data}
* titleTopMargin={5}
* xAxisStroke="gray"/>
* ```
*/
get stroke(): string;
set stroke(v: string);
/**
* Gets or sets the effective stroke used for the axis.
*/
get actualStroke(): string;
set actualStroke(v: string);
/**
* Gets or sets the StrokeThickness property.
*
* Use `StrokeThickness` property for the thickness of the stroke.
*
* ```ts
* <IgrCategoryChart
* ref={this.onChartRef}
* width="100%"
* height="100%"
* dataSource={this.data}
* titleTopMargin={5}
* xAxisStrokeThickness={2}>
* ```
*/
get strokeThickness(): number;
set strokeThickness(v: number);
/**
* Gets or sets the StrokeDashArray property.
*/
get strokeDashArray(): number[];
set strokeDashArray(v: number[]);
/**
* Gets or sets the Strip property.
*
* Use `Strip` property to set the strip of the chart.
*
* ```ts
* <IgrCategoryChart
* ref={this.onChartRef}
* width="100%"
* height="100%"
* dataSource={this.data}
* titleTopMargin={5}
* xAxisStrip="gray"/>
* ```
*/
get strip(): string;
set strip(v: string);
/**
* Gets or sets the MajorStroke property.
* Null is treated as auto. Major lines will be displayed or not based on the axis type and series used with it.
*
* Gets or sets the `MajorStroke` using this property.
*
* ```ts
* <IgrNumericYAxis name="yAxis"
* interval={100}
* majorStroke="black"
* majorStrokeThickness={1}
* minorInterval={25}
* minorStroke="gray"
* minorStrokeThickness={0.5} />
* ```
*/
get majorStroke(): string;
set majorStroke(v: string);
/**
* Gets or sets the ActualMajorStroke property.
*
* The `ActualMajorStroke` property is used for ActualMajorStroke of the axis.
*/
get actualMajorStroke(): string;
set actualMajorStroke(v: string);
/**
* Gets or sets the MajorStrokeThickness property.
*
* Gets or sets the `MajorStrokeThickness` using this property.
*
* ```ts
* <IgrNumericYAxis name="yAxis"
* interval={100}
* majorStroke="black"
* majorStrokeThickness={1}
* minorInterval={25}
* minorStroke="gray"
* minorStrokeThickness={0.5} />
* ```
*/
get majorStrokeThickness(): number;
set majorStrokeThickness(v: number);
/**
* Gets or sets the MajorStrokeDashArray property.
*/
get majorStrokeDashArray(): number[];
set majorStrokeDashArray(v: number[]);
/**
* Gets or sets the MinorStroke property.
*
* Gets or sets the minorStroke thickness using `MinorStrokeThickness` property.
*
* ```ts
* <IgrNumericYAxis name="yAxis"
* interval={100}
* majorStroke="black"
* majorStrokeThickness={1}
* minorInterval={25}
* minorStroke="gray"
* minorStrokeThickness={0.5} />
* ```
*/
get minorStroke(): string;
set minorStroke(v: string);
/**
* Gets or sets the ActualMinorStroke property.
*
* The `ActualMinorStroke` property is used for ActualMinorStroke of the axis.
*/
get actualMinorStroke(): string;
set actualMinorStroke(v: string);
/**
* Gets or sets the MinorStrokeThickness property.
*/
get minorStrokeThickness(): number;
set minorStrokeThickness(v: number);
/**
* Gets or sets the MinorStrokeDashArray property.
*/
get minorStrokeDashArray(): number[];
set minorStrokeDashArray(v: number[]);
/**
* Gets or sets the TickStroke property.
*
* Use `TickStroke` property for the color of the tickmarks.
*
* ```ts
* <IgrCategoryXAxis name="xAxis"
* tickLength={10}
* tickStrokeThickness={0.5}
* tickStroke="black" />
* ```
*/
get tickStroke(): string;
set tickStroke(v: string);
/**
* Gets or sets the TickStrokeThickness property.
*
* Use `TickStrokeThickness` property for thickness of the stroke tickmarks.
*
* ```ts
* <IgrCategoryXAxis name="xAxis"
* tickLength={10}
* tickStrokeThickness={0.5}
* tickStroke="black" />
* ```
*/
get tickStrokeThickness(): number;
set tickStrokeThickness(v: number);
/**
* Gets or sets the TickStrokeDashArray property.
*/
get tickStrokeDashArray(): number[];
set tickStrokeDashArray(v: number[]);
/**
* Gets or sets the TickLength property.
*
* Use `TickLength` property for The length of the tickmarks to display for this axis.
*
* ```ts
* <IgrCategoryXAxis name="xAxis"
* tickLength={10}
* tickStrokeThickness={0.5}
* tickStroke="black" />
* ```
*/
get tickLength(): number;
set tickLength(v: number);
/**
* Gets or sets the IsDisabled property. If true, the axis will not be rendered.
*
* The `IsDisabled` property is used to decide if the axis will not be rendered.
*/
get isDisabled(): boolean;
set isDisabled(v: boolean);
/**
* Gets or sets the IsInverted property.
*
* Gets or sets the `IsInverted` property.
*/
get isInverted(): boolean;
set isInverted(v: boolean);
/**
* Gets or sets whether annotations should be shifted to avoid collision, even if this would result in them appearing where they shouldn't be along the scale.
*/
get shouldAvoidAnnotationCollisions(): boolean;
set shouldAvoidAnnotationCollisions(v: boolean);
/**
* ets or sets whether annotations should be kept in view, even if they aren't positioned where they should appear on the scale.
*/
get shouldKeepAnnotationsInView(): boolean;
set shouldKeepAnnotationsInView(v: boolean);
/**
* Gets or sets whether to use label height measurement when determining the initial number of labels to render, before resolving collisions, etc.
*/
get usePerLabelHeightMeasurement(): boolean;
set usePerLabelHeightMeasurement(v: boolean);
/**
* Gets or sets whether to use more advanced heuristics when determining the initial number of labels to render, before resolving collisions, etc.
*
* Use `UseEnhancedIntervalManagement` property to gets/sets whether to use more advanced heuristics when determining the initial number of labels to render,
* before resolving collisions, etc.
*/
get useEnhancedIntervalManagement(): boolean;
set useEnhancedIntervalManagement(v: boolean);
/**
* Gets or sets the minimum desired characters to be displayed for horizontal axes when using advanced label heuristics. -1 will attempt to adjust the interval to precisely fit the horizontal labels.
*
* The `EnhancedIntervalMinimumCharacters` property is used to set the mininum desired characters to be displayed for horizontal axes when using advanced label heuristics.
*/
get enhancedIntervalMinimumCharacters(): number;
set enhancedIntervalMinimumCharacters(v: number);
/**
* Gets or sets whether the enhanced interval management should prefer to show all the labels if possible without collisions for supported types of category axes. This is for use with EnhancedIntervalMinimumCharacters = -1 and axes that have an integral interval.
*/
get enhancedIntervalPreferMoreCategoryLabels(): boolean;
set enhancedIntervalPreferMoreCategoryLabels(v: boolean);
/**
* Gets or sets the text style to use for axis labels.
*
* The `labelTextStyle` property Overrides the style of the text used for the axis labels.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
* <IgrCategoryXAxis name="xAxis"
* label="Year"
* titleTextStyle="12pt Verdana" />
* <IgrNumericYAxis name="yAxis" />
* </IgrDataChart>
* ```
*
* ```ts
* <IgrCategoryXAxis name="xAxis"
* title="Country"
* titleTextColor="gray"
* titleTextStyle="12pt Verdana"
* titleAngle={90} />
* ```
*/
get labelTextStyle(): string;
set labelTextStyle(v: string);
/**
* The color of the {0}.
*
* The `labelTextColor` property Overrides the color of the text used for the axis labels.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
* <IgrCategoryXAxis name="xAxis"
* label="Year"
* labelTextColor="gray" />
* <IgrNumericYAxis name="yAxis" />
* </IgrDataChart>
* ```
*
* ```ts
* <IgrCategoryXAxis name="xAxis"
* title="Country"
* titleTextColor="gray"
* titleTextStyle="12pt Verdana"
* titleAngle={90} />
* ```
*/
get labelTextColor(): string;
set labelTextColor(v: string);
/**
* Gets or sets the location of the {0}.
*
* The `Location` property is used for the location.
*/
get labelLocation(): AxisLabelsLocation;
set labelLocation(v: AxisLabelsLocation);
/**
* Gets or sets the visibility of the {0}.
*
* The `Visibility` property is used for the visibility of the axis.
*/
get labelVisibility(): Visibility;
set labelVisibility(v: Visibility);
/**
* Gets or sets whether the first label is displayed when the zoom level is set to 1.
*
* The `ShowFirstLabel` is used to check whether the first label is displayed when the zoom level is set to 1.
*/
get labelShowFirstLabel(): boolean;
set labelShowFirstLabel(v: boolean);
/**
* Gets or sets the angle of the {0}.
*
* The `Angle` property is used to set the angle of the axis.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
* <IgrCategoryXAxis name="xAxis"
* label="Year"
* titleAngle={90} />
* <IgrNumericYAxis name="yAxis" />
* </IgrDataChart>
* ```
*
* ```ts
* <IgrCategoryXAxis name="xAxis"
* title="Country"
* titleTextColor="gray"
* titleTextStyle="12pt Verdana"
* titleAngle={90} />
* ```
*/
get labelAngle(): number;
set labelAngle(v: number);
/**
* Distance between the axis and the edge of the control.
*
* The `Extent` property is used for the extent.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
* <IgrCategoryXAxis name="xAxis"
* label="Year"/>
* <IgrNumericYAxis name="yAxis" />
* </IgrDataChart>
* ```
*/
get labelExtent(): number;
set labelExtent(v: number);
/**
* Maximum distance between the axis and the edge of the control.
*/
get labelMaximumExtent(): number;
set labelMaximumExtent(v: number);
/**
* Maximum distance between the axis and the edge of the control, relative to Chart size.
*/
get labelMaximumExtentPercentage(): number;
set labelMaximumExtentPercentage(v: number);
/**
* Margin applied to the left of the {0}.
*
* The `labelLeftMargin` property is used for the left margin of the labels.
*/
get labelLeftMargin(): number;
set labelLeftMargin(v: number);
/**
* Margin applied to the right of the {0}.
*
* The `labelRightMargin` property is used for the right margin of the labels.
*/
get labelRightMargin(): number;
set labelRightMargin(v: number);
/**
* Margin applied above the {0}.
*
* The `labelTopMargin` property is used for the top margin of the labels.
*
* ```ts
* <IgrCategoryXAxis name="xAxis"
* label="Country"
* labelTextStyle="9pt Verdana"
* labelTopMargin={5}
* labelTextColor="gray" />
* ```
*/
get labelTopMargin(): number;
set labelTopMargin(v: number);
/**
* Margin applied below the {0}.
*
* The `labelBottomMargin` is used to set the bottom margin of the labels.
*/
get labelBottomMargin(): number;
set labelBottomMargin(v: number);
/**
* Gets or sets the horizontal alignment of the {0}.
*
* The `HorizontalAlignment` property is used for the horizontal alignment.
*/
get labelHorizontalAlignment(): HorizontalAlignment;
set labelHorizontalAlignment(v: HorizontalAlignment);
/**
* Gets or sets the vertical alignment of the {0}.
*
* The `VerticalAlignment` property is used for the vertical alignment of the axis.
*/
get labelVerticalAlignment(): VerticalAlignment;
set labelVerticalAlignment(v: VerticalAlignment);
ensureLabelSettings(): void;
/**
* Gets or sets the CrossingAxis property.
*
* The `CrossingAxis` property is used for CrossingAxis .
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource} >
*
* <IgrNumericXAxis name="xAxis" />
* <IgrNumericYAxis name="yAxis"
* crossingAxisName= "xAxis"
* crossingValue= {700}/>
* </IgrDataChart>
* ```
*/
get crossingAxis(): IgrAxis;
set crossingAxis(v: IgrAxis);
private _crossingAxisName;
/**
* Gets or sets the name to use to resolve crossingAxis from markup.
*/
get crossingAxisName(): string;
set crossingAxisName(v: string);
/**
* Gets or sets the CrossingValue property.
*
* The `CrossingValue` property is used for CrossingValue of the axis.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource} >
*
* <IgrNumericXAxis name="xAxis" />
* <IgrNumericYAxis name="yAxis"
* crossingAxis= "xAxis"
* crossingValue= {700}/>
* </IgrDataChart>
* ```
*/
get crossingValue(): any;
set crossingValue(v: any);
/**
* Gets or sets the title position relative to the axis labels.
*/
get titlePosition(): AxisTitlePosition;
set titlePosition(v: AxisTitlePosition);
/**
* Gets or sets the text style to use for axis labels.
*
* The `labelTextStyle` property Overrides the style of the text used for the axis labels.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
* <IgrCategoryXAxis name="xAxis"
* label="Year"
* titleTextStyle="12pt Verdana" />
* <IgrNumericYAxis name="yAxis" />
* </IgrDataChart>
* ```
*
* ```ts
* <IgrCategoryXAxis name="xAxis"
* title="Country"
* titleTextColor="gray"
* titleTextStyle="12pt Verdana"
* titleAngle={90} />
* ```
*/
get titleTextStyle(): string;
set titleTextStyle(v: string);
/**
* The color of the {0}.
*
* The `labelTextColor` property Overrides the color of the text used for the axis labels.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
* <IgrCategoryXAxis name="xAxis"
* label="Year"
* labelTextColor="gray" />
* <IgrNumericYAxis name="yAxis" />
* </IgrDataChart>
* ```
*
* ```ts
* <IgrCategoryXAxis name="xAxis"
* title="Country"
* titleTextColor="gray"
* titleTextStyle="12pt Verdana"
* titleAngle={90} />
* ```
*/
get titleTextColor(): string;
set titleTextColor(v: string);
/**
* Gets or sets the location of the {0}.
*
* The `Location` property is used for the location.
*/
get titleLocation(): AxisLabelsLocation;
set titleLocation(v: AxisLabelsLocation);
/**
* Gets or sets the visibility of the {0}.
*
* The `Visibility` property is used for the visibility of the axis.
*/
get titleVisibility(): Visibility;
set titleVisibility(v: Visibility);
/**
* Gets or sets whether the first label is displayed when the zoom level is set to 1.
*
* The `ShowFirstLabel` is used to check whether the first label is displayed when the zoom level is set to 1.
*/
get titleShowFirstLabel(): boolean;
set titleShowFirstLabel(v: boolean);
/**
* Gets or sets the angle of the {0}.
*
* The `Angle` property is used to set the angle of the axis.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
* <IgrCategoryXAxis name="xAxis"
* label="Year"
* titleAngle={90} />
* <IgrNumericYAxis name="yAxis" />
* </IgrDataChart>
* ```
*
* ```ts
* <IgrCategoryXAxis name="xAxis"
* title="Country"
* titleTextColor="gray"
* titleTextStyle="12pt Verdana"
* titleAngle={90} />
* ```
*/
get titleAngle(): number;
set titleAngle(v: number);
/**
* Distance between the axis and the edge of the control.
*
* The `Extent` property is used for the extent.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
* <IgrCategoryXAxis name="xAxis"
* label="Year"/>
* <IgrNumericYAxis name="yAxis" />
* </IgrDataChart>
* ```
*/
get titleExtent(): number;
set titleExtent(v: number);
/**
* Maximum distance between the axis and the edge of the control.
*/
get titleMaximumExtent(): number;
set titleMaximumExtent(v: number);
/**
* Maximum distance between the axis and the edge of the control, relative to Chart size.
*/
get titleMaximumExtentPercentage(): number;
set titleMaximumExtentPercentage(v: number);
/**
* Margin applied to the left of the {0}.
*
* The `labelLeftMargin` property is used for the left margin of the labels.
*/
get titleLeftMargin(): number;
set titleLeftMargin(v: number);
/**
* Margin applied to the right of the {0}.
*
* The `labelRightMargin` property is used for the right margin of the labels.
*/
get titleRightMargin(): number;
set titleRightMargin(v: number);
/**
* Margin applied above the {0}.
*
* The `labelTopMargin` property is used for the top margin of the labels.
*
* ```ts
* <IgrCategoryXAxis name="xAxis"
* label="Country"
* labelTextStyle="9pt Verdana"
* labelTopMargin={5}
* labelTextColor="gray" />
* ```
*/
get titleTopMargin(): number;
set titleTopMargin(v: number);
/**
* Margin applied below the {0}.
*
* The `labelBottomMargin` is used to set the bottom margin of the labels.
*/
get titleBottomMargin(): number;
set titleBottomMargin(v: number);
/**
* Gets or sets the horizontal alignment of the {0}.
*
* The `HorizontalAlignment` property is used for the horizontal alignment.
*/
get titleHorizontalAlignment(): HorizontalAlignment;
set titleHorizontalAlignment(v: HorizontalAlignment);
/**
* Gets or sets the vertical alignment of the {0}.
*
* The `VerticalAlignment` property is used for the vertical alignment of the axis.
*/
get titleVerticalAlignment(): VerticalAlignment;
set titleVerticalAlignment(v: VerticalAlignment);
ensureTitleSettings(): void;
/**
* Gets or sets whether annotations on this axis will automatically truncate themselves to avoid colliding with each other. This only works
* if the ShouldAvoidAnnotationCollisions property is enabled.
*/
get shouldAutoTruncateAnnotations(): boolean;
set shouldAutoTruncateAnnotations(v: boolean);
private _annotations;
/**
* Gets the current annotations for the axis.
*/
get annotations(): IgrAxisAnnotationCollection;
set annotations(v: IgrAxisAnnotationCollection);
/**
* Gets or sets the coercion methods to use when loading data from data sources.
* Should be specified before setting any member paths, if being used. Setting it later
* will not cause data to be re-imported into the chart.
*
* The `coercionMethods` methods is to use when loading data from data sources. Should be specified before setting any member paths, if being used.
* Setting it later will not cause data to be reimported into the chart.
*/
get coercionMethods(): any;
set coercionMethods(v: any);
/**
* Gets or sets whether the series should expect that properties in its items source may be functions that need to be
* evaluated to yield their value. This defaults to false, as there will be a subtle performance impact to using this feature.
* This value must be set before assigning an item's source to take effect.
*/
get expectFunctions(): boolean;
set expectFunctions(v: boolean);
/**
* Gets or sets the axis label format string.
*
* The `Label` property is used for label mapping of the axis labels.
*
* ```ts
* <IgrCategoryXAxis name="xAxis"
* label="Country"
* labelTextStyle="9pt Verdana"
* labelTopMargin={5}
* labelTextColor="gray" />
* ```
*/
get label(): any;
set label(v: any);
/**
* Gets or sets the label format string to use for the label.
*/
get labelFormat(): string;
set labelFormat(v: string);
/**
* Gets or sets the format specifiers to use with the LabelFormat string.
*/
get labelFormatSpecifiers(): any[];
set labelFormatSpecifiers(v: any[]);
/**
* Gets whether this is primary axis created by an user
*/
get isPrimaryAxis(): boolean;
/**
* Gets whether this is companion axis automatically created for a primary axis
*/
get isCompanionAxis(): boolean;
set isCompanionAxis(v: boolean);
/**
* Gets or sets whether or not the companion axis is enabled for this axis.
*/
get companionAxisEnabled(): boolean;
set companionAxisEnabled(v: boolean);
/**
* Gets or sets whether or not the companion axis has opposite location of this axis.
*/
get companionAxisLabelOpposite(): boolean;
set companionAxisLabelOpposite(v: boolean);
/**
* Gets or sets whether or not the companion axis is inverted.
*/
get companionAxisIsInverted(): FeatureState;
set companionAxisIsInverted(v: FeatureState);
/**
* Gets or sets crossing axis for the companion axis.
*/
get companionAxisCrossingAxis(): IgrAxis;
set companionAxisCrossingAxis(v: IgrAxis);
private _companionAxisCrossingAxisName;
/**
* Gets or sets the name to use to resolve companionAxisCrossingAxis from markup.
*/
get companionAxisCrossingAxisName(): string;
set companionAxisCrossingAxisName(v: string);
/**
* Gets or sets crossing value for the companion axis.
*/
get companionAxisCrossingValue(): number;
set companionAxisCrossingValue(v: number);
/**
* Gets or sets whether or not the companion axis has visible labels.
*/
get companionAxisLabelVisible(): FeatureState;
set companionAxisLabelVisible(v: FeatureState);
/**
* Gets or sets label angle on the companion axis.
*/
get companionAxisLabelAngle(): number;
set companionAxisLabelAngle(v: number);
/**
* Gets or sets extent of labels on the companion axis.
*/
get companionAxisLabelExtent(): number;
set companionAxisLabelExtent(v: number);
/**
* Gets or sets location of labels on the companion axis.
*/
get companionAxisLabelLocation(): AxisLabelsLocation;
set companionAxisLabelLocation(v: AxisLabelsLocation);
/**
* Gets or sets vertical alignment of the companion axis.
*/
get companionAxisLabelVerticalAlignment(): VerticalAlignment;
set companionAxisLabelVerticalAlignment(v: VerticalAlignment);
/**
* Gets or sets horizontal alignment of labels on the companion axis.
*/
get companionAxisLabelHorizontalAlignment(): HorizontalAlignment;
set companionAxisLabelHorizontalAlignment(v: HorizontalAlignment);
/**
* Gets or sets color of labels on the companion axis.
*/
get companionAxisLabelColor(): string;
set companionAxisLabelColor(v: string);
/**
* Gets or sets whether or not the companion axis is syncronized with properties of primary axis unless CompanionAxis* properties are set
* In other words, companion axis' LabelExtent will syncronize with primary axis' LabelExtent unless CompanionAxisLabelExtent is set
*/
get companionAxisSyncronizedWithPrimaryAxis(): boolean;
set companionAxisSyncronizedWithPrimaryAxis(v: boolean);
/**
* Gets or sets color of strips on the companion axis.
*/
get companionAxisStrip(): string;
set companionAxisStrip(v: string);
/**
* Gets or sets color of line stroke on the companion axis.
*/
get companionAxisStroke(): string;
set companionAxisStroke(v: string);
/**
* Gets or sets label angle on the companion axis.
*/
get companionAxisMinExtent(): number;
set companionAxisMinExtent(v: number);
/**
* Gets or sets label angle on the companion axis.
*/
get companionAxisStrokeThickness(): number;
set companionAxisStrokeThickness(v: number);
/**
* Gets or sets stroke of major gridlines on the companion axis.
*/
get companionAxisMajorStroke(): string;
set companionAxisMajorStroke(v: string);
/**
* Gets or sets thickness of major gridlines on the companion axis.
*/
get companionAxisMajorStrokeThickness(): number;
set companionAxisMajorStrokeThickness(v: number);
/**
* Gets or sets stroke of minior gridlines on the companion axis.
*/
get companionAxisMinorStroke(): string;
set companionAxisMinorStroke(v: string);
/**
* Gets or sets thickness of minior gridlines on the companion axis.
*/
get companionAxisMinorStrokeThickness(): number;
set companionAxisMinorStrokeThickness(v: number);
/**
* Gets or sets color of ticks on the companion axis.
*/
get companionAxisTickStroke(): string;
set companionAxisTickStroke(v: string);
/**
* Gets or sets length of ticks on the companion axis.
*/
get companionAxisTickLength(): number;
set companionAxisTickLength(v: number);
/**
* Gets or sets label angle on the companion axis.
*/
get companionAxisTickStrokeThickness(): number;
set companionAxisTickStrokeThickness(v: number);
/**
* Gets or sets title on the companion axis.
*/
get companionAxisTitle(): string;
set companionAxisTitle(v: string);
/**
* Gets or sets whether or not the companion axis should avoid annotation collisions.
*/
get companionAxisShouldAvoidAnnotationCollisions(): FeatureState;
set companionAxisShouldAvoidAnnotationCollisions(v: FeatureState);
/**
* Gets or sets whether or not the companion axis should auto truncate annotations.
*/
get companionAxisShouldAutoTruncateAnnotations(): FeatureState;
set companionAxisShouldAutoTruncateAnnotations(v: FeatureState);
/**
* Gets or sets whether or not the companion axis should keep annotations in view.
*/
get companionAxisShouldKeepAnnotationsInView(): FeatureState;
set companionAxisShouldKeepAnnotationsInView(v: FeatureState);
bindAxes(axes: IgrAxis[]): void;
findByName(name: string): any;
protected __p: string;
protected _hasUserValues: Set<string>;
protected get 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;
getFullRange(): number[];
/**
* Gets the value of a requested member path from the series.
* @param memberPathName * The property name of a valid member path for the series
*/
getMemberPathValue(memberPathName: string): string;
/**
* Renders the axis with no animation.
*/
renderAxis(): void;
/**
* If using enhanced interval management and precise interval fitting, this will reset the cached maximum label width, and recalculate using the current labels.
*/
resetCachedEnhancedInterval(): void;
getItemValue(item: any, memberPathName: string): any;
/**
* Gets the label for a data item.
* @param value * The unscaled value to get a label for.
*/
getValueLabel(value: number): string;
/**
* Scales a value from axis space into screen space.
* @param unscaledValue * The unscaled axis value to scale.
*/
scaleValue(unscaledValue: number): number;
private _rangeChanged;
private _rangeChanged_wrapped;
/**
* Occurs when the axis range changes.
*/
get rangeChanged(): (s: IgrAxis, e: IgrAxisRangeChangedEventArgs) => void;
set rangeChanged(ev: (s: IgrAxis, e: IgrAxisRangeChangedEventArgs) => void);
private _renderRequested;
private _renderRequested_wrapped;
/**
* This event is raised every time a render has been requested from a series.
*/
get renderRequested(): (s: IgrAxis, e: IgrRenderRequestedEventArgs) => void;
set renderRequested(ev: (s: IgrAxis, e: IgrRenderRequestedEventArgs) => void);
}
export interface IIgrAxisProps {
/**
* Sets or gets a required unique name for the axis.
* */
name: string;
children?: React.ReactNode;
/**
* Sets or gets a function which takes an object that produces a formatted label for displaying in the chart.
*
* The `FormatLabel` function takes an object that produces a formatted label for displaying in the chart.
*
* ```ts
* <IgrDataChart dataSource={this.data} >
* <IgrCategoryXAxis
* name="xAxis"
* FormatLabel="xAxis_FormatLabel" />
* </IgrDataChart>
* ```
*/
formatLabel?: (item: any) => string;
/**
* Gets or sets the Title property.
*
* Use `Title` property to display the title of the component.
*
* ```ts
* <IgrCategoryXAxis name="xAxis"
* title="Country"
* titleTextColor="gray"
* titleTextStyle="12pt Verdana"
* titleAngle={90} />
* ```
*/
title?: string;
/**
* Gets or sets the Stroke property.
* Null is treated as auto. The axis stroke will be displayed or not based on the axis type and series used with it.
*
* Use `Stroke` property to set the stroke of the chart.
*
* ```ts
* <IgrCategoryChart
* ref={this.onChartRef}
* width="100%"
* height="100%"
* dataSource={this.data}
* titleTopMargin={5}
* xAxisStroke="gray"/>
* ```
*/
stroke?: string;
/**
* Gets or sets the effective stroke used for the axis.
*/
actualStroke?: string;
/**
* Gets or sets the StrokeThickness property.
*
* Use `StrokeThickness` property for the thickness of the stroke.
*
* ```ts
* <IgrCategoryChart
* ref={this.onChartRef}
* width="100%"
* height="100%"
* dataSource={this.data}
* titleTopMargin={5}
* xAxisStrokeThickness={2}>
* ```
*/
strokeThickness?: number | string;
/**
* Gets or sets the StrokeDashArray property.
*/
strokeDashArray?: number[] | string;
/**
* Gets or sets the Strip property.
*
* Use `Strip` property to set the strip of the chart.
*
* ```ts
* <IgrCategoryChart
* ref={this.onChartRef}
* width="100%"
* height="100%"
* dataSource={this.data}
* titleTopMargin={5}
* xAxisStrip="gray"/>
* ```
*/
strip?: string;
/**
* Gets or sets the MajorStroke property.
* Null is treated as auto. Major lines will be displayed or not based on the axis type and series used with it.
*
* Gets or sets the `MajorStroke` using this property.
*
* ```ts
* <IgrNumericYAxis name="yAxis"
* interval={100}
* majorStroke="black"
* majorStrokeThickness={1}
* minorInterval={25}
* minorStroke="gray"
* minorStrokeThickness={0.5} />
* ```
*/
majorStroke?: string;
/**
* Gets or sets the ActualMajorStroke property.
*
* The `ActualMajorStroke` property is used for ActualMajorStroke of the axis.
*/
actualMajorStroke?: string;
/**
* Gets or sets the MajorStrokeThickness property.
*
* Gets or sets the `MajorStrokeThickness` using this property.
*
* ```ts
* <IgrNumericYAxis name="yAxis"
* interval={100}
* majorStroke="black"
* majorStrokeThickness={1}
* minorInterval={25}
* minorStroke="gray"
* minorStrokeThickness={0.5} />
* ```
*/
majorStrokeThickness?: number | string;
/**
* Gets or sets the MajorStrokeDashArray property.
*/
majorStrokeDashArray?: number[] | string;
/**
* Gets or sets the MinorStroke property.
*
* Gets or sets the minorStroke thickness using `MinorStrokeThickness` property.
*
* ```ts
* <IgrNumericYAxis name="yAxis"
* interval={100}
* majorStroke="black"
* majorStrokeThickness={1}
* minorInterval={25}
* minorStroke="gray"
* minorStrokeThickness={0.5} />
* ```
*/
minorStroke?: string;
/**
* Gets or sets the ActualMinorStroke property.
*
* The `ActualMinorStroke` property is used for ActualMinorStroke of the axis.
*/
actualMinorStroke?: string;
/**
* Gets or sets the MinorStrokeThickness property.
*/
minorStrokeThickness?: number | string;
/**
* Gets or sets the MinorStrokeDashArray property.
*/
minorStrokeDashArray?: number[] | string;
/**
* Gets or sets the TickStroke property.
*
* Use `TickStroke` property for the color of the tickmarks.
*
* ```ts
* <IgrCategoryXAxis name="xAxis"
* tickLength={10}
* tickStrokeThickness={0.5}
* tickStroke="black" />
* ```
*/
tickStroke?: string;
/**
* Gets or sets the TickStrokeThickness property.
*
* Use `TickStrokeThickness` property for thickness of the stroke tickmarks.
*
* ```ts
* <IgrCategoryXAxis name="xAxis"
* tickLength={10}
* tickStrokeThickness={0.5}
* tickStroke="black" />
* ```
*/
tickStrokeThickness?: number | string;
/**
* Gets or sets the TickStrokeDashArray property.
*/
tickStrokeDashArray?: number[] | string;
/**
* Gets or sets the TickLength property.
*
* Use `TickLength` property for The length of the tickmarks to display for this axis.
*
* ```ts
* <IgrCategoryXAxis name="xAxis"
* tickLength={10}
* tickStrokeThickness={0.5}
* tickStroke="black" />
* ```
*/
tickLength?: number | string;
/**
* Gets or sets the IsDisabled property. If true, the axis will not be rendered.
*
* The `IsDisabled` property is used to decide if the axis will not be rendered.
*/
isDisabled?: boolean | string;
/**
* Gets or sets the IsInverted property.
*
* Gets or sets the `IsInverted` property.
*/
isInverted?: boolean | string;
/**
* Gets or sets whether annotations should be shifted to avoid collision, even if this would result in them appearing where they shouldn't be along the scale.
*/
shouldAvoidAnnotationCollisions?: boolean | string;
/**
* ets or sets whether annotations should be kept in view, even if they aren't positioned where they should appear on the scale.
*/
shouldKeepAnnotationsInView?: boolean | string;
/**
* Gets or sets whether to use label height measurement when determining the initial number of labels to render, before resolving collisions, etc.
*/
usePerLabelHeightMeasurement?: boolean | string;
/**
* Gets or sets whether to use more advanced heuristics when determining the initial number of labels to render, before resolving collisions, etc.
*
* Use `UseEnhancedIntervalManagement` property to gets/sets whether to use more advanced heuristics when determining the initial number of labels to render,
* before resolving collisions, etc.
*/
useEnhancedIntervalManagement?: boolean | string;
/**
* Gets or sets the minimum desired characters to be displayed for horizontal axes when using advanced label heuristics. -1 will attempt to adjust the interval to precisely fit the horizontal labels.
*
* The `EnhancedIntervalMinimumCharacters` property is used to set the mininum desired characters to be displayed for horizontal axes when using advanced label heuristics.
*/
enhancedIntervalMinimumCharacters?: number | string;
/**
* Gets or sets whether the enhanced interval management should prefer to show all the labels if possible without collisions for supported types of category axes. This is for use with EnhancedIntervalMinimumCharacters = -1 and axes that have an integral interval.
*/
enhancedIntervalPreferMoreCategoryLabels?: boolean | string;
/**
* Gets or sets the text style to use for axis labels.
*
* The `labelTextStyle` property Overrides the style of the text used for the axis labels.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
* <IgrCategoryXAxis name="xAxis"
* label="Year"
* titleTextStyle="12pt Verdana" />
* <IgrNumericYAxis name="yAxis" />
* </IgrDataChart>
* ```
*
* ```ts
* <IgrCategoryXAxis name="xAxis"
* title="Country"
* titleTextColor="gray"
* titleTextStyle="12pt Verdana"
* titleAngle={90} />
* ```
*/
labelTextStyle?: string;
/**
* The color of the {0}.
*
* The `labelTextColor` property Overrides the color of the text used for the axis labels.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
* <IgrCategoryXAxis name="xAxis"
* label="Year"
* labelTextColor="gray" />
* <IgrNumericYAxis name="yAxis" />
* </IgrDataChart>
* ```
*
* ```ts
* <IgrCategoryXAxis name="xAxis"
* title="Country"
* titleTextColor="gray"
* titleTextStyle="12pt Verdana"
* titleAngle={90} />
* ```
*/
labelTextColor?: string;
/**
* Gets or sets the location of the {0}.
*
* The `Location` property is used for the location.
*/
labelLocation?: AxisLabelsLocation | string;
/**
* Gets or sets the visibility of the {0}.
*
* The `Visibility` property is used for the visibility of the axis.
*/
labelVisibility?: Visibility | string;
/**
* Gets or sets whether the first label is displayed when the zoom level is set to 1.
*
* The `ShowFirstLabel` is used to check whether the first label is displayed when the zoom level is set to 1.
*/
labelShowFirstLabel?: boolean | string;
/**
* Gets or sets the angle of the {0}.
*
* The `Angle` property is used to set the angle of the axis.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
* <IgrCategoryXAxis name="xAxis"
* label="Year"
* titleAngle={90} />
* <IgrNumericYAxis name="yAxis" />
* </IgrDataChart>
* ```
*
* ```ts
* <IgrCategoryXAxis name="xAxis"
* title="Country"
* titleTextColor="gray"
* titleTextStyle="12pt Verdana"
* titleAngle={90} />
* ```
*/
labelAngle?: number | string;
/**
* Distance between the axis and the edge of the control.
*
* The `Extent` property is used for the extent.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
* <IgrCategoryXAxis name="xAxis"
* label="Year"/>
* <IgrNumericYAxis name="yAxis" />
* </IgrDataChart>
* ```
*/
labelExtent?: number | string;
/**
* Maximum distance between the axis and the edge of the control.
*/
labelMaximumExtent?: number | string;
/**
* Maximum distance between the axis and the edge of the control, relative to Chart size.
*/
labelMaximumExtentPercentage?: number | string;
/**
* Margin applied to the left of the {0}.
*
* The `labelLeftMargin` property is used for the left margin of the labels.
*/
labelLeftMargin?: number | string;
/**
* Margin applied to the right of the {0}.
*
* The `labelRightMargin` property is used for the right margin of the labels.
*/
labelRightMargin?: number | string;
/**
* Margin applied above the {0}.
*
* The `labelTopMargin` property is used for the top margin of the labels.
*
* ```ts
* <IgrCategoryXAxis name="xAxis"
* label="Country"
* labelTextStyle="9pt Verdana"
* labelTopMargin={5}
* labelTextColor="gray" />
* ```
*/
labelTopMargin?: number | string;
/**
* Margin applied below the {0}.
*
* The `labelBottomMargin` is used to set the bottom margin of the labels.
*/
labelBottomMargin?: number | string;
/**
* Gets or sets the horizontal alignment of the {0}.
*
* The `HorizontalAlignment` property is used for the horizontal alignment.
*/
labelHorizontalAlignment?: HorizontalAlignment | string;
/**
* Gets or sets the vertical alignment of the {0}.
*
* The `VerticalAlignment` property is used for the vertical alignment of the axis.
*/
labelVerticalAlignment?: VerticalAlignment | string;
/**
* Gets or sets the CrossingAxis property.
*
* The `CrossingAxis` property is used for CrossingAxis .
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource} >
*
* <IgrNumericXAxis name="xAxis" />
* <IgrNumericYAxis name="yAxis"
* crossingAxisName= "xAxis"
* crossingValue= {700}/>
* </IgrDataChart>
* ```
*/
crossingAxis?: IgrAxis;
/**
* Gets or sets the name to use to resolve crossingAxis from markup.
*/
crossingAxisName?: string;
/**
* Gets or sets the CrossingValue property.
*
* The `CrossingValue` property is used for CrossingValue of the axis.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource} >
*
* <IgrNumericXAxis name="xAxis" />
* <IgrNumericYAxis name="yAxis"
* crossingAxis= "xAxis"
* crossingValue= {700}/>
* </IgrDataChart>
* ```
*/
crossingValue?: any;
/**
* Gets or sets the title position relative to the axis labels.
*/
titlePosition?: AxisTitlePosition | string;
/**
* Gets or sets the text style to use for axis labels.
*
* The `labelTextStyle` property Overrides the style of the text used for the axis labels.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
* <IgrCategoryXAxis name="xAxis"
* label="Year"
* titleTextStyle="12pt Verdana" />
* <IgrNumericYAxis name="yAxis" />
* </IgrDataChart>
* ```
*
* ```ts
* <IgrCategoryXAxis name="xAxis"
* title="Country"
* titleTextColor="gray"
* titleTextStyle="12pt Verdana"
* titleAngle={90} />
* ```
*/
titleTextStyle?: string;
/**
* The color of the {0}.
*
* The `labelTextColor` property Overrides the color of the text used for the axis labels.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
* <IgrCategoryXAxis name="xAxis"
* label="Year"
* labelTextColor="gray" />
* <IgrNumericYAxis name="yAxis" />
* </IgrDataChart>
* ```
*
* ```ts
* <IgrCategoryXAxis name="xAxis"
* title="Country"
* titleTextColor="gray"
* titleTextStyle="12pt Verdana"
* titleAngle={90} />
* ```
*/
titleTextColor?: string;
/**
* Gets or sets the location of the {0}.
*
* The `Location` property is used for the location.
*/
titleLocation?: AxisLabelsLocation | string;
/**
* Gets or sets the visibility of the {0}.
*
* The `Visibility` property is used for the visibility of the axis.
*/
titleVisibility?: Visibility | string;
/**
* Gets or sets whether the first label is displayed when the zoom level is set to 1.
*
* The `ShowFirstLabel` is used to check whether the first label is displayed when the zoom level is set to 1.
*/
titleShowFirstLabel?: boolean | string;
/**
* Gets or sets the angle of the {0}.
*
* The `Angle` property is used to set the angle of