igniteui-react-charts
Version:
Ignite UI React charting components for building rich data visualizations using TypeScript APIs.
1,795 lines (1,790 loc) • 68.7 kB
TypeScript
import { HorizontalAlignment } from "igniteui-react-core";
import { VerticalAlignment } from "igniteui-react-core";
import { Visibility } from "igniteui-react-core";
import { YAxisLabelLocation } from "./YAxisLabelLocation";
import { XAxisLabelLocation } from "./XAxisLabelLocation";
import { IgrDomainChart, IIgrDomainChartProps } from "./igr-domain-chart";
import { XYChart } from "./XYChart";
/**
* Represents a base class for domain charts with X/Y axes
*/
export declare abstract class IgrXYChart<P extends IIgrXYChartProps = IIgrXYChartProps> extends IgrDomainChart<P> {
/**
* @hidden
*/
get i(): XYChart;
constructor(props: P);
/**
* Gets or sets function which takes an context object and returns a formatted label for the X-axis.
*
* To customize the text of the x-axis label, set `XAxisFormatLabel` to a single-parameter function. The argument passed to that function will be your data item.
*
* ```ts
* formatX(item: any): string {
* return "[ " + item.label + "! ]";
* }
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisFormatLabel="formatX"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get xAxisFormatLabel(): (item: any) => string;
set xAxisFormatLabel(v: (item: any) => string);
/**
* Gets or sets function which takes a context object and returns a formatted label for the Y-axis.
*
* To customize the text of the y-axis label, set `YAxisFormatLabel` to a single-parameter function. The argument passed to that function will be the numeric value corresponding to a position on the y-axis.
*
* ```ts
* formatY(value: any): string {
* return "[ " + value+ "! ]";
* }
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisFormatLabel="formatY"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get yAxisFormatLabel(): (item: any) => string;
set yAxisFormatLabel(v: (item: any) => string);
/**
* Gets or sets the left margin of labels on the X-axis
*
* Use the `XAxisLabelLeftMargin` property to apply a margin left of the x-axis labels.
*
* ```ts
* this.chart.xAxisLabelLeftMargin ="100";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisLabelLeftMargin={100}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get xAxisLabelLeftMargin(): number;
set xAxisLabelLeftMargin(v: number);
/**
* Gets or sets the top margin of labels on the X-axis
*
* Use the `XAxisLabelTopMargin` property to apply a margin above the x-axis labels.
*
* ```ts
* this.chart.xAxisTitleTopMargin="250";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisTitleTopMargin ={250}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get xAxisLabelTopMargin(): number;
set xAxisLabelTopMargin(v: number);
/**
* Gets or sets the right margin of labels on the X-axis
*
* Use the `XAxisLabelRightMargin` property to apply a margin right of the x-axis labels.
*
* ```ts
* this.chart.xAxisLabelRightMargin="100";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisLabelRightMargin={250}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get xAxisLabelRightMargin(): number;
set xAxisLabelRightMargin(v: number);
/**
* Gets or sets the bottom margin of labels on the X-axis
*
* Use the `XAxisLabelBottomMargin` property to apply a margin below the x-axis labels.
*
* ```ts
* this.chart.xAxisLabelBottomMargin ="100";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisLabelBottomMargin={100}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get xAxisLabelBottomMargin(): number;
set xAxisLabelBottomMargin(v: number);
/**
* Gets or sets the left margin of labels on the Y-axis
*
* Use the `YAxisLabelLeftMargin` property to apply a margin left of the y-axis labels.
*
* ```ts
* this.chart. yAxisLabelLeftMargin="250";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisLabelLeftMargin={250}
* dataSource={this.state.data} >
* </IgrCategoryChart>
* ```
*/
get yAxisLabelLeftMargin(): number;
set yAxisLabelLeftMargin(v: number);
/**
* Gets or sets the top margin of labels on the Y-axis
*
* Use the `YAxisLabelTopMargin` property to apply a margin above the y-axis labels.
*
* ```ts
* this.chart.yAxisLabelTopMargin="250";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisLabelTopMargin ={250}
* dataSource={this.state.data} >
* </IgrCategoryChart>
* ```
*/
get yAxisLabelTopMargin(): number;
set yAxisLabelTopMargin(v: number);
/**
* Gets or sets the right margin of labels on the Y-axis
*
* Use the `YAxisLabelRightMargin` property to apply a margin right of the y-axis labels.
*
* ```ts
* this.chart.yAxisLabelRightMargin="250";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisLabelRightMargin={250}
* dataSource={this.state.data} >
* </IgrCategoryChart>
* ```
*/
get yAxisLabelRightMargin(): number;
set yAxisLabelRightMargin(v: number);
/**
* Gets or sets the bottom margin of labels on the Y-axis
*
* Use the `YAxisLabelBottomMargin` property to apply a margin below the y-axis labels.
*
* ```ts
* this.chart.yAxisLabelBottomMargin="250";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisLabelBottomMargin={250}
* dataSource={this.state.data} >
* </IgrCategoryChart>
* ```
*/
get yAxisLabelBottomMargin(): number;
set yAxisLabelBottomMargin(v: number);
/**
* Gets or sets color of labels on the X-axis
*
* To change the color of x-axis labels, set the `XAxisLabelTextColor` property to a color string.
*
* ```ts
* this.chart.xAxisLabelTextColor="green";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisLabelTextColor="green"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get xAxisLabelTextColor(): string;
set xAxisLabelTextColor(v: string);
/**
* Gets or sets color of labels on the Y-axis
*
* To change the color of y-axis labels, set the `YAxisLabelTextColor` property to a color string.
*
* ```ts
* this.chart.yAxisLabelTextColor="green";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisLabelTextColor="green"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get yAxisLabelTextColor(): string;
set yAxisLabelTextColor(v: string);
/**
* Gets the actual color of labels on the X-axis
*/
get actualXAxisLabelTextColor(): string;
set actualXAxisLabelTextColor(v: string);
/**
* Gets the actual color of labels on the Y-axis
*/
get actualYAxisLabelTextColor(): string;
set actualYAxisLabelTextColor(v: string);
/**
* Gets or sets the margin around a title on the X-axis
*
* Use the `XAxisTitleMargin` property to set a margin around the y-axis title.
*/
get xAxisTitleMargin(): number;
set xAxisTitleMargin(v: number);
/**
* Gets or sets the margin around a title on the Y-axis
*
* Use the `YAxisTitleMargin` property to set a margin around the y-axis title.
*/
get yAxisTitleMargin(): number;
set yAxisTitleMargin(v: number);
/**
* Gets or sets the left margin of a title on the X-axis
*
* Use the `XAxisTitleLeftMargin` property to apply a margin left of the x-axis title.
*
* ```ts
* this.chart.xAxisTitleLeftMargin="150";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisTitleLeftMargin={150}
* dataSource={this.state.data}>
* </IgrCategoryChart>
* ```
*/
get xAxisTitleLeftMargin(): number;
set xAxisTitleLeftMargin(v: number);
/**
* Gets or sets the left margin of a title on the Y-axis
*
* Use the `YAxisTitleLeftMargin` property to apply a margin left of the y-axis title.
*
* ```ts
* this.chart.yAxisTitleLeftMargin="150";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisTitleLeftMargin={150}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get yAxisTitleLeftMargin(): number;
set yAxisTitleLeftMargin(v: number);
/**
* Gets or sets the top margin of a title on the X-axis
*
* Use the `XAxisTitleTopMargin` property to apply a margin above the x-axis title.
*
* ```ts
* this.chart.xAxisTitleTopMargin="150";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisTitleTopMargin ={150}
* dataSource={this.state.data} >
* </IgrCategoryChart>
* ```
*/
get xAxisTitleTopMargin(): number;
set xAxisTitleTopMargin(v: number);
/**
* Gets or sets the top margin of a title on the Y-axis
*
* Use the `YAxisTitleTopMargin` property to apply a margin above the y-axis title.
*
* ```ts
* this.chart.yAxisTitleTopMargin="150";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisTitleTopMargin ={150}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get yAxisTitleTopMargin(): number;
set yAxisTitleTopMargin(v: number);
/**
* Gets or sets the right margin of a title on the X-axis
*
* Use the `XAxisTitleRightMargin` property to apply a margin right of the x-axis title.
*
* ```ts
* this.chart.xAxisTitleRightMargin="100";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisTitleRightMargin="100"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get xAxisTitleRightMargin(): number;
set xAxisTitleRightMargin(v: number);
/**
* Gets or sets the right margin of a title on the Y-axis
*
* Use the `YAxisTitleRightMargin` property to apply a margin right of the y-axis title.
*
* ```ts
* this.chart.yAxisTitleRightMargin="150";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisTitleRightMargin={150}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get yAxisTitleRightMargin(): number;
set yAxisTitleRightMargin(v: number);
/**
* Gets or sets the bottom margin of a title on the X-axis
*
* Use the `XAxisTitleBottomMargin` property to apply a margin below the x-axis title.
*
* ```ts
* this.chart.xAxisTitleBottomMargin="150";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisTitleBottomMargin={250}
* dataSource={this.state.data}>
* </IgrCategoryChart>
* ```
*/
get xAxisTitleBottomMargin(): number;
set xAxisTitleBottomMargin(v: number);
/**
* Gets or sets the bottom margin of a title on the Y-axis
*
* Use the `YAxisTitleBottomMargin` property to apply a margin below the y-axis title.
*
* ```ts
* this.chart.yAxisTitleBottomMargin="150";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisTitleBottomMargin ={150}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get yAxisTitleBottomMargin(): number;
set yAxisTitleBottomMargin(v: number);
/**
* Gets or sets color of title on the X-axis
*
* To change the color of the x-axis title, set the `XAxisTitleTextColor` property to a color string.
*
* ```ts
* this.chart.xAxisTitleTextColor="green";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisTitleTextColor="green"
* dataSource={this.state.data} >
* </IgrCategoryChart>
* ```
*/
get xAxisTitleTextColor(): string;
set xAxisTitleTextColor(v: string);
/**
* Gets or sets color of title on the Y-axis
*
* To change the color of the y-axis title, set the `YAxisTitleTextColor` property to a color string.
*
* ```ts
* this.chart.yAxisTitleTextColor="green";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisTitleTextColor="green"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get yAxisTitleTextColor(): string;
set yAxisTitleTextColor(v: string);
/**
* Gets or sets CSS font property for labels on X-axis
*
* To change the font of x-axis labels, set the `XAxisLabelTextStyle` property.
*
* ```ts
* this.chart.xAxisLabelTextStyle="italic 15px arial, sans-serif";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisLabelTextStyle="italic 15px arial, sans-serif"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get xAxisLabelTextStyle(): string;
set xAxisLabelTextStyle(v: string);
/**
* Gets or sets CSS font property for labels on Y-axis
*
* To change the font of x-axis labels, set the `YAxisLabelTextStyle` property.
*
* ```ts
* this.chart. yAxisLabelTextStyle="italic 15px arial, sans-serif";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisLabelTextStyle="italic 15px arial, sans-serif"
* dataSource={this.state.data}>
* </IgrCategoryChart>
* ```
*/
get yAxisLabelTextStyle(): string;
set yAxisLabelTextStyle(v: string);
/**
* Gets or sets CSS font property for title on X-axis
*
* To change the font of the x-axis title, set the `XAxisTitleTextStyle` property.
*
* ```ts
* this.chart.xAxisTitleTextStyle="italic 15px arial, sans-serif";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisTitleTextStyle="italic 15px arial, sans-serif"
* dataSource={this.state.data}>
* </IgrCategoryChart>
* ```
*/
get xAxisTitleTextStyle(): string;
set xAxisTitleTextStyle(v: string);
/**
* Gets or sets CSS font property for title on Y-axis
*
* To change the font of the x-axis title, set the `YAxisTitleTextStyle` property.
*
* ```ts
* this.chart.yAxisTitleTextStyle="italic 15px arial, sans-serif";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisTitleTextStyle="italic 15px arial, sans-serif"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get yAxisTitleTextStyle(): string;
set yAxisTitleTextStyle(v: string);
/**
* Gets or sets the format for labels along the X-axis.
*/
get xAxisLabel(): any;
set xAxisLabel(v: any);
/**
* Gets or sets the property or string from which the labels are derived.
*/
get yAxisLabel(): any;
set yAxisLabel(v: any);
/**
* Gets or sets the color to apply to major gridlines along the X-axis.
*
* Set `XAxisMajorStroke` to control the color of major gridlines extending vertically from the x-axis.
*
* ```ts
* this.chart.xAxisMajorStroke="green";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisMajorStroke="green"
* dataSource={this.state.data} >
* </IgrCategoryChart>
* ```
*/
get xAxisMajorStroke(): string;
set xAxisMajorStroke(v: string);
/**
* Gets or sets the color to apply to major gridlines along the Y-axis.
*
* Set `YAxisMajorStroke` to control the color of major gridlines extending horizontally from the y-axis.
*
* ```ts
* this.chart.yAxisMajorStroke="green";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisMajorStroke="green"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get yAxisMajorStroke(): string;
set yAxisMajorStroke(v: string);
/**
* Gets or sets the thickness to apply to major gridlines along the X-axis.
*
* Set `XAxisMajorStrokeThickness` to control the thickness of major gridlines extending vertically from the x-axis.
*
* ```ts
* this.chart.xAxisMajorStrokeThickness="3" ;
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisMajorStrokeThickness="3"
* xAxisExtent ={250}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get xAxisMajorStrokeThickness(): number;
set xAxisMajorStrokeThickness(v: number);
/**
* Gets or sets the thickness to apply to major gridlines along the Y-axis.
*
* Set `YAxisMajorStrokeThickness` to control the thickness of major gridlines extending horizontally from the y-axis.
*
* ```ts
* this.chart.yAxisMajorStrokeThickness="2";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisMajorStrokeThickness={2}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get yAxisMajorStrokeThickness(): number;
set yAxisMajorStrokeThickness(v: number);
/**
* Gets or sets the thickness to apply to minor gridlines along the X-axis.
*
* Set `XAxisMinorStrokeThickness` to control the thickness of minor gridlines extending vertically from the x-axis.
*
* ```ts
* this.chart.xAxisMinorStrokeThickness="3";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisMinorStrokeThickness="3"
* dataSource={this.state.data} >
* </IgrCategoryChart>
* ```
*/
get xAxisMinorStrokeThickness(): number;
set xAxisMinorStrokeThickness(v: number);
/**
* Gets or sets the thickness to apply to minor gridlines along the Y-axis.
*
* Set `YAxisMinorStrokeThickness` to control the thickness of minor gridlines extending horizontally from the y-axis.
*
* ```ts
* this.chart.yAxisMinorStrokeThickness="3";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisMinorStrokeThickness={3}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get yAxisMinorStrokeThickness(): number;
set yAxisMinorStrokeThickness(v: number);
/**
* Gets or sets the color to apply to stripes along the X-axis.
*
* Set `XAxisStrip` to control the alternating color of stripes extending vertically from the x-axis.
*
* ```ts
* this.chart.xAxisStrip="green";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisStrip="green"
* dataSource={this.state.data} >
* </IgrCategoryChart>
* ```
*/
get xAxisStrip(): string;
set xAxisStrip(v: string);
/**
* Gets or sets the color to apply to stripes along the Y-axis.
*
* Set `YAxisStrip` to control the alternating color of stripes extending horizontally from the y-axis.
*
* ```ts
* this.chart.yAxisStrip="green";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisStrip="green"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get yAxisStrip(): string;
set yAxisStrip(v: string);
/**
* Gets or sets the color to apply to the X-axis line.
*
* Set `XAxisStroke` to control the color of the x-axis line.
*
* ```ts
* this.chart.xAxisStroke="green"";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisStroke="green"
* dataSource={this.state.data}>
* </IgrCategoryChart>
* ```
*/
get xAxisStroke(): string;
set xAxisStroke(v: string);
/**
* Gets or sets the color to apply to the Y-axis line.
*
* Set `YAxisStroke` to control the color of the y-axis line.
*
* ```ts
* this.chart.yAxisStroke="green";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisStroke="green"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get yAxisStroke(): string;
set yAxisStroke(v: string);
/**
* Gets or sets the thickness to apply to the X-axis line.
*
* Set `XAxisStrokeThickness` to control the thickness of the x-axis line.
*
* ```ts
* this.chart.xAxisStrokeThickness="2";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisStrokeThickness={2}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get xAxisStrokeThickness(): number;
set xAxisStrokeThickness(v: number);
/**
* Gets or sets the thickness to apply to the Y-axis line.
*
* Set `YAxisStrokeThickness` to control the thickness of the y-axis line.
*
* ```ts
* this.chart. yAxisStrokeThickness="2";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisStrokeThickness={2}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get yAxisStrokeThickness(): number;
set yAxisStrokeThickness(v: number);
/**
* Gets or sets the length of tickmarks along the X-axis.
*
* Set `XAxisTickLength` to control the length of tickmarks extending vertically from the x-axis line.
*
* ```ts
* this.chart.xAxisTickLength="25";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisTickLength ={25}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get xAxisTickLength(): number;
set xAxisTickLength(v: number);
/**
* Gets or sets the length of tickmarks along the Y-axis.
*
* Set `YAxisTickLength` to control the length of tickmarks extending horizontally from the y-axis line.
*
* ```ts
* this.chart.yAxisTickLength="25";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisTickLength ={25}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get yAxisTickLength(): number;
set yAxisTickLength(v: number);
/**
* Gets or sets the color to apply to tickmarks along the X-axis.
*
* Set `XAxisTickStroke` to control the color of tickmarks extending vertically from the x-axis line.
*
* ```ts
* this.chart. xAxisTickStroke="green";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisTickStroke="green"
* dataSource={this.state.data}>
* </IgrCategoryChart>
* ```
*/
get xAxisTickStroke(): string;
set xAxisTickStroke(v: string);
/**
* Gets or sets the color to apply to tickmarks along the Y-axis.
*
* Set `YAxisTickStroke` to control the color of tickmarks extending horizontally from the y-axis line.
*
* ```ts
* this.chart.yAxisTickStroke="green";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisTickStroke="green"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get yAxisTickStroke(): string;
set yAxisTickStroke(v: string);
/**
* Gets or sets the thickness to apply to tickmarks along the X-axis.
*
* Set `XAxisTickStrokeThickness` to control the thickness of tickmarks extending vertically from the x-axis line.
*
* ```ts
* this.chart.xAxisTickStrokeThickness="20";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisTickStrokeThickness={20}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get xAxisTickStrokeThickness(): number;
set xAxisTickStrokeThickness(v: number);
/**
* Gets or sets the thickness to apply to tickmarks along the Y-axis.
*
* Set `YAxisTickStrokeThickness` to control the thickness of tickmarks extending vertically from the y-axis line.
*
* ```ts
* this.chart.yAxisTickStrokeThickness="25";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisTickStrokeThickness ={25}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get yAxisTickStrokeThickness(): number;
set yAxisTickStrokeThickness(v: number);
/**
* Gets or sets the Text to display below the X-axis.
*
* Set `XAxisTitle` to display a label adjacent to the x-axis.
*
* ```ts
* this.chart. xAxisTitle="x axis";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisTitle="x axis"
* dataSource={this.state.data} >
* </IgrCategoryChart>
* ```
*/
get xAxisTitle(): string;
set xAxisTitle(v: string);
/**
* Gets or sets the Text to display to the left of the Y-axis.
*
* Set `YAxisTitle` to display a label adjacent to the y-axis.
*
* ```ts
* this.chart.yAxisTitle="y axis";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisTitle="y axis"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get yAxisTitle(): string;
set yAxisTitle(v: string);
/**
* Gets or sets the color to apply to minor gridlines along the X-axis.
*
* Set `XAxisMinorStroke` to control the color of minor gridlines extending vertically from the x-axis.
*
* ```ts
* this.chart.xAxisExtent="250";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisMinorStroke="green"
* dataSource={this.state.data}>
* </IgrCategoryChart>
* ```
*/
get xAxisMinorStroke(): string;
set xAxisMinorStroke(v: string);
/**
* Gets or sets the color to apply to minor gridlines along the Y-axis.
*
* Set `YAxisMinorStroke` to control the color of minor gridlines extending horizontally from the y-axis.
*
* ```ts
* this.chart.yAxisMinorStroke="green";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisMinorStroke="green"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get yAxisMinorStroke(): string;
set yAxisMinorStroke(v: string);
/**
* Gets or sets the angle of rotation for labels along the X-axis.
*
* To control the rotation of labels on the x-axis, set the `XAxisLabelAngle` property to a number of rotational degrees.
*
* ```ts
* this.chart.xAxisLabelAngle="45";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisLabelAngle={45}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get xAxisLabelAngle(): number;
set xAxisLabelAngle(v: number);
/**
* Gets or sets the angle of rotation for labels along the Y-axis.
*
* To control the rotation of labels on the y-axis, set the `YAxisLabelAngle` property to a number of rotational degrees.
*
* ```ts
* this.chart.yAxisLabelAngle="25";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisLabelAngle ={25}
* dataSource={this.state.data} >
* </IgrCategoryChart>
* ```
*/
get yAxisLabelAngle(): number;
set yAxisLabelAngle(v: number);
/**
* Gets or sets the distance between the X-axis and the bottom of the chart.
*
* To allocate space between the x-axis and the edge of the chart, set the `XAxisExtent` property.
*
* ```ts
* this.chart.xAxisExtent="250";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisExtent ={250}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get xAxisExtent(): number;
set xAxisExtent(v: number);
/**
* Gets or sets the distance between the Y-axis and the left edge of the chart.
*
* To allocate space between the x-axis and the edge of the chart, set the `XAxisExtent` property.
*
* ```ts
* this.chart.xAxisExtent="250";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisExtent ={250}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get yAxisExtent(): number;
set yAxisExtent(v: number);
/**
* Gets or sets the distance between the X-axis and the bottom of the chart.
*/
get xAxisMaximumExtent(): number;
set xAxisMaximumExtent(v: number);
/**
* Gets or sets the distance between the Y-axis and the left edge of the chart.
*/
get yAxisMaximumExtent(): number;
set yAxisMaximumExtent(v: number);
/**
* Gets or sets the distance between the X-axis and the bottom of the chart.
*/
get xAxisMaximumExtentPercentage(): number;
set xAxisMaximumExtentPercentage(v: number);
/**
* Gets or sets the distance between the Y-axis and the left edge of the chart.
*/
get yAxisMaximumExtentPercentage(): number;
set yAxisMaximumExtentPercentage(v: number);
/**
* Gets or sets the angle of rotation for the X-axis title.
*
* Set `XAxisTitleAngle` to control the rotation of the x-axis title.
*
* ```ts
* this.chart.xAxisTitleAngle="50";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisTitleAngle ={50}
* dataSource={this.state.data}>
* </IgrCategoryChart>
* ```
*/
get xAxisTitleAngle(): number;
set xAxisTitleAngle(v: number);
/**
* Gets or sets the angle of rotation for the Y-axis title.
*
* Set `YAxisTitleAngle` to control the rotation of the y-axis title.
*
* ```ts
* this.chart.yAxisTitleAngle="25";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisTitleAngle ={24}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get yAxisTitleAngle(): number;
set yAxisTitleAngle(v: number);
/**
* Gets or sets whether to invert the direction of the X-axis by placing the first data items on the right side of the chart.
*
* To reverse the direction of items along the x-axis, set the `XAxisInverted` property to true.
*
* ```ts
* this.chart.XAxisInverted="True";
* ```
*
* ```ts
* <IgrCategoryChart
* XAxisInverted="True"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get xAxisInverted(): boolean;
set xAxisInverted(v: boolean);
/**
* Gets or sets whether to invert the direction of the Y-axis by placing the minimum numeric value at the top of the chart.
*
* You can use `YAxisInverted` to invert the scale of the y axis like this:
*
* ```ts
* this.chart.yAxisInverted="true";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisInverted="true"
* dataSource={this.state.data}>
* </IgrCategoryChart>
* ```
*
* The default value of `YAxisInverted` is false.
*/
get yAxisInverted(): boolean;
set yAxisInverted(v: boolean);
/**
* Gets or sets Horizontal alignment of the X-axis title.
*
* Set `XAxisTitleAlignment` to control the horizontal alignment of the x-axis title.
*
* ```ts
* this.chart.xAxisTitleAlignment="right";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisTitleAlignment="right"
* dataSource={this.state.data}>
* </IgrCategoryChart>
* ```
*/
get xAxisTitleAlignment(): HorizontalAlignment;
set xAxisTitleAlignment(v: HorizontalAlignment);
/**
* Gets or sets Vertical alignment of the Y-axis title.
*
* Set `YAxisTitleAlignment` to control the vertical alignment of the x-axis title.
*
* ```ts
* this.chart.yAxisTitleAlignment="bottom";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisTitleAlignment="bottom"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get yAxisTitleAlignment(): VerticalAlignment;
set yAxisTitleAlignment(v: VerticalAlignment);
/**
* Gets or sets Horizontal alignment of X-axis labels.
*/
get xAxisLabelHorizontalAlignment(): HorizontalAlignment;
set xAxisLabelHorizontalAlignment(v: HorizontalAlignment);
/**
* Gets or sets Horizontal alignment of Y-axis labels.
*
* Set the `YAxisLabelHorizontalAlignment` property to change the horizontal alignment of y-axis labels.
*/
get yAxisLabelHorizontalAlignment(): HorizontalAlignment;
set yAxisLabelHorizontalAlignment(v: HorizontalAlignment);
/**
* Gets or sets Vertical alignment of X-axis labels.
*
* Use the `XAxisLabelVerticalAlignment` property to change the vertical position of x-axis labels.
*
* ```ts
* this.chart.xAxisLabelVerticalAlignment="bottom";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisLabelVerticalAlignment="bottom"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get xAxisLabelVerticalAlignment(): VerticalAlignment;
set xAxisLabelVerticalAlignment(v: VerticalAlignment);
/**
* Gets or sets Vertical alignment of Y-axis labels.
*/
get yAxisLabelVerticalAlignment(): VerticalAlignment;
set yAxisLabelVerticalAlignment(v: VerticalAlignment);
/**
* Gets or sets Visibility of X-axis labels.
*
* To hide the x-axis labels, set `XAxisLabelVisibility` to collapsed.
*
* ```ts
* this.chart.xAxisLabelVisibility="collapsed";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisLabelVisibility="collapsed"
* dataSource={this.state.data}>
* </IgrCategoryChart>
* ```
*/
get xAxisLabelVisibility(): Visibility;
set xAxisLabelVisibility(v: Visibility);
/**
* Gets or sets Visibility of Y-axis labels.
*
* To hide the y-axis labels, set `YAxisLabelVisibility` to collapsed.
*
* ```ts
* this.chart.yAxisLabelVisibility="collapsed"";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisLabelVisibility="collapsed"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
get yAxisLabelVisibility(): Visibility;
set yAxisLabelVisibility(v: Visibility);
/**
* Gets or sets location of Y-axis labels, relative to the plot area.
*
* Set the `YAxisLabelLocation` property to change the location of the y-axis and its labels.
*
* ```ts
* this.chart.yAxisLabelLocation="outsideRight";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisLabelLocation="outsideRight"
* dataSource={this.state.data} >
* </IgrCategoryChart>
* ```
*/
get yAxisLabelLocation(): YAxisLabelLocation;
set yAxisLabelLocation(v: YAxisLabelLocation);
/**
* Gets or sets location of X-axis labels, relative to the plot area.
*/
get xAxisLabelLocation(): XAxisLabelLocation;
set xAxisLabelLocation(v: XAxisLabelLocation);
/**
* Gets or sets the format string for the X axis label.
*/
get xAxisLabelFormat(): string;
set xAxisLabelFormat(v: string);
/**
* Gets or sets the format specifiers to use with the XAxisLabelFormat string.
*/
get xAxisLabelFormatSpecifiers(): any[];
set xAxisLabelFormatSpecifiers(v: any[]);
/**
* Gets or sets the format string for the Y axis label.
*/
get yAxisLabelFormat(): string;
set yAxisLabelFormat(v: string);
/**
* Gets or sets the format specifiers to use with the YAxisLabelFormat string.
*/
get yAxisLabelFormatSpecifiers(): any[];
set yAxisLabelFormatSpecifiers(v: any[]);
findByName(name: string): any;
/**
* Called by the UI framework to provide a UI container for rendering this control.
* @param container * The UI container element.
*/
provideContainer(container: any): void;
/**
* Converts the given visual location to a data value.
* @param unscaledValue * The x-coordinate of the location to scale.
*/
getScaledValueX(unscaledValue: number): number;
/**
* Converts the given data value to a visual location.
* @param scaledValue * The data value to un-scale.
*/
getUnscaledValueX(scaledValue: number): number;
/**
* Converts the given visual location to a data value.
* @param unscaledValue * The y-coordinate of the location to scale.
*/
getScaledValueY(unscaledValue: number): number;
/**
* Converts the given data value to a visual location.
* @param scaledValue * The data value to un-scale.
*/
getUnscaledValueY(scaledValue: number): number;
}
export interface IIgrXYChartProps extends IIgrDomainChartProps {
/**
* Gets or sets function which takes an context object and returns a formatted label for the X-axis.
*
* To customize the text of the x-axis label, set `XAxisFormatLabel` to a single-parameter function. The argument passed to that function will be your data item.
*
* ```ts
* formatX(item: any): string {
* return "[ " + item.label + "! ]";
* }
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisFormatLabel="formatX"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
xAxisFormatLabel?: (item: any) => string;
/**
* Gets or sets function which takes a context object and returns a formatted label for the Y-axis.
*
* To customize the text of the y-axis label, set `YAxisFormatLabel` to a single-parameter function. The argument passed to that function will be the numeric value corresponding to a position on the y-axis.
*
* ```ts
* formatY(value: any): string {
* return "[ " + value+ "! ]";
* }
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisFormatLabel="formatY"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
yAxisFormatLabel?: (item: any) => string;
/**
* Gets or sets the left margin of labels on the X-axis
*
* Use the `XAxisLabelLeftMargin` property to apply a margin left of the x-axis labels.
*
* ```ts
* this.chart.xAxisLabelLeftMargin ="100";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisLabelLeftMargin={100}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
xAxisLabelLeftMargin?: number | string;
/**
* Gets or sets the top margin of labels on the X-axis
*
* Use the `XAxisLabelTopMargin` property to apply a margin above the x-axis labels.
*
* ```ts
* this.chart.xAxisTitleTopMargin="250";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisTitleTopMargin ={250}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
xAxisLabelTopMargin?: number | string;
/**
* Gets or sets the right margin of labels on the X-axis
*
* Use the `XAxisLabelRightMargin` property to apply a margin right of the x-axis labels.
*
* ```ts
* this.chart.xAxisLabelRightMargin="100";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisLabelRightMargin={250}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
xAxisLabelRightMargin?: number | string;
/**
* Gets or sets the bottom margin of labels on the X-axis
*
* Use the `XAxisLabelBottomMargin` property to apply a margin below the x-axis labels.
*
* ```ts
* this.chart.xAxisLabelBottomMargin ="100";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisLabelBottomMargin={100}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
xAxisLabelBottomMargin?: number | string;
/**
* Gets or sets the left margin of labels on the Y-axis
*
* Use the `YAxisLabelLeftMargin` property to apply a margin left of the y-axis labels.
*
* ```ts
* this.chart. yAxisLabelLeftMargin="250";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisLabelLeftMargin={250}
* dataSource={this.state.data} >
* </IgrCategoryChart>
* ```
*/
yAxisLabelLeftMargin?: number | string;
/**
* Gets or sets the top margin of labels on the Y-axis
*
* Use the `YAxisLabelTopMargin` property to apply a margin above the y-axis labels.
*
* ```ts
* this.chart.yAxisLabelTopMargin="250";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisLabelTopMargin ={250}
* dataSource={this.state.data} >
* </IgrCategoryChart>
* ```
*/
yAxisLabelTopMargin?: number | string;
/**
* Gets or sets the right margin of labels on the Y-axis
*
* Use the `YAxisLabelRightMargin` property to apply a margin right of the y-axis labels.
*
* ```ts
* this.chart.yAxisLabelRightMargin="250";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisLabelRightMargin={250}
* dataSource={this.state.data} >
* </IgrCategoryChart>
* ```
*/
yAxisLabelRightMargin?: number | string;
/**
* Gets or sets the bottom margin of labels on the Y-axis
*
* Use the `YAxisLabelBottomMargin` property to apply a margin below the y-axis labels.
*
* ```ts
* this.chart.yAxisLabelBottomMargin="250";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisLabelBottomMargin={250}
* dataSource={this.state.data} >
* </IgrCategoryChart>
* ```
*/
yAxisLabelBottomMargin?: number | string;
/**
* Gets or sets color of labels on the X-axis
*
* To change the color of x-axis labels, set the `XAxisLabelTextColor` property to a color string.
*
* ```ts
* this.chart.xAxisLabelTextColor="green";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisLabelTextColor="green"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
xAxisLabelTextColor?: string;
/**
* Gets or sets color of labels on the Y-axis
*
* To change the color of y-axis labels, set the `YAxisLabelTextColor` property to a color string.
*
* ```ts
* this.chart.yAxisLabelTextColor="green";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisLabelTextColor="green"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
yAxisLabelTextColor?: string;
/**
* Gets the actual color of labels on the X-axis
*/
actualXAxisLabelTextColor?: string;
/**
* Gets the actual color of labels on the Y-axis
*/
actualYAxisLabelTextColor?: string;
/**
* Gets or sets the margin around a title on the X-axis
*
* Use the `XAxisTitleMargin` property to set a margin around the y-axis title.
*/
xAxisTitleMargin?: number | string;
/**
* Gets or sets the margin around a title on the Y-axis
*
* Use the `YAxisTitleMargin` property to set a margin around the y-axis title.
*/
yAxisTitleMargin?: number | string;
/**
* Gets or sets the left margin of a title on the X-axis
*
* Use the `XAxisTitleLeftMargin` property to apply a margin left of the x-axis title.
*
* ```ts
* this.chart.xAxisTitleLeftMargin="150";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisTitleLeftMargin={150}
* dataSource={this.state.data}>
* </IgrCategoryChart>
* ```
*/
xAxisTitleLeftMargin?: number | string;
/**
* Gets or sets the left margin of a title on the Y-axis
*
* Use the `YAxisTitleLeftMargin` property to apply a margin left of the y-axis title.
*
* ```ts
* this.chart.yAxisTitleLeftMargin="150";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisTitleLeftMargin={150}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
yAxisTitleLeftMargin?: number | string;
/**
* Gets or sets the top margin of a title on the X-axis
*
* Use the `XAxisTitleTopMargin` property to apply a margin above the x-axis title.
*
* ```ts
* this.chart.xAxisTitleTopMargin="150";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisTitleTopMargin ={150}
* dataSource={this.state.data} >
* </IgrCategoryChart>
* ```
*/
xAxisTitleTopMargin?: number | string;
/**
* Gets or sets the top margin of a title on the Y-axis
*
* Use the `YAxisTitleTopMargin` property to apply a margin above the y-axis title.
*
* ```ts
* this.chart.yAxisTitleTopMargin="150";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisTitleTopMargin ={150}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
yAxisTitleTopMargin?: number | string;
/**
* Gets or sets the right margin of a title on the X-axis
*
* Use the `XAxisTitleRightMargin` property to apply a margin right of the x-axis title.
*
* ```ts
* this.chart.xAxisTitleRightMargin="100";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisTitleRightMargin="100"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
xAxisTitleRightMargin?: number | string;
/**
* Gets or sets the right margin of a title on the Y-axis
*
* Use the `YAxisTitleRightMargin` property to apply a margin right of the y-axis title.
*
* ```ts
* this.chart.yAxisTitleRightMargin="150";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisTitleRightMargin={150}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
yAxisTitleRightMargin?: number | string;
/**
* Gets or sets the bottom margin of a title on the X-axis
*
* Use the `XAxisTitleBottomMargin` property to apply a margin below the x-axis title.
*
* ```ts
* this.chart.xAxisTitleBottomMargin="150";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisTitleBottomMargin={250}
* dataSource={this.state.data}>
* </IgrCategoryChart>
* ```
*/
xAxisTitleBottomMargin?: number | string;
/**
* Gets or sets the bottom margin of a title on the Y-axis
*
* Use the `YAxisTitleBottomMargin` property to apply a margin below the y-axis title.
*
* ```ts
* this.chart.yAxisTitleBottomMargin="150";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisTitleBottomMargin ={150}
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
yAxisTitleBottomMargin?: number | string;
/**
* Gets or sets color of title on the X-axis
*
* To change the color of the x-axis title, set the `XAxisTitleTextColor` property to a color string.
*
* ```ts
* this.chart.xAxisTitleTextColor="green";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisTitleTextColor="green"
* dataSource={this.state.data} >
* </IgrCategoryChart>
* ```
*/
xAxisTitleTextColor?: string;
/**
* Gets or sets color of title on the Y-axis
*
* To change the color of the y-axis title, set the `YAxisTitleTextColor` property to a color string.
*
* ```ts
* this.chart.yAxisTitleTextColor="green";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisTitleTextColor="green"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
yAxisTitleTextColor?: string;
/**
* Gets or sets CSS font property for labels on X-axis
*
* To change the font of x-axis labels, set the `XAxisLabelTextStyle` property.
*
* ```ts
* this.chart.xAxisLabelTextStyle="italic 15px arial, sans-serif";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisLabelTextStyle="italic 15px arial, sans-serif"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
xAxisLabelTextStyle?: string;
/**
* Gets or sets CSS font property for labels on Y-axis
*
* To change the font of x-axis labels, set the `YAxisLabelTextStyle` property.
*
* ```ts
* this.chart. yAxisLabelTextStyle="italic 15px arial, sans-serif";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisLabelTextStyle="italic 15px arial, sans-serif"
* dataSource={this.state.data}>
* </IgrCategoryChart>
* ```
*/
yAxisLabelTextStyle?: string;
/**
* Gets or sets CSS font property for title on X-axis
*
* To change the font of the x-axis title, set the `XAxisTitleTextStyle` property.
*
* ```ts
* this.chart.xAxisTitleTextStyle="italic 15px arial, sans-serif";
* ```
*
* ```ts
* <IgrCategoryChart
* xAxisTitleTextStyle="italic 15px arial, sans-serif"
* dataSource={this.state.data}>
* </IgrCategoryChart>
* ```
*/
xAxisTitleTextStyle?: string;
/**
* Gets or sets CSS font property for title on Y-axis
*
* To change the font of the x-axis title, set the `YAxisTitleTextStyle` property.
*
* ```ts
* this.chart.yAxisTitleTextStyle="italic 15px arial, sans-serif";
* ```
*
* ```ts
* <IgrCategoryChart
* yAxisTitleTextStyle="italic 15px arial, sans-serif"
* dataSource={this.state.data}
* chartType="stepArea" >
* </IgrCategoryChart>
* ```
*/
yAxisTitleTextStyle?: string;
/**
* Gets or sets the format for labels along the X-axis.
*/
xAxisLabel?: any;
/**
* Gets or