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.
<igx-category-chart
[dataSource]="data"
AlignsGridLinesToPixels="true">
</igx-category-chart> this.chart.alignsGridLinesToPixels= true;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.
<igx-category-chart
[dataSource]="data"
AlignsGridLinesToPixels="true">
</igx-category-chart> this.chart.alignsGridLinesToPixels= true;Gets or sets whether the series animations should be allowed when a range change has been detected on an axis.
Gets or sets whether the series animations should be allowed when a range change has been detected on an axis.
Gets or sets the bottom margin around the chart content.
Use the bottomMargin property for the bottom margin around the chart content.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
bottomMargin= 20>
</igx-category-chart>this.chart.bottomMargin=20;Gets or sets the bottom margin around the chart content.
Use the bottomMargin property for the bottom margin around the chart content.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
bottomMargin= 20>
</igx-category-chart>this.chart.bottomMargin=20;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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
Brushes="#ff0000, #cc0000, #aa0000">
</igx-category-chart>this.chart.brushes = ["#ff0000","#00ff00"];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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
Brushes="#ff0000, #cc0000, #aa0000">
</igx-category-chart>this.chart.brushes = ["#ff0000","#00ff00"];Occurs when the style of a callout is updated.
Gets or sets if event annotations should be displayed.
Gets or sets if event annotations should be displayed.
Gets or sets the member path of the content data for the callouts.
Gets or sets the member path of the content data for the callouts.
Gets or sets the member path of the label data for the callouts.
Gets or sets the member path of the label data for the callouts.
Gets or sets if callouts should be displayed.
Gets or sets if callouts should be displayed.
Gets or sets the member path of the X data for the callouts.
Gets or sets the member path of the X data for the callouts.
Gets or sets the member path of the Y data for the callouts.
Gets or sets the member path of the Y data for the callouts.
Gets or sets text to display above the plot area.
Use the chartTitle property to display the text above the plot area.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
title="This is a Title">
</igx-category-chart> this.chart.title= "This is a Title";Gets or sets text to display above the plot area.
Use the chartTitle property to display the text above the plot area.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
title="This is a Title">
</igx-category-chart> this.chart.title= "This is a Title";Gets or sets the type of chart series to generate from the data.
The chartType property determines the type of data series to display.
<igx-category-chart
[dataSource]="data"
chartType="stepArea">
</igx-category-chart>Gets or sets the type of chart series to generate from the data.
The chartType property determines the type of data series to display.
<igx-category-chart
[dataSource]="data"
chartType="stepArea">
</igx-category-chart>Gets or sets whether annotations are shown along the axis for crosshair values
Gets or sets whether annotations are shown along the axis for crosshair values
Gets or sets the crosshairs to be displayed.
Gets or sets the crosshairs to be displayed.
Gets or sets whether crosshairs will snap to the nearest data point.
Gets or sets whether crosshairs will snap to the nearest data point.
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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
excludedProperties="ID">
</igx-category-chart>this.chart.excludedProperties = ["ID", "Discount"];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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
excludedProperties="ID">
</igx-category-chart>this.chart.excludedProperties = ["ID", "Discount"];Gets or sets whether annotations for the final value of each series is displayed on the axis.
Gets or sets whether annotations for the final value of each series is displayed on the axis.
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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
includedProperties="ProductName,Cost" >
</igx-category-chart>this.chart.includedProperties = ["ProductName", "Cost"];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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
includedProperties="ProductName,Cost" >
</igx-category-chart>this.chart.includedProperties = ["ProductName", "Cost"];Gets or sets whether the category should be highlighted when hovered
Gets or sets whether the category should be highlighted when hovered
Gets or sets whether the chart can be horizontally zoomed through user interactions.
Use the isHorizontalZoomEnabled property to allow chart horizontally zoomed .
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
isHorizontalZoomEnabled=true>
</igx-category-chart>this.chart.isHorizontalZoomEnabled = true;Gets or sets whether the chart can be horizontally zoomed through user interactions.
Use the isHorizontalZoomEnabled property to allow chart horizontally zoomed .
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
isHorizontalZoomEnabled=true>
</igx-category-chart>this.chart.isHorizontalZoomEnabled = true;Gets or sets whether the item should be highlighted when hovered
Gets or sets whether the item should be highlighted when hovered
Gets or sets whether the chart can highlight series through user interactions. This property applies to Category Chart and Financial Chart controls.
Gets or sets whether the chart can highlight series through user interactions. This property applies to Category Chart and Financial Chart controls.
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.
<igx-category-chart
[dataSource]="data"
isTransitionInEnabled="true">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
isTransitionInEnabled="true">
</igx-category-chart>Gets or sets whether the chart can be vertically zoomed through user interactions.
Use the isVerticalZoomEnabled property to allow chart zoom vertically.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
isVerticalZoomEnabled=true>
</igx-category-chart> this.chart.isVerticalZoomEnabled = true;Gets or sets whether the chart can be vertically zoomed through user interactions.
Use the isVerticalZoomEnabled property to allow chart zoom vertically.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
isVerticalZoomEnabled=true>
</igx-category-chart> this.chart.isVerticalZoomEnabled = true;Gets or sets the left margin of the chart content.
Use the 'leftMargin' property for the left margin of the chart content.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
leftMargin=20>
</igx-category-chart> this.chart.leftMargin = 20;Gets or sets the left margin of the chart content.
Use the 'leftMargin' property for the left margin of the chart content.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
leftMargin=20>
</igx-category-chart> this.chart.leftMargin = 20;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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
markerBrushes="#ff0000, #cc0000, #aa0000">
</igx-category-chart> this.chart.markerBrushes=[ "#ff0000", "#ffff00", "#00ffff" ];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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
markerBrushes="#ff0000, #cc0000, #aa0000">
</igx-category-chart> this.chart.markerBrushes=[ "#ff0000", "#ffff00", "#00ffff" ];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.
<igx-category-chart
[dataSource]="data"
markerCollisionAvoidance="none">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
markerCollisionAvoidance="none">
</igx-category-chart>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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
markerMaxCount=100 >
</igx-category-chart> this.chart.markerMaxCount = 100 ;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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
markerMaxCount=100 >
</igx-category-chart> this.chart.markerMaxCount = 100 ;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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
markerOutlines="#ff0000, #cc0000, #aa0000">
</igx-category-chart>this.chart.markerOutlines= ["#ff0000", "#ffff00", "#00ffff"] ;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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
markerOutlines="#ff0000, #cc0000, #aa0000">
</igx-category-chart>this.chart.markerOutlines= ["#ff0000", "#ffff00", "#00ffff"] ;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
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
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.
<igx-category-chart
[dataSource]="data"
chartType="waterfall"
negativeBrushes="#ff0000, #cc0000, #aa0000">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
chartType="waterfall"
negativeBrushes="#ff0000, #cc0000, #aa0000">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
chartType="waterfall"
negativeOutlines="#0000ff, #0000cc, #0000aa">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
chartType="waterfall"
negativeOutlines="#0000ff, #0000cc, #0000aa">
</igx-category-chart>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
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
outlines="#ff0000, #cc0000, #aa0000">
</igx-category-chart>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
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
outlines="#ff0000, #cc0000, #aa0000">
</igx-category-chart>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.
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.
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 for all series in this chart.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
resolution= 2>
</igx-category-chart> this.chart.resolution = 2 ;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 for all series in this chart.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
resolution= 2>
</igx-category-chart> this.chart.resolution = 2 ;Gets or sets the right margin of the chart content.
Use rightMargin property for the right margin of the chart content.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
rightMargin=20>
</igx-category-chart> this.chart.rightMargin = 20 ;Gets or sets the right margin of the chart content.
Use rightMargin property for the right margin of the chart content.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
rightMargin=20>
</igx-category-chart> this.chart.rightMargin = 20 ;Event raised when a series is initialized and added to this chart.
SeriesAdded event raised when a series is initialized and added to this chart.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
(seriesAdded)="CategoryChart_SeriesAdded()"
>
</igx-category-chart>CategoryChart_SeriesAdded(sender:any ,aregs:ChartSeriesEventArgs)
{
}Occurs when the pointer is pressed down over a Series.
SeriesPointerDown event raised when the pointer is pressed down over a Series
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
(seriesPointerDown)="CategoryChart_seriesPointerDown()" >
</igx-category-chart>CategoryChart_seriesPointerDown(sender: any , aregs: ChartSeriesEventArgs)
{
}Occurs when the pointer enters a Series.
SeriesPointerEnter event raised when the pointer enters a Series.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
(seriesPointerEnter)="CategoryChart_seriesPointerEnter()" >
</igx-category-chart>CategoryChart_seriesPointerEnter(sender: any , aregs: ChartSeriesEventArgs)
{
}Occurs when the pointer leaves a Series.
SeriesPointerLeave event raised when the pointer leaves a Series.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
(seriesPointerLeave)= "CategoryChart_seriesPointerLeave()" >
</igx-category-chart>CategoryChart_seriesPointerLeave(sender: any , aregs: ChartSeriesEventArgs)
{
}Occurs when the pointer moves over a Series.
SeriesPointerMove event raised when the pointer moves over a Series.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
(seriesPointerMove)="CategoryChart_seriesPointerMove()">
</igx-category-chart> CategoryChart_seriesPointerMove(sender: any , aregs: ChartSeriesEventArgs)
{
}Occurs when the pointer is released over a Series.
SeriesPointerUp event raised when the pointer is released over a Series.
CategoryChart_seriesPointerUp(sender: any , aregs: ChartSeriesEventArgs)
{
}<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
(seriesPointerUp)="CategoryChart_seriesPointerUp()" >
</igx-category-chart>Event raised when a series is removed from this chart.
SeriesRemoved event raised when a series is removed from this chart.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
(seriesRemoved)="CategoryChart_seriesRemoved()">
</igx-category-chart> CategoryChart_seriesRemoved(sender: any , aregs: ChartSeriesEventArgs)
{
}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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
subtitle= "This is a subtitle">
</igx-category-chart> this.chart.subtitle ="CategoryChart Subtitle" ;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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
subtitle= "This is a subtitle">
</igx-category-chart> this.chart.subtitle ="CategoryChart Subtitle" ;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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
subtitleAlignment= "center">
</igx-category-chart>this.chart.subtitleAlignment = HorizontalAlignment.Right;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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
subtitleAlignment= "center">
</igx-category-chart>this.chart.subtitleAlignment = HorizontalAlignment.Right;Gets or sets the bottom margin of chart subtitle
Use subtitleBottomMargin property for the bottom margin of chart subtitle.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
subtitleBottomMargin=10>
</igx-category-chart>this.chart.subtitleBottomMargin = 10 ;Gets or sets the bottom margin of chart subtitle
Use subtitleBottomMargin property for the bottom margin of chart subtitle.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
subtitleBottomMargin=10>
</igx-category-chart>this.chart.subtitleBottomMargin = 10 ;Gets or sets the left margin of chart subtitle
Use subtitleLeftMargin property for the left margin of chart subtitle.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
subtitleLeftMargin= 20>
</igx-category-chart>this.chart.subtitleLeftMargin = 20 ;Gets or sets the left margin of chart subtitle
Use subtitleLeftMargin property for the left margin of chart subtitle.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
subtitleLeftMargin= 20>
</igx-category-chart>this.chart.subtitleLeftMargin = 20 ;Gets or sets the right margin of chart subtitle
Use subtitleRightMargin property for the right margin of chart subtitle.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
subtitleRightMargin= 10>
</igx-category-chart> this.chart.subtitleRightMargin = 20 ;Gets or sets the right margin of chart subtitle
Use subtitleRightMargin property for the right margin of chart subtitle.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
subtitleRightMargin= 10>
</igx-category-chart> this.chart.subtitleRightMargin = 20 ;Gets or sets color of chart subtitle
Use subtitleTextColor property to color the subtitle.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
subtitle= "This is a subtitle"
subtitleTextColor= 'blue'>
</igx-category-chart>this.chart.subtitleTextColor = "#ff0000" ;Gets or sets color of chart subtitle
Use subtitleTextColor property to color the subtitle.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
subtitle= "This is a subtitle"
subtitleTextColor= 'blue'>
</igx-category-chart>this.chart.subtitleTextColor = "#ff0000" ;Gets or sets CSS font property for the chart subtitle
Use subtitleTextStyle property for the CSS font of the chart subtitle.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
subtitle= "This is a subtitle"
subtitleTextStyle ="16pt Verdona">
</igx-category-chart>this.chart.subtitleTextStyle= "16pt Verdona";Gets or sets CSS font property for the chart subtitle
Use subtitleTextStyle property for the CSS font of the chart subtitle.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
subtitle= "This is a subtitle"
subtitleTextStyle ="16pt Verdona">
</igx-category-chart>this.chart.subtitleTextStyle= "16pt Verdona";Gets or sets the top margin of chart subtitle
Use subtitleTopMargin property for the top margin of chart subtitle.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
subtitle= "This is a subtitle"
subtitleTopMargin=10>
</igx-category-chart>this.chart.subtitleTopMargin = 10;Gets or sets the top margin of chart subtitle
Use subtitleTopMargin property for the top margin of chart subtitle.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
subtitle= "This is a subtitle"
subtitleTopMargin=10>
</igx-category-chart>this.chart.subtitleTopMargin = 10;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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
thickness=5>
</igx-category-chart>this.chart.thickness = 5;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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
thickness=5>
</igx-category-chart>this.chart.thickness = 5;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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
titleAlignment= "center">
</igx-category-chart>this.chart.titleAlignment = HorizontalAlignment.Center;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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
titleAlignment= "center">
</igx-category-chart>this.chart.titleAlignment = HorizontalAlignment.Center;Gets or sets the bottom margin of chart title
Use titleBottomMargin property for the bottom margin of chart title.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
titleBottomMargin= 10 >
</igx-category-chart> this.chart.titleBottomMargin = 5;Gets or sets the bottom margin of chart title
Use titleBottomMargin property for the bottom margin of chart title.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
titleBottomMargin= 10 >
</igx-category-chart> this.chart.titleBottomMargin = 5;Gets or sets the left margin of chart title
Use titleLeftMargin property for the left margin of chart title.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
titleLeftMargin= 10>
</igx-category-chart>this.chart.titleLeftMargin = 10;Gets or sets the left margin of chart title
Use titleLeftMargin property for the left margin of chart title.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
titleLeftMargin= 10>
</igx-category-chart>this.chart.titleLeftMargin = 10;Gets or sets the right margin of chart title
Use titleLeftMargin property for the right margin of chart title.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
titleRightMargin= 10>
</igx-category-chart>this.chart.titleRightMargin = 10;Gets or sets the right margin of chart title
Use titleLeftMargin property for the right margin of chart title.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
titleRightMargin= 10>
</igx-category-chart>this.chart.titleRightMargin = 10;Gets or sets color of chart title
Use titleTextColor property to color the chart title
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
titleTextColor= "red">
</igx-category-chart> this.chart.titleTextColor="red" ;Gets or sets color of chart title
Use titleTextColor property to color the chart title
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
titleTextColor= "red">
</igx-category-chart> this.chart.titleTextColor="red" ;Gets or sets CSS font property for the chart title
Use titleTextStyle property for the CSS font property of the chart title
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
titleTextStyle= "24pt Verdona">
</igx-category-chart>this.chart.titleTextStyle = "24pt Verdona";Gets or sets CSS font property for the chart title
Use titleTextStyle property for the CSS font property of the chart title
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
titleTextStyle= "24pt Verdona">
</igx-category-chart>this.chart.titleTextStyle = "24pt Verdona";Gets or sets the top margin of chart title
Use titleTopMargin property for the top margin of chart title.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
title="Countries"
titleTopMargin=10 >
</igx-category-chart>this.chart.titleTopMargin = 10;Gets or sets the top margin of chart title
Use titleTopMargin property for the top margin of chart title.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
title="Countries"
titleTopMargin=10 >
</igx-category-chart>this.chart.titleTopMargin = 10;Gets or sets the style of tooltip to be displayed.
Gets or sets the style of tooltip to be displayed.
Sets or gets the template reference to use for tooltips for all the series.
Sets or gets the template reference to use for tooltips for all the series.
Sets or gets the template references to use for tooltips for all the series, in order.
Sets or gets the template references to use for tooltips for all the series, in order.
Gets or sets the top margin of the chart content.
Use topMargin property for the margin of the chart content.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
topMargin= 20>
</igx-category-chart>this.chart.topMargin=20;Gets or sets the top margin of the chart content.
Use topMargin property for the margin of the chart content.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
topMargin= 20>
</igx-category-chart>this.chart.topMargin=20;Gets or sets the duration used for animating series plots when the data is changing
Use the transitionDuration property to animating between data values.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
transitionDuration="500">
</igx-category-chart>this.chart.transitionDuration= 500;Gets or sets the duration used for animating series plots when the data is changing
Use the transitionDuration property to animating between data values.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
transitionDuration="500">
</igx-category-chart>this.chart.transitionDuration= 500;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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
transitionInEasingFunction= "cubic">
</igx-category-chart>this.chart.transitionInEasingFunction= this.cubicFunc;
cubicFunc(time: number) : number
{
return time;
}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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
transitionInEasingFunction= "cubic">
</igx-category-chart>this.chart.transitionInEasingFunction= this.cubicFunc;
cubicFunc(time: number) : number
{
return time;
}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:
<igx-category-chart
[dataSource]="data"
isTransitionInEnabled="true"
transitionInDuration="2000">
</igx-category-chart>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:
<igx-category-chart
[dataSource]="data"
isTransitionInEnabled="true"
transitionInDuration="2000">
</igx-category-chart>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.
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.
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.
<igx-category-chart
[dataSource]="data"
isTransitionInEnabled="true"
transitionInMode="accordionfromRight">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
isTransitionInEnabled="true"
transitionInMode="accordionfromRight">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
isTransitionInEnabled="true"
transitionInSpeedType="indexScaled">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
isTransitionInEnabled="true"
transitionInSpeedType="indexScaled">
</igx-category-chart>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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
trendLineBrushes="#ff0000,#aa0000">
</igx-category-chart>this.chart.trendLineBrushes=["#ff0000", "#ffff00", "#00ffff"] ;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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
trendLineBrushes="#ff0000,#aa0000">
</igx-category-chart>this.chart.trendLineBrushes=["#ff0000", "#ffff00", "#00ffff"] ;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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
trendLineThickness= 2>
</igx-category-chart>this.chart.trendLineThickness=2;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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
trendLineThickness= 2>
</igx-category-chart>this.chart.trendLineThickness=2;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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
trendLineType= "cubicFit">
</igx-category-chart>this.chart.trendLineType = TrendLineType.CubicFit;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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
trendLineType= "cubicFit">
</igx-category-chart>this.chart.trendLineType = TrendLineType.CubicFit;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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
unknownValuePlotting= "dontPlot">
</igx-category-chart>this.chart.unknownValuePlotting =UnknownValuePlotting.DontPlot;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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
unknownValuePlotting= "dontPlot">
</igx-category-chart>this.chart.unknownValuePlotting =UnknownValuePlotting.DontPlot;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;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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
WindowRect=[0,0,1,1]>
</igx-category-chart>this.chart.windowRect =[0,0,1,1];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.
<igx-category-chart
yAxisMinimumValue="0"
[dataSource]="data"
WindowRect=[0,0,1,1]>
</igx-category-chart>this.chart.windowRect =[0,0,1,1];Gets the current maximum value for the X-axis.
Gets the current minimum value for the X-axis.
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.
<igx-category-chart
[dataSource]="data"
xAxisExtent="250">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisExtent="250">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
[xAxisFormatLabel]="formatX"
xAxisExtent="250">
</igx-category-chart>formatX(item: any): string {
return "[ " + item.label + "! ]";
}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.
<igx-category-chart
[dataSource]="data"
[xAxisFormatLabel]="formatX"
xAxisExtent="250">
</igx-category-chart>formatX(item: any): string {
return "[ " + item.label + "! ]";
}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:
<igx-category-chart
[dataSource]="data"
xAxisGap="0.75">
</igx-category-chart>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:
<igx-category-chart
[dataSource]="data"
xAxisGap="0.75">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisInterval="3">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisInterval="3">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisInverted="true">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisInverted="true">
</igx-category-chart>Gets or sets the format for labels along the X-axis.
Gets or sets the format for labels along the X-axis.
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.
<igx-category-chart
[dataSource]="data"
xAxisLabelAngle="45">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisLabelAngle="45">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisLabelBottomMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisLabelBottomMargin="100">
</igx-category-chart>Gets or sets Horizontal alignment of X-axis labels.
Gets or sets Horizontal alignment of X-axis labels.
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.
<igx-category-chart
[dataSource]="data"
xAxisLabelLeftMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisLabelLeftMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisLabelRightMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisLabelRightMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisLabelTextColor="green">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisLabelTextColor="green">
</igx-category-chart>Gets or sets CSS font property for labels on X-axis
To change the font of x-axis labels, set the xAxisLabelTextStyle property.
<igx-category-chart
[dataSource]="data"
xAxisLabelTextStyle="italic 15px arial, sans-serif">
</igx-category-chart>Gets or sets CSS font property for labels on X-axis
To change the font of x-axis labels, set the xAxisLabelTextStyle property.
<igx-category-chart
[dataSource]="data"
xAxisLabelTextStyle="italic 15px arial, sans-serif">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisTitle="x axis"
xAxisTitleTopMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisTitle="x axis"
xAxisTitleTopMargin="100">
</igx-category-chart>Gets or sets Vertical alignment of X-axis labels.
Use the xAxisLabelVerticalAlignment property to change the vertical position of x-axis labels.
<igx-category-chart
[dataSource]="data"
xAxisExtent="250"
xAxisLabelVerticalAlignment="bottom">
</igx-category-chart>Gets or sets Vertical alignment of X-axis labels.
Use the xAxisLabelVerticalAlignment property to change the vertical position of x-axis labels.
<igx-category-chart
[dataSource]="data"
xAxisExtent="250"
xAxisLabelVerticalAlignment="bottom">
</igx-category-chart>Gets or sets Visibility of X-axis labels.
To hide the x-axis labels, set xAxisLabelVisibility to collapsed.
<igx-category-chart
[dataSource]="data"
xAxisLabelVisibility="collapsed">
</igx-category-chart>Gets or sets Visibility of X-axis labels.
To hide the x-axis labels, set xAxisLabelVisibility to collapsed.
<igx-category-chart
[dataSource]="data"
xAxisLabelVisibility="collapsed">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisMajorStroke="green">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisMajorStroke="green">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisMajorStroke="green"
xAxisMajorStrokeThickness="3">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisMajorStroke="green"
xAxisMajorStrokeThickness="3">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisMinorInterval="0.1"
xAxisMinorStroke="green"
xAxisMinorStrokeThickness="1">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisMinorInterval="0.1"
xAxisMinorStroke="green"
xAxisMinorStrokeThickness="1">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisMinorStroke="green">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisMinorStroke="green">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisMinorStroke="green"
xAxisMinorStrokeThickness="3">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisMinorStroke="green"
xAxisMinorStrokeThickness="3">
</igx-category-chart>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:
<igx-category-chart
[dataSource]="data"
xAxisOverlap="0.75">
</igx-category-chart>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:
<igx-category-chart
[dataSource]="data"
xAxisOverlap="0.75">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisStrip="green">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisStrip="green">
</igx-category-chart>Gets or sets the color to apply to the X-axis line.
Set xAxisStroke to control the color of the x-axis line.
<igx-category-chart
[dataSource]="data"
xAxisStroke="green">
</igx-category-chart>Gets or sets the color to apply to the X-axis line.
Set xAxisStroke to control the color of the x-axis line.
<igx-category-chart
[dataSource]="data"
xAxisStroke="green">
</igx-category-chart>Gets or sets the thickness to apply to the X-axis line.
Set xAxisStrokeThickness to control the thickness of the x-axis line.
<igx-category-chart
[dataSource]="data"
xAxisStrokeThickness="3">
</igx-category-chart>Gets or sets the thickness to apply to the X-axis line.
Set xAxisStrokeThickness to control the thickness of the x-axis line.
<igx-category-chart
[dataSource]="data"
xAxisStrokeThickness="3">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisTickLength="23">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisTickLength="23">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisTickStroke="green">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisTickStroke="green">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisTickStrokeThickness="10">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisTickStrokeThickness="10">
</igx-category-chart>Gets or sets the Text to display below the X-axis.
Set xAxisTitle to display a label adjacent to the x-axis.
<igx-category-chart
[dataSource]="data"
xAxisTitle="x axis">
</igx-category-chart>Gets or sets the Text to display below the X-axis.
Set xAxisTitle to display a label adjacent to the x-axis.
<igx-category-chart
[dataSource]="data"
xAxisTitle="x axis">
</igx-category-chart>Gets or sets Horizontal alignment of the X-axis title.
Set xAxisTitleAlignment to control the horizontal alignment of the x-axis title.
<igx-category-chart
[dataSource]="data"
xAxisTitle="x axis"
xAxisTitleAlignment="right">
</igx-category-chart>Gets or sets Horizontal alignment of the X-axis title.
Set xAxisTitleAlignment to control the horizontal alignment of the x-axis title.
<igx-category-chart
[dataSource]="data"
xAxisTitle="x axis"
xAxisTitleAlignment="right">
</igx-category-chart>Gets or sets the angle of rotation for the X-axis title.
Set xAxisTitleAngle to control the rotation of the x-axis title.
<igx-category-chart
[dataSource]="data"
xAxisTitle="x axis"
xAxisTitleAngle="45">
</igx-category-chart>Gets or sets the angle of rotation for the X-axis title.
Set xAxisTitleAngle to control the rotation of the x-axis title.
<igx-category-chart
[dataSource]="data"
xAxisTitle="x axis"
xAxisTitleAngle="45">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisTitle="x axis"
xAxisTitleBottomMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisTitle="x axis"
xAxisTitleBottomMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisTitle="x axis"
xAxisTitleAlignment="left"
xAxisTitleLeftMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisTitle="x axis"
xAxisTitleAlignment="left"
xAxisTitleLeftMargin="100">
</igx-category-chart>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.
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.
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.
<igx-category-chart
[dataSource]="data"
xAxisTitle="x axis"
xAxisTitleAlignment="right"
xAxisTitleRightMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisTitle="x axis"
xAxisTitleAlignment="right"
xAxisTitleRightMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisTitle="x axis"
xAxisTitleTextColor="green">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisTitle="x axis"
xAxisTitleTextColor="green">
</igx-category-chart>Gets or sets CSS font property for title on X-axis
To change the font of the x-axis title, set the xAxisTitleTextStyle property.
<igx-category-chart
[dataSource]="data"
xAxisTitle="x axis"
xAxisTitleTextStyle="italic 15px arial, sans-serif">
</igx-category-chart>Gets or sets CSS font property for title on X-axis
To change the font of the x-axis title, set the xAxisTitleTextStyle property.
<igx-category-chart
[dataSource]="data"
xAxisTitle="x axis"
xAxisTitleTextStyle="italic 15px arial, sans-serif">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisTitle="x axis"
xAxisTitleTopMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisTitle="x axis"
xAxisTitleTopMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisAbbreviateLargeNumbers="true">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisAbbreviateLargeNumbers="true">
</igx-category-chart>Gets the current maximum value for the Y-axis.
Gets the current minimum value for the Y-axis.
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.
<igx-category-chart
[dataSource]="data"
xAxisExtent="250">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
xAxisExtent="250">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
[yAxisFormatLabel]="formatY">
</igx-category-chart>formatY(value: any): string {
return "[ " + value+ "! ]";
}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.
<igx-category-chart
[dataSource]="data"
[yAxisFormatLabel]="formatY">
</igx-category-chart>formatY(value: any): string {
return "[ " + value+ "! ]";
}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.
<igx-category-chart
[dataSource]="data"
yAxisInterval="10">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisInterval="10">
</igx-category-chart>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:
<igx-category-chart
[dataSource]="data"
yAxisInverted="true"
>
</igx-category-chart>The default value of yAxisInverted is false.
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:
<igx-category-chart
[dataSource]="data"
yAxisInverted="true"
>
</igx-category-chart>The default value of yAxisInverted is false.
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.
<igx-category-chart
[dataSource]="data"
yAxisIsLogarithmic="true">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisIsLogarithmic="true">
</igx-category-chart>Gets or sets the property or string from which the labels are derived.
Gets or sets the property or string from which the labels are derived.
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.
<igx-category-chart
[dataSource]="data"
yAxisLabelAngle="45">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisLabelAngle="45">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisLabelBottomMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisLabelBottomMargin="100">
</igx-category-chart>Gets or sets Horizontal alignment of Y-axis labels.
Set the yAxisLabelHorizontalAlignment property to change the horizontal alignment of y-axis labels.
<igx-category-chart
[dataSource]="data"
yAxisExtent="250"
yAxisLabelHorizontalAlignment="left">
</igx-category-chart>Gets or sets Horizontal alignment of Y-axis labels.
Set the yAxisLabelHorizontalAlignment property to change the horizontal alignment of y-axis labels.
<igx-category-chart
[dataSource]="data"
yAxisExtent="250"
yAxisLabelHorizontalAlignment="left">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisLabelLeftMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisLabelLeftMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisLabelLocation="outsideRight">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisLabelLocation="outsideRight">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisLabelRightMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisLabelRightMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisLabelTextColor="green">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisLabelTextColor="green">
</igx-category-chart>Gets or sets CSS font property for labels on Y-axis
To change the font of x-axis labels, set the yAxisLabelTextStyle property.
<igx-category-chart
[dataSource]="data"
yAxisLabelTextStyle="italic 15px arial, sans-serif">
</igx-category-chart>Gets or sets CSS font property for labels on Y-axis
To change the font of x-axis labels, set the yAxisLabelTextStyle property.
<igx-category-chart
[dataSource]="data"
yAxisLabelTextStyle="italic 15px arial, sans-serif">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisLabelTopMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisLabelTopMargin="100">
</igx-category-chart>Gets or sets Vertical alignment of Y-axis labels.
Gets or sets Vertical alignment of Y-axis labels.
Gets or sets Visibility of Y-axis labels.
To hide the y-axis labels, set yAxisLabelVisibility to collapsed.
<igx-category-chart
[dataSource]="data"
yAxisLabelVisibility="collapsed">
</igx-category-chart>Gets or sets Visibility of Y-axis labels.
To hide the y-axis labels, set yAxisLabelVisibility to collapsed.
<igx-category-chart
[dataSource]="data"
yAxisLabelVisibility="collapsed">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisIsLogarithmic="true"
yAxisLogarithmBase="2">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisIsLogarithmic="true"
yAxisLogarithmBase="2">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisMajorStroke="green">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisMajorStroke="green">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisMajorStrokeThickness="3">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisMajorStrokeThickness="3">
</igx-category-chart>Gets or sets the data value corresponding to the maximum value of the Y-axis.
yAxisMaximumValue determines the maximum of the y-axis.
<igx-category-chart
[dataSource]="data"
yAxisMaximumValue="42">
</igx-category-chart>Gets or sets the data value corresponding to the maximum value of the Y-axis.
yAxisMaximumValue determines the maximum of the y-axis.
<igx-category-chart
[dataSource]="data"
yAxisMaximumValue="42">
</igx-category-chart>Gets or sets the data value corresponding to the minimum value of the Y-axis.
yAxisMaximumValue determines the minimum of the y-axis.
<igx-category-chart
[dataSource]="data"
yAxisMinimumValue="42">
</igx-category-chart>Gets or sets the data value corresponding to the minimum value of the Y-axis.
yAxisMaximumValue determines the minimum of the y-axis.
<igx-category-chart
[dataSource]="data"
yAxisMinimumValue="42">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisMinorInterval="2"
yAxisMinorStroke="green"
yAxisMinorStrokeThickness="1">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisMinorInterval="2"
yAxisMinorStroke="green"
yAxisMinorStrokeThickness="1">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisMinorStroke="green"
yAxisMinorStrokeThickness="1">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisMinorStroke="green"
yAxisMinorStrokeThickness="1">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisMinorStroke="green"
yAxisMinorStrokeThickness="3">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisMinorStroke="green"
yAxisMinorStrokeThickness="3">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisStrip="green">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisStrip="green">
</igx-category-chart>Gets or sets the color to apply to the Y-axis line.
Set yAxisStroke to control the color of the y-axis line.
<igx-category-chart
[dataSource]="data"
yAxisStroke="green">
</igx-category-chart>Gets or sets the color to apply to the Y-axis line.
Set yAxisStroke to control the color of the y-axis line.
<igx-category-chart
[dataSource]="data"
yAxisStroke="green">
</igx-category-chart>Gets or sets the thickness to apply to the Y-axis line.
Set yAxisStrokeThickness to control the thickness of the y-axis line.
<igx-category-chart
[dataSource]="data"
yAxisStroke="green"
yAxisStrokeThickness="3">
</igx-category-chart>Gets or sets the thickness to apply to the Y-axis line.
Set yAxisStrokeThickness to control the thickness of the y-axis line.
<igx-category-chart
[dataSource]="data"
yAxisStroke="green"
yAxisStrokeThickness="3">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisTickLength="23">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisTickLength="23">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisTickLength="5"
yAxisTickStroke="green">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisTickLength="5"
yAxisTickStroke="green">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisTickLength="5"
yAxisTickStrokeThickness="10">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisTickLength="5"
yAxisTickStrokeThickness="10">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisTitle="y axis">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisTitle="y axis">
</igx-category-chart>Gets or sets Vertical alignment of the Y-axis title.
Set yAxisTitleAlignment to control the vertical alignment of the x-axis title.
<igx-category-chart
[dataSource]="data"
yAxisTitle="y axis"
yAxisTitleAlignment="bottom">
</igx-category-chart>Gets or sets Vertical alignment of the Y-axis title.
Set yAxisTitleAlignment to control the vertical alignment of the x-axis title.
<igx-category-chart
[dataSource]="data"
yAxisTitle="y axis"
yAxisTitleAlignment="bottom">
</igx-category-chart>Gets or sets the angle of rotation for the Y-axis title.
Set yAxisTitleAngle to control the rotation of the y-axis title.
<igx-category-chart
[dataSource]="data"
yAxisTitle="y axis"
yAxisTitleAngle="45">
</igx-category-chart>Gets or sets the angle of rotation for the Y-axis title.
Set yAxisTitleAngle to control the rotation of the y-axis title.
<igx-category-chart
[dataSource]="data"
yAxisTitle="y axis"
yAxisTitleAngle="45">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisTitle="y axis"
yAxisTitleAlignment="bottom"
yAxisTitleBottomMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisTitle="y axis"
yAxisTitleAlignment="bottom"
yAxisTitleBottomMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisTitle="y axis"
yAxisTitleLeftMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisTitle="y axis"
yAxisTitleLeftMargin="100">
</igx-category-chart>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.
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.
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.
<igx-category-chart
[dataSource]="data"
yAxisTitle="y axis"
yAxisTitleRightMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisTitle="y axis"
yAxisTitleRightMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisTitle="y axis"
yAxisTitleTextColor="green">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisTitle="y axis"
yAxisTitleTextColor="green">
</igx-category-chart>Gets or sets CSS font property for title on Y-axis
To change the font of the x-axis title, set the yAxisTitleTextStyle property.
<igx-category-chart
[dataSource]="data"
xAxisTitle="y axis"
yAxisTitleTextStyle="italic 15px arial, sans-serif">
</igx-category-chart>Gets or sets CSS font property for title on Y-axis
To change the font of the x-axis title, set the yAxisTitleTextStyle property.
<igx-category-chart
[dataSource]="data"
xAxisTitle="y axis"
yAxisTitleTextStyle="italic 15px arial, sans-serif">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisTitle="y axis"
yAxisTitleAlignment="top"
yAxisTitleTopMargin="100">
</igx-category-chart>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.
<igx-category-chart
[dataSource]="data"
yAxisTitle="y axis"
yAxisTitleAlignment="top"
yAxisTitleTopMargin="100">
</igx-category-chart>Destroy this control
Use the destroy property to destroy the chart.
this.chart.destroy();Export serialized visual data.
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();Converts the given visual location to a data value.
Converts the given visual location to a data value.
Converts the given data value to a visual location.
Converts the given data value to a visual location.
Hides the active main tooltip, if displayed.
Use the hideToolTip method to hide the active tooltip.
this.chart.hideToolTip();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);Called when the control has been resized.
notifyResized method Called when the control has been resized.
this.chart.notifyResized();Called by the UI framework to provide a UI container for rendering this control.
Represents a chart with an ordinal X-axis and a numeric Y-axis.
Ignite UI for Angular 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:
<igx-category-chart [dataSource]="data" > </igx-category-chart>