UNPKG

igniteui-angular-charts

Version:

Ignite UI Angular charting components for building rich data visualizations for modern web apps.

1,338 lines (1,332 loc) 44.5 kB
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 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"; * ``` */ 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""; * ``` */ get yAxisLabelVisibility(): Visibility; set yAxisLabelVisibility(v: Visibility); static ngAcceptInputType_yAxisLabelVisibility: Visibility | 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": "xAxisFormatLabel"; "yAxisFormatLabel": "yAxisFormatLabel"; "xAxisLabelLeftMargin": "xAxisLabelLeftMargin"; "xAxisLabelTopMargin": "xAxisLabelTopMargin"; "xAxisLabelRightMargin": "xAxisLabelRightMargin"; "xAxisLabelBottomMargin": "xAxisLabelBottomMargin"; "yAxisLabelLeftMargin": "yAxisLabelLeftMargin"; "yAxisLabelTopMargin": "yAxisLabelTopMargin"; "yAxisLabelRightMargin": "yAxisLabelRightMargin"; "yAxisLabelBottomMargin": "yAxisLabelBottomMargin"; "xAxisLabelTextColor": "xAxisLabelTextColor"; "yAxisLabelTextColor": "yAxisLabelTextColor"; "actualXAxisLabelTextColor": "actualXAxisLabelTextColor"; "actualYAxisLabelTextColor": "actualYAxisLabelTextColor"; "xAxisTitleMargin": "xAxisTitleMargin"; "yAxisTitleMargin": "yAxisTitleMargin"; "xAxisTitleLeftMargin": "xAxisTitleLeftMargin"; "yAxisTitleLeftMargin": "yAxisTitleLeftMargin"; "xAxisTitleTopMargin": "xAxisTitleTopMargin"; "yAxisTitleTopMargin": "yAxisTitleTopMargin"; "xAxisTitleRightMargin": "xAxisTitleRightMargin"; "yAxisTitleRightMargin": "yAxisTitleRightMargin"; "xAxisTitleBottomMargin": "xAxisTitleBottomMargin"; "yAxisTitleBottomMargin": "yAxisTitleBottomMargin"; "xAxisTitleTextColor": "xAxisTitleTextColor"; "yAxisTitleTextColor": "yAxisTitleTextColor"; "xAxisLabelTextStyle": "xAxisLabelTextStyle"; "yAxisLabelTextStyle": "yAxisLabelTextStyle"; "xAxisTitleTextStyle": "xAxisTitleTextStyle"; "yAxisTitleTextStyle": "yAxisTitleTextStyle"; "xAxisLabel": "xAxisLabel"; "yAxisLabel": "yAxisLabel"; "xAxisMajorStroke": "xAxisMajorStroke"; "yAxisMajorStroke": "yAxisMajorStroke"; "xAxisMajorStrokeThickness": "xAxisMajorStrokeThickness"; "yAxisMajorStrokeThickness": "yAxisMajorStrokeThickness"; "xAxisMinorStrokeThickness": "xAxisMinorStrokeThickness"; "yAxisMinorStrokeThickness": "yAxisMinorStrokeThickness"; "xAxisStrip": "xAxisStrip"; "yAxisStrip": "yAxisStrip"; "xAxisStroke": "xAxisStroke"; "yAxisStroke": "yAxisStroke"; "xAxisStrokeThickness": "xAxisStrokeThickness"; "yAxisStrokeThickness": "yAxisStrokeThickness"; "xAxisTickLength": "xAxisTickLength"; "yAxisTickLength": "yAxisTickLength"; "xAxisTickStroke": "xAxisTickStroke"; "yAxisTickStroke": "yAxisTickStroke"; "xAxisTickStrokeThickness": "xAxisTickStrokeThickness"; "yAxisTickStrokeThickness": "yAxisTickStrokeThickness"; "xAxisTitle": "xAxisTitle"; "yAxisTitle": "yAxisTitle"; "xAxisMinorStroke": "xAxisMinorStroke"; "yAxisMinorStroke": "yAxisMinorStroke"; "xAxisLabelAngle": "xAxisLabelAngle"; "yAxisLabelAngle": "yAxisLabelAngle"; "xAxisExtent": "xAxisExtent"; "yAxisExtent": "yAxisExtent"; "xAxisTitleAngle": "xAxisTitleAngle"; "yAxisTitleAngle": "yAxisTitleAngle"; "xAxisInverted": "xAxisInverted"; "yAxisInverted": "yAxisInverted"; "xAxisTitleAlignment": "xAxisTitleAlignment"; "yAxisTitleAlignment": "yAxisTitleAlignment"; "xAxisLabelHorizontalAlignment": "xAxisLabelHorizontalAlignment"; "yAxisLabelHorizontalAlignment": "yAxisLabelHorizontalAlignment"; "xAxisLabelVerticalAlignment": "xAxisLabelVerticalAlignment"; "yAxisLabelVerticalAlignment": "yAxisLabelVerticalAlignment"; "xAxisLabelVisibility": "xAxisLabelVisibility"; "yAxisLabelVisibility": "yAxisLabelVisibility"; "yAxisLabelLocation": "yAxisLabelLocation"; "xAxisLabelLocation": "xAxisLabelLocation"; "xAxisLabelFormat": "xAxisLabelFormat"; "xAxisLabelFormatSpecifiers": "xAxisLabelFormatSpecifiers"; "yAxisLabelFormat": "yAxisLabelFormat"; "yAxisLabelFormatSpecifiers": "yAxisLabelFormatSpecifiers"; }, {}, never, never>; }