igniteui-webcomponents-charts
Version:
Ignite UI Web Components charting components for building rich data visualizations using TypeScript APIs.
1,567 lines • 51.6 kB
JavaScript
import { __extends } from "tslib";
import { HorizontalAlignment_$type } from "igniteui-webcomponents-core";
import { VerticalAlignment_$type } from "igniteui-webcomponents-core";
import { Visibility_$type } from "igniteui-webcomponents-core";
import { YAxisLabelLocation_$type } from "./YAxisLabelLocation";
import { XAxisLabelLocation_$type } from "./XAxisLabelLocation";
import { IgcDomainChartComponent } from "./igc-domain-chart-component";
import { getAllPropertyNames, toSpinal, brushToString, stringToBrush, ensureBool, ensureEnum, enumToString, arrayFindByName } from "igniteui-webcomponents-core";
/**
* Represents a base class for domain charts with X/Y axes
*/
var IgcXYChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
__extends(IgcXYChartComponent, _super);
function IgcXYChartComponent() {
return _super.call(this) || this;
}
Object.defineProperty(IgcXYChartComponent.prototype, "i", {
/**
* @hidden
*/
get: function () {
return this._implementation;
},
enumerable: false,
configurable: true
});
IgcXYChartComponent.prototype.connectedCallback = function () {
if (_super.prototype["connectedCallback"]) {
_super.prototype["connectedCallback"].call(this);
}
if (this.i.connectedCallback) {
this.i.connectedCallback();
}
if (!this._attached) {
this._attached = true;
this._flushQueuedAttributes();
}
};
IgcXYChartComponent.prototype.disconnectedCallback = function () {
if (_super.prototype["disconnectedCallback"]) {
_super.prototype["disconnectedCallback"].call(this);
}
if (this.i.disconnectedCallback) {
this.i.disconnectedCallback();
}
if (this._attached) {
this._attached = false;
}
};
Object.defineProperty(IgcXYChartComponent, "observedAttributes", {
get: function () {
if (IgcXYChartComponent._observedAttributesIgcXYChartComponent == null) {
var names = getAllPropertyNames(IgcXYChartComponent);
for (var i = 0; i < names.length; i++) {
names[i] = toSpinal(names[i]);
}
IgcXYChartComponent._observedAttributesIgcXYChartComponent = names;
}
return IgcXYChartComponent._observedAttributesIgcXYChartComponent;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* formatX(item: any): string {
* return "[ " + item.label + "! ]";
* }
* ```
*/
get: function () {
return this.i.aas;
},
set: function (v) {
this.i.aas = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* formatY(value: any): string {
* return "[ " + value+ "! ]";
* }
* ```
*/
get: function () {
return this.i.aat;
},
set: function (v) {
this.i.aat = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisLabelLeftMargin ="100";
* ```
*/
get: function () {
return this.i.ab9;
},
set: function (v) {
this.i.ab9 = +v;
this._a("xAxisLabelLeftMargin", this.i.ab9);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisTitleTopMargin="250";
* ```
*/
get: function () {
return this.i.acb;
},
set: function (v) {
this.i.acb = +v;
this._a("xAxisLabelTopMargin", this.i.acb);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisLabelRightMargin="100";
* ```
*/
get: function () {
return this.i.aca;
},
set: function (v) {
this.i.aca = +v;
this._a("xAxisLabelRightMargin", this.i.aca);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisLabelBottomMargin ="100";
* ```
*/
get: function () {
return this.i.ab8;
},
set: function (v) {
this.i.ab8 = +v;
this._a("xAxisLabelBottomMargin", this.i.ab8);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart. yAxisLabelLeftMargin="250";
* ```
*/
get: function () {
return this.i.acq;
},
set: function (v) {
this.i.acq = +v;
this._a("yAxisLabelLeftMargin", this.i.acq);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.yAxisLabelTopMargin="250";
* ```
*/
get: function () {
return this.i.acs;
},
set: function (v) {
this.i.acs = +v;
this._a("yAxisLabelTopMargin", this.i.acs);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.yAxisLabelRightMargin="250";
* ```
*/
get: function () {
return this.i.acr;
},
set: function (v) {
this.i.acr = +v;
this._a("yAxisLabelRightMargin", this.i.acr);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.yAxisLabelBottomMargin="250";
* ```
*/
get: function () {
return this.i.acp;
},
set: function (v) {
this.i.acp = +v;
this._a("yAxisLabelBottomMargin", this.i.acp);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisLabelTextColor="green";
* ```
*/
get: function () {
return brushToString(this.i.agx);
},
set: function (v) {
this.i.agx = stringToBrush(v);
this._a("xAxisLabelTextColor", brushToString(this.i.agx));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.yAxisLabelTextColor="green";
* ```
*/
get: function () {
return brushToString(this.i.ag4);
},
set: function (v) {
this.i.ag4 = stringToBrush(v);
this._a("yAxisLabelTextColor", brushToString(this.i.ag4));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.prototype, "actualXAxisLabelTextColor", {
/**
* Gets the actual color of labels on the X-axis
*/
get: function () {
return brushToString(this.i.agv);
},
set: function (v) {
this.i.agv = stringToBrush(v);
this._a("actualXAxisLabelTextColor", brushToString(this.i.agv));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.prototype, "actualYAxisLabelTextColor", {
/**
* Gets the actual color of labels on the Y-axis
*/
get: function () {
return brushToString(this.i.agw);
},
set: function (v) {
this.i.agw = stringToBrush(v);
this._a("actualYAxisLabelTextColor", brushToString(this.i.agw));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.ack;
},
set: function (v) {
this.i.ack = +v;
this._a("xAxisTitleMargin", this.i.ack);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.ac1;
},
set: function (v) {
this.i.ac1 = +v;
this._a("yAxisTitleMargin", this.i.ac1);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisTitleLeftMargin="150";
* ```
*/
get: function () {
return this.i.acj;
},
set: function (v) {
this.i.acj = +v;
this._a("xAxisTitleLeftMargin", this.i.acj);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.yAxisTitleLeftMargin="150";
* ```
*/
get: function () {
return this.i.ac0;
},
set: function (v) {
this.i.ac0 = +v;
this._a("yAxisTitleLeftMargin", this.i.ac0);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisTitleTopMargin="150";
* ```
*/
get: function () {
return this.i.acm;
},
set: function (v) {
this.i.acm = +v;
this._a("xAxisTitleTopMargin", this.i.acm);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.yAxisTitleTopMargin="150";
* ```
*/
get: function () {
return this.i.ac3;
},
set: function (v) {
this.i.ac3 = +v;
this._a("yAxisTitleTopMargin", this.i.ac3);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisTitleRightMargin="100";
* ```
*/
get: function () {
return this.i.acl;
},
set: function (v) {
this.i.acl = +v;
this._a("xAxisTitleRightMargin", this.i.acl);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.yAxisTitleRightMargin="150";
* ```
*/
get: function () {
return this.i.ac2;
},
set: function (v) {
this.i.ac2 = +v;
this._a("yAxisTitleRightMargin", this.i.ac2);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisTitleBottomMargin="150";
* ```
*/
get: function () {
return this.i.aci;
},
set: function (v) {
this.i.aci = +v;
this._a("xAxisTitleBottomMargin", this.i.aci);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.yAxisTitleBottomMargin="150";
* ```
*/
get: function () {
return this.i.acz;
},
set: function (v) {
this.i.acz = +v;
this._a("yAxisTitleBottomMargin", this.i.acz);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisTitleTextColor="green";
* ```
*/
get: function () {
return brushToString(this.i.ag3);
},
set: function (v) {
this.i.ag3 = stringToBrush(v);
this._a("xAxisTitleTextColor", brushToString(this.i.ag3));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.yAxisTitleTextColor="green";
* ```
*/
get: function () {
return brushToString(this.i.aha);
},
set: function (v) {
this.i.aha = stringToBrush(v);
this._a("yAxisTitleTextColor", brushToString(this.i.aha));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisLabelTextStyle="italic 15px arial, sans-serif";
* ```
*/
get: function () {
return this.i.adx;
},
set: function (v) {
this.i.adx = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart. yAxisLabelTextStyle="italic 15px arial, sans-serif";
* ```
*/
get: function () {
return this.i.ae2;
},
set: function (v) {
this.i.ae2 = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisTitleTextStyle="italic 15px arial, sans-serif";
* ```
*/
get: function () {
return this.i.ael;
},
set: function (v) {
this.i.ael = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.yAxisTitleTextStyle="italic 15px arial, sans-serif";
* ```
*/
get: function () {
return this.i.afq;
},
set: function (v) {
this.i.afq = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.prototype, "xAxisLabel", {
/**
* Gets or sets the format for labels along the X-axis.
*/
get: function () {
return this.i.ac6;
},
set: function (v) {
this.i.ac6 = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.prototype, "yAxisLabel", {
/**
* Gets or sets the property or string from which the labels are derived.
*/
get: function () {
return this.i.ac7;
},
set: function (v) {
this.i.ac7 = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisMajorStroke="green";
* ```
*/
get: function () {
return brushToString(this.i.agy);
},
set: function (v) {
this.i.agy = stringToBrush(v);
this._a("xAxisMajorStroke", brushToString(this.i.agy));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.yAxisMajorStroke="green";
* ```
*/
get: function () {
return brushToString(this.i.ag5);
},
set: function (v) {
this.i.ag5 = stringToBrush(v);
this._a("yAxisMajorStroke", brushToString(this.i.ag5));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisMajorStrokeThickness="3" ;
* ```
*/
get: function () {
return this.i.acc;
},
set: function (v) {
this.i.acc = +v;
this._a("xAxisMajorStrokeThickness", this.i.acc);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.yAxisMajorStrokeThickness="2";
* ```
*/
get: function () {
return this.i.act;
},
set: function (v) {
this.i.act = +v;
this._a("yAxisMajorStrokeThickness", this.i.act);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisMinorStrokeThickness="3";
* ```
*/
get: function () {
return this.i.acd;
},
set: function (v) {
this.i.acd = +v;
this._a("xAxisMinorStrokeThickness", this.i.acd);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.yAxisMinorStrokeThickness="3";
* ```
*/
get: function () {
return this.i.acu;
},
set: function (v) {
this.i.acu = +v;
this._a("yAxisMinorStrokeThickness", this.i.acu);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisStrip="green";
* ```
*/
get: function () {
return brushToString(this.i.ag0);
},
set: function (v) {
this.i.ag0 = stringToBrush(v);
this._a("xAxisStrip", brushToString(this.i.ag0));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.yAxisStrip="green";
* ```
*/
get: function () {
return brushToString(this.i.ag7);
},
set: function (v) {
this.i.ag7 = stringToBrush(v);
this._a("yAxisStrip", brushToString(this.i.ag7));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisStroke="green"";
* ```
*/
get: function () {
return brushToString(this.i.ag1);
},
set: function (v) {
this.i.ag1 = stringToBrush(v);
this._a("xAxisStroke", brushToString(this.i.ag1));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.yAxisStroke="green";
* ```
*/
get: function () {
return brushToString(this.i.ag8);
},
set: function (v) {
this.i.ag8 = stringToBrush(v);
this._a("yAxisStroke", brushToString(this.i.ag8));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisStrokeThickness="2";
* ```
*/
get: function () {
return this.i.ace;
},
set: function (v) {
this.i.ace = +v;
this._a("xAxisStrokeThickness", this.i.ace);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart. yAxisStrokeThickness="2";
* ```
*/
get: function () {
return this.i.acv;
},
set: function (v) {
this.i.acv = +v;
this._a("yAxisStrokeThickness", this.i.acv);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisTickLength="25";
* ```
*/
get: function () {
return this.i.acf;
},
set: function (v) {
this.i.acf = +v;
this._a("xAxisTickLength", this.i.acf);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.yAxisTickLength="25";
* ```
*/
get: function () {
return this.i.acw;
},
set: function (v) {
this.i.acw = +v;
this._a("yAxisTickLength", this.i.acw);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart. xAxisTickStroke="green";
* ```
*/
get: function () {
return brushToString(this.i.ag2);
},
set: function (v) {
this.i.ag2 = stringToBrush(v);
this._a("xAxisTickStroke", brushToString(this.i.ag2));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.yAxisTickStroke="green";
* ```
*/
get: function () {
return brushToString(this.i.ag9);
},
set: function (v) {
this.i.ag9 = stringToBrush(v);
this._a("yAxisTickStroke", brushToString(this.i.ag9));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisTickStrokeThickness="20";
* ```
*/
get: function () {
return this.i.acg;
},
set: function (v) {
this.i.acg = +v;
this._a("xAxisTickStrokeThickness", this.i.acg);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.yAxisTickStrokeThickness="25";
* ```
*/
get: function () {
return this.i.acx;
},
set: function (v) {
this.i.acx = +v;
this._a("yAxisTickStrokeThickness", this.i.acx);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.prototype, "xAxisTitle", {
/**
* Gets or sets the Text to display below the X-axis.
*
* Set `XAxisTitle` to display a label adjacent to the x-axis.
*
* ```ts
* this.chart. xAxisTitle="x axis";
* ```
*/
get: function () {
return this.i.aec;
},
set: function (v) {
this.i.aec = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.yAxisTitle="y axis";
* ```
*/
get: function () {
return this.i.afh;
},
set: function (v) {
this.i.afh = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisExtent="250";
* ```
*/
get: function () {
return brushToString(this.i.agz);
},
set: function (v) {
this.i.agz = stringToBrush(v);
this._a("xAxisMinorStroke", brushToString(this.i.agz));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.yAxisMinorStroke="green";
* ```
*/
get: function () {
return brushToString(this.i.ag6);
},
set: function (v) {
this.i.ag6 = stringToBrush(v);
this._a("yAxisMinorStroke", brushToString(this.i.ag6));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisLabelAngle="45";
* ```
*/
get: function () {
return this.i.ab7;
},
set: function (v) {
this.i.ab7 = +v;
this._a("xAxisLabelAngle", this.i.ab7);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.yAxisLabelAngle="25";
* ```
*/
get: function () {
return this.i.aco;
},
set: function (v) {
this.i.aco = +v;
this._a("yAxisLabelAngle", this.i.aco);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisExtent="250";
* ```
*/
get: function () {
return this.i.ab6;
},
set: function (v) {
this.i.ab6 = +v;
this._a("xAxisExtent", this.i.ab6);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisExtent="250";
* ```
*/
get: function () {
return this.i.acn;
},
set: function (v) {
this.i.acn = +v;
this._a("yAxisExtent", this.i.acn);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.xAxisTitleAngle="50";
* ```
*/
get: function () {
return this.i.ach;
},
set: function (v) {
this.i.ach = +v;
this._a("xAxisTitleAngle", this.i.ach);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.yAxisTitleAngle="25";
* ```
*/
get: function () {
return this.i.acy;
},
set: function (v) {
this.i.acy = +v;
this._a("yAxisTitleAngle", this.i.acy);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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.
*
* ```ts
* this.chart.XAxisInverted="True";
* ```
*/
get: function () {
return this.i.aa2;
},
set: function (v) {
this.i.aa2 = ensureBool(v);
this._a("xAxisInverted", this.i.aa2);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.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:
*
* ```ts
* this.chart.yAxisInverted="true";
* ```
*
* The default value of `YAxisInverted` is false.
*/
get: function () {
return this.i.aa3;
},
set: function (v) {
this.i.aa3 = ensureBool(v);
this._a("yAxisInverted", this.i.aa3);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.prototype, "xAxisTitleAlignment", {
/**
* Gets or sets Horizontal alignment of the X-axis title.
*
* Set `XAxisTitleAlignment` to control the horizontal alignment of the x-axis title.
*
* ```ts
* this.chart.xAxisTitleAlignment="right";
* ```
*/
get: function () {
return this.i.agd;
},
set: function (v) {
this.i.agd = ensureEnum(HorizontalAlignment_$type, v);
this._a("xAxisTitleAlignment", enumToString(HorizontalAlignment_$type, this.i.agd));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.prototype, "yAxisTitleAlignment", {
/**
* Gets or sets Vertical alignment of the Y-axis title.
*
* Set `YAxisTitleAlignment` to control the vertical alignment of the x-axis title.
*
* ```ts
* this.chart.yAxisTitleAlignment="bottom";
* ```
*/
get: function () {
return this.i.ahg;
},
set: function (v) {
this.i.ahg = ensureEnum(VerticalAlignment_$type, v);
this._a("yAxisTitleAlignment", enumToString(VerticalAlignment_$type, this.i.ahg));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.prototype, "xAxisLabelHorizontalAlignment", {
/**
* Gets or sets Horizontal alignment of X-axis labels.
*/
get: function () {
return this.i.agc;
},
set: function (v) {
this.i.agc = ensureEnum(HorizontalAlignment_$type, v);
this._a("xAxisLabelHorizontalAlignment", enumToString(HorizontalAlignment_$type, this.i.agc));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.prototype, "yAxisLabelHorizontalAlignment", {
/**
* Gets or sets Horizontal alignment of Y-axis labels.
*
* Set the `YAxisLabelHorizontalAlignment` property to change the horizontal alignment of y-axis labels.
*/
get: function () {
return this.i.age;
},
set: function (v) {
this.i.age = ensureEnum(HorizontalAlignment_$type, v);
this._a("yAxisLabelHorizontalAlignment", enumToString(HorizontalAlignment_$type, this.i.age));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.prototype, "xAxisLabelVerticalAlignment", {
/**
* Gets or sets Vertical alignment of X-axis labels.
*
* Use the `XAxisLabelVerticalAlignment` property to change the vertical position of x-axis labels.
*
* ```ts
* this.chart.xAxisLabelVerticalAlignment="bottom";
* ```
*/
get: function () {
return this.i.ahe;
},
set: function (v) {
this.i.ahe = ensureEnum(VerticalAlignment_$type, v);
this._a("xAxisLabelVerticalAlignment", enumToString(VerticalAlignment_$type, this.i.ahe));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.prototype, "yAxisLabelVerticalAlignment", {
/**
* Gets or sets Vertical alignment of Y-axis labels.
*/
get: function () {
return this.i.ahf;
},
set: function (v) {
this.i.ahf = ensureEnum(VerticalAlignment_$type, v);
this._a("yAxisLabelVerticalAlignment", enumToString(VerticalAlignment_$type, this.i.ahf));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.prototype, "xAxisLabelVisibility", {
/**
* Gets or sets Visibility of X-axis labels.
*
* To hide the x-axis labels, set `XAxisLabelVisibility` to collapsed.
*
* ```ts
* this.chart.xAxisLabelVisibility="collapsed";
* ```
*/
get: function () {
return this.i.ahj;
},
set: function (v) {
this.i.ahj = ensureEnum(Visibility_$type, v);
this._a("xAxisLabelVisibility", enumToString(Visibility_$type, this.i.ahj));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.prototype, "yAxisLabelVisibility", {
/**
* Gets or sets Visibility of Y-axis labels.
*
* To hide the y-axis labels, set `YAxisLabelVisibility` to collapsed.
*
* ```ts
* this.chart.yAxisLabelVisibility="collapsed"";
* ```
*/
get: function () {
return this.i.ahk;
},
set: function (v) {
this.i.ahk = ensureEnum(Visibility_$type, v);
this._a("yAxisLabelVisibility", enumToString(Visibility_$type, this.i.ahk));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.prototype, "yAxisLabelLocation", {
/**
* Gets or sets location of Y-axis labels, relative to the plot area.
*
* Set the `YAxisLabelLocation` property to change the location of the y-axis and its labels.
*
* ```ts
* this.chart.yAxisLabelLocation="outsideRight";
* ```
*/
get: function () {
return this.i.aaz;
},
set: function (v) {
this.i.aaz = ensureEnum(YAxisLabelLocation_$type, v);
this._a("yAxisLabelLocation", enumToString(YAxisLabelLocation_$type, this.i.aaz));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.prototype, "xAxisLabelLocation", {
/**
* Gets or sets location of X-axis labels, relative to the plot area.
*/
get: function () {
return this.i.aax;
},
set: function (v) {
this.i.aax = ensureEnum(XAxisLabelLocation_$type, v);
this._a("xAxisLabelLocation", enumToString(XAxisLabelLocation_$type, this.i.aax));
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.prototype, "xAxisLabelFormat", {
/**
* Gets or sets the format string for the X axis label.
*/
get: function () {
return this.i.ado;
},
set: function (v) {
this.i.ado = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.prototype, "xAxisLabelFormatSpecifiers", {
/**
* Gets or sets the format specifiers to use with the XAxisLabelFormat string.
*/
get: function () {
return this.i.aam;
},
set: function (v) {
if (v && !Array.isArray(v) && typeof (v) == "string") {
var re = /\s*(?:,|\s|$)\s*/gm;
v = v.split(re);
}
this.i.aam = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.prototype, "yAxisLabelFormat", {
/**
* Gets or sets the format string for the Y axis label.
*/
get: function () {
return this.i.aet;
},
set: function (v) {
this.i.aet = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgcXYChartComponent.prototype, "yAxisLabelFormatSpecifiers", {
/**
* Gets or sets the format specifiers to use with the YAxisLabelFormat string.
*/
get: function () {
return this.i.aan;
},
set: function (v) {
if (v && !Array.isArray(v) && typeof (v) == "string") {
var re = /\s*(?:,|\s|$)\s*/gm;
v = v.split(re);
}
this.i.aan = v;
},
enumerable: false,
configurable: true
});
IgcXYChartComponent.prototype.findByName = function (name) {
var baseResult = _super.prototype.findByName.call(this, name);
if (baseResult) {
return baseResult;
}
if (this.xAxisLabelFormatSpecifiers != null && arrayFindByName(this.xAxisLabelFormatSpecifiers, name)) {
return arrayFindByName(this.xAxisLabelFormatSpecifiers, name);
}
if (this.yAxisLabelFormatSpecifiers != null && arrayFindByName(this.yAxisLabelFormatSpecifiers, name)) {
return arrayFindByName(this.yAxisLabelFormatSpecifiers, name);
}
return null;
};
/**
* Called by the UI framework to provide a UI container for rendering this control.
* @param container * The UI container element.
*/
IgcXYChartComponent.prototype.provideContainer = function (container) {
this.i.provideContainer(container);
};
/**
* Converts the given visual location to a data value.
* @param unscaledValue * The x-coordinate of the location to scale.
*/
IgcXYChartComponent.prototype.getScaledValueX = function (unscaledValue) {
var iv = this.i.ab2(unscaledValue);
return (iv);
};
/**
* Converts the given data value to a visual location.
* @param scaledValue * The data value to un-scale.
*/
IgcXYChartComponent.prototype.getUnscaledValueX = function (scaledValue) {
var iv = this.i.ab4(scaledValue);
return (iv);
};
/**
* Converts the given visual location to a data value.
* @param unscaledValue * The y-coordinate of the location to scale.
*/
IgcXYChartComponent.prototype.getScaledValueY = function (unscaledValue) {
var iv = this.i.ab3(unscaledValue);
return (iv);
};
/**
* Converts the given data value to a visual location.
* @param scaledValue * The data value to un-scale.
*/
IgcXYChartComponent.prototype.getUnscaledValueY = function (scaledValue) {
var iv = this.i.ab5(scaledValue);
return (iv);
};
IgcXYChartComponent._observedAttributesIgcXYChartComponent = null;
return IgcXYChartComponent;
}(IgcDomainChartComponent));
export { IgcXYChartComponent };