Class IgcCategoryChartComponent

Represents a chart with an ordinal X-axis and a numeric Y-axis.

Ignite UI for WebComponents Category Chart - Documentation

The Ignite UI Category Chart is a lightweight, highly performant chart. It can be easily configured to display category data using an extremely simple and intuitive API. All you need to do is provide your data to the chart and it will take care of everything else.

Example:

Hierarchy

Constructors

Properties

Accessors

Methods

Constructors

constructor

Properties

ATTRIBUTE_NODE

ATTRIBUTE_NODE: number

CDATA_SECTION_NODE

CDATA_SECTION_NODE: number

COMMENT_NODE

COMMENT_NODE: number

DOCUMENT_FRAGMENT_NODE

DOCUMENT_FRAGMENT_NODE: number

DOCUMENT_NODE

DOCUMENT_NODE: number

DOCUMENT_POSITION_CONTAINED_BY

DOCUMENT_POSITION_CONTAINED_BY: number

DOCUMENT_POSITION_CONTAINS

DOCUMENT_POSITION_CONTAINS: number

DOCUMENT_POSITION_DISCONNECTED

DOCUMENT_POSITION_DISCONNECTED: number

DOCUMENT_POSITION_FOLLOWING

DOCUMENT_POSITION_FOLLOWING: number

DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC

DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number

DOCUMENT_POSITION_PRECEDING

DOCUMENT_POSITION_PRECEDING: number

DOCUMENT_TYPE_NODE

DOCUMENT_TYPE_NODE: number

ELEMENT_NODE

ELEMENT_NODE: number

ENTITY_NODE

ENTITY_NODE: number

ENTITY_REFERENCE_NODE

ENTITY_REFERENCE_NODE: number

NOTATION_NODE

NOTATION_NODE: number

PROCESSING_INSTRUCTION_NODE

PROCESSING_INSTRUCTION_NODE: number

TEXT_NODE

TEXT_NODE: number

accessKey

accessKey: string

accessKeyLabel

accessKeyLabel: string

assignedSlot

assignedSlot: HTMLSlotElement | null

attributes

attributes: NamedNodeMap

autocapitalize

autocapitalize: string

baseURI

baseURI: string

Returns node's node document's document base URL.

childElementCount

childElementCount: number

childNodes

childNodes: NodeListOf<ChildNode>

Returns the children.

children

children: HTMLCollection

Returns the child elements.

classList

classList: DOMTokenList

Allows for manipulation of element's class content attribute as a set of whitespace-separated tokens through a DOMTokenList object.

className

className: string

Returns the value of element's class content attribute. Can be set to change it.

clientHeight

clientHeight: number

clientLeft

clientLeft: number

clientTop

clientTop: number

clientWidth

clientWidth: number

contentEditable

contentEditable: string

dataset

dataset: DOMStringMap

dir

dir: string

draggable

draggable: boolean

firstChild

firstChild: ChildNode | null

Returns the first child.

firstElementChild

firstElementChild: Element | null

Returns the first child that is an element, and null otherwise.

hidden

hidden: boolean

id

id: string

Returns the value of element's id content attribute. Can be set to change it.

innerHTML

innerHTML: string

innerText

innerText: string

inputMode

inputMode: string

isConnected

isConnected: boolean

Returns true if node is connected and false otherwise.

isContentEditable

isContentEditable: boolean

lang

lang: string

lastChild

lastChild: ChildNode | null

Returns the last child.

lastElementChild

lastElementChild: Element | null

Returns the last child that is an element, and null otherwise.

localName

localName: string

Returns the local name.

namespaceURI

namespaceURI: string | null

Returns the namespace.

nextElementSibling

nextElementSibling: Element | null

Returns the first following sibling that is an element, and null otherwise.

nextSibling

nextSibling: Node | null

Returns the next sibling.

nodeName

nodeName: string

Returns a string appropriate for the type of node, as follows: Element Its HTML-uppercased qualified name. Attr Its qualified name. Text "#text". CDATASection "#cdata-section". ProcessingInstruction Its target. Comment "#comment". Document "#document". DocumentType Its name. DocumentFragment "#document-fragment".

nodeType

nodeType: number

nodeValue

nodeValue: string | null

nonce

nonce: string

offsetHeight

offsetHeight: number

offsetLeft

offsetLeft: number

offsetParent

offsetParent: Element | null

offsetTop

offsetTop: number

offsetWidth

offsetWidth: number

onabort

onabort: function | null

Fires when the user aborts the download.

param

The event.

onanimationcancel

onanimationcancel: function | null

onanimationend

onanimationend: function | null

onanimationiteration

onanimationiteration: function | null

onanimationstart

onanimationstart: function | null

onauxclick

onauxclick: function | null

onblur

onblur: function | null

Fires when the object loses the input focus.

param

The focus event.

oncancel

oncancel: function | null

oncanplay

oncanplay: function | null

Occurs when playback is possible, but would require further buffering.

param

The event.

oncanplaythrough

oncanplaythrough: function | null

onchange

onchange: function | null

Fires when the contents of the object or selection have changed.

param

The event.

onclick

onclick: function | null

Fires when the user clicks the left mouse button on the object

param

The mouse event.

onclose

onclose: function | null

oncontextmenu

oncontextmenu: function | null

Fires when the user clicks the right mouse button in the client area, opening the context menu.

param

The mouse event.

oncopy

oncopy: function | null

oncuechange

oncuechange: function | null

oncut

oncut: function | null

ondblclick

ondblclick: function | null

Fires when the user double-clicks the object.

param

The mouse event.

ondrag

ondrag: function | null

Fires on the source object continuously during a drag operation.

param

The event.

ondragend

ondragend: function | null

Fires on the source object when the user releases the mouse at the close of a drag operation.

param

The event.

ondragenter

ondragenter: function | null

Fires on the target element when the user drags the object to a valid drop target.

param

The drag event.

ondragexit

ondragexit: function | null

ondragleave

ondragleave: function | null

Fires on the target object when the user moves the mouse out of a valid drop target during a drag operation.

param

The drag event.

ondragover

ondragover: function | null

Fires on the target element continuously while the user drags the object over a valid drop target.

param

The event.

ondragstart

ondragstart: function | null

Fires on the source object when the user starts to drag a text selection or selected object.

param

The event.

ondrop

ondrop: function | null

ondurationchange

ondurationchange: function | null

Occurs when the duration attribute is updated.

param

The event.

onemptied

onemptied: function | null

Occurs when the media element is reset to its initial state.

param

The event.

onended

onended: function | null

Occurs when the end of playback is reached.

param

The event

onerror

onerror: ErrorEventHandler

Fires when an error occurs during object loading.

param

The event.

onfocus

onfocus: function | null

Fires when the object receives focus.

param

The event.

onfullscreenchange

onfullscreenchange: function | null

onfullscreenerror

onfullscreenerror: function | null

ongotpointercapture

ongotpointercapture: function | null

oninput

oninput: function | null

oninvalid

oninvalid: function | null

onkeydown

onkeydown: function | null

Fires when the user presses a key.

param

The keyboard event

onkeypress

onkeypress: function | null

Fires when the user presses an alphanumeric key.

param

The event.

onkeyup

onkeyup: function | null

Fires when the user releases a key.

param

The keyboard event

onload

onload: function | null

Fires immediately after the browser loads the object.

param

The event.

onloadeddata

onloadeddata: function | null

Occurs when media data is loaded at the current playback position.

param

The event.

onloadedmetadata

onloadedmetadata: function | null

Occurs when the duration and dimensions of the media have been determined.

param

The event.

onloadend

onloadend: function | null

onloadstart

onloadstart: function | null

Occurs when Internet Explorer begins looking for media data.

param

The event.

onlostpointercapture

onlostpointercapture: function | null

onmousedown

onmousedown: function | null

Fires when the user clicks the object with either mouse button.

param

The mouse event.

onmouseenter

onmouseenter: function | null

onmouseleave

onmouseleave: function | null

onmousemove

onmousemove: function | null

Fires when the user moves the mouse over the object.

param

The mouse event.

onmouseout

onmouseout: function | null

Fires when the user moves the mouse pointer outside the boundaries of the object.

param

The mouse event.

onmouseover

onmouseover: function | null

Fires when the user moves the mouse pointer into the object.

param

The mouse event.

onmouseup

onmouseup: function | null

Fires when the user releases a mouse button while the mouse is over the object.

param

The mouse event.

onpaste

onpaste: function | null

onpause

onpause: function | null

Occurs when playback is paused.

param

The event.

onplay

onplay: function | null

Occurs when the play method is requested.

param

The event.

onplaying

onplaying: function | null

Occurs when the audio or video has started playing.

param

The event.

onpointercancel

onpointercancel: function | null

onpointerdown

onpointerdown: function | null

onpointerenter

onpointerenter: function | null

onpointerleave

onpointerleave: function | null

onpointermove

onpointermove: function | null

onpointerout

onpointerout: function | null

onpointerover

onpointerover: function | null

onpointerup

onpointerup: function | null

onprogress

onprogress: function | null

Occurs to indicate progress while downloading media data.

param

The event.

onratechange

onratechange: function | null

Occurs when the playback rate is increased or decreased.

param

The event.

onreset

onreset: function | null

Fires when the user resets a form.

param

The event.

onresize

onresize: function | null

onscroll

onscroll: function | null

Fires when the user repositions the scroll box in the scroll bar on the object.

param

The event.

onsecuritypolicyviolation

onsecuritypolicyviolation: function | null

onseeked

onseeked: function | null

Occurs when the seek operation ends.

param

The event.

onseeking

onseeking: function | null

Occurs when the current playback position is moved.

param

The event.

onselect

onselect: function | null

Fires when the current selection changes.

param

The event.

onstalled

onstalled: function | null

Occurs when the download has stopped.

param

The event.

onsubmit

onsubmit: function | null

onsuspend

onsuspend: function | null

Occurs if the load operation has been intentionally halted.

param

The event.

ontimeupdate

ontimeupdate: function | null

Occurs to indicate the current playback position.

param

The event.

ontoggle

ontoggle: function | null

ontouchcancel

ontouchcancel: function | null

ontouchend

ontouchend: function | null

ontouchmove

ontouchmove: function | null

ontouchstart

ontouchstart: function | null

ontransitioncancel

ontransitioncancel: function | null

ontransitionend

ontransitionend: function | null

ontransitionrun

ontransitionrun: function | null

ontransitionstart

ontransitionstart: function | null

onvolumechange

onvolumechange: function | null

Occurs when the volume is changed, or playback is muted or unmuted.

param

The event.

onwaiting

onwaiting: function | null

Occurs when playback stops because the next frame of a video resource is not available.

param

The event.

onwheel

onwheel: function | null

outerHTML

outerHTML: string

ownerDocument

ownerDocument: Document | null

Returns the node document. Returns null for documents.

parentElement

parentElement: HTMLElement | null

Returns the parent element.

parentNode

parentNode: Node & ParentNode | null

Returns the parent.

prefix

prefix: string | null

Returns the namespace prefix.

previousElementSibling

previousElementSibling: Element | null

Returns the first preceding sibling that is an element, and null otherwise.

previousSibling

previousSibling: Node | null

Returns the previous sibling.

scrollHeight

scrollHeight: number

scrollLeft

scrollLeft: number

scrollTop

scrollTop: number

scrollWidth

scrollWidth: number

shadowRoot

shadowRoot: ShadowRoot | null

Returns element's shadow root, if any, and if shadow root's mode is "open", and null otherwise.

slot

slot: string

Returns the value of element's slot content attribute. Can be set to change it.

spellcheck

spellcheck: boolean

style

style: CSSStyleDeclaration

tabIndex

tabIndex: number

tagName

tagName: string

Returns the HTML-uppercased qualified name.

textContent

textContent: string | null

title

title: string

translate

translate: boolean

Static htmlTagName

htmlTagName: string = "igc-category-chart"

Accessors

alignsGridLinesToPixels

  • get alignsGridLinesToPixels(): boolean
  • set alignsGridLinesToPixels(v: boolean): void
  • Gets or sets a value indicating whether grid and tick lines are aligned to device pixels.

    Use alignsGridLinesToPixels propert to indicat whether grid and tick lines are aligned to device pixels.

     this.chart.alignsGridLinesToPixels= true;

    Returns boolean

  • Gets or sets a value indicating whether grid and tick lines are aligned to device pixels.

    Use alignsGridLinesToPixels propert to indicat whether grid and tick lines are aligned to device pixels.

     this.chart.alignsGridLinesToPixels= true;

    Parameters

    • v: boolean

    Returns void

animateSeriesWhenAxisRangeChanges

  • get animateSeriesWhenAxisRangeChanges(): boolean
  • set animateSeriesWhenAxisRangeChanges(v: boolean): void

bottomMargin

  • get bottomMargin(): number
  • set bottomMargin(v: number): void
  • Gets or sets the bottom margin around the chart content.

    Use the bottomMargin property for the bottom margin around the chart content.

    this.chart.bottomMargin=20;

    Returns number

  • Gets or sets the bottom margin around the chart content.

    Use the bottomMargin property for the bottom margin around the chart content.

    this.chart.bottomMargin=20;

    Parameters

    • v: number

    Returns void

brushes

  • get brushes(): string[]
  • set brushes(v: string[]): void
  • Gets or sets the palette of brushes to use for coloring the chart series. The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection

    Use the brushes property to set the brushes.

    this.chart.brushes = ["#ff0000","#00ff00"];

    Returns string[]

  • Gets or sets the palette of brushes to use for coloring the chart series. The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection

    Use the brushes property to set the brushes.

    this.chart.brushes = ["#ff0000","#00ff00"];

    Parameters

    • v: string[]

    Returns void

calloutStyleUpdating

  • get calloutStyleUpdating(): function
  • set calloutStyleUpdating(ev: function): void

calloutStyleUpdatingEventEnabled

  • get calloutStyleUpdatingEventEnabled(): boolean
  • set calloutStyleUpdatingEventEnabled(v: boolean): void

calloutsContentMemberPath

  • get calloutsContentMemberPath(): string
  • set calloutsContentMemberPath(v: string): void

calloutsDataSource

  • get calloutsDataSource(): any[]
  • set calloutsDataSource(value: any[]): void

calloutsLabelMemberPath

  • get calloutsLabelMemberPath(): string
  • set calloutsLabelMemberPath(v: string): void

calloutsVisible

  • get calloutsVisible(): boolean
  • set calloutsVisible(v: boolean): void
  • Gets or sets if callouts should be displayed.

    Returns boolean

  • Gets or sets if callouts should be displayed.

    Parameters

    • v: boolean

    Returns void

calloutsXMemberPath

  • get calloutsXMemberPath(): string
  • set calloutsXMemberPath(v: string): void
  • Gets or sets the member path of the X data for the callouts.

    Returns string

  • Gets or sets the member path of the X data for the callouts.

    Parameters

    • v: string

    Returns void

calloutsYMemberPath

  • get calloutsYMemberPath(): string
  • set calloutsYMemberPath(v: string): void
  • Gets or sets the member path of the Y data for the callouts.

    Returns string

  • Gets or sets the member path of the Y data for the callouts.

    Parameters

    • v: string

    Returns void

chartTitle

  • get chartTitle(): string
  • set chartTitle(v: string): void
  • Gets or sets text to display above the plot area.

    Use the chartTitle property to display the text above the plot area.

     this.chart.title= "This is a Title";

    Returns string

  • Gets or sets text to display above the plot area.

    Use the chartTitle property to display the text above the plot area.

     this.chart.title= "This is a Title";

    Parameters

    • v: string

    Returns void

chartType

  • Gets or sets the type of chart series to generate from the data.

    The chartType property determines the type of data series to display.

    Returns CategoryChartType

  • Gets or sets the type of chart series to generate from the data.

    The chartType property determines the type of data series to display.

    Parameters

    Returns void

crosshairsAnnotationEnabled

  • get crosshairsAnnotationEnabled(): boolean
  • set crosshairsAnnotationEnabled(v: boolean): void

crosshairsDisplayMode

crosshairsSnapToData

  • get crosshairsSnapToData(): boolean
  • set crosshairsSnapToData(v: boolean): void
  • Gets or sets whether crosshairs will snap to the nearest data point.

    Returns boolean

  • Gets or sets whether crosshairs will snap to the nearest data point.

    Parameters

    • v: boolean

    Returns void

dataSource

  • get dataSource(): Array<any>
  • set dataSource(value: Array<any>): void
  • Returns Array<any>

  • Parameters

    • value: Array<any>

    Returns void

excludedProperties

  • get excludedProperties(): string[]
  • set excludedProperties(v: string[]): void
  • Gets or sets a set of property paths that should be excluded from consideration by the category chart.

    The excludedProperties property used for the property paths that should be excluded from consideration by the category chart.

    this.chart.excludedProperties = ["ID", "Discount"];

    Returns string[]

  • Gets or sets a set of property paths that should be excluded from consideration by the category chart.

    The excludedProperties property used for the property paths that should be excluded from consideration by the category chart.

    this.chart.excludedProperties = ["ID", "Discount"];

    Parameters

    • v: string[]

    Returns void

finalValueAnnotationsVisible

  • get finalValueAnnotationsVisible(): boolean
  • set finalValueAnnotationsVisible(v: boolean): void

height

  • get height(): string
  • set height(value: string): void
  • Returns string

  • Parameters

    • value: string

    Returns void

i

  • get i(): CategoryChart
  • Returns CategoryChart

includedProperties

  • get includedProperties(): string[]
  • set includedProperties(v: string[]): void
  • Gets or sets a set of property paths that should be included for consideration by the category chart, leaving the remainder excluded. If null, all properties will be considered.

    The includedProperties property used to include the properties for the consideration of the category chart.

    this.chart.includedProperties = ["ProductName", "Cost"];

    Returns string[]

  • Gets or sets a set of property paths that should be included for consideration by the category chart, leaving the remainder excluded. If null, all properties will be considered.

    The includedProperties property used to include the properties for the consideration of the category chart.

    this.chart.includedProperties = ["ProductName", "Cost"];

    Parameters

    • v: string[]

    Returns void

isCategoryHighlightingEnabled

  • get isCategoryHighlightingEnabled(): boolean
  • set isCategoryHighlightingEnabled(v: boolean): void
  • Gets or sets whether the category should be highlighted when hovered

    Returns boolean

  • Gets or sets whether the category should be highlighted when hovered

    Parameters

    • v: boolean

    Returns void

isHorizontalZoomEnabled

  • get isHorizontalZoomEnabled(): boolean
  • set isHorizontalZoomEnabled(v: boolean): void
  • Gets or sets whether the chart can be horizontally zoomed through user interactions.

    Use the isHorizontalZoomEnabled property to allow chart horizontally zoomed .

    this.chart.isHorizontalZoomEnabled = true;

    Returns boolean

  • Gets or sets whether the chart can be horizontally zoomed through user interactions.

    Use the isHorizontalZoomEnabled property to allow chart horizontally zoomed .

    this.chart.isHorizontalZoomEnabled = true;

    Parameters

    • v: boolean

    Returns void

isItemHighlightingEnabled

  • get isItemHighlightingEnabled(): boolean
  • set isItemHighlightingEnabled(v: boolean): void
  • Gets or sets whether the item should be highlighted when hovered

    Returns boolean

  • Gets or sets whether the item should be highlighted when hovered

    Parameters

    • v: boolean

    Returns void

isSeriesHighlightingEnabled

  • get isSeriesHighlightingEnabled(): boolean
  • set isSeriesHighlightingEnabled(v: boolean): void
  • Gets or sets whether the chart can highlight series through user interactions. This property applies to Category Chart and Financial Chart controls.

    Returns boolean

  • Gets or sets whether the chart can highlight series through user interactions. This property applies to Category Chart and Financial Chart controls.

    Parameters

    • v: boolean

    Returns void

isTransitionInEnabled

  • get isTransitionInEnabled(): boolean
  • set isTransitionInEnabled(v: boolean): void
  • Gets or sets whether animation of series plots is enabled when the chart is loading into view

    Set isTransitionInEnabled to true if you want your chart series to animate into position when the chart is loading into view.

    Returns boolean

  • Gets or sets whether animation of series plots is enabled when the chart is loading into view

    Set isTransitionInEnabled to true if you want your chart series to animate into position when the chart is loading into view.

    Parameters

    • v: boolean

    Returns void

isVerticalZoomEnabled

  • get isVerticalZoomEnabled(): boolean
  • set isVerticalZoomEnabled(v: boolean): void
  • Gets or sets whether the chart can be vertically zoomed through user interactions.

    Use the isVerticalZoomEnabled property to allow chart zoom vertically.

     this.chart.isVerticalZoomEnabled = true;

    Returns boolean

  • Gets or sets whether the chart can be vertically zoomed through user interactions.

    Use the isVerticalZoomEnabled property to allow chart zoom vertically.

     this.chart.isVerticalZoomEnabled = true;

    Parameters

    • v: boolean

    Returns void

leftMargin

  • get leftMargin(): number
  • set leftMargin(v: number): void
  • Gets or sets the left margin of the chart content.

    Use the 'leftMargin' property for the left margin of the chart content.

     this.chart.leftMargin = 20;

    Returns number

  • Gets or sets the left margin of the chart content.

    Use the 'leftMargin' property for the left margin of the chart content.

     this.chart.leftMargin = 20;

    Parameters

    • v: number

    Returns void

legend

  • get legend(): any
  • set legend(v: any): void

markerBrushes

  • get markerBrushes(): string[]
  • set markerBrushes(v: string[]): void
  • Gets or sets the palette of brushes used for rendering fill area of data point markers. This property applies only to these chart types: point, line, spline, bubble, and polygon

    markerBrushes property used for rendering fill area of data point markers.

     this.chart.markerBrushes=[ "#ff0000", "#ffff00", "#00ffff" ];

    Returns string[]

  • Gets or sets the palette of brushes used for rendering fill area of data point markers. This property applies only to these chart types: point, line, spline, bubble, and polygon

    markerBrushes property used for rendering fill area of data point markers.

     this.chart.markerBrushes=[ "#ff0000", "#ffff00", "#00ffff" ];

    Parameters

    • v: string[]

    Returns void

markerCollisionAvoidance

  • Gets or sets the behavior for markers in each series which are placed too close together for the current view, resulting in a collision.

    markerCollisionAvoidance controls the technique the chart uses to avoid overlapping markers.

    Returns CategorySeriesMarkerCollisionAvoidance

  • Gets or sets the behavior for markers in each series which are placed too close together for the current view, resulting in a collision.

    markerCollisionAvoidance controls the technique the chart uses to avoid overlapping markers.

    Parameters

    Returns void

markerMaxCount

  • get markerMaxCount(): number
  • set markerMaxCount(v: number): void
  • Gets or sets the maximum number of markers displyed in the plot area of the chart.

    markerMaxCount property used to display maximum number of markers in the plot area of the chart.

     this.chart.markerMaxCount = 100 ;

    Returns number

  • Gets or sets the maximum number of markers displyed in the plot area of the chart.

    markerMaxCount property used to display maximum number of markers in the plot area of the chart.

     this.chart.markerMaxCount = 100 ;

    Parameters

    • v: number

    Returns void

markerOutlines

  • get markerOutlines(): string[]
  • set markerOutlines(v: string[]): void
  • Gets or sets the palette of brushes used for rendering outlines of data point markers. This property applies only to these chart types: point, line, spline, bubble, and polygon

    markerOutlines property used for rendering outlines of data point markers.

    this.chart.markerOutlines= ["#ff0000", "#ffff00", "#00ffff"] ;

    Returns string[]

  • Gets or sets the palette of brushes used for rendering outlines of data point markers. This property applies only to these chart types: point, line, spline, bubble, and polygon

    markerOutlines property used for rendering outlines of data point markers.

    this.chart.markerOutlines= ["#ff0000", "#ffff00", "#00ffff"] ;

    Parameters

    • v: string[]

    Returns void

markerTypes

  • Gets or sets the marker shapes used for indicating location of data points in this chart. This property applies only to these chart types: point, line, spline, bubble, and polygon

    Returns IgcMarkerTypeCollection

  • Gets or sets the marker shapes used for indicating location of data points in this chart. This property applies only to these chart types: point, line, spline, bubble, and polygon

    Parameters

    Returns void

negativeBrushes

  • get negativeBrushes(): string[]
  • set negativeBrushes(v: string[]): void
  • Gets or sets the palette used for coloring negative items of Waterfall chart type.

    negativeBrushes controls the brushes used by the chart for negative data, when the chartType is one that supports negative brushes.

    Returns string[]

  • Gets or sets the palette used for coloring negative items of Waterfall chart type.

    negativeBrushes controls the brushes used by the chart for negative data, when the chartType is one that supports negative brushes.

    Parameters

    • v: string[]

    Returns void

negativeOutlines

  • get negativeOutlines(): string[]
  • set negativeOutlines(v: string[]): void
  • Brushes to use for drawing negative elements, when using a chart type with contextual coloring, such as Waterfall.

    negativeOutlines controls the outlines used by the chart for negative data, when the chartType is one that supports negative brushes.

    Returns string[]

  • Brushes to use for drawing negative elements, when using a chart type with contextual coloring, such as Waterfall.

    negativeOutlines controls the outlines used by the chart for negative data, when the chartType is one that supports negative brushes.

    Parameters

    • v: string[]

    Returns void

outlines

  • get outlines(): string[]
  • set outlines(v: string[]): void
  • Gets or sets the palette of brushes to use for outlines on the chart series. The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection

    Use the outlines property to sets the palette of brushes to use for outlines on the chart series

    Returns string[]

  • Gets or sets the palette of brushes to use for outlines on the chart series. The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection

    Use the outlines property to sets the palette of brushes to use for outlines on the chart series

    Parameters

    • v: string[]

    Returns void

pixelScalingRatio

  • get pixelScalingRatio(): number
  • set pixelScalingRatio(v: number): void
  • Gets or sets the scaling value used to affect the pixel density of the control. A higher scaling ratio will produce crisper visuals at the expense of memory. Lower values will cause the control to appear blurry.

    Returns number

  • Gets or sets the scaling value used to affect the pixel density of the control. A higher scaling ratio will produce crisper visuals at the expense of memory. Lower values will cause the control to appear blurry.

    Parameters

    • v: number

    Returns void

resolution

  • get resolution(): number
  • set resolution(v: number): void
  • Gets or sets the rendering resolution for all series in this chart. Where n = Resolution, for every n horizontal pixels, combine all items into a single datapoint. When Resolution = 0, all datapoints will be rendered as graphical objects. Charts with a higher resolution will have faster performance.

    Use the resolution property if the callouts should be display.

      this.chart.resolution = 2 ;

    Returns number

  • Gets or sets the rendering resolution for all series in this chart. Where n = Resolution, for every n horizontal pixels, combine all items into a single datapoint. When Resolution = 0, all datapoints will be rendered as graphical objects. Charts with a higher resolution will have faster performance.

    Use the resolution property if the callouts should be display.

      this.chart.resolution = 2 ;

    Parameters

    • v: number

    Returns void

rightMargin

  • get rightMargin(): number
  • set rightMargin(v: number): void
  • Gets or sets the right margin of the chart content.

    Use rightMargin property for the right margin of the chart content.

      this.chart.rightMargin = 20 ;

    Returns number

  • Gets or sets the right margin of the chart content.

    Use rightMargin property for the right margin of the chart content.

      this.chart.rightMargin = 20 ;

    Parameters

    • v: number

    Returns void

seriesAdded

  • get seriesAdded(): function
  • set seriesAdded(ev: function): void

seriesPointerDown

  • get seriesPointerDown(): function
  • set seriesPointerDown(ev: function): void

seriesPointerEnter

  • get seriesPointerEnter(): function
  • set seriesPointerEnter(ev: function): void

seriesPointerLeave

  • get seriesPointerLeave(): function
  • set seriesPointerLeave(ev: function): void

seriesPointerMove

  • get seriesPointerMove(): function
  • set seriesPointerMove(ev: function): void

seriesPointerUp

  • get seriesPointerUp(): function
  • set seriesPointerUp(ev: function): void

seriesRemoved

  • get seriesRemoved(): function
  • set seriesRemoved(ev: function): void

subtitle

  • get subtitle(): string
  • set subtitle(v: string): void
  • Gets or sets text to display below the Title, above the plot area.

    Use the subtitle property to display the text below and above the plot area.

     this.chart.subtitle ="CategoryChart Subtitle" ;

    Returns string

  • Gets or sets text to display below the Title, above the plot area.

    Use the subtitle property to display the text below and above the plot area.

     this.chart.subtitle ="CategoryChart Subtitle" ;

    Parameters

    • v: string

    Returns void

subtitleAlignment

  • get subtitleAlignment(): HorizontalAlignment
  • set subtitleAlignment(v: HorizontalAlignment): void
  • Gets or sets horizontal alignment which determines the subtitle position, relative to the left and right edges of the control.

    Use the subtitleAlignment property to Gets or sets horizontal alignment.

    this.chart.subtitleAlignment = HorizontalAlignment.Right;

    Returns HorizontalAlignment

  • Gets or sets horizontal alignment which determines the subtitle position, relative to the left and right edges of the control.

    Use the subtitleAlignment property to Gets or sets horizontal alignment.

    this.chart.subtitleAlignment = HorizontalAlignment.Right;

    Parameters

    • v: HorizontalAlignment

    Returns void

subtitleBottomMargin

  • get subtitleBottomMargin(): number
  • set subtitleBottomMargin(v: number): void
  • Gets or sets the bottom margin of chart subtitle

    Use subtitleBottomMargin property for the bottom margin of chart subtitle.

    this.chart.subtitleBottomMargin = 10 ;

    Returns number

  • Gets or sets the bottom margin of chart subtitle

    Use subtitleBottomMargin property for the bottom margin of chart subtitle.

    this.chart.subtitleBottomMargin = 10 ;

    Parameters

    • v: number

    Returns void

subtitleLeftMargin

  • get subtitleLeftMargin(): number
  • set subtitleLeftMargin(v: number): void
  • Gets or sets the left margin of chart subtitle

    Use subtitleLeftMargin property for the left margin of chart subtitle.

    this.chart.subtitleLeftMargin = 20 ;

    Returns number

  • Gets or sets the left margin of chart subtitle

    Use subtitleLeftMargin property for the left margin of chart subtitle.

    this.chart.subtitleLeftMargin = 20 ;

    Parameters

    • v: number

    Returns void

subtitleRightMargin

  • get subtitleRightMargin(): number
  • set subtitleRightMargin(v: number): void
  • Gets or sets the right margin of chart subtitle

    Use subtitleRightMargin property for the right margin of chart subtitle.

     this.chart.subtitleRightMargin = 20 ;

    Returns number

  • Gets or sets the right margin of chart subtitle

    Use subtitleRightMargin property for the right margin of chart subtitle.

     this.chart.subtitleRightMargin = 20 ;

    Parameters

    • v: number

    Returns void

subtitleTextColor

  • get subtitleTextColor(): string
  • set subtitleTextColor(v: string): void
  • Gets or sets color of chart subtitle

    Use subtitleTextColor property to color the subtitle.

    this.chart.subtitleTextColor = "#ff0000" ;

    Returns string

  • Gets or sets color of chart subtitle

    Use subtitleTextColor property to color the subtitle.

    this.chart.subtitleTextColor = "#ff0000" ;

    Parameters

    • v: string

    Returns void

subtitleTextStyle

  • get subtitleTextStyle(): string
  • set subtitleTextStyle(v: string): void
  • Gets or sets CSS font property for the chart subtitle

    Use subtitleTextStyle property for the CSS font of the chart subtitle.

    this.chart.subtitleTextStyle= "16pt Verdona";

    Returns string

  • Gets or sets CSS font property for the chart subtitle

    Use subtitleTextStyle property for the CSS font of the chart subtitle.

    this.chart.subtitleTextStyle= "16pt Verdona";

    Parameters

    • v: string

    Returns void

subtitleTopMargin

  • get subtitleTopMargin(): number
  • set subtitleTopMargin(v: number): void
  • Gets or sets the top margin of chart subtitle

    Use subtitleTopMargin property for the top margin of chart subtitle.

    this.chart.subtitleTopMargin = 10;

    Returns number

  • Gets or sets the top margin of chart subtitle

    Use subtitleTopMargin property for the top margin of chart subtitle.

    this.chart.subtitleTopMargin = 10;

    Parameters

    • v: number

    Returns void

thickness

  • get thickness(): number
  • set thickness(v: number): void
  • Gets or sets the thickness for all series in this chart. Depending on the ChartType, this can be the main brush used, or just the outline.

    Use the thickness property for the thickness of all the series in this chart.

    Returns number

  • Gets or sets the thickness for all series in this chart. Depending on the ChartType, this can be the main brush used, or just the outline.

    Use the thickness property for the thickness of all the series in this chart.

    Parameters

    • v: number

    Returns void

titleAlignment

  • get titleAlignment(): HorizontalAlignment
  • set titleAlignment(v: HorizontalAlignment): void
  • Gets or sets horizontal alignment which determines the title position, relative to the left and right edges of the control.

    Use the titleAlignment property for the horizontal alignment of the title.

    this.chart.titleAlignment = HorizontalAlignment.Center;

    Returns HorizontalAlignment

  • Gets or sets horizontal alignment which determines the title position, relative to the left and right edges of the control.

    Use the titleAlignment property for the horizontal alignment of the title.

    this.chart.titleAlignment = HorizontalAlignment.Center;

    Parameters

    • v: HorizontalAlignment

    Returns void

titleBottomMargin

  • get titleBottomMargin(): number
  • set titleBottomMargin(v: number): void
  • Gets or sets the bottom margin of chart title

    Use titleBottomMargin property for the bottom margin of chart title.

     this.chart.titleBottomMargin = 5;

    Returns number

  • Gets or sets the bottom margin of chart title

    Use titleBottomMargin property for the bottom margin of chart title.

     this.chart.titleBottomMargin = 5;

    Parameters

    • v: number

    Returns void

titleLeftMargin

  • get titleLeftMargin(): number
  • set titleLeftMargin(v: number): void
  • Gets or sets the left margin of chart title

    Use titleLeftMargin property for the left margin of chart title.

    this.chart.titleLeftMargin = 10;

    Returns number

  • Gets or sets the left margin of chart title

    Use titleLeftMargin property for the left margin of chart title.

    this.chart.titleLeftMargin = 10;

    Parameters

    • v: number

    Returns void

titleRightMargin

  • get titleRightMargin(): number
  • set titleRightMargin(v: number): void
  • Gets or sets the right margin of chart title

    Use titleLeftMargin property for the right margin of chart title.

    this.chart.titleRightMargin = 10;

    Returns number

  • Gets or sets the right margin of chart title

    Use titleLeftMargin property for the right margin of chart title.

    this.chart.titleRightMargin = 10;

    Parameters

    • v: number

    Returns void

titleTextColor

  • get titleTextColor(): string
  • set titleTextColor(v: string): void
  • Gets or sets color of chart title

    Use titleTextColor property to color the chart title

     this.chart.titleTextColor="red" ;

    Returns string

  • Gets or sets color of chart title

    Use titleTextColor property to color the chart title

     this.chart.titleTextColor="red" ;

    Parameters

    • v: string

    Returns void

titleTextStyle

  • get titleTextStyle(): string
  • set titleTextStyle(v: string): void
  • Gets or sets CSS font property for the chart title

    Use titleTextStyle property for the CSS font property of the chart title

    this.chart.xAxisTitleTextStyle = "24pt Verdona";

    Returns string

  • Gets or sets CSS font property for the chart title

    Use titleTextStyle property for the CSS font property of the chart title

    this.chart.xAxisTitleTextStyle = "24pt Verdona";

    Parameters

    • v: string

    Returns void

titleTopMargin

  • get titleTopMargin(): number
  • set titleTopMargin(v: number): void
  • Gets or sets the top margin of chart title

    Use titleTopMargin property for the top margin of chart title.

    this.chart.titleTopMargin = 10;

    Returns number

  • Gets or sets the top margin of chart title

    Use titleTopMargin property for the top margin of chart title.

    this.chart.titleTopMargin = 10;

    Parameters

    • v: number

    Returns void

toolTipType

tooltipTemplate

tooltipTemplates

topMargin

  • get topMargin(): number
  • set topMargin(v: number): void
  • Gets or sets the top margin of the chart content.

    Use topMargin property for the margin of the chart content.

    this.chart.topMargin=20;

    Returns number

  • Gets or sets the top margin of the chart content.

    Use topMargin property for the margin of the chart content.

    this.chart.topMargin=20;

    Parameters

    • v: number

    Returns void

transitionDuration

  • get transitionDuration(): number
  • set transitionDuration(v: number): void
  • Gets or sets the duration used for animating series plots when the data is changing

    Use the transitionDuration property to animating between data values.

    this.chart.transitionDuratio= 500;

    Returns number

  • Gets or sets the duration used for animating series plots when the data is changing

    Use the transitionDuration property to animating between data values.

    this.chart.transitionDuratio= 500;

    Parameters

    • v: number

    Returns void

transitionEasingFunction

  • get transitionEasingFunction(): function
  • set transitionEasingFunction(v: function): void
  • Gets or sets the easing function used for animating series plots when the data is changing. This can be set to one of the known values "linear" or "cubic," or it can be set to an easing function which takes a single numeric parameter and returns a number.

    The 'transitionInEasingFunction' property used for easing function for animating series plots when the chart is loading into view.

    this.chart.transitionInEasingFunction=  this.cubicFunc;
    
    cubicFunc(time: number) : number
      {
        return time;
      }

    Returns function

      • (time: number): number
      • Parameters

        • time: number

        Returns number

  • Gets or sets the easing function used for animating series plots when the data is changing. This can be set to one of the known values "linear" or "cubic," or it can be set to an easing function which takes a single numeric parameter and returns a number.

    The 'transitionInEasingFunction' property used for easing function for animating series plots when the chart is loading into view.

    this.chart.transitionInEasingFunction=  this.cubicFunc;
    
    cubicFunc(time: number) : number
      {
        return time;
      }

    Parameters

    • v: function
        • (time: number): number
        • Parameters

          • time: number

          Returns number

    Returns void

transitionInDuration

  • get transitionInDuration(): number
  • set transitionInDuration(v: number): void
  • Gets or sets the duration used for animating series plots when the chart is loading into view

    transitionInDuration controls the length of time taken by the transition-in animation. Try setting it to 2 seconds:

    Returns number

  • Gets or sets the duration used for animating series plots when the chart is loading into view

    transitionInDuration controls the length of time taken by the transition-in animation. Try setting it to 2 seconds:

    Parameters

    • v: number

    Returns void

transitionInEasingFunction

  • get transitionInEasingFunction(): function
  • set transitionInEasingFunction(v: function): void
  • Gets or sets the easing function used for animating series plots when the chart is loading into view This can be set to one of the known values "linear" or "cubic," or it can be set to an easing function which takes a single numeric parameter and returns a number.

    Returns function

      • (time: number): number
      • Parameters

        • time: number

        Returns number

  • Gets or sets the easing function used for animating series plots when the chart is loading into view This can be set to one of the known values "linear" or "cubic," or it can be set to an easing function which takes a single numeric parameter and returns a number.

    Parameters

    • v: function
        • (time: number): number
        • Parameters

          • time: number

          Returns number

    Returns void

transitionInMode

  • Gets or sets the method that determines how to animate series plots when the chart is loading into view

    transitionInMode controls the direction of the transition-in animation.

    Returns CategoryTransitionInMode

  • Gets or sets the method that determines how to animate series plots when the chart is loading into view

    transitionInMode controls the direction of the transition-in animation.

    Parameters

    Returns void

transitionInSpeedType

  • Gets or sets the arrival speed used for animating series plots when the chart is loading into view

    transitionInSpeedType controls the speed of the transition-in animation.

    Returns TransitionInSpeedType

  • Gets or sets the arrival speed used for animating series plots when the chart is loading into view

    transitionInSpeedType controls the speed of the transition-in animation.

    Parameters

    Returns void

trendLineBrushes

  • get trendLineBrushes(): string[]
  • set trendLineBrushes(v: string[]): void
  • Gets or sets the palette of brushes to used for coloring trend lines in this chart. The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection

    Use the trendLineBrushes property for coloring trend lines in the chart.

    this.chart.trendLineBrushes=["#ff0000", "#ffff00", "#00ffff"]    ;

    Returns string[]

  • Gets or sets the palette of brushes to used for coloring trend lines in this chart. The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection

    Use the trendLineBrushes property for coloring trend lines in the chart.

    this.chart.trendLineBrushes=["#ff0000", "#ffff00", "#00ffff"]    ;

    Parameters

    • v: string[]

    Returns void

trendLinePeriod

  • get trendLinePeriod(): number
  • set trendLinePeriod(v: number): void

trendLineThickness

  • get trendLineThickness(): number
  • set trendLineThickness(v: number): void
  • Gets or sets the thickness of the trend lines in this chart. This property applies only to these chart types: point, line, spline, and bubble

    Use the trendLineThickness property for the thickness of the trend lines in the chart.

    this.chart.trendLineThickness=2;

    Returns number

  • Gets or sets the thickness of the trend lines in this chart. This property applies only to these chart types: point, line, spline, and bubble

    Use the trendLineThickness property for the thickness of the trend lines in the chart.

    this.chart.trendLineThickness=2;

    Parameters

    • v: number

    Returns void

trendLineType

  • get trendLineType(): TrendLineType
  • set trendLineType(v: TrendLineType): void
  • Gets or sets the formula used for calculating trend lines in this chart. This property applies only to these chart types: point, line, spline, and bubble

    Use the trendLineType property for calculating trend lines.

    this.chart.trendLineType = TrendLineType.CubicFit;

    Returns TrendLineType

  • Gets or sets the formula used for calculating trend lines in this chart. This property applies only to these chart types: point, line, spline, and bubble

    Use the trendLineType property for calculating trend lines.

    this.chart.trendLineType = TrendLineType.CubicFit;

    Parameters

    • v: TrendLineType

    Returns void

unknownValuePlotting

  • get unknownValuePlotting(): UnknownValuePlotting
  • set unknownValuePlotting(v: UnknownValuePlotting): void
  • Gets or sets the behavior that determines how unknown values will be plotted on the chart. Null and Double.NaN are two examples of unknown values.

    Use the unknownValuePlotting property to determines the behavior that how unknown values will be plotted on the chart.

    this.chart.unknownValuePlotting =UnknownValuePlotting.DontPlot;

    Returns UnknownValuePlotting

  • Gets or sets the behavior that determines how unknown values will be plotted on the chart. Null and Double.NaN are two examples of unknown values.

    Use the unknownValuePlotting property to determines the behavior that how unknown values will be plotted on the chart.

    this.chart.unknownValuePlotting =UnknownValuePlotting.DontPlot;

    Parameters

    • v: UnknownValuePlotting

    Returns void

viewport

  • get viewport(): IgRect
  • Gets a rectangle representing the bounds of the plot area.

    viewport property representing the bounds of the plot area.

    let viewport:Rect =  this.chart.viewport;

    Returns IgRect

width

  • get width(): string
  • set width(value: string): void
  • Returns string

  • Parameters

    • value: string

    Returns void

windowRect

  • get windowRect(): IgRect
  • set windowRect(v: IgRect): void
  • Gets or sets the rectangle representing the current scroll and zoom state of the chart. WindowRect is expressed as a Rectangle with coordinates and sizes between 0 and 1.

    Use windowRect property representing the current scroll and zoom state of the chart.

    this.chart.windowRect =[0,0,1,1];

    Returns IgRect

  • Gets or sets the rectangle representing the current scroll and zoom state of the chart. WindowRect is expressed as a Rectangle with coordinates and sizes between 0 and 1.

    Use windowRect property representing the current scroll and zoom state of the chart.

    this.chart.windowRect =[0,0,1,1];

    Parameters

    • v: IgRect

    Returns void

xAxisActualMaximum

  • get xAxisActualMaximum(): number
  • Gets the current maximum value for the X-axis.

    Returns number

xAxisActualMinimum

  • get xAxisActualMinimum(): number
  • Gets the current minimum value for the X-axis.

    Returns number

xAxisExtent

  • get xAxisExtent(): number
  • set xAxisExtent(v: number): void
  • 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.

    this.chart.xAxisExtent="250";

    Returns number

  • Gets or sets the distance between the X-axis and the bottom of the chart.

    To allocate space between the x-axis and the edge of the chart, set the xAxisExtent property.

    this.chart.xAxisExtent="250";

    Parameters

    • v: number

    Returns void

xAxisFormatLabel

  • get xAxisFormatLabel(): function
  • set xAxisFormatLabel(v: function): void
  • 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.

    formatX(item: any): string {
        return "[ " + item.label + "! ]";
    }

    Returns function

      • (item: any): string
      • Parameters

        • item: any

        Returns string

  • 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.

    formatX(item: any): string {
        return "[ " + item.label + "! ]";
    }

    Parameters

    • v: function
        • (item: any): string
        • Parameters

          • item: any

          Returns string

    Returns void

xAxisGap

  • get xAxisGap(): number
  • set xAxisGap(v: number): void
  • Gets or sets the amount of space between adjacent categories for the X-axis. The gap is silently clamped to the range [0, 1] when used.

    Use the xAxisGap property to configure the spacing between items on the x-axis. This property is relevant only when the displayed series is a type with item spacing, like column series.

    An xAxisGap of 0 allocates no space between items. An xAxisGap of 1 allocates a space between items equal to the width of one item.

    To set the item spacing to 75% the width of one item, set the xAxisGap to 0.75, as in this code:

    Returns number

  • Gets or sets the amount of space between adjacent categories for the X-axis. The gap is silently clamped to the range [0, 1] when used.

    Use the xAxisGap property to configure the spacing between items on the x-axis. This property is relevant only when the displayed series is a type with item spacing, like column series.

    An xAxisGap of 0 allocates no space between items. An xAxisGap of 1 allocates a space between items equal to the width of one item.

    To set the item spacing to 75% the width of one item, set the xAxisGap to 0.75, as in this code:

    Parameters

    • v: number

    Returns void

xAxisInterval

  • get xAxisInterval(): number
  • set xAxisInterval(v: number): void
  • Gets or sets the frequency of displayed labels along the X-axis. Gets or sets the set value is a factor that determines which labels will be hidden. For example, an interval of 2 will display every other label.

    xAxisInterval determines how often to show a label, tickmark, and/or gridline along the x-axis. Set this property to n_ to display a label every _nth item.

    Returns number

  • Gets or sets the frequency of displayed labels along the X-axis. Gets or sets the set value is a factor that determines which labels will be hidden. For example, an interval of 2 will display every other label.

    xAxisInterval determines how often to show a label, tickmark, and/or gridline along the x-axis. Set this property to n_ to display a label every _nth item.

    Parameters

    • v: number

    Returns void

xAxisInverted

  • get xAxisInverted(): boolean
  • set xAxisInverted(v: boolean): void
  • 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.

    this.chart.XAxisInverted="True";

    Returns boolean

  • 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.

    this.chart.XAxisInverted="True";

    Parameters

    • v: boolean

    Returns void

xAxisLabel

  • get xAxisLabel(): any
  • set xAxisLabel(v: any): void
  • Gets or sets the format for labels along the X-axis.

    Returns any

  • Gets or sets the format for labels along the X-axis.

    Parameters

    • v: any

    Returns void

xAxisLabelAngle

  • get xAxisLabelAngle(): number
  • set xAxisLabelAngle(v: number): void
  • 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.

    this.chart.xAxisLabelAngle="45";

    Returns number

  • 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.

    this.chart.xAxisLabelAngle="45";

    Parameters

    • v: number

    Returns void

xAxisLabelBottomMargin

  • get xAxisLabelBottomMargin(): number
  • set xAxisLabelBottomMargin(v: number): void
  • 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.

    this.chart.xAxisLabelBottomMargin ="100";

    Returns number

  • Gets or sets the bottom margin of labels on the X-axis

    Use the xAxisLabelBottomMargin property to apply a margin below the x-axis labels.

    this.chart.xAxisLabelBottomMargin ="100";

    Parameters

    • v: number

    Returns void

xAxisLabelHorizontalAlignment

  • get xAxisLabelHorizontalAlignment(): HorizontalAlignment
  • set xAxisLabelHorizontalAlignment(v: HorizontalAlignment): void

xAxisLabelLeftMargin

  • get xAxisLabelLeftMargin(): number
  • set xAxisLabelLeftMargin(v: number): void
  • 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.

    this.chart.xAxisLabelLeftMargin ="100";

    Returns number

  • 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.

    this.chart.xAxisLabelLeftMargin ="100";

    Parameters

    • v: number

    Returns void

xAxisLabelRightMargin

  • get xAxisLabelRightMargin(): number
  • set xAxisLabelRightMargin(v: number): void
  • 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.

    this.chart.xAxisLabelRightMargin="100";

    Returns number

  • Gets or sets the right margin of labels on the X-axis

    Use the xAxisLabelRightMargin property to apply a margin right of the x-axis labels.

    this.chart.xAxisLabelRightMargin="100";

    Parameters

    • v: number

    Returns void

xAxisLabelTextColor

  • get xAxisLabelTextColor(): string
  • set xAxisLabelTextColor(v: string): void
  • 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.

    this.chart.xAxisLabelTextColor="green";

    Returns 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.

    this.chart.xAxisLabelTextColor="green";

    Parameters

    • v: string

    Returns void

xAxisLabelTextStyle

  • get xAxisLabelTextStyle(): string
  • set xAxisLabelTextStyle(v: string): void
  • Gets or sets CSS font property for labels on X-axis

    To change the font of x-axis labels, set the xAxisLabelTextStyle property.

    this.chart.xAxisLabelTextStyle="italic 15px arial, sans-serif";

    Returns string

  • Gets or sets CSS font property for labels on X-axis

    To change the font of x-axis labels, set the xAxisLabelTextStyle property.

    this.chart.xAxisLabelTextStyle="italic 15px arial, sans-serif";

    Parameters

    • v: string

    Returns void

xAxisLabelTopMargin

  • get xAxisLabelTopMargin(): number
  • set xAxisLabelTopMargin(v: number): void
  • 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.

    this.chart.xAxisTitleTopMargin="250";

    Returns number

  • Gets or sets the top margin of labels on the X-axis

    Use the xAxisLabelTopMargin property to apply a margin above the x-axis labels.

    this.chart.xAxisTitleTopMargin="250";

    Parameters

    • v: number

    Returns void

xAxisLabelVerticalAlignment

  • get xAxisLabelVerticalAlignment(): VerticalAlignment
  • set xAxisLabelVerticalAlignment(v: VerticalAlignment): void
  • Gets or sets Vertical alignment of X-axis labels.

    Use the xAxisLabelVerticalAlignment property to change the vertical position of x-axis labels.

    this.chart.xAxisLabelVerticalAlignment="bottom";

    Returns VerticalAlignment

  • Gets or sets Vertical alignment of X-axis labels.

    Use the xAxisLabelVerticalAlignment property to change the vertical position of x-axis labels.

    this.chart.xAxisLabelVerticalAlignment="bottom";

    Parameters

    • v: VerticalAlignment

    Returns void

xAxisLabelVisibility

  • get xAxisLabelVisibility(): Visibility
  • set xAxisLabelVisibility(v: Visibility): void
  • Gets or sets Visibility of X-axis labels.

    To hide the x-axis labels, set xAxisLabelVisibility to collapsed.

    this.chart.xAxisLabelVisibility="collapsed";

    Returns Visibility

  • Gets or sets Visibility of X-axis labels.

    To hide the x-axis labels, set xAxisLabelVisibility to collapsed.

    this.chart.xAxisLabelVisibility="collapsed";

    Parameters

    • v: Visibility

    Returns void

xAxisMajorStroke

  • get xAxisMajorStroke(): string
  • set xAxisMajorStroke(v: string): void
  • 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.

    this.chart.xAxisMajorStroke="green";

    Returns string

  • 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.

    this.chart.xAxisMajorStroke="green";

    Parameters

    • v: string

    Returns void

xAxisMajorStrokeThickness

  • get xAxisMajorStrokeThickness(): number
  • set xAxisMajorStrokeThickness(v: number): void
  • 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.

    this.chart.xAxisMajorStrokeThickness="3" ;

    Returns number

  • 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.

    this.chart.xAxisMajorStrokeThickness="3" ;

    Parameters

    • v: number

    Returns void

xAxisMinorInterval

  • get xAxisMinorInterval(): number
  • set xAxisMinorInterval(v: number): void
  • Gets or sets the frequency of displayed minor lines along the X-axis. Gets or sets the set value is a factor that determines how the minor lines will be displayed.

    xAxisMinorInterval determines how often to show a minor gridline along the x-axis. This property is relevant only when the displayed series is a type with grouping, like column series.

    xAxisMinorInterval is expressed as a number between 0 and 1, representing the frequency of the interval. To display minor gridlines representing 10ths of an item width, set xAxisMinorInterval to 0.1.

    Returns number

  • Gets or sets the frequency of displayed minor lines along the X-axis. Gets or sets the set value is a factor that determines how the minor lines will be displayed.

    xAxisMinorInterval determines how often to show a minor gridline along the x-axis. This property is relevant only when the displayed series is a type with grouping, like column series.

    xAxisMinorInterval is expressed as a number between 0 and 1, representing the frequency of the interval. To display minor gridlines representing 10ths of an item width, set xAxisMinorInterval to 0.1.

    Parameters

    • v: number

    Returns void

xAxisMinorStroke

  • get xAxisMinorStroke(): string
  • set xAxisMinorStroke(v: string): void
  • 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.

    this.chart.xAxisExtent="250";

    Returns 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.

    this.chart.xAxisExtent="250";

    Parameters

    • v: string

    Returns void

xAxisMinorStrokeThickness

  • get xAxisMinorStrokeThickness(): number
  • set xAxisMinorStrokeThickness(v: number): void
  • 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.

    this.chart.xAxisMinorStrokeThickness="3";

    Returns number

  • Gets or sets the thickness to apply to minor gridlines along the X-axis.

    Set xAxisMinorStrokeThickness to control the thickness of minor gridlines extending vertically from the x-axis.

    this.chart.xAxisMinorStrokeThickness="3";

    Parameters

    • v: number

    Returns void

xAxisOverlap

  • get xAxisOverlap(): number
  • set xAxisOverlap(v: number): void
  • Gets or sets the amount of overlap between adjacent categories for the X-axis. Gets or sets the overlap is silently clamped to the range [-1, 1] when used.

    Use the xAxisOverlap property to configure the spacing between items on the x-axis. This property is relevant only when the displayed series is a type with item spacing, like column series.

    An xAxisOverlap of 0 places grouped items adjacent to each other. An xAxisOverlap of 1 places grouped items in the same axis space, completely overlapping. An xAxisOverlap of -1 places a space between grouped items equal to the width of one item.

    To place grouped items with 75% overlap, set the xAxisOverlap to 0.75, as in this code:

    Returns number

  • Gets or sets the amount of overlap between adjacent categories for the X-axis. Gets or sets the overlap is silently clamped to the range [-1, 1] when used.

    Use the xAxisOverlap property to configure the spacing between items on the x-axis. This property is relevant only when the displayed series is a type with item spacing, like column series.

    An xAxisOverlap of 0 places grouped items adjacent to each other. An xAxisOverlap of 1 places grouped items in the same axis space, completely overlapping. An xAxisOverlap of -1 places a space between grouped items equal to the width of one item.

    To place grouped items with 75% overlap, set the xAxisOverlap to 0.75, as in this code:

    Parameters

    • v: number

    Returns void

xAxisStrip

  • get xAxisStrip(): string
  • set xAxisStrip(v: string): void
  • 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.

    this.chart.xAxisStrip="green";

    Returns 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.

    this.chart.xAxisStrip="green";

    Parameters

    • v: string

    Returns void

xAxisStroke

  • get xAxisStroke(): string
  • set xAxisStroke(v: string): void
  • Gets or sets the color to apply to the X-axis line.

    Set xAxisStroke to control the color of the x-axis line.

    this.chart.xAxisStroke="green"";

    Returns string

  • Gets or sets the color to apply to the X-axis line.

    Set xAxisStroke to control the color of the x-axis line.

    this.chart.xAxisStroke="green"";

    Parameters

    • v: string

    Returns void

xAxisStrokeThickness

  • get xAxisStrokeThickness(): number
  • set xAxisStrokeThickness(v: number): void
  • Gets or sets the thickness to apply to the X-axis line.

    Set xAxisStrokeThickness to control the thickness of the x-axis line.

    this.chart.xAxisStrokeThickness="2";

    Returns number

  • Gets or sets the thickness to apply to the X-axis line.

    Set xAxisStrokeThickness to control the thickness of the x-axis line.

    this.chart.xAxisStrokeThickness="2";

    Parameters

    • v: number

    Returns void

xAxisTickLength

  • get xAxisTickLength(): number
  • set xAxisTickLength(v: number): void
  • 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.

    this.chart.xAxisTickLength="25";

    Returns number

  • Gets or sets the length of tickmarks along the X-axis.

    Set xAxisTickLength to control the length of tickmarks extending vertically from the x-axis line.

    this.chart.xAxisTickLength="25";

    Parameters

    • v: number

    Returns void

xAxisTickStroke

  • get xAxisTickStroke(): string
  • set xAxisTickStroke(v: string): void
  • 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.

    this.chart. xAxisTickStroke="green";

    Returns 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.

    this.chart. xAxisTickStroke="green";

    Parameters

    • v: string

    Returns void

xAxisTickStrokeThickness

  • get xAxisTickStrokeThickness(): number
  • set xAxisTickStrokeThickness(v: number): void
  • 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.

    this.chart.xAxisTickStrokeThickness="20";

    Returns number

  • 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.

    this.chart.xAxisTickStrokeThickness="20";

    Parameters

    • v: number

    Returns void

xAxisTitle

  • get xAxisTitle(): string
  • set xAxisTitle(v: string): void
  • Gets or sets the Text to display below the X-axis.

    Set xAxisTitle to display a label adjacent to the x-axis.

    this.chart. xAxisTitle="x axis";

    Returns string

  • Gets or sets the Text to display below the X-axis.

    Set xAxisTitle to display a label adjacent to the x-axis.

    this.chart. xAxisTitle="x axis";

    Parameters

    • v: string

    Returns void

xAxisTitleAlignment

  • get xAxisTitleAlignment(): HorizontalAlignment
  • set xAxisTitleAlignment(v: HorizontalAlignment): void
  • Gets or sets Horizontal alignment of the X-axis title.

    Set xAxisTitleAlignment to control the horizontal alignment of the x-axis title.

    this.chart.xAxisTitleAlignment="right";

    Returns HorizontalAlignment

  • Gets or sets Horizontal alignment of the X-axis title.

    Set xAxisTitleAlignment to control the horizontal alignment of the x-axis title.

    this.chart.xAxisTitleAlignment="right";

    Parameters

    • v: HorizontalAlignment

    Returns void

xAxisTitleAngle

  • get xAxisTitleAngle(): number
  • set xAxisTitleAngle(v: number): void
  • Gets or sets the angle of rotation for the X-axis title.

    Set xAxisTitleAngle to control the rotation of the x-axis title.

    this.chart.xAxisTitleAngle="50";

    Returns number

  • Gets or sets the angle of rotation for the X-axis title.

    Set xAxisTitleAngle to control the rotation of the x-axis title.

    this.chart.xAxisTitleAngle="50";

    Parameters

    • v: number

    Returns void

xAxisTitleBottomMargin

  • get xAxisTitleBottomMargin(): number
  • set xAxisTitleBottomMargin(v: number): void
  • 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.

    this.chart.xAxisTitleBottomMargin="150";

    Returns number

  • Gets or sets the bottom margin of a title on the X-axis

    Use the xAxisTitleBottomMargin property to apply a margin below the x-axis title.

    this.chart.xAxisTitleBottomMargin="150";

    Parameters

    • v: number

    Returns void

xAxisTitleLeftMargin

  • get xAxisTitleLeftMargin(): number
  • set xAxisTitleLeftMargin(v: number): void
  • 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.

    this.chart.xAxisTitleLeftMargin="150";

    Returns number

  • Gets or sets the left margin of a title on the X-axis

    Use the xAxisTitleLeftMargin property to apply a margin left of the x-axis title.

    this.chart.xAxisTitleLeftMargin="150";

    Parameters

    • v: number

    Returns void

xAxisTitleMargin

  • get xAxisTitleMargin(): number
  • set xAxisTitleMargin(v: number): void
  • 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.

    Returns number

  • 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.

    Parameters

    • v: number

    Returns void

xAxisTitleRightMargin

  • get xAxisTitleRightMargin(): number
  • set xAxisTitleRightMargin(v: number): void
  • 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.

    this.chart.xAxisTitleRightMargin="100";

    Returns number

  • Gets or sets the right margin of a title on the X-axis

    Use the xAxisTitleRightMargin property to apply a margin right of the x-axis title.

    this.chart.xAxisTitleRightMargin="100";

    Parameters

    • v: number

    Returns void

xAxisTitleTextColor

  • get xAxisTitleTextColor(): string
  • set xAxisTitleTextColor(v: string): void
  • 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.

    this.chart.xAxisTitleTextColor="green";

    Returns 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.

    this.chart.xAxisTitleTextColor="green";

    Parameters

    • v: string

    Returns void

xAxisTitleTextStyle

  • get xAxisTitleTextStyle(): string
  • set xAxisTitleTextStyle(v: string): void
  • Gets or sets CSS font property for title on X-axis

    To change the font of the x-axis title, set the xAxisTitleTextStyle property.

    this.chart.xAxisTitleTextStyle="italic 15px arial, sans-serif";

    Returns 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.

    this.chart.xAxisTitleTextStyle="italic 15px arial, sans-serif";

    Parameters

    • v: string

    Returns void

xAxisTitleTopMargin

  • get xAxisTitleTopMargin(): number
  • set xAxisTitleTopMargin(v: number): void
  • 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.

    this.chart.xAxisTitleTopMargin="150";

    Returns number

  • Gets or sets the top margin of a title on the X-axis

    Use the xAxisTitleTopMargin property to apply a margin above the x-axis title.

    this.chart.xAxisTitleTopMargin="150";

    Parameters

    • v: number

    Returns void

yAxisAbbreviateLargeNumbers

  • get yAxisAbbreviateLargeNumbers(): boolean
  • set yAxisAbbreviateLargeNumbers(v: boolean): void
  • Gets or sets whether the large numbers on the Y-axis labels are abbreviated.

    To abbreviate on the y-axis using formats like "1K" or "1M," set yAxisAbbreviateLargeNumbers to true.

    Returns boolean

  • Gets or sets whether the large numbers on the Y-axis labels are abbreviated.

    To abbreviate on the y-axis using formats like "1K" or "1M," set yAxisAbbreviateLargeNumbers to true.

    Parameters

    • v: boolean

    Returns void

yAxisActualMaximum

  • get yAxisActualMaximum(): number
  • Gets the current maximum value for the Y-axis.

    Returns number

yAxisActualMinimum

  • get yAxisActualMinimum(): number
  • Gets the current minimum value for the Y-axis.

    Returns number

yAxisExtent

  • get yAxisExtent(): number
  • set yAxisExtent(v: number): void
  • 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.

    this.chart.xAxisExtent="250";

    Returns number

  • Gets or sets the distance between the Y-axis and the left edge of the chart.

    To allocate space between the x-axis and the edge of the chart, set the xAxisExtent property.

    this.chart.xAxisExtent="250";

    Parameters

    • v: number

    Returns void

yAxisFormatLabel

  • get yAxisFormatLabel(): function
  • set yAxisFormatLabel(v: function): void
  • 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.

    formatY(value: any): string {
        return "[ " + value+ "! ]";
    }

    Returns function

      • (item: any): string
      • Parameters

        • item: any

        Returns 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.

    formatY(value: any): string {
        return "[ " + value+ "! ]";
    }

    Parameters

    • v: function
        • (item: any): string
        • Parameters

          • item: any

          Returns string

    Returns void

yAxisInterval

  • get yAxisInterval(): number
  • set yAxisInterval(v: number): void
  • Gets or sets the distance between each label and grid line along the Y-axis.

    yAxisInterval determines how often to show a label, tickmark, and/or gridline along the y-axis. Set this property to a number less than the numeric range of the y-axis.

    Returns number

  • Gets or sets the distance between each label and grid line along the Y-axis.

    yAxisInterval determines how often to show a label, tickmark, and/or gridline along the y-axis. Set this property to a number less than the numeric range of the y-axis.

    Parameters

    • v: number

    Returns void

yAxisInverted

  • get yAxisInverted(): boolean
  • set yAxisInverted(v: boolean): void
  • 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:

    this.chart.yAxisInverted="true";

    The default value of yAxisInverted is false.

    Returns boolean

  • Gets or sets whether to invert the direction of the Y-axis by placing the minimum numeric value at the top of the chart.

    You can use yAxisInverted to invert the scale of the y axis like this:

    this.chart.yAxisInverted="true";

    The default value of yAxisInverted is false.

    Parameters

    • v: boolean

    Returns void

yAxisIsLogarithmic

  • get yAxisIsLogarithmic(): boolean
  • set yAxisIsLogarithmic(v: boolean): void
  • Gets or sets whether the Y-axis should use a logarithmic scale instead of a linear one. Since log(-1) is imaginary and log(0) is undefined, it is recommended to enable this property only when the Y-axis minimum is greater than zero.

    Set yAxisIsLogarithmic to true if you want the y-axis to be a logarithmic scale.

    Returns boolean

  • Gets or sets whether the Y-axis should use a logarithmic scale instead of a linear one. Since log(-1) is imaginary and log(0) is undefined, it is recommended to enable this property only when the Y-axis minimum is greater than zero.

    Set yAxisIsLogarithmic to true if you want the y-axis to be a logarithmic scale.

    Parameters

    • v: boolean

    Returns void

yAxisLabel

  • get yAxisLabel(): any
  • set yAxisLabel(v: any): void
  • Gets or sets the property or string from which the labels are derived.

    Returns any

  • Gets or sets the property or string from which the labels are derived.

    Parameters

    • v: any

    Returns void

yAxisLabelAngle

  • get yAxisLabelAngle(): number
  • set yAxisLabelAngle(v: number): void
  • 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.

    this.chart.yAxisLabelAngle="25";

    Returns number

  • Gets or sets the angle of rotation for labels along the Y-axis.

    To control the rotation of labels on the y-axis, set the yAxisLabelAngle property to a number of rotational degrees.

    this.chart.yAxisLabelAngle="25";

    Parameters

    • v: number

    Returns void

yAxisLabelBottomMargin

  • get yAxisLabelBottomMargin(): number
  • set yAxisLabelBottomMargin(v: number): void
  • 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.

    this.chart.yAxisLabelBottomMargin="250";

    Returns number

  • Gets or sets the bottom margin of labels on the Y-axis

    Use the yAxisLabelBottomMargin property to apply a margin below the y-axis labels.

    this.chart.yAxisLabelBottomMargin="250";

    Parameters

    • v: number

    Returns void

yAxisLabelHorizontalAlignment

  • get yAxisLabelHorizontalAlignment(): HorizontalAlignment
  • set yAxisLabelHorizontalAlignment(v: HorizontalAlignment): void
  • Gets or sets Horizontal alignment of Y-axis labels.

    Set the yAxisLabelHorizontalAlignment property to change the horizontal alignment of y-axis labels.

    Returns HorizontalAlignment

  • Gets or sets Horizontal alignment of Y-axis labels.

    Set the yAxisLabelHorizontalAlignment property to change the horizontal alignment of y-axis labels.

    Parameters

    • v: HorizontalAlignment

    Returns void

yAxisLabelLeftMargin

  • get yAxisLabelLeftMargin(): number
  • set yAxisLabelLeftMargin(v: number): void
  • 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.

    this.chart. yAxisLabelLeftMargin="250";

    Returns number

  • Gets or sets the left margin of labels on the Y-axis

    Use the yAxisLabelLeftMargin property to apply a margin left of the y-axis labels.

    this.chart. yAxisLabelLeftMargin="250";

    Parameters

    • v: number

    Returns void

yAxisLabelLocation

  • The 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.

    this.chart.yAxisLabelLocation="outsideRight";

    Returns AxisLabelsLocation

  • The 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.

    this.chart.yAxisLabelLocation="outsideRight";

    Parameters

    Returns void

yAxisLabelRightMargin

  • get yAxisLabelRightMargin(): number
  • set yAxisLabelRightMargin(v: number): void
  • 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.

    this.chart.yAxisLabelRightMargin="250";

    Returns number

  • Gets or sets the right margin of labels on the Y-axis

    Use the yAxisLabelRightMargin property to apply a margin right of the y-axis labels.

    this.chart.yAxisLabelRightMargin="250";

    Parameters

    • v: number

    Returns void

yAxisLabelTextColor

  • get yAxisLabelTextColor(): string
  • set yAxisLabelTextColor(v: string): void
  • 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.

    this.chart.yAxisLabelTextColor="green";

    Returns 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.

    this.chart.yAxisLabelTextColor="green";

    Parameters

    • v: string

    Returns void

yAxisLabelTextStyle

  • get yAxisLabelTextStyle(): string
  • set yAxisLabelTextStyle(v: string): void
  • Gets or sets CSS font property for labels on Y-axis

    To change the font of x-axis labels, set the yAxisLabelTextStyle property.

    this.chart. yAxisLabelTextStyle="italic 15px arial, sans-serif";

    Returns string

  • Gets or sets CSS font property for labels on Y-axis

    To change the font of x-axis labels, set the yAxisLabelTextStyle property.

    this.chart. yAxisLabelTextStyle="italic 15px arial, sans-serif";

    Parameters

    • v: string

    Returns void

yAxisLabelTopMargin

  • get yAxisLabelTopMargin(): number
  • set yAxisLabelTopMargin(v: number): void
  • 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.

    this.chart.yAxisLabelTopMargin="250";

    Returns number

  • Gets or sets the top margin of labels on the Y-axis

    Use the yAxisLabelTopMargin property to apply a margin above the y-axis labels.

    this.chart.yAxisLabelTopMargin="250";

    Parameters

    • v: number

    Returns void

yAxisLabelVerticalAlignment

  • get yAxisLabelVerticalAlignment(): VerticalAlignment
  • set yAxisLabelVerticalAlignment(v: VerticalAlignment): void

yAxisLabelVisibility

  • get yAxisLabelVisibility(): Visibility
  • set yAxisLabelVisibility(v: Visibility): void
  • Gets or sets Visibility of Y-axis labels.

    To hide the y-axis labels, set yAxisLabelVisibility to collapsed.

    this.chart.yAxisLabelVisibility="collapsed"";

    Returns Visibility

  • Gets or sets Visibility of Y-axis labels.

    To hide the y-axis labels, set yAxisLabelVisibility to collapsed.

    this.chart.yAxisLabelVisibility="collapsed"";

    Parameters

    • v: Visibility

    Returns void

yAxisLogarithmBase

  • get yAxisLogarithmBase(): number
  • set yAxisLogarithmBase(v: number): void
  • Gets or sets the base value to use in the log function when mapping the position of data items along the Y-axis. This property is effective only when YAxisIsLogarithmic is true.

    When yAxisIsLogarithmic is true, yAxisLogarithmBase sets the logarithm base of the y-axis scale.

    Returns number

  • Gets or sets the base value to use in the log function when mapping the position of data items along the Y-axis. This property is effective only when YAxisIsLogarithmic is true.

    When yAxisIsLogarithmic is true, yAxisLogarithmBase sets the logarithm base of the y-axis scale.

    Parameters

    • v: number

    Returns void

yAxisMajorStroke

  • get yAxisMajorStroke(): string
  • set yAxisMajorStroke(v: string): void
  • 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.

    this.chart.yAxisMajorStroke="green";

    Returns 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.

    this.chart.yAxisMajorStroke="green";

    Parameters

    • v: string

    Returns void

yAxisMajorStrokeThickness

  • get yAxisMajorStrokeThickness(): number
  • set yAxisMajorStrokeThickness(v: number): void
  • 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.

    this.chart.yAxisMajorStrokeThickness="2";

    Returns number

  • Gets or sets the thickness to apply to major gridlines along the Y-axis.

    Set yAxisMajorStrokeThickness to control the thickness of major gridlines extending horizontally from the y-axis.

    this.chart.yAxisMajorStrokeThickness="2";

    Parameters

    • v: number

    Returns void

yAxisMaximumValue

  • get yAxisMaximumValue(): number
  • set yAxisMaximumValue(v: number): void
  • Gets or sets the data value corresponding to the maximum value of the Y-axis.

    yAxisMaximumValue determines the maximum of the y-axis.

    Returns number

  • Gets or sets the data value corresponding to the maximum value of the Y-axis.

    yAxisMaximumValue determines the maximum of the y-axis.

    Parameters

    • v: number

    Returns void

yAxisMinimumValue

  • get yAxisMinimumValue(): number
  • set yAxisMinimumValue(v: number): void
  • Gets or sets the data value corresponding to the minimum value of the Y-axis.

    yAxisMaximumValue determines the minimum of the y-axis.

    Returns number

  • Gets or sets the data value corresponding to the minimum value of the Y-axis.

    yAxisMaximumValue determines the minimum of the y-axis.

    Parameters

    • v: number

    Returns void

yAxisMinorInterval

  • get yAxisMinorInterval(): number
  • set yAxisMinorInterval(v: number): void
  • Gets or sets the frequency of displayed minor lines along the Y-axis.

    yAxisMinorInterval determines how often to show a minor gridline along the y-axis. Set this property to a number less than the y-axis interval.

    Returns number

  • Gets or sets the frequency of displayed minor lines along the Y-axis.

    yAxisMinorInterval determines how often to show a minor gridline along the y-axis. Set this property to a number less than the y-axis interval.

    Parameters

    • v: number

    Returns void

yAxisMinorStroke

  • get yAxisMinorStroke(): string
  • set yAxisMinorStroke(v: string): void
  • 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.

    this.chart.yAxisMinorStroke="green";

    Returns 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.

    this.chart.yAxisMinorStroke="green";

    Parameters

    • v: string

    Returns void

yAxisMinorStrokeThickness

  • get yAxisMinorStrokeThickness(): number
  • set yAxisMinorStrokeThickness(v: number): void
  • 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.

    this.chart.yAxisMinorStrokeThickness="3";

    Returns number

  • Gets or sets the thickness to apply to minor gridlines along the Y-axis.

    Set yAxisMinorStrokeThickness to control the thickness of minor gridlines extending horizontally from the y-axis.

    this.chart.yAxisMinorStrokeThickness="3";

    Parameters

    • v: number

    Returns void

yAxisStrip

  • get yAxisStrip(): string
  • set yAxisStrip(v: string): void
  • 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.

    this.chart.yAxisStrip="green";

    Returns 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.

    this.chart.yAxisStrip="green";

    Parameters

    • v: string

    Returns void

yAxisStroke

  • get yAxisStroke(): string
  • set yAxisStroke(v: string): void
  • Gets or sets the color to apply to the Y-axis line.

    Set yAxisStroke to control the color of the y-axis line.

    this.chart.yAxisStroke="green";

    Returns string

  • Gets or sets the color to apply to the Y-axis line.

    Set yAxisStroke to control the color of the y-axis line.

    this.chart.yAxisStroke="green";

    Parameters

    • v: string

    Returns void

yAxisStrokeThickness

  • get yAxisStrokeThickness(): number
  • set yAxisStrokeThickness(v: number): void
  • Gets or sets the thickness to apply to the Y-axis line.

    Set yAxisStrokeThickness to control the thickness of the y-axis line.

    this.chart. yAxisStrokeThickness="2";

    Returns number

  • Gets or sets the thickness to apply to the Y-axis line.

    Set yAxisStrokeThickness to control the thickness of the y-axis line.

    this.chart. yAxisStrokeThickness="2";

    Parameters

    • v: number

    Returns void

yAxisTickLength

  • get yAxisTickLength(): number
  • set yAxisTickLength(v: number): void
  • 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.

    this.chart.yAxisTickLength="25";

    Returns number

  • Gets or sets the length of tickmarks along the Y-axis.

    Set yAxisTickLength to control the length of tickmarks extending horizontally from the y-axis line.

    this.chart.yAxisTickLength="25";

    Parameters

    • v: number

    Returns void

yAxisTickStroke

  • get yAxisTickStroke(): string
  • set yAxisTickStroke(v: string): void
  • 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.

    this.chart.yAxisTickStroke="green";

    Returns 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.

    this.chart.yAxisTickStroke="green";

    Parameters

    • v: string

    Returns void

yAxisTickStrokeThickness

  • get yAxisTickStrokeThickness(): number
  • set yAxisTickStrokeThickness(v: number): void
  • 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.

    this.chart.yAxisTickStrokeThickness="25";

    Returns number

  • Gets or sets the thickness to apply to tickmarks along the Y-axis.

    Set yAxisTickStrokeThickness to control the thickness of tickmarks extending vertically from the y-axis line.

    this.chart.yAxisTickStrokeThickness="25";

    Parameters

    • v: number

    Returns void

yAxisTitle

  • get yAxisTitle(): string
  • set yAxisTitle(v: string): void
  • 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.

    this.chart.yAxisTitle="y axis";

    Returns 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.

    this.chart.yAxisTitle="y axis";

    Parameters

    • v: string

    Returns void

yAxisTitleAlignment

  • get yAxisTitleAlignment(): VerticalAlignment
  • set yAxisTitleAlignment(v: VerticalAlignment): void
  • Gets or sets Vertical alignment of the Y-axis title.

    Set yAxisTitleAlignment to control the vertical alignment of the x-axis title.

    this.chart.yAxisTitleAlignment="bottom";

    Returns VerticalAlignment

  • Gets or sets Vertical alignment of the Y-axis title.

    Set yAxisTitleAlignment to control the vertical alignment of the x-axis title.

    this.chart.yAxisTitleAlignment="bottom";

    Parameters

    • v: VerticalAlignment

    Returns void

yAxisTitleAngle

  • get yAxisTitleAngle(): number
  • set yAxisTitleAngle(v: number): void
  • Gets or sets the angle of rotation for the Y-axis title.

    Set yAxisTitleAngle to control the rotation of the y-axis title.

    this.chart.yAxisTitleAngle="25";

    Returns number

  • Gets or sets the angle of rotation for the Y-axis title.

    Set yAxisTitleAngle to control the rotation of the y-axis title.

    this.chart.yAxisTitleAngle="25";

    Parameters

    • v: number

    Returns void

yAxisTitleBottomMargin

  • get yAxisTitleBottomMargin(): number
  • set yAxisTitleBottomMargin(v: number): void
  • 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.

    this.chart.yAxisTitleBottomMargin="150";

    Returns number

  • Gets or sets the bottom margin of a title on the Y-axis

    Use the yAxisTitleBottomMargin property to apply a margin below the y-axis title.

    this.chart.yAxisTitleBottomMargin="150";

    Parameters

    • v: number

    Returns void

yAxisTitleLeftMargin

  • get yAxisTitleLeftMargin(): number
  • set yAxisTitleLeftMargin(v: number): void
  • 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.

    this.chart.yAxisTitleLeftMargin="150";

    Returns number

  • Gets or sets the left margin of a title on the Y-axis

    Use the yAxisTitleLeftMargin property to apply a margin left of the y-axis title.

    this.chart.yAxisTitleLeftMargin="150";

    Parameters

    • v: number

    Returns void

yAxisTitleMargin

  • get yAxisTitleMargin(): number
  • set yAxisTitleMargin(v: number): void
  • 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.

    Returns number

  • Gets or sets the margin around a title on the Y-axis

    Use the yAxisTitleMargin property to set a margin around the y-axis title.

    Parameters

    • v: number

    Returns void

yAxisTitleRightMargin

  • get yAxisTitleRightMargin(): number
  • set yAxisTitleRightMargin(v: number): void
  • 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.

    this.chart.yAxisTitleRightMargin="150";

    Returns number

  • Gets or sets the right margin of a title on the Y-axis

    Use the yAxisTitleRightMargin property to apply a margin right of the y-axis title.

    this.chart.yAxisTitleRightMargin="150";

    Parameters

    • v: number

    Returns void

yAxisTitleTextColor

  • get yAxisTitleTextColor(): string
  • set yAxisTitleTextColor(v: string): void
  • 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.

    this.chart.yAxisTitleTextColor="green";

    Returns 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.

    this.chart.yAxisTitleTextColor="green";

    Parameters

    • v: string

    Returns void

yAxisTitleTextStyle

  • get yAxisTitleTextStyle(): string
  • set yAxisTitleTextStyle(v: string): void
  • Gets or sets CSS font property for title on Y-axis

    To change the font of the x-axis title, set the yAxisTitleTextStyle property.

    this.chart.yAxisTitleTextStyle="italic 15px arial, sans-serif";

    Returns 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.

    this.chart.yAxisTitleTextStyle="italic 15px arial, sans-serif";

    Parameters

    • v: string

    Returns void

yAxisTitleTopMargin

  • get yAxisTitleTopMargin(): number
  • set yAxisTitleTopMargin(v: number): void
  • 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.

    this.chart.yAxisTitleTopMargin="150";

    Returns number

  • Gets or sets the top margin of a title on the Y-axis

    Use the yAxisTitleTopMargin property to apply a margin above the y-axis title.

    this.chart.yAxisTitleTopMargin="150";

    Parameters

    • v: number

    Returns void

Static observedAttributes

  • get observedAttributes(): string[]

Methods

addEventListener

  • addEventListener<K>(type: K, listener: function, options?: boolean | AddEventListenerOptions): void
  • addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void
  • Type parameters

    • K: keyof HTMLElementEventMap

    Parameters

    • type: K
    • listener: function
        • (this: HTMLElement, ev: HTMLElementEventMap[K]): any
        • Parameters

          • this: HTMLElement
          • ev: HTMLElementEventMap[K]

          Returns any

    • Optional options: boolean | AddEventListenerOptions

    Returns void

  • Parameters

    • type: string
    • listener: EventListenerOrEventListenerObject
    • Optional options: boolean | AddEventListenerOptions

    Returns void

after

  • after(...nodes: (string | Node)[]): void
  • Inserts nodes just after node, while replacing strings in nodes with equivalent Text nodes. Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

    Parameters

    • Rest ...nodes: (string | Node)[]

    Returns void

afterContentInit

  • afterContentInit(): void
  • Returns void

animate

  • animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation
  • Parameters

    • keyframes: Keyframe[] | PropertyIndexedKeyframes | null
    • Optional options: number | KeyframeAnimationOptions

    Returns Animation

append

  • append(...nodes: (string | Node)[]): void
  • Inserts nodes after the last child of node, while replacing strings in nodes with equivalent Text nodes. Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

    Parameters

    • Rest ...nodes: (string | Node)[]

    Returns void

appendChild

  • appendChild<T>(newChild: T): T
  • Type parameters

    • T: Node

    Parameters

    • newChild: T

    Returns T

attachShadow

  • attachShadow(shadowRootInitDict: ShadowRootInit): ShadowRoot
  • Creates a shadow root for element and returns it.

    Parameters

    • shadowRootInitDict: ShadowRootInit

    Returns ShadowRoot

attributeChangedCallback

  • attributeChangedCallback(name: string, oldValue: string, newValue: string): void

before

  • before(...nodes: (string | Node)[]): void
  • Inserts nodes just before node, while replacing strings in nodes with equivalent Text nodes. Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

    Parameters

    • Rest ...nodes: (string | Node)[]

    Returns void

bindCalloutsData

  • bindCalloutsData(): void

bindData

  • bindData(): void
  • Returns void

blur

  • blur(): void
  • Returns void

click

  • click(): void
  • Returns void

cloneNode

  • cloneNode(deep?: boolean): Node
  • Returns a copy of node. If deep is true, the copy also includes the node's descendants.

    Parameters

    • Optional deep: boolean

    Returns Node

closest

  • closest<K>(selector: K): HTMLElementTagNameMap[K] | null
  • closest<K>(selector: K): SVGElementTagNameMap[K] | null
  • closest(selector: string): Element | null
  • Returns the first (starting at element) inclusive ancestor that matches selectors, and null otherwise.

    Type parameters

    • K: keyof HTMLElementTagNameMap

    Parameters

    • selector: K

    Returns HTMLElementTagNameMap[K] | null

  • Type parameters

    • K: keyof SVGElementTagNameMap

    Parameters

    • selector: K

    Returns SVGElementTagNameMap[K] | null

  • Parameters

    • selector: string

    Returns Element | null

compareDocumentPosition

  • compareDocumentPosition(other: Node): number
  • Parameters

    • other: Node

    Returns number

connectedCallback

  • connectedCallback(): void

contains

  • contains(other: Node | null): boolean
  • Returns true if other is an inclusive descendant of node, and false otherwise.

    Parameters

    • other: Node | null

    Returns boolean

destroy

  • destroy(): void

disconnectedCallback

  • disconnectedCallback(): void
  • Returns void

dispatchEvent

  • dispatchEvent(event: Event): boolean
  • Dispatches a synthetic event event to target and returns true if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.

    Parameters

    • event: Event

    Returns boolean

exportSerializedVisualData

  • exportSerializedVisualData(): string
  • Export serialized visual data.

    Returns string

flush

  • flush(): void
  • Forces any pending refresh to the chart to be finished.

    Method flush used to Forces any pending deferred work to render on the chart before continuing.

    this.chart.flush();

    Returns void

focus

  • focus(options?: FocusOptions): void
  • Parameters

    • Optional options: FocusOptions

    Returns void

getAnimations

  • getAnimations(): Animation[]
  • Returns Animation[]

getAttribute

  • getAttribute(qualifiedName: string): string | null
  • Returns element's first attribute whose qualified name is qualifiedName, and null if there is no such attribute otherwise.

    Parameters

    • qualifiedName: string

    Returns string | null

getAttributeNS

  • getAttributeNS(namespace: string | null, localName: string): string | null
  • Returns element's attribute whose namespace is namespace and local name is localName, and null if there is no such attribute otherwise.

    Parameters

    • namespace: string | null
    • localName: string

    Returns string | null

getAttributeNames

  • getAttributeNames(): string[]
  • Returns the qualified names of all element's attributes. Can contain duplicates.

    Returns string[]

getAttributeNode

  • getAttributeNode(name: string): Attr | null
  • Parameters

    • name: string

    Returns Attr | null

getAttributeNodeNS

  • getAttributeNodeNS(namespaceURI: string, localName: string): Attr | null
  • Parameters

    • namespaceURI: string
    • localName: string

    Returns Attr | null

getBoundingClientRect

  • getBoundingClientRect(): ClientRect | DOMRect
  • Returns ClientRect | DOMRect

getClientRects

  • getClientRects(): ClientRectList | DOMRectList
  • Returns ClientRectList | DOMRectList

getElementsByClassName

  • getElementsByClassName(classNames: string): HTMLCollectionOf<Element>
  • Parameters

    • classNames: string

    Returns HTMLCollectionOf<Element>

getElementsByTagName

  • getElementsByTagName<K>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>
  • getElementsByTagName<K>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>
  • getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>
  • Type parameters

    • K: keyof HTMLElementTagNameMap

    Parameters

    • qualifiedName: K

    Returns HTMLCollectionOf<HTMLElementTagNameMap[K]>

  • Type parameters

    • K: keyof SVGElementTagNameMap

    Parameters

    • qualifiedName: K

    Returns HTMLCollectionOf<SVGElementTagNameMap[K]>

  • Parameters

    • qualifiedName: string

    Returns HTMLCollectionOf<Element>

getElementsByTagNameNS

  • getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>
  • getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>
  • getElementsByTagNameNS(namespaceURI: string, localName: string): HTMLCollectionOf<Element>
  • Parameters

    • namespaceURI: "http://www.w3.org/1999/xhtml"
    • localName: string

    Returns HTMLCollectionOf<HTMLElement>

  • Parameters

    • namespaceURI: "http://www.w3.org/2000/svg"
    • localName: string

    Returns HTMLCollectionOf<SVGElement>

  • Parameters

    • namespaceURI: string
    • localName: string

    Returns HTMLCollectionOf<Element>

getRootNode

  • getRootNode(options?: GetRootNodeOptions): Node
  • Returns node's shadow-including root.

    Parameters

    • Optional options: GetRootNodeOptions

    Returns Node

getScaledValueX

  • getScaledValueX(unscaledValue: number): number
  • Converts the given visual location to a data value.

    Parameters

    • unscaledValue: number
      • The x-coordinate of the location to scale.

    Returns number

getScaledValueY

  • getScaledValueY(unscaledValue: number): number
  • Converts the given visual location to a data value.

    Parameters

    • unscaledValue: number
      • The y-coordinate of the location to scale.

    Returns number

getUnscaledValueX

  • getUnscaledValueX(scaledValue: number): number
  • Converts the given data value to a visual location.

    Parameters

    • scaledValue: number
      • The data value to un-scale.

    Returns number

getUnscaledValueY

  • getUnscaledValueY(scaledValue: number): number
  • Converts the given data value to a visual location.

    Parameters

    • scaledValue: number
      • The data value to un-scale.

    Returns number

hasAttribute

  • hasAttribute(qualifiedName: string): boolean
  • Returns true if element has an attribute whose qualified name is qualifiedName, and false otherwise.

    Parameters

    • qualifiedName: string

    Returns boolean

hasAttributeNS

  • hasAttributeNS(namespace: string | null, localName: string): boolean
  • Returns true if element has an attribute whose namespace is namespace and local name is localName.

    Parameters

    • namespace: string | null
    • localName: string

    Returns boolean

hasAttributes

  • hasAttributes(): boolean
  • Returns true if element has attributes, and false otherwise.

    Returns boolean

hasChildNodes

  • hasChildNodes(): boolean
  • Returns whether node has children.

    Returns boolean

hasPointerCapture

  • hasPointerCapture(pointerId: number): boolean
  • Parameters

    • pointerId: number

    Returns boolean

hideToolTip

  • hideToolTip(): void
  • Hides the active main tooltip, if displayed.

    Use the hideToolTip method to hide the active tooltip.

    this.chart.hideToolTip();

    Returns void

initializeContent

  • initializeContent(): void
  • Returns void

insertAdjacentElement

  • insertAdjacentElement(position: InsertPosition, insertedElement: Element): Element | null
  • Parameters

    • position: InsertPosition
    • insertedElement: Element

    Returns Element | null

insertAdjacentHTML

  • insertAdjacentHTML(where: InsertPosition, html: string): void
  • Parameters

    • where: InsertPosition
    • html: string

    Returns void

insertAdjacentText

  • insertAdjacentText(where: InsertPosition, text: string): void
  • Parameters

    • where: InsertPosition
    • text: string

    Returns void

insertBefore

  • insertBefore<T>(newChild: T, refChild: Node | null): T
  • Type parameters

    • T: Node

    Parameters

    • newChild: T
    • refChild: Node | null

    Returns T

isDefaultNamespace

  • isDefaultNamespace(namespace: string | null): boolean
  • Parameters

    • namespace: string | null

    Returns boolean

isEqualNode

  • isEqualNode(otherNode: Node | null): boolean
  • Returns whether node and otherNode have the same properties.

    Parameters

    • otherNode: Node | null

    Returns boolean

isSameNode

  • isSameNode(otherNode: Node | null): boolean
  • Parameters

    • otherNode: Node | null

    Returns boolean

lookupNamespaceURI

  • lookupNamespaceURI(prefix: string | null): string | null
  • Parameters

    • prefix: string | null

    Returns string | null

lookupPrefix

  • lookupPrefix(namespace: string | null): string | null
  • Parameters

    • namespace: string | null

    Returns string | null

matches

  • matches(selectors: string): boolean
  • Returns true if matching selectors against element's root yields element, and false otherwise.

    Parameters

    • selectors: string

    Returns boolean

msGetRegionContent

  • msGetRegionContent(): any
  • Returns any

normalize

  • normalize(): void
  • Removes empty exclusive Text nodes and concatenates the data of remaining contiguous exclusive Text nodes into the first of their nodes.

    Returns void

notifyClearItems

  • notifyClearItems(source_: any): void
  • Used to manually notify the chart that the data source has reset or cleared its items.

    Use notifyClearItems method to notifies the chart that the items have been cleared from an associated data source.

    this.chart.notifyClearItems(this.data);

    Parameters

    • source_: any

    Returns void

notifyInsertItem

  • notifyInsertItem(source_: any, index: number, newItem: any): void

notifyRemoveItem

  • notifyRemoveItem(source_: any, index: number, oldItem: any): void

notifyResized

  • notifyResized(): void
  • Called when the control has been resized.

    notifyResized method Called when the control has been resized.

    this.chart.notifyResized();

    Returns void

notifySetItem

  • notifySetItem(source_: any, index: number, oldItem: any, newItem: any): void
  • Parameters

    • source_: any
    • index: number
    • oldItem: any
    • newItem: any

    Returns void

notifyVisualPropertiesChanged

  • notifyVisualPropertiesChanged(): void

prepend

  • prepend(...nodes: (string | Node)[]): void
  • Inserts nodes before the first child of node, while replacing strings in nodes with equivalent Text nodes. Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

    Parameters

    • Rest ...nodes: (string | Node)[]

    Returns void

provideContainer

  • provideContainer(container: any): void

querySelector

  • querySelector<K>(selectors: K): HTMLElementTagNameMap[K] | null
  • querySelector<K>(selectors: K): SVGElementTagNameMap[K] | null
  • querySelector<E>(selectors: string): E | null
  • Returns the first element that is a descendant of node that matches selectors.

    Type parameters

    • K: keyof HTMLElementTagNameMap

    Parameters

    • selectors: K

    Returns HTMLElementTagNameMap[K] | null

  • Type parameters

    • K: keyof SVGElementTagNameMap

    Parameters

    • selectors: K

    Returns SVGElementTagNameMap[K] | null

  • Type parameters

    • E: Element

    Parameters

    • selectors: string

    Returns E | null

querySelectorAll

  • querySelectorAll<K>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>
  • querySelectorAll<K>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>
  • querySelectorAll<E>(selectors: string): NodeListOf<E>
  • Returns all element descendants of node that match selectors.

    Type parameters

    • K: keyof HTMLElementTagNameMap

    Parameters

    • selectors: K

    Returns NodeListOf<HTMLElementTagNameMap[K]>

  • Type parameters

    • K: keyof SVGElementTagNameMap

    Parameters

    • selectors: K

    Returns NodeListOf<SVGElementTagNameMap[K]>

  • Type parameters

    • E: Element

    Parameters

    • selectors: string

    Returns NodeListOf<E>

releasePointerCapture

  • releasePointerCapture(pointerId: number): void
  • Parameters

    • pointerId: number

    Returns void

remove

  • remove(): void
  • Removes node.

    Returns void

removeAttribute

  • removeAttribute(qualifiedName: string): void
  • Removes element's first attribute whose qualified name is qualifiedName.

    Parameters

    • qualifiedName: string

    Returns void

removeAttributeNS

  • removeAttributeNS(namespace: string | null, localName: string): void
  • Removes element's attribute whose namespace is namespace and local name is localName.

    Parameters

    • namespace: string | null
    • localName: string

    Returns void

removeAttributeNode

  • removeAttributeNode(attr: Attr): Attr
  • Parameters

    • attr: Attr

    Returns Attr

removeChild

  • removeChild<T>(oldChild: T): T
  • Type parameters

    • T: Node

    Parameters

    • oldChild: T

    Returns T

removeEventListener

  • removeEventListener<K>(type: K, listener: function, options?: boolean | EventListenerOptions): void
  • removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void
  • Type parameters

    • K: keyof HTMLElementEventMap

    Parameters

    • type: K
    • listener: function
        • (this: HTMLElement, ev: HTMLElementEventMap[K]): any
        • Parameters

          • this: HTMLElement
          • ev: HTMLElementEventMap[K]

          Returns any

    • Optional options: boolean | EventListenerOptions

    Returns void

  • Parameters

    • type: string
    • listener: EventListenerOrEventListenerObject
    • Optional options: boolean | EventListenerOptions

    Returns void

replaceChild

  • replaceChild<T>(newChild: Node, oldChild: T): T
  • Type parameters

    • T: Node

    Parameters

    • newChild: Node
    • oldChild: T

    Returns T

replaceWith

  • replaceWith(...nodes: (string | Node)[]): void
  • Replaces node with nodes, while replacing strings in nodes with equivalent Text nodes. Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

    Parameters

    • Rest ...nodes: (string | Node)[]

    Returns void

requestFullscreen

  • requestFullscreen(): Promise<void>
  • Displays element fullscreen and resolves promise when done.

    Returns Promise<void>

scroll

  • scroll(options?: ScrollToOptions): void
  • scroll(x: number, y: number): void
  • Parameters

    • Optional options: ScrollToOptions

    Returns void

  • Parameters

    • x: number
    • y: number

    Returns void

scrollBy

  • scrollBy(options?: ScrollToOptions): void
  • scrollBy(x: number, y: number): void
  • Parameters

    • Optional options: ScrollToOptions

    Returns void

  • Parameters

    • x: number
    • y: number

    Returns void

scrollIntoView

  • scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void
  • Parameters

    • Optional arg: boolean | ScrollIntoViewOptions

    Returns void

scrollTo

  • scrollTo(options?: ScrollToOptions): void
  • scrollTo(x: number, y: number): void
  • Parameters

    • Optional options: ScrollToOptions

    Returns void

  • Parameters

    • x: number
    • y: number

    Returns void

setAttribute

  • setAttribute(qualifiedName: string, value: string): void
  • Sets the value of element's first attribute whose qualified name is qualifiedName to value.

    Parameters

    • qualifiedName: string
    • value: string

    Returns void

setAttributeNS

  • setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void
  • Sets the value of element's attribute whose namespace is namespace and local name is localName to value.

    Parameters

    • namespace: string | null
    • qualifiedName: string
    • value: string

    Returns void

setAttributeNode

  • setAttributeNode(attr: Attr): Attr | null
  • Parameters

    • attr: Attr

    Returns Attr | null

setAttributeNodeNS

  • setAttributeNodeNS(attr: Attr): Attr | null
  • Parameters

    • attr: Attr

    Returns Attr | null

setPointerCapture

  • setPointerCapture(pointerId: number): void
  • Parameters

    • pointerId: number

    Returns void

toggleAttribute

  • toggleAttribute(qualifiedName: string, force?: boolean): boolean
  • If force is not given, "toggles" qualifiedName, removing it if it is present and adding it if it is not present. If force is true, adds qualifiedName. If force is false, removes qualifiedName. Returns true if qualifiedName is now present, and false otherwise.

    Parameters

    • qualifiedName: string
    • Optional force: boolean

    Returns boolean

webkitMatchesSelector

  • webkitMatchesSelector(selectors: string): boolean
  • Parameters

    • selectors: string

    Returns boolean

Static register

  • register(): void
  • Returns void