igniteui-angular-charts

import { HorizontalAlignment } from "igniteui-angular-core"; import { VerticalAlignment } from "igniteui-angular-core"; import { Visibility } from "igniteui-angular-core"; import { YAxisLabelLocation } from "./YAxisLabelLocation"; import { XAxisLabelLocation } from "./XAxisLabelLocation"; import { IgxDomainChartComponent } from "./igx-domain-chart-component"; import { XYChart } from "./XYChart"; import * as i0 from "@angular/core"; /** * Represents a base class for domain charts with X/Y axes */ export declare abstract class IgxXYChartComponent extends IgxDomainChartComponent { /** * @hidden */ get i(): XYChart; constructor(); /** * 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. * * ```html * <igx-category-chart * [dataSource]="data" * [xAxisFormatLabel]="formatX" * xAxisExtent="250"> * </igx-category-chart> * ``` * * ```ts * formatX(item: any): string { * return "[ " + item.label + "! ]"; * } * ``` */ 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. * * ```html * <igx-category-chart * [dataSource]="data" * [yAxisFormatLabel]="formatY"> * </igx-category-chart> * ``` * * ```ts * formatY(value: any): string { * return "[ " + value+ "! ]"; * } * ``` */ 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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisLabelLeftMargin="100"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisLabelLeftMargin ="100"; * ``` */ get xAxisLabelLeftMargin(): number; set xAxisLabelLeftMargin(v: number); static ngAcceptInputType_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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisTitle="x axis" * xAxisTitleTopMargin="100"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisTitleTopMargin="250"; * ``` */ get xAxisLabelTopMargin(): number; set xAxisLabelTopMargin(v: number); static ngAcceptInputType_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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisLabelRightMargin="100"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisLabelRightMargin="100"; * ``` */ get xAxisLabelRightMargin(): number; set xAxisLabelRightMargin(v: number); static ngAcceptInputType_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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisLabelBottomMargin="100"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisLabelBottomMargin ="100"; * ``` */ get xAxisLabelBottomMargin(): number; set xAxisLabelBottomMargin(v: number); static ngAcceptInputType_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. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisLabelLeftMargin="100"> * </igx-category-chart> * ``` * * ```ts * this.chart. yAxisLabelLeftMargin="250"; * ``` */ get yAxisLabelLeftMargin(): number; set yAxisLabelLeftMargin(v: number); static ngAcceptInputType_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. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisLabelTopMargin="100"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisLabelTopMargin="250"; * ``` */ get yAxisLabelTopMargin(): number; set yAxisLabelTopMargin(v: number); static ngAcceptInputType_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. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisLabelRightMargin="100"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisLabelRightMargin="250"; * ``` */ get yAxisLabelRightMargin(): number; set yAxisLabelRightMargin(v: number); static ngAcceptInputType_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. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisLabelBottomMargin="100"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisLabelBottomMargin="250"; * ``` */ get yAxisLabelBottomMargin(): number; set yAxisLabelBottomMargin(v: number); static ngAcceptInputType_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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisLabelTextColor="green"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisLabelTextColor="green"; * ``` */ 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. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisLabelTextColor="green"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisLabelTextColor="green"; * ``` */ 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); static ngAcceptInputType_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. */ get yAxisTitleMargin(): number; set yAxisTitleMargin(v: number); static ngAcceptInputType_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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisTitle="x axis" * xAxisTitleAlignment="left" * xAxisTitleLeftMargin="100"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisTitleLeftMargin="150"; * ``` */ get xAxisTitleLeftMargin(): number; set xAxisTitleLeftMargin(v: number); static ngAcceptInputType_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. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisTitle="y axis" * yAxisTitleLeftMargin="100"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisTitleLeftMargin="150"; * ``` */ get yAxisTitleLeftMargin(): number; set yAxisTitleLeftMargin(v: number); static ngAcceptInputType_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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisTitle="x axis" * xAxisTitleTopMargin="100"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisTitleTopMargin="150"; * ``` */ get xAxisTitleTopMargin(): number; set xAxisTitleTopMargin(v: number); static ngAcceptInputType_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. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisTitle="y axis" * yAxisTitleAlignment="top" * yAxisTitleTopMargin="100"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisTitleTopMargin="150"; * ``` */ get yAxisTitleTopMargin(): number; set yAxisTitleTopMargin(v: number); static ngAcceptInputType_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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisTitle="x axis" * xAxisTitleAlignment="right" * xAxisTitleRightMargin="100"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisTitleRightMargin="100"; * ``` */ get xAxisTitleRightMargin(): number; set xAxisTitleRightMargin(v: number); static ngAcceptInputType_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. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisTitle="y axis" * yAxisTitleRightMargin="100"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisTitleRightMargin="150"; * ``` */ get yAxisTitleRightMargin(): number; set yAxisTitleRightMargin(v: number); static ngAcceptInputType_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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisTitle="x axis" * xAxisTitleBottomMargin="100"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisTitleBottomMargin="150"; * ``` */ get xAxisTitleBottomMargin(): number; set xAxisTitleBottomMargin(v: number); static ngAcceptInputType_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. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisTitle="y axis" * yAxisTitleAlignment="bottom" * yAxisTitleBottomMargin="100"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisTitleBottomMargin="150"; * ``` */ get yAxisTitleBottomMargin(): number; set yAxisTitleBottomMargin(v: number); static ngAcceptInputType_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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisTitle="x axis" * xAxisTitleTextColor="green"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisTitleTextColor="green"; * ``` */ 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. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisTitle="y axis" * yAxisTitleTextColor="green"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisTitleTextColor="green"; * ``` */ 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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisLabelTextStyle="italic 15px arial, sans-serif"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisLabelTextStyle="italic 15px arial, sans-serif"; * ``` */ 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. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisLabelTextStyle="italic 15px arial, sans-serif"> * </igx-category-chart> * ``` * * ```ts * this.chart. yAxisLabelTextStyle="italic 15px arial, sans-serif"; * ``` */ 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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisTitle="x axis" * xAxisTitleTextStyle="italic 15px arial, sans-serif"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisTitleTextStyle="italic 15px arial, sans-serif"; * ``` */ 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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisTitle="y axis" * yAxisTitleTextStyle="italic 15px arial, sans-serif"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisTitleTextStyle="italic 15px arial, sans-serif"; * ``` */ 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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisMajorStroke="green"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisMajorStroke="green"; * ``` */ 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. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisMajorStroke="green"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisMajorStroke="green"; * ``` */ 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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisMajorStroke="green" * xAxisMajorStrokeThickness="3"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisMajorStrokeThickness="3" ; * ``` */ get xAxisMajorStrokeThickness(): number; set xAxisMajorStrokeThickness(v: number); static ngAcceptInputType_xAxisMajorStrokeThickness: number | string; /** * 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. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisMajorStrokeThickness="3"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisMajorStrokeThickness="2"; * ``` */ get yAxisMajorStrokeThickness(): number; set yAxisMajorStrokeThickness(v: number); static ngAcceptInputType_yAxisMajorStrokeThickness: number | string; /** * 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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisMinorStroke="green" * xAxisMinorStrokeThickness="3"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisMinorStrokeThickness="3"; * ``` */ get xAxisMinorStrokeThickness(): number; set xAxisMinorStrokeThickness(v: number); static ngAcceptInputType_xAxisMinorStrokeThickness: number | string; /** * 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. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisMinorStroke="green" * yAxisMinorStrokeThickness="3"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisMinorStrokeThickness="3"; * ``` */ get yAxisMinorStrokeThickness(): number; set yAxisMinorStrokeThickness(v: number); static ngAcceptInputType_yAxisMinorStrokeThickness: number | string; /** * 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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisStrip="green"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisStrip="green"; * ``` */ 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. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisStrip="green"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisStrip="green"; * ``` */ 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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisStroke="green"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisStroke="green""; * ``` */ 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. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisStroke="green"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisStroke="green"; * ``` */ 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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisStrokeThickness="3"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisStrokeThickness="2"; * ``` */ get xAxisStrokeThickness(): number; set xAxisStrokeThickness(v: number); static ngAcceptInputType_xAxisStrokeThickness: number | string; /** * Gets or sets the thickness to apply to the Y-axis line. * * Set `YAxisStrokeThickness` to control the thickness of the y-axis line. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisStroke="green" * yAxisStrokeThickness="3"> * </igx-category-chart> * ``` * * ```ts * this.chart. yAxisStrokeThickness="2"; * ``` */ get yAxisStrokeThickness(): number; set yAxisStrokeThickness(v: number); static ngAcceptInputType_yAxisStrokeThickness: number | string; /** * 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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisTickLength="23"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisTickLength="25"; * ``` */ get xAxisTickLength(): number; set xAxisTickLength(v: number); static ngAcceptInputType_xAxisTickLength: number | string; /** * 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. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisTickLength="23"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisTickLength="25"; * ``` */ get yAxisTickLength(): number; set yAxisTickLength(v: number); static ngAcceptInputType_yAxisTickLength: number | string; /** * 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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisTickStroke="green"> * </igx-category-chart> * ``` * * ```ts * this.chart. xAxisTickStroke="green"; * ``` */ 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. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisTickLength="5" * yAxisTickStroke="green"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisTickStroke="green"; * ``` */ 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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisTickStrokeThickness="10"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisTickStrokeThickness="20"; * ``` */ get xAxisTickStrokeThickness(): number; set xAxisTickStrokeThickness(v: number); static ngAcceptInputType_xAxisTickStrokeThickness: number | string; /** * 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. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisTickLength="5" * yAxisTickStrokeThickness="10"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisTickStrokeThickness="25"; * ``` */ get yAxisTickStrokeThickness(): number; set yAxisTickStrokeThickness(v: number); static ngAcceptInputType_yAxisTickStrokeThickness: number | string; /** * Gets or sets the Text to display below the X-axis. * * Set `XAxisTitle` to display a label adjacent to the x-axis. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisTitle="x axis"> * </igx-category-chart> * ``` * * ```ts * this.chart. xAxisTitle="x axis"; * ``` */ 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. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisTitle="y axis"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisTitle="y axis"; * ``` */ 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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisMinorStroke="green"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisExtent="250"; * ``` */ 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. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisMinorStroke="green" * yAxisMinorStrokeThickness="1"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisMinorStroke="green"; * ``` */ 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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisLabelAngle="45"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisLabelAngle="45"; * ``` */ get xAxisLabelAngle(): number; set xAxisLabelAngle(v: number); static ngAcceptInputType_xAxisLabelAngle: number | string; /** * 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. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisLabelAngle="45"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisLabelAngle="25"; * ``` */ get yAxisLabelAngle(): number; set yAxisLabelAngle(v: number); static ngAcceptInputType_yAxisLabelAngle: number | string; /** * 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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisExtent="250"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisExtent="250"; * ``` */ get xAxisExtent(): number; set xAxisExtent(v: number); static ngAcceptInputType_xAxisExtent: number | string; /** * 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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisExtent="250"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisExtent="250"; * ``` */ get yAxisExtent(): number; set yAxisExtent(v: number); static ngAcceptInputType_yAxisExtent: number | string; /** * Gets or sets the distance between the X-axis and the bottom of the chart. */ get xAxisMaximumExtent(): number; set xAxisMaximumExtent(v: number); static ngAcceptInputType_xAxisMaximumExtent: number | string; /** * Gets or sets the distance between the Y-axis and the left edge of the chart. */ get yAxisMaximumExtent(): number; set yAxisMaximumExtent(v: number); static ngAcceptInputType_yAxisMaximumExtent: number | string; /** * Gets or sets the distance between the X-axis and the bottom of the chart. */ get xAxisMaximumExtentPercentage(): number; set xAxisMaximumExtentPercentage(v: number); static ngAcceptInputType_xAxisMaximumExtentPercentage: number | string; /** * Gets or sets the distance between the Y-axis and the left edge of the chart. */ get yAxisMaximumExtentPercentage(): number; set yAxisMaximumExtentPercentage(v: number); static ngAcceptInputType_yAxisMaximumExtentPercentage: number | string; /** * Gets or sets the angle of rotation for the X-axis title. * * Set `XAxisTitleAngle` to control the rotation of the x-axis title. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisTitle="x axis" * xAxisTitleAngle="45"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisTitleAngle="50"; * ``` */ get xAxisTitleAngle(): number; set xAxisTitleAngle(v: number); static ngAcceptInputType_xAxisTitleAngle: number | string; /** * Gets or sets the angle of rotation for the Y-axis title. * * Set `YAxisTitleAngle` to control the rotation of the y-axis title. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisTitle="y axis" * yAxisTitleAngle="45"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisTitleAngle="25"; * ``` */ get yAxisTitleAngle(): number; set yAxisTitleAngle(v: number); static ngAcceptInputType_yAxisTitleAngle: number | string; /** * 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. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisInverted="true"> * </igx-category-chart> * ``` * * ```ts * this.chart.XAxisInverted="True"; * ``` */ get xAxisInverted(): boolean; set xAxisInverted(v: boolean); static ngAcceptInputType_xAxisInverted: boolean | string; /** * 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: * * ```html * <igx-category-chart * [dataSource]="data" * yAxisInverted="true" * > * * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisInverted="true"; * ``` * * The default value of `YAxisInverted` is false. */ get yAxisInverted(): boolean; set yAxisInverted(v: boolean); static ngAcceptInputType_yAxisInverted: boolean | string; /** * Gets or sets Horizontal alignment of the X-axis title. * * Set `XAxisTitleAlignment` to control the horizontal alignment of the x-axis title. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisTitle="x axis" * xAxisTitleAlignment="right"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisTitleAlignment="right"; * ``` */ get xAxisTitleAlignment(): HorizontalAlignment; set xAxisTitleAlignment(v: HorizontalAlignment); static ngAcceptInputType_xAxisTitleAlignment: HorizontalAlignment | string; /** * Gets or sets Vertical alignment of the Y-axis title. * * Set `YAxisTitleAlignment` to control the vertical alignment of the x-axis title. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisTitle="y axis" * yAxisTitleAlignment="bottom"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisTitleAlignment="bottom"; * ``` */ get yAxisTitleAlignment(): VerticalAlignment; set yAxisTitleAlignment(v: VerticalAlignment); static ngAcceptInputType_yAxisTitleAlignment: VerticalAlignment | string; /** * Gets or sets Horizontal alignment of X-axis labels. */ get xAxisLabelHorizontalAlignment(): HorizontalAlignment; set xAxisLabelHorizontalAlignment(v: HorizontalAlignment); static ngAcceptInputType_xAxisLabelHorizontalAlignment: HorizontalAlignment | string; /** * Gets or sets Horizontal alignment of Y-axis labels. * * Set the `YAxisLabelHorizontalAlignment` property to change the horizontal alignment of y-axis labels. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisExtent="250" * yAxisLabelHorizontalAlignment="left"> * </igx-category-chart> * ``` */ get yAxisLabelHorizontalAlignment(): HorizontalAlignment; set yAxisLabelHorizontalAlignment(v: HorizontalAlignment); static ngAcceptInputType_yAxisLabelHorizontalAlignment: HorizontalAlignment | string; /** * Gets or sets Vertical alignment of X-axis labels. * * Use the `XAxisLabelVerticalAlignment` property to change the vertical position of x-axis labels. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisExtent="250" * xAxisLabelVerticalAlignment="bottom"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisLabelVerticalAlignment="bottom"; * ``` */ get xAxisLabelVerticalAlignment(): VerticalAlignment; set xAxisLabelVerticalAlignment(v: VerticalAlignment); static ngAcceptInputType_xAxisLabelVerticalAlignment: VerticalAlignment | string; /** * Gets or sets Vertical alignment of Y-axis labels. */ get yAxisLabelVerticalAlignment(): VerticalAlignment; set yAxisLabelVerticalAlignment(v: VerticalAlignment); static ngAcceptInputType_yAxisLabelVerticalAlignment: VerticalAlignment | string; /** * Gets or sets Visibility of X-axis labels. * * To hide the x-axis labels, set `XAxisLabelVisibility` to collapsed. * * ```html * <igx-category-chart * [dataSource]="data" * xAxisLabelVisibility="collapsed"> * </igx-category-chart> * ``` * * ```ts * this.chart.xAxisLabelVisibility="collapsed"; * ``` * @deprecated This property is deprecated. Use XAxisIsLabelPanelVisible instead */ get xAxisLabelVisibility(): Visibility; set xAxisLabelVisibility(v: Visibility); static ngAcceptInputType_xAxisLabelVisibility: Visibility | string; /** * Gets or sets Visibility of Y-axis labels. * * To hide the y-axis labels, set `YAxisLabelVisibility` to collapsed. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisLabelVisibility="collapsed"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisLabelVisibility="collapsed""; * ``` * @deprecated This property is deprecated. Use YAxisIsLabelPanelVisible instead */ get yAxisLabelVisibility(): Visibility; set yAxisLabelVisibility(v: Visibility); static ngAcceptInputType_yAxisLabelVisibility: Visibility | string; /** * Gets or sets Visibility of X-axis label panel. */ get xAxisIsLabelPanelVisible(): boolean; set xAxisIsLabelPanelVisible(v: boolean); static ngAcceptInputType_xAxisIsLabelPanelVisible: boolean | string; /** * Gets or sets Visibility of Y-axis label panel. */ get yAxisIsLabelPanelVisible(): boolean; set yAxisIsLabelPanelVisible(v: boolean); static ngAcceptInputType_yAxisIsLabelPanelVisible: boolean | string; /** * Gets or sets Visibility of X-axis labels. */ get xAxisAreLabelsVisible(): boolean; set xAxisAreLabelsVisible(v: boolean); static ngAcceptInputType_xAxisAreLabelsVisible: boolean | string; /** * Gets or sets Visibility of Y-axis labels. */ get yAxisAreLabelsVisible(): boolean; set yAxisAreLabelsVisible(v: boolean); static ngAcceptInputType_yAxisAreLabelsVisible: boolean | string; /** * Gets or sets Visibility of X-axis annotations. */ get xAxisAreAnnotationsVisible(): boolean; set xAxisAreAnnotationsVisible(v: boolean); static ngAcceptInputType_xAxisAreAnnotationsVisible: boolean | string; /** * Gets or sets Visibility of Y-axis annotations. */ get yAxisAreAnnotationsVisible(): boolean; set yAxisAreAnnotationsVisible(v: boolean); static ngAcceptInputType_yAxisAreAnnotationsVisible: boolean | string; /** * Gets or sets Visibility of X-axis tick marks. */ get xAxisAreTickMarksVisible(): boolean; set xAxisAreTickMarksVisible(v: boolean); static ngAcceptInputType_xAxisAreTickMarksVisible: boolean | string; /** * Gets or sets Visibility of Y-axis tick marks. */ get yAxisAreTickMarksVisible(): boolean; set yAxisAreTickMarksVisible(v: boolean); static ngAcceptInputType_yAxisAreTickMarksVisible: boolean | string; /** * 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. * * ```html * <igx-category-chart * [dataSource]="data" * yAxisLabelLocation="outsideRight"> * </igx-category-chart> * ``` * * ```ts * this.chart.yAxisLabelLocation="outsideRight"; * ``` */ get yAxisLabelLocation(): YAxisLabelLocation; set yAxisLabelLocation(v: YAxisLabelLocation); static ngAcceptInputType_yAxisLabelLocation: YAxisLabelLocation | string; /** * Gets or sets location of X-axis labels, relative to the plot area. */ get xAxisLabelLocation(): XAxisLabelLocation; set xAxisLabelLocation(v: XAxisLabelLocation); static ngAcceptInputType_xAxisLabelLocation: XAxisLabelLocation | string; /** * 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[]); static ngAcceptInputType_xAxisLabelFormatSpecifiers: any[] | string; /** * 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[]); static ngAcceptInputType_yAxisLabelFormatSpecifiers: any[] | string; 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; static ɵfac: i0.ɵɵFactoryDeclaration<IgxXYChartComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<IgxXYChartComponent, "ng-component", never, { "xAxisFormatLabel": { "alias": "xAxisFormatLabel"; "required": false; }; "yAxisFormatLabel": { "alias": "yAxisFormatLabel"; "required": false; }; "xAxisLabelLeftMargin": { "alias": "xAxisLabelLeftMargin"; "required": false; }; "xAxisLabelTopMargin": { "alias": "xAxisLabelTopMargin"; "required": false; }; "xAxisLabelRightMargin": { "alias": "xAxisLabelRightMargin"; "required": false; }; "xAxisLabelBottomMargin": { "alias": "xAxisLabelBottomMargin"; "required": false; }; "yAxisLabelLeftMargin": { "alias": "yAxisLabelLeftMargin"; "required": false; }; "yAxisLabelTopMargin": { "alias": "yAxisLabelTopMargin"; "required": false; }; "yAxisLabelRightMargin": { "alias": "yAxisLabelRightMargin"; "required": false; }; "yAxisLabelBottomMargin": { "alias": "yAxisLabelBottomMargin"; "required": false; }; "xAxisLabelTextColor": { "alias": "xAxisLabelTextColor"; "required": false; }; "yAxisLabelTextColor": { "alias": "yAxisLabelTextColor"; "required": false; }; "actualXAxisLabelTextColor": { "alias": "actualXAxisLabelTextColor"; "required": false; }; "actualYAxisLabelTextColor": { "alias": "actualYAxisLabelTextColor"; "required": false; }; "xAxisTitleMargin": { "alias": "xAxisTitleMargin"; "required": false; }; "yAxisTitleMargin": { "alias": "yAxisTitleMargin"; "required": false; }; "xAxisTitleLeftMargin": { "alias": "xAxisTitleLeftMargin"; "required": false; }; "yAxisTitleLeftMargin": { "alias": "yAxisTitleLeftMargin"; "required": false; }; "xAxisTitleTopMargin": { "alias": "xAxisTitleTopMargin"; "required": false; }; "yAxisTitleTopMargin": { "alias": "yAxisTitleTopMargin"; "required": false; }; "xAxisTitleRightMargin": { "alias": "xAxisTitleRightMargin"; "required": false; }; "yAxisTitleRightMargin": { "alias": "yAxisTitleRightMargin"; "required": false; }; "xAxisTitleBottomMargin": { "alias": "xAxisTitleBottomMargin"; "required": false; }; "yAxisTitleBottomMargin": { "alias": "yAxisTitleBottomMargin"; "required": false; }; "xAxisTitleTextColor": { "alias": "xAxisTitleTextColor"; "required": false; }; "yAxisTitleTextColor": { "alias": "yAxisTitleTextColor"; "required": false; }; "xAxisLabelTextStyle": { "alias": "xAxisLabelTextStyle"; "required": false; }; "yAxisLabelTextStyle": { "alias": "yAxisLabelTextStyle"; "required": false; }; "xAxisTitleTextStyle": { "alias": "xAxisTitleTextStyle"; "required": false; }; "yAxisTitleTextStyle": { "alias": "yAxisTitleTextStyle"; "required": false; }; "xAxisLabel": { "alias": "xAxisLabel"; "required": false; }; "yAxisLabel": { "alias": "yAxisLabel"; "required": false; }; "xAxisMajorStroke": { "alias": "xAxisMajorStroke"; "required": false; }; "yAxisMajorStroke": { "alias": "yAxisMajorStroke"; "required": false; }; "xAxisMajorStrokeThickness": { "alias": "xAxisMajorStrokeThickness"; "required": false; }; "yAxisMajorStrokeThickness": { "alias": "yAxisMajorStrokeThickness"; "required": false; }; "xAxisMinorStrokeThickness": { "alias": "xAxisMinorStrokeThickness"; "required": false; }; "yAxisMinorStrokeThickness": { "alias": "yAxisMinorStrokeThickness"; "required": false; }; "xAxisStrip": { "alias": "xAxisStrip"; "required": false; }; "yAxisStrip": { "alias": "yAxisStrip"; "required": false; }; "xAxisStroke": { "alias": "xAxisStroke"; "required": false; }; "yAxisStroke": { "alias": "yAxisStroke"; "required": false; }; "xAxisStrokeThickness": { "alias": "xAxisStrokeThickness"; "required": false; }; "yAxisStrokeThickness": { "alias": "yAxisStrokeThickness"; "required": false; }; "xAxisTickLength": { "alias": "xAxisTickLength"; "required": false; }; "yAxisTickLength": { "alias": "yAxisTickLength"; "required": false; }; "xAxisTickStroke": { "alias": "xAxisTickStroke"; "required": false; }; "yAxisTickStroke": { "alias": "yAxisTickStroke"; "required": false; }; "xAxisTickStrokeThickness": { "alias": "xAxisTickStrokeThickness"; "required": false; }; "yAxisTickStrokeThickness": { "alias": "yAxisTickStrokeThickness"; "required": false; }; "xAxisTitle": { "alias": "xAxisTitle"; "required": false; }; "yAxisTitle": { "alias": "yAxisTitle"; "required": false; }; "xAxisMinorStroke": { "alias": "xAxisMinorStroke"; "required": false; }; "yAxisMinorStroke": { "alias": "yAxisMinorStroke"; "required": false; }; "xAxisLabelAngle": { "alias": "xAxisLabelAngle"; "required": false; }; "yAxisLabelAngle": { "alias": "yAxisLabelAngle"; "required": false; }; "xAxisExtent": { "alias": "xAxisExtent"; "required": false; }; "yAxisExtent": { "alias": "yAxisExtent"; "required": false; }; "xAxisMaximumExtent": { "alias": "xAxisMaximumExtent"; "required": false; }; "yAxisMaximumExtent": { "alias": "yAxisMaximumExtent"; "required": false; }; "xAxisMaximumExtentPercentage": { "alias": "xAxisMaximumExtentPercentage"; "required": false; }; "yAxisMaximumExtentPercentage": { "alias": "yAxisMaximumExtentPercentage"; "required": false; }; "xAxisTitleAngle": { "alias": "xAxisTitleAngle"; "required": false; }; "yAxisTitleAngle": { "alias": "yAxisTitleAngle"; "required": false; }; "xAxisInverted": { "alias": "xAxisInverted"; "required": false; }; "yAxisInverted": { "alias": "yAxisInverted"; "required": false; }; "xAxisTitleAlignment": { "alias": "xAxisTitleAlignment"; "required": false; }; "yAxisTitleAlignment": { "alias": "yAxisTitleAlignment"; "required": false; }; "xAxisLabelHorizontalAlignment": { "alias": "xAxisLabelHorizontalAlignment"; "required": false; }; "yAxisLabelHorizontalAlignment": { "alias": "yAxisLabelHorizontalAlignment"; "required": false; }; "xAxisLabelVerticalAlignment": { "alias": "xAxisLabelVerticalAlignment"; "required": false; }; "yAxisLabelVerticalAlignment": { "alias": "yAxisLabelVerticalAlignment"; "required": false; }; "xAxisLabelVisibility": { "alias": "xAxisLabelVisibility"; "required": false; }; "yAxisLabelVisibility": { "alias": "yAxisLabelVisibility"; "required": false; }; "xAxisIsLabelPanelVisible": { "alias": "xAxisIsLabelPanelVisible"; "required": false; }; "yAxisIsLabelPanelVisible": { "alias": "yAxisIsLabelPanelVisible"; "required": false; }; "xAxisAreLabelsVisible": { "alias": "xAxisAreLabelsVisible"; "required": false; }; "yAxisAreLabelsVisible": { "alias": "yAxisAreLabelsVisible"; "required": false; }; "xAxisAreAnnotationsVisible": { "alias": "xAxisAreAnnotationsVisible"; "required": false; }; "yAxisAreAnnotationsVisible": { "alias": "yAxisAreAnnotationsVisible"; "required": false; }; "xAxisAreTickMarksVisible": { "alias": "xAxisAreTickMarksVisible"; "required": false; }; "yAxisAreTickMarksVisible": { "alias": "yAxisAreTickMarksVisible"; "required": false; }; "yAxisLabelLocation": { "alias": "yAxisLabelLocation"; "required": false; }; "xAxisLabelLocation": { "alias": "xAxisLabelLocation"; "required": false; }; "xAxisLabelFormat": { "alias": "xAxisLabelFormat"; "required": false; }; "xAxisLabelFormatSpecifiers": { "alias": "xAxisLabelFormatSpecifiers"; "required": false; }; "yAxisLabelFormat": { "alias": "yAxisLabelFormat"; "required": false; }; "yAxisLabelFormatSpecifiers": { "alias": "yAxisLabelFormatSpecifiers"; "required": false; }; }, {}, never, never, true, never>; }