igniteui-angular-charts
Version:
Ignite UI Angular charting components for building rich data visualizations for modern web apps.
1,677 lines • 69.7 kB
JavaScript
import { __extends } from "tslib";
import { Component, Input } from '@angular/core';
import { HorizontalAlignment_$type } from "igniteui-angular-core";
import { VerticalAlignment_$type } from "igniteui-angular-core";
import { Visibility_$type } from "igniteui-angular-core";
import { YAxisLabelLocation_$type } from "./YAxisLabelLocation";
import { XAxisLabelLocation_$type } from "./XAxisLabelLocation";
import { IgxDomainChartComponent } from "./igx-domain-chart-component";
import { brushToString, stringToBrush, ensureBool, ensureEnum, arrayFindByName } from "igniteui-angular-core";
import * as i0 from "@angular/core";
/**
* Represents a base class for domain charts with X/Y axes
*/
var IgxXYChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
__extends(IgxXYChartComponent, _super);
function IgxXYChartComponent() {
return _super.call(this) || this;
}
Object.defineProperty(IgxXYChartComponent.prototype, "i", {
/**
* @hidden
*/
get: function () {
return this._implementation;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisFormatLabel", {
/**
* 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: function () {
return this.i.abn;
},
set: function (v) {
this.i.abn = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisFormatLabel", {
/**
* 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: function () {
return this.i.abo;
},
set: function (v) {
this.i.abo = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisLabelLeftMargin", {
/**
* 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: function () {
return this.i.ac8;
},
set: function (v) {
this.i.ac8 = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisLabelTopMargin", {
/**
* 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: function () {
return this.i.ada;
},
set: function (v) {
this.i.ada = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisLabelRightMargin", {
/**
* 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: function () {
return this.i.ac9;
},
set: function (v) {
this.i.ac9 = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisLabelBottomMargin", {
/**
* 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: function () {
return this.i.ac7;
},
set: function (v) {
this.i.ac7 = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisLabelLeftMargin", {
/**
* 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: function () {
return this.i.adr;
},
set: function (v) {
this.i.adr = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisLabelTopMargin", {
/**
* 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: function () {
return this.i.adt;
},
set: function (v) {
this.i.adt = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisLabelRightMargin", {
/**
* 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: function () {
return this.i.ads;
},
set: function (v) {
this.i.ads = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisLabelBottomMargin", {
/**
* 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: function () {
return this.i.adq;
},
set: function (v) {
this.i.adq = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisLabelTextColor", {
/**
* 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: function () {
return brushToString(this.i.ah4);
},
set: function (v) {
this.i.ah4 = stringToBrush(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisLabelTextColor", {
/**
* 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: function () {
return brushToString(this.i.aib);
},
set: function (v) {
this.i.aib = stringToBrush(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "actualXAxisLabelTextColor", {
/**
* Gets the actual color of labels on the X-axis
*/
get: function () {
return brushToString(this.i.ah2);
},
set: function (v) {
this.i.ah2 = stringToBrush(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "actualYAxisLabelTextColor", {
/**
* Gets the actual color of labels on the Y-axis
*/
get: function () {
return brushToString(this.i.ah3);
},
set: function (v) {
this.i.ah3 = stringToBrush(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisTitleMargin", {
/**
* 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: function () {
return this.i.adl;
},
set: function (v) {
this.i.adl = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisTitleMargin", {
/**
* 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: function () {
return this.i.ad4;
},
set: function (v) {
this.i.ad4 = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisTitleLeftMargin", {
/**
* 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: function () {
return this.i.adk;
},
set: function (v) {
this.i.adk = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisTitleLeftMargin", {
/**
* 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: function () {
return this.i.ad3;
},
set: function (v) {
this.i.ad3 = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisTitleTopMargin", {
/**
* 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: function () {
return this.i.adn;
},
set: function (v) {
this.i.adn = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisTitleTopMargin", {
/**
* 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: function () {
return this.i.ad6;
},
set: function (v) {
this.i.ad6 = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisTitleRightMargin", {
/**
* 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: function () {
return this.i.adm;
},
set: function (v) {
this.i.adm = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisTitleRightMargin", {
/**
* 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: function () {
return this.i.ad5;
},
set: function (v) {
this.i.ad5 = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisTitleBottomMargin", {
/**
* 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: function () {
return this.i.adj;
},
set: function (v) {
this.i.adj = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisTitleBottomMargin", {
/**
* 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: function () {
return this.i.ad2;
},
set: function (v) {
this.i.ad2 = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisTitleTextColor", {
/**
* 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: function () {
return brushToString(this.i.aia);
},
set: function (v) {
this.i.aia = stringToBrush(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisTitleTextColor", {
/**
* 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: function () {
return brushToString(this.i.aih);
},
set: function (v) {
this.i.aih = stringToBrush(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisLabelTextStyle", {
/**
* 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: function () {
return this.i.ae0;
},
set: function (v) {
this.i.ae0 = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisLabelTextStyle", {
/**
* 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: function () {
return this.i.af7;
},
set: function (v) {
this.i.af7 = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisTitleTextStyle", {
/**
* 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: function () {
return this.i.afq;
},
set: function (v) {
this.i.afq = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisTitleTextStyle", {
/**
* 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: function () {
return this.i.agx;
},
set: function (v) {
this.i.agx = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisLabel", {
/**
* Gets or sets the format for labels along the X-axis.
*/
get: function () {
return this.i.ad9;
},
set: function (v) {
this.i.ad9 = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisLabel", {
/**
* Gets or sets the property or string from which the labels are derived.
*/
get: function () {
return this.i.aea;
},
set: function (v) {
this.i.aea = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisMajorStroke", {
/**
* 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: function () {
return brushToString(this.i.ah5);
},
set: function (v) {
this.i.ah5 = stringToBrush(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisMajorStroke", {
/**
* 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: function () {
return brushToString(this.i.aic);
},
set: function (v) {
this.i.aic = stringToBrush(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisMajorStrokeThickness", {
/**
* 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: function () {
return this.i.adb;
},
set: function (v) {
this.i.adb = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisMajorStrokeThickness", {
/**
* 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: function () {
return this.i.adu;
},
set: function (v) {
this.i.adu = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisMinorStrokeThickness", {
/**
* 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: function () {
return this.i.ade;
},
set: function (v) {
this.i.ade = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisMinorStrokeThickness", {
/**
* 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: function () {
return this.i.adx;
},
set: function (v) {
this.i.adx = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisStrip", {
/**
* 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: function () {
return brushToString(this.i.ah7);
},
set: function (v) {
this.i.ah7 = stringToBrush(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisStrip", {
/**
* 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: function () {
return brushToString(this.i.aie);
},
set: function (v) {
this.i.aie = stringToBrush(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisStroke", {
/**
* 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: function () {
return brushToString(this.i.ah8);
},
set: function (v) {
this.i.ah8 = stringToBrush(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisStroke", {
/**
* 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: function () {
return brushToString(this.i.aif);
},
set: function (v) {
this.i.aif = stringToBrush(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisStrokeThickness", {
/**
* 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: function () {
return this.i.adf;
},
set: function (v) {
this.i.adf = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisStrokeThickness", {
/**
* 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: function () {
return this.i.ady;
},
set: function (v) {
this.i.ady = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisTickLength", {
/**
* 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: function () {
return this.i.adg;
},
set: function (v) {
this.i.adg = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisTickLength", {
/**
* 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: function () {
return this.i.adz;
},
set: function (v) {
this.i.adz = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisTickStroke", {
/**
* 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: function () {
return brushToString(this.i.ah9);
},
set: function (v) {
this.i.ah9 = stringToBrush(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisTickStroke", {
/**
* 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: function () {
return brushToString(this.i.aig);
},
set: function (v) {
this.i.aig = stringToBrush(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisTickStrokeThickness", {
/**
* 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: function () {
return this.i.adh;
},
set: function (v) {
this.i.adh = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisTickStrokeThickness", {
/**
* 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: function () {
return this.i.ad0;
},
set: function (v) {
this.i.ad0 = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisTitle", {
/**
* 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: function () {
return this.i.afh;
},
set: function (v) {
this.i.afh = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisTitle", {
/**
* 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: function () {
return this.i.ago;
},
set: function (v) {
this.i.ago = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisMinorStroke", {
/**
* 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: function () {
return brushToString(this.i.ah6);
},
set: function (v) {
this.i.ah6 = stringToBrush(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisMinorStroke", {
/**
* 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: function () {
return brushToString(this.i.aid);
},
set: function (v) {
this.i.aid = stringToBrush(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisLabelAngle", {
/**
* 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: function () {
return this.i.ac6;
},
set: function (v) {
this.i.ac6 = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisLabelAngle", {
/**
* 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: function () {
return this.i.adp;
},
set: function (v) {
this.i.adp = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisExtent", {
/**
* 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: function () {
return this.i.ac5;
},
set: function (v) {
this.i.ac5 = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisExtent", {
/**
* 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: function () {
return this.i.ado;
},
set: function (v) {
this.i.ado = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisMaximumExtent", {
/**
* Gets or sets the distance between the X-axis and the bottom of the chart.
*/
get: function () {
return this.i.adc;
},
set: function (v) {
this.i.adc = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisMaximumExtent", {
/**
* Gets or sets the distance between the Y-axis and the left edge of the chart.
*/
get: function () {
return this.i.adv;
},
set: function (v) {
this.i.adv = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisMaximumExtentPercentage", {
/**
* Gets or sets the distance between the X-axis and the bottom of the chart.
*/
get: function () {
return this.i.add;
},
set: function (v) {
this.i.add = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisMaximumExtentPercentage", {
/**
* Gets or sets the distance between the Y-axis and the left edge of the chart.
*/
get: function () {
return this.i.adw;
},
set: function (v) {
this.i.adw = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisTitleAngle", {
/**
* 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: function () {
return this.i.adi;
},
set: function (v) {
this.i.adi = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisTitleAngle", {
/**
* 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: function () {
return this.i.ad1;
},
set: function (v) {
this.i.ad1 = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisInverted", {
/**
* 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: function () {
return this.i.abx;
},
set: function (v) {
this.i.abx = ensureBool(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "yAxisInverted", {
/**
* 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: function () {
return this.i.aby;
},
set: function (v) {
this.i.aby = ensureBool(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxXYChartComponent.prototype, "xAxisTitleAlignment", {
/**
* 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: function () {
return this.i.ahk;
},
set: function (v) {
this.i.ahk = ensureEnum(HorizontalAlignment_$type, v);
}