Ignite UI™ API Documentation

ui.igCategoryChart

Overview
Options
Events
Methods
Theming

The igCategoryChart is a lightweight, highly performant chart. This chart can be easily configured to display category data using an extremely simple and intuitive API. All you need to do is bind your data (a collection or a collection of collections) and the chart takes care of everything else.

The following code snippet demonstrates how to initialize the igCategoryChart control.

For details on how to reference the required scripts and themes for the igPieChart control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

 
<!DOCTYPE html>
<html>
<head>
    <title>Ignite UI igCategoryChart</title>
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
    <script src="js/infragistics.core.js" type="text/javascript"></script>
    <script src="js/infragistics.dv.js" type="text/javascript"></script>
	
	<script type="text/javascript">
		$(function () {
			var tabularData = [
				{ "Label": "1995", "Brazil": 161, "Indonesia": 197, "United States": 266, "India": 920, "China": 1297 },
				{ "Label": "2005", "Brazil": 186, "Indonesia": 229, "United States": 295, "India": 1090, "China": 1216 },
				{ "Label": "2015", "Brazil": 204, "Indonesia": 256, "United States": 322, "India": 1251, "China": 1361 },
				{ "Label": "2025", "Brazil": 218, "Indonesia": 277, "United States": 351, "India": 1396, "China": 1394 }];
			tabularData.__dataIntents = new Array();
			tabularData.__dataIntents["Brazil"] = ["DontPlot"];

			$("#chart").igCategoryChart({
				dataSource: tabularData
			});
        });
	</script>
</head>
<body>
    <div id="chart"></div>
</body>
</html>

Related Samples

bottomMargin

Type:: number
Default:: 0

Gets or sets the bottom margin around the chart content.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	bottomMargin: 20
});
        
// Get
var margin = $(".selector").igCategoryChart("option", "bottomMargin");
        
// Set
$(".selector").igCategoryChart("option", "bottomMargin", 20);

brushes

Type:

object

Default:

null
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
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.
Code Sample
```
 
// Initialize
$(".selector").igCategoryChart({
	brushes: [ "#ff0000", "#ffff00", "#00ffff" ]
});
        
// Get
var brushes = $(".selector").igCategoryChart("option", "brushes");
        
// Set
$(".selector").igCategoryChart("option", "brushes", [ "#ff0000", "#ffff00", "#00ffff" ]);
```
chartType

Type:

enumeration

Default:

line
Gets or sets the type of chart series to generate from the data.
Members
- line
- Type:string
- Specifies category line series with markers at each data point.
- area
- Type:string
- Specifies category area series.
- column
- Type:string
- Specifies category column chart with vertical rectangles at each data point.
- point
- Type:string
- Specifies category point chart with markers at each data point.
- stepLine
- Type:string
- Specifies category step line chart.
- stepArea
- Type:string
- Specifies category step area chart.
- spline
- Type:string
- Specifies category spline line series with markers at each data point.
- splineArea
- Type:string
- Specifies category spline area series.
- waterfall
- Type:string
- Specifies category waterfall chart.
- auto
- Type:string
- Specifies automatic selection of chart type based on suggestions from Data Adapter.
Code Sample
```
 
// Initialize
$(".selector").igCategoryChart({
	chartType: "area"
});
        
// Get
var chartType = $(".selector").igCategoryChart("option", "chartType");
        
// Set
$(".selector").igCategoryChart("option", "chartType", "area");
```
createWrappedTooltip

Type:

object

Default:

null

dataSource
Inherited

Type:: object
Default:: null

Gets sets a valid data source.
That can be instance of array or primitives, array of objects, instance of $.ig.DataSource, or any other data accepted by $.ig.DataSource.
Note: if it is set to string and "dataSourceType" option is not set, then $.ig.JSONPDataSource is used.

Code Sample

 
// Given the following data...
var data1 = [
	{ "ID": 1, "Cost": 12.5 },
	{ "ID": 2, "Cost": 18.56 },
	{ "ID": 3, "Cost": 22.18 }];
	
// Initialize
$(".selector").igCategoryChart({
	dataSource: data1
});
        
// Get
var dataSource = $(".selector").igCategoryChart("option", "dataSource");
        
// Set
$(".selector").igCategoryChart("option", "dataSource", data1);

dataSourceType
Inherited

Type:: string
Default:: null

Gets sets data source type (such as "json", "xml", etc). Please refer to the documentation of $.ig.DataSource and its type property.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	dataSourceType: "array"
});
        
// Get
var dataSourceType = $(".selector").igCategoryChart("option", "dataSourceType");
        
// Set
$(".selector").igCategoryChart("option", "dataSourceType", "array");

dataSourceUrl
Inherited

Type:: string
Default:: null

Gets sets url which is used for sending JSON on request for remote data.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	dataSourceUrl: "http://www.example.com"
});
        
// Get
var dataUrl = $(".selector").igCategoryChart("option", "dataSourceUrl");
        
// Set
$(".selector").igCategoryChart("option", "dataSourceUrl", "http://www.example.com");

excludedProperties

Type:: object
Default:: null

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

Code Sample

 
// Given the following data bound to the chart...
var data1 = [
	{ "ID": 1, "Cost": 12.5, "Discount": 0.5, "ProductName": "Shirts" },
	{ "ID": 2, "Cost": 18.56, "Discount": 0.25, "ProductName": "Hats" },
	{ "ID": 3, "Cost": 22.18, "Discount": 0.1, "ProductName": "Shoes" }];
	
// Initialize
$(".selector").igCategoryChart({
	excludedProperties: [ "ID", "Discount" ]
});
        
// Get
var excludedProps = $(".selector").igCategoryChart("option", "excludedProperties");
        
// Set
$(".selector").igCategoryChart("option", "excludedProperties", [ "ID", "Discount" ]);

height
Inherited

Type:: number
Default:: null

The height of the chart.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
    height: 250
});

// Get
var height = $(".selector").igCategoryChart("option", "height");
 
// Set
$(".selector").igCategoryChart("option", "height", 250);

includedProperties

Type:: object
Default:: null

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

Code Sample

 
// Given the following data bound to the chart...
var data1 = [
	{ "ID": 1, "Cost": 12.5, "Discount": 0.5, "ProductName": "Shirts" },
	{ "ID": 2, "Cost": 18.56, "Discount": 0.25, "ProductName": "Hats" },
	{ "ID": 3, "Cost": 22.18, "Discount": 0.1, "ProductName": "Shoes" }];
	
// Initialize
$(".selector").igCategoryChart({
	includedProperties: [ "ProductName", "Cost" ]
});
        
// Get
var includedProps = $(".selector").igCategoryChart("option", "includedProperties");
        
// Set
$(".selector").igCategoryChart("option", "includedProperties", [ "ProductName", "Cost" ]);

isHorizontalZoomEnabled

Type:: bool
Default:: false

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
    isHorizontalZoomEnabled: true
});

// Get
var zoomEnabled = $(".selector").igCategoryChart("option", "isHorizontalZoomEnabled");
 
// Set
$(".selector").igCategoryChart("option", "isHorizontalZoomEnabled", true);

isTransitionInEnabled

Type:: bool
Default:: false

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
    isTransitionInEnabled: true
});

// Get
var transitionEnabled = $(".selector").igCategoryChart("option", "isTransitionInEnabled");
 
// Set
$(".selector").igCategoryChart("option", "isTransitionInEnabled", true);

isVerticalZoomEnabled

Type:: bool
Default:: false

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
    isVerticalZoomEnabled: true
});

// Get
var zoomEnabled = $(".selector").igCategoryChart("option", "isVerticalZoomEnabled");
 
// Set
$(".selector").igCategoryChart("option", "isVerticalZoomEnabled", true);

itemsSource

Type:

object

Default:

null
Gets or sets a collection of data items used to generate the chart.
Value of this property can be a list of objects containing one or more numeric properties. Additionally, if the objects in the list implement the IEnumerable interface, the Category Chart will attempt to delve into the sub-collections when reading through the data source. Databinding can be further configured by attributing the data item classes with the DataSeriesMemberIntentAttribute.
Code Sample
```
 
// Given the following data...
var data1 = [
	{ "ID": 1, "Cost": 12.5 },
	{ "ID": 2, "Cost": 18.56 },
	{ "ID": 3, "Cost": 22.18 }];
	
// Initialize
$(".selector").igCategoryChart({
	itemsSource: data1
});
        
// Get
var itemsSource = $(".selector").igCategoryChart("option", "itemsSource");
        
// Set
$(".selector").igCategoryChart("option", "itemsSource", data1);
```

leftMargin

Type:: number
Default:: 0

Gets or sets the left margin of the chart content.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	leftMargin: 20
});
        
// Get
var margin = $(".selector").igCategoryChart("option", "leftMargin");
        
// Set
$(".selector").igCategoryChart("option", "leftMargin", 20);

legend

Type:: object
Default:: null

Sets the legend to connect this chart to.
When the legend property is set, the chart will use it to display information about its series. Legends can be shared by multiple chart controls.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
    legend: { element: 'legend', type: 'legend' }
});
 
// Get
var legend = $(".selector").igCategoryChart("option", "legend");
 
// Set
$(".selector").igCategoryChart("option", "legend", { element: 'legend', type: 'legend' });

markerBrushes

Type:

object

Default:

null
Gets or sets the palette of brushes used as the fill color for data point markers.
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.
Code Sample
```
 
// Initialize
$(".selector").igCategoryChart({
	markerBrushes: [ "#ff0000", "#ffff00", "#00ffff" ]
});
 
// Get
var brushes = $(".selector").igCategoryChart("option", "markerBrushes");
 
// Set
$(".selector").igCategoryChart("option", "markerBrushes", [ "#ff0000", "#ffff00", "#00ffff" ]);
```

markerCollisionAvoidance

Type:: enumeration
Default:: omit

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

Members

none
Type:string
.
omit
Type:string

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	markerCollisionAvoidance: "omit"
});
 
// Get
var collisionAvoidance = $(".selector").igCategoryChart("option", "markerCollisionAvoidance");
 
// Set
$(".selector").igCategoryChart("option", "markerCollisionAvoidance", "omit");

markerOutlines

Type:

object

Default:

null
Gets or sets the palette of brushes used for coloring outline of data point markers.
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.
Code Sample
```
 
// Initialize
$(".selector").igCategoryChart({
	markerOutlines: [ "#ff0000", "#ffff00", "#00ffff" ]
});
 
// Get
var outlines = $(".selector").igCategoryChart("option", "markerOutlines");
 
// Set
$(".selector").igCategoryChart("option", "markerOutlines", [ "#ff0000", "#ffff00", "#00ffff" ]);
```

markerTypes

Type:: object
Default:: null

Gets or sets the collection of marker shapes used for representing data points of series in this chart.
When MarkerTypes is null or empty, each series' marker type will be set to none or automatic, depending on the series type.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	markerTypes: [ "triangle", "pentagon", "diamond" ]
});
 
// Get
var markerTypes = $(".selector").igCategoryChart("option", "markerTypes");
 
// Set
$(".selector").igCategoryChart("option", "markerTypes", [ "triangle", "pentagon", "diamond" ]);

maxRecCount
Inherited

Type:: number
Default:: 0

Gets sets maximum number of displayed records in chart.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	maxRecCount: 1000
});
 
// Get
var maxRecCount = $(".selector").igCategoryChart("option", "maxRecCount");
 
// Set
$(".selector").igCategoryChart("option", "maxRecCount", 1000);

negativeBrushes

Type:

object

Default:

null
Gets or sets the palette used for coloring negative items of Waterfall chart type.
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.
Code Sample
```
 
// Initialize
$(".selector").igCategoryChart({
	negativeBrushes: [ "#ff0000", "#ffff00", "#00ffff" ]
});
 
// Get
var brushes = $(".selector").igCategoryChart("option", "negativeBrushes");
 
// Set
$(".selector").igCategoryChart("option", "negativeBrushes", [ "#ff0000", "#ffff00", "#00ffff" ]);
```
negativeOutlines

Type:

object

Default:

null

Brushes to use for drawing negative elements, when using a chart type with contextual coloring, such as Waterfall.
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.
outlines

Type:

object

Default:

null
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
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.
Code Sample
```
 
// Initialize
$(".selector").igCategoryChart({
	outlines: [ "#ff0000", "#ffff00", "#00ffff" ]
});
 
// Get
var outlines = $(".selector").igCategoryChart("option", "outlines");
 
// Set
$(".selector").igCategoryChart("option", "outlines", [ "#ff0000", "#ffff00", "#00ffff" ]);
```
resolution

Type:

number

Default:

1
Gets or sets the rendering resolution for 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.
Code Sample
```
 
// Initialize
$(".selector").igCategoryChart({
	resolution: 2
});
 
// Get
var resolution = $(".selector").igCategoryChart("option", "resolution");
 
// Set
$(".selector").igCategoryChart("option", "resolution", 2);
```

responseDataKey
Inherited

Type:: string
Default:: null

See $.ig.DataSource. This is basically the property in the responses where data records are held, if the response is wrapped.

Code Sample

 
// Initialize
$(".selector").igDataChart({
    responseDataKey: "Records"
});
 
// Get
var responseDataKey = $(".selector").igDataChart("option", "responseDataKey");

// Set
$(".selector").igDataChart("option", "responseDataKey", "Records");

responseTotalRecCountKey
Inherited

Type:: string
Default:: null

See $.ig.DataSource. property in the response specifying the total number of records on the server.

Code Sample

 
// Initialize
$(".selector").igDataChart({
    responseTotalRecCountKey: "RecordCount"
});
 
// Get
var responseTotalRecCountKey = $(".selector").igDataChart("option", "responseTotalRecCountKey");

// Set
$(".selector").igDataChart("option", "responseTotalRecCountKey", "RecordCount");

rightMargin

Type:: number
Default:: 0

Gets or sets the right margin of the chart content.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	rightMargin: 20
});
        
// Get
var margin = $(".selector").igCategoryChart("option", "rightMargin");
        
// Set
$(".selector").igCategoryChart("option", "rightMargin", 20);

subtitle

Type:: string
Default:: null

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	subtitle: "This is a subtitle"
});
        
// Get
var subtitle = $(".selector").igCategoryChart("option", "subtitle");
        
// Set
$(".selector").igCategoryChart("option", "subtitle", "This is a subtitle");

subtitleAlignment

Type:: enumeration
Default:: center

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

Members

left
Type:string
.
center
Type:string
.
right
Type:string
.
stretch
Type:string

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	subtitleAlignment: "center"
});
        
// Get
var alignment = $(".selector").igCategoryChart("option", "subtitleAlignment");
        
// Set
$(".selector").igCategoryChart("option", "subtitleAlignment", "center");

subtitleBottomMargin

Type:: number
Default:: 0

Gets or sets the bottom margin of chart subtitle.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	subtitleBottomMargin: 10
});
        
// Get
var margin = $(".selector").igCategoryChart("option", "subtitleBottomMargin");
        
// Set
$(".selector").igCategoryChart("option", "subtitleBottomMargin", 10);

subtitleLeftMargin

Type:: number
Default:: 0

Gets or sets the left margin of chart subtitle.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	subtitleLeftMargin: 10
});
        
// Get
var margin = $(".selector").igCategoryChart("option", "subtitleLeftMargin");
        
// Set
$(".selector").igCategoryChart("option", "subtitleLeftMargin", 10);

subtitleRightMargin

Type:: number
Default:: 0

Gets or sets the right margin of chart subtitle.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	subtitleRightMargin: 10
});
        
// Get
var margin = $(".selector").igCategoryChart("option", "subtitleRightMargin");
        
// Set
$(".selector").igCategoryChart("option", "subtitleRightMargin", 10);

subtitleTextColor

Type:: string
Default:: null

Gets or sets color of chart subtitle.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	subtitleTextColor: "blue"
});
        
// Get
var color = $(".selector").igCategoryChart("option", "subtitleTextColor");
        
// Set
$(".selector").igCategoryChart("option", "subtitleTextColor", "blue");

subtitleTextStyle

Type:: string
Default:: null

Gets or sets CSS font property for the chart subtitle.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	subtitleTextStyle: "16pt Verdona"
});
        
// Get
var textStyle = $(".selector").igCategoryChart("option", "subtitleTextStyle");
        
// Set
$(".selector").igCategoryChart("option", "subtitleTextStyle", "16pt Verdona");

subtitleTopMargin

Type:: number
Default:: 0

Gets or sets the top margin of chart subtitle.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	subtitleTopMargin: 10
});
        
// Get
var margin = $(".selector").igCategoryChart("option", "subtitleTopMargin");
        
// Set
$(".selector").igCategoryChart("option", "subtitleTopMargin", 10);

thickness

Type:: number
Default:: 1

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	thickness: 5
});
        
// Get
var thickness = $(".selector").igCategoryChart("option", "thickness");
        
// Set
$(".selector").igCategoryChart("option", "thickness", 5);

title

Type:: string
Default:: null

Gets or sets text to display above the plot area.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	title: "This is a title"
});
        
// Get
var title = $(".selector").igCategoryChart("option", "title");
        
// Set
$(".selector").igCategoryChart("option", "title", "This is a title");

titleAlignment

Type:: enumeration
Default:: center

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

Members

left
Type:string
.
center
Type:string
.
right
Type:string
.
stretch
Type:string

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	titleAlignment: "center"
});
        
// Get
var alignment = $(".selector").igCategoryChart("option", "titleAlignment");
        
// Set
$(".selector").igCategoryChart("option", "titleAlignment", "center");

titleBottomMargin

Type:: number
Default:: 0

Gets or sets the bottom margin of chart title.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	titleBottomMargin: 10
});
        
// Get
var margin = $(".selector").igCategoryChart("option", "titleBottomMargin");
        
// Set
$(".selector").igCategoryChart("option", "titleBottomMargin", 10);

titleLeftMargin

Type:: number
Default:: 0

Gets or sets the left margin of chart title.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	titleLeftMargin: 10
});
        
// Get
var margin = $(".selector").igCategoryChart("option", "titleLeftMargin");
        
// Set
$(".selector").igCategoryChart("option", "titleLeftMargin", 10);

titleRightMargin

Type:: number
Default:: 0

Gets or sets the right margin of chart title.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	titleRightMargin: 10
});
        
// Get
var margin = $(".selector").igCategoryChart("option", "titleRightMargin");
        
// Set
$(".selector").igCategoryChart("option", "titleRightMargin", 10);

titleTextColor

Type:: string
Default:: null

Gets or sets color of chart title.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	titleTextColor: "red"
});
        
// Get
var color = $(".selector").igCategoryChart("option", "titleTextColor");
        
// Set
$(".selector").igCategoryChart("option", "titleTextColor", "red");

titleTextStyle

Type:: string
Default:: null

Gets or sets CSS font property for the chart title.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	titleTextStyle: "24pt Verdona"
});
        
// Get
var textStyle = $(".selector").igCategoryChart("option", "titleTextStyle");
        
// Set
$(".selector").igCategoryChart("option", "titleTextStyle", "24pt Verdona");

titleTopMargin

Type:: number
Default:: 0

Gets or sets the top margin of chart title.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	titleTopMargin: 10
});
        
// Get
var margin = $(".selector").igCategoryChart("option", "titleTopMargin");
        
// Set
$(".selector").igCategoryChart("option", "titleTopMargin", 10);

tooltipTemplate

Type:: string
Default:: null

Gets or sets the id of a template element to use for tooltips, or markup representing the tooltip template.

Code Sample

 
// Given the following data...
var data1 = [
	{ "ID": 1, "Cost": 12.5 },
	{ "ID": 2, "Cost": 18.56 },
	{ "ID": 3, "Cost": 22.18 }];

// And the following template...
<script id="chartTooltip" type="text/x-jquery-tmpl">
	<div>
		This is custom tooltip content.<br />
		<span>${item.ID}</span><br />
		<span>${item.Cost}</span><br />
	</div>
</script>
	
// Initialize
$(".selector").igCategoryChart({
	tooltipTemplate: chartTooltip
});
        
// Get
var template = $(".selector").igCategoryChart("option", "tooltipTemplate");
        
// Set
$(".selector").igCategoryChart("option", "tooltipTemplate", chartTooltip);

topMargin

Type:: number
Default:: 0

Gets or sets the top margin of the chart content.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	topMargin: 20
});
        
// Get
var margin = $(".selector").igCategoryChart("option", "topMargin");
        
// Set
$(".selector").igCategoryChart("option", "topMargin", 20);

transitionDuration

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	transitionDuration: 500
});
        
// Get
var duration = $(".selector").igCategoryChart("option", "transitionDuration");
        
// Set
$(".selector").igCategoryChart("option", "transitionDuration", 500);

transitionEasingFunction

Type:

object

Default:

null
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.
Code Sample
```
 
// Initialize
$(".selector").igCategoryChart({
	transitionEasingFunction: "cubic"
});
        
// Get
var easingFunc = $(".selector").igCategoryChart("option", "transitionEasingFunction");
        
// Set
$(".selector").igCategoryChart("option", "transitionEasingFunction", "cubic");
```

transitionInDuration

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	transitionInDuration: 500
});
        
// Get
var duration = $(".selector").igCategoryChart("option", "transitionInDuration");
        
// Set
$(".selector").igCategoryChart("option", "transitionInDuration", 500);

transitionInEasingFunction

Type:

object

Default:

null
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.
Code Sample
```
 
// Initialize
$(".selector").igCategoryChart({
	transitionInEasingFunction: "cubic"
});
        
// Get
var easingFunc = $(".selector").igCategoryChart("option", "transitionInEasingFunction");
        
// Set
$(".selector").igCategoryChart("option", "transitionInEasingFunction", "cubic");
```
transitionInMode

Type:

enumeration

Default:

auto
Gets or sets the method that determines how to animate series plots when the chart is loading into view.
Members
- auto
- Type:string
- .
- fromZero
- Type:string
- .
- sweepFromLeft
- Type:string
- .
- sweepFromRight
- Type:string
- .
- sweepFromTop
- Type:string
- .
- sweepFromBottom
- Type:string
- .
- sweepFromCenter
- Type:string
- .
- accordionFromLeft
- Type:string
- .
- accordionFromRight
- Type:string
- .
- accordionFromTop
- Type:string
- .
- accordionFromBottom
- Type:string
- .
- expand
- Type:string
- .
- sweepFromCategoryAxisMinimum
- Type:string
- .
- sweepFromCategoryAxisMaximum
- Type:string
- .
- sweepFromValueAxisMinimum
- Type:string
- .
- sweepFromValueAxisMaximum
- Type:string
- .
- accordionFromCategoryAxisMinimum
- Type:string
- .
- accordionFromCategoryAxisMaximum
- Type:string
- .
- accordionFromValueAxisMinimum
- Type:string
- .
- accordionFromValueAxisMaximum
- Type:string
Code Sample
```
 
// Initialize
$(".selector").igCategoryChart({
	transitionInMode: "sweepFromRight"
});
        
// Get
var mode = $(".selector").igCategoryChart("option", "transitionInMode");
        
// Set
$(".selector").igCategoryChart("option", "transitionInMode", "sweepFromRight");
```

transitionInSpeedType

Type:: enumeration
Default:: auto

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

Members

auto
Type:string
.
normal
Type:string
.
valueScaled
Type:string
.
indexScaled
Type:string
.
random
Type:string

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	transitionInSpeedType: "indexScaled"
});
        
// Get
var speedType = $(".selector").igCategoryChart("option", "transitionInSpeedType");
        
// Set
$(".selector").igCategoryChart("option", "transitionInSpeedType", "indexScaled");

trendLineBrushes

Type:

object

Default:

null
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
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.
Code Sample
```
 
// Initialize
$(".selector").igCategoryChart({
	trendLineBrushes: [ "#ff0000", "#ffff00", "#00ffff" ]
});
        
// Get
var brushes = $(".selector").igCategoryChart("option", "trendLineBrushes");
        
// Set
$(".selector").igCategoryChart("option", "trendLineBrushes", [ "#ff0000", "#ffff00", "#00ffff" ]);
```

trendLineThickness

Type:: number
Default:: 1.5

Gets or sets the thickness of the trend lines in this chart.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	trendLineThickness: 5
});
        
// Get
var thickness = $(".selector").igCategoryChart("option", "trendLineThickness");
        
// Set
$(".selector").igCategoryChart("option", "trendLineThickness", 5);

trendLineType

Type:

enumeration

Default:

null
Gets or sets the formula used for calculating trend lines in this chart.
Members
- none
- Type:string
- .
- linearFit
- Type:string
- .
- quadraticFit
- Type:string
- .
- cubicFit
- Type:string
- .
- quarticFit
- Type:string
- .
- quinticFit
- Type:string
- .
- logarithmicFit
- Type:string
- .
- exponentialFit
- Type:string
- .
- powerLawFit
- Type:string
- .
- simpleAverage
- Type:string
- .
- exponentialAverage
- Type:string
- .
- modifiedAverage
- Type:string
- .
- cumulativeAverage
- Type:string
- .
- weightedAverage
- Type:string
Code Sample
```
 
// Initialize
$(".selector").igCategoryChart({
	trendLineType: "simpleAverage"
});
        
// Get
var trendLineType = $(".selector").igCategoryChart("option", "trendLineType");
        
// Set
$(".selector").igCategoryChart("option", "trendLineType", "simpleAverage");
```

unknownValuePlotting

Type:: enumeration
Default:: null

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.

Members

linearInterpolate
Type:string
.
dontPlot
Type:string

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	unknownValuePlotting: "linearInterpolate"
});
        
// Get
var unknownValuePlotting = $(".selector").igCategoryChart("option", "unknownValuePlotting");
        
// Set
$(".selector").igCategoryChart("option", "unknownValuePlotting", "linearInterpolate");

widget

Type:

object

Default:

null

width
Inherited

Type:: number
Default:: null

The width of the chart.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	width: 250
});
        
// Get
var width = $(".selector").igCategoryChart("option", "width");
        
// Set
$(".selector").igCategoryChart("option", "width", 250);

windowRect

Type:: object
Default:: null

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.
The provided object should have numeric properties called left, top, width and height.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	windowRect: { left: 0, top: 0, width: 0.5, height: 0.5 }
});
   
// Get
var windowRect = $(".selector").igCategoryChart("option", "windowRect");
   
// Set
$(".selector").igCategoryChart("option", "windowRect", { left: 0, top: 0, width: 0.5, height: 0.5 });

xAxisExtent

Type:: number
Default:: ""

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisExtent: 10
});
   
// Get
var extent = $(".selector").igCategoryChart("option", "xAxisExtent");
   
// Set
$(".selector").igCategoryChart("option", "xAxisExtent", 10);

xAxisFormatLabel

Type:: object
Default:: null

Gets or sets function which takes an context object and returns a formatted label for the X-axis.

Code Sample

 
// Given the following data where ID is the X axis...
var data1 = [
	{ "ID": 1, "Cost": 12.5 },
	{ "ID": 2, "Cost": 18.56 },
	{ "ID": 3, "Cost": 22.18 }];
	
// Initialize
$(".selector").igCategoryChart({
	xAxisFormatLabel: function (item) {
		return "ID " + item; // results: "ID 1", "ID 2" & "ID 3" labels
	}
});

xAxisGap

Type:: number
Default:: 0

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.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisGap: 0.5
});
   
// Get
var gap = $(".selector").igCategoryChart("option", "xAxisGap");
   
// Set
$(".selector").igCategoryChart("option", "xAxisGap", 0.5);

xAxisInterval

Type:

number

Default:

0
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.
Code Sample
```
 
// Initialize
$(".selector").igCategoryChart({
	xAxisInterval: 2
});
   
// Get
var interval = $(".selector").igCategoryChart("option", "xAxisInterval");
   
// Set
$(".selector").igCategoryChart("option", "xAxisInterval", 2);
```

xAxisInverted

Type:: bool
Default:: null

Gets or sets whether the direction of the X-axis is inverted, placing the first data items on the right side instead of left side.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisInverted: true
});
   
// Get
var isInverted = $(".selector").igCategoryChart("option", "xAxisInverted");
   
// Set
$(".selector").igCategoryChart("option", "xAxisInverted", true);

xAxisLabel

Type:: object
Default:: null

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

Code Sample

 
// Given the following data bound to the chart...
var data1 = [
	{ "ID": 1, "Cost": 12.5, "Discount": 0.5, "ProductName": "Shirts" },
	{ "ID": 2, "Cost": 18.56, "Discount": 0.25, "ProductName": "Hats" },
	{ "ID": 3, "Cost": 22.18, "Discount": 0.1, "ProductName": "Shoes" }];
	
// Initialize
$(".selector").igCategoryChart({
	xAxisLabel: "ProductName"
});
   
// Get
var label = $(".selector").igCategoryChart("option", "xAxisLabel");
   
// Set
$(".selector").igCategoryChart("option", "xAxisLabel", "ProductName");

xAxisLabelAngle

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisLabelAngle: 30
});
   
// Get
var angle = $(".selector").igCategoryChart("option", "xAxisLabelAngle");
   
// Set
$(".selector").igCategoryChart("option", "xAxisLabelAngle", 30);

xAxisLabelBottomMargin

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisLabelBottomMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "xAxisLabelBottomMargin");
   
// Set
$(".selector").igCategoryChart("option", "xAxisLabelBottomMargin", 10);

xAxisLabelHorizontalAlignment

Type:: enumeration
Default:: center

Gets or sets the horizontal alignment of X-axis labels.

Members

left
Type:string
.
center
Type:string
.
right
Type:string
.
stretch
Type:string

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisLabelHorizontalAlignment: "center"
});
   
// Get
var alignment = $(".selector").igCategoryChart("option", "xAxisLabelHorizontalAlignment");
   
// Set
$(".selector").igCategoryChart("option", "xAxisLabelHorizontalAlignment", "center");

xAxisLabelLeftMargin

Type:: number
Default:: 0

Gets or sets the left margin of labels on the X-axis.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisLabelLeftMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "xAxisLabelLeftMargin");
   
// Set
$(".selector").igCategoryChart("option", "xAxisLabelLeftMargin", 10);

xAxisLabelRightMargin

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisLabelRightMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "xAxisLabelRightMargin");
   
// Set
$(".selector").igCategoryChart("option", "xAxisLabelRightMargin", 10);

xAxisLabelTextColor

Type:: string
Default:: null

Gets or sets color of labels on the X-axis.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisLabelTextColor: "blue"
});
   
// Get
var textColor = $(".selector").igCategoryChart("option", "xAxisLabelTextColor");
   
// Set
$(".selector").igCategoryChart("option", "xAxisLabelTextColor", "blue");

xAxisLabelTextStyle

Type:: string
Default:: null

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisLabelTextStyle: "16pt Verdona"
});
        
// Get
var textStyle = $(".selector").igCategoryChart("option", "xAxisLabelTextStyle");
        
// Set
$(".selector").igCategoryChart("option", "xAxisLabelTextStyle", "16pt Verdona");

xAxisLabelTopMargin

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisLabelTopMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "xAxisLabelTopMargin");
   
// Set
$(".selector").igCategoryChart("option", "xAxisLabelTopMargin", 10);

xAxisLabelVerticalAlignment

Type:: enumeration
Default:: top

Gets or sets the vertical alignment of X-axis labels.

Members

top
Type:string
.
center
Type:string
.
bottom
Type:string
.
stretch
Type:string

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisLabelVerticalAlignment: "center"
});
   
// Get
var alignment = $(".selector").igCategoryChart("option", "xAxisLabelVerticalAlignment");
   
// Set
$(".selector").igCategoryChart("option", "xAxisLabelVerticalAlignment", "center");

xAxisLabelVisibility

Type:: enumeration
Default:: null

Gets or sets the visibility of X-axis labels.

Members

visible
Type:string
.
collapsed
Type:string

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisLabelVisibility: "visible"
});
   
// Get
var visibility = $(".selector").igCategoryChart("option", "xAxisLabelVisibility");
   
// Set
$(".selector").igCategoryChart("option", "xAxisLabelVisibility", "visible");

xAxisMajorStroke

Type:: string
Default:: null

Gets or sets the color to apply to major gridlines along the X-axis.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisMajorStroke: "blue"
});
   
// Get
var stroke = $(".selector").igCategoryChart("option", "xAxisMajorStroke");
   
// Set
$(".selector").igCategoryChart("option", "xAxisMajorStroke", "blue");

xAxisMajorStrokeThickness

Type:: number
Default:: 1

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisMajorStrokeThickness: 5
});
   
// Get
var thickness = $(".selector").igCategoryChart("option", "xAxisMajorStrokeThickness");
   
// Set
$(".selector").igCategoryChart("option", "xAxisMajorStrokeThickness", 5);

xAxisMinorInterval

Type:: number
Default:: 0

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.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisMinorInterval: 1
});
   
// Get
var interval = $(".selector").igCategoryChart("option", "xAxisMinorInterval");
   
// Set
$(".selector").igCategoryChart("option", "xAxisMinorInterval", 1);

xAxisMinorStroke

Type:: string
Default:: null

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisMinorStroke: "grey"
});
   
// Get
var stroke = $(".selector").igCategoryChart("option", "xAxisMinorStroke");
   
// Set
$(".selector").igCategoryChart("option", "xAxisMinorStroke", "grey");

xAxisMinorStrokeThickness

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisMinorStrokeThickness: 5
});
   
// Get
var thickness = $(".selector").igCategoryChart("option", "xAxisMinorStrokeThickness");
   
// Set
$(".selector").igCategoryChart("option", "xAxisMinorStrokeThickness", 5);

xAxisOverlap

Type:: number
Default:: 0

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.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisOverlap: 0.5
});
   
// Get
var overlap = $(".selector").igCategoryChart("option", "xAxisOverlap");
   
// Set
$(".selector").igCategoryChart("option", "xAxisOverlap", 0.5);

xAxisStrip

Type:: string
Default:: null

Gets or sets the color to apply to stripes along the X-axis.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisStrip: "grey"
});
   
// Get
var strip = $(".selector").igCategoryChart("option", "xAxisStrip");
   
// Set
$(".selector").igCategoryChart("option", "xAxisStrip", "grey");

xAxisStroke

Type:: string
Default:: null

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisStroke: "blue"
});
   
// Get
var stroke = $(".selector").igCategoryChart("option", "xAxisStroke");
   
// Set
$(".selector").igCategoryChart("option", "xAxisStroke", "blue");

xAxisStrokeThickness

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisStrokeThickness: 5
});
   
// Get
var thickness = $(".selector").igCategoryChart("option", "xAxisStrokeThickness");
   
// Set
$(".selector").igCategoryChart("option", "xAxisStrokeThickness", 5);

xAxisTickLength

Type:: number
Default:: 5

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisTickLength: 5
});
   
// Get
var tickLength = $(".selector").igCategoryChart("option", "xAxisTickLength");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTickLength", 5);

xAxisTickStroke

Type:: string
Default:: null

Gets or sets the color to apply to tickmarks along the X-axis.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisTickStroke: "blue"
});
   
// Get
var stroke = $(".selector").igCategoryChart("option", "xAxisTickStroke");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTickStroke", "blue");

xAxisTickStrokeThickness

Type:: number
Default:: 2

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisTickStrokeThickness: 5
});
   
// Get
var thickness = $(".selector").igCategoryChart("option", "xAxisTickStrokeThickness");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTickStrokeThickness", 5);

xAxisTitle

Type:: string
Default:: null

Text to display below the X-axis.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisTitle: "This is an axis title"
});
   
// Get
var title = $(".selector").igCategoryChart("option", "xAxisTitle");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTitle", "This is an axis title");

xAxisTitleAlignment

Type:: enumeration
Default:: center

Gets or sets the horizontal alignment of the X-axis title.

Members

left
Type:string
.
center
Type:string
.
right
Type:string
.
stretch
Type:string

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisTitleAlignment: "center"
});
   
// Get
var alignment = $(".selector").igCategoryChart("option", "xAxisTitleAlignment");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTitleAlignment", "center");

xAxisTitleAngle

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisTitleAngle: 30
});
   
// Get
var angle = $(".selector").igCategoryChart("option", "xAxisTitleAngle");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTitleAngle", 30);

xAxisTitleBottomMargin

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisTitleBottomMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "xAxisTitleBottomMargin");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTitleBottomMargin", 10);

xAxisTitleLeftMargin

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisTitleLeftMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "xAxisTitleLeftMargin");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTitleLeftMargin", 10);

xAxisTitleMargin

Type:: number
Default:: 0

Gets or sets the margin around a title on the X-axis.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisTitleMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "xAxisTitleMargin");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTitleMargin", 10);

xAxisTitleRightMargin

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisTitleRightMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "xAxisTitleRightMargin");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTitleRightMargin", 10);

xAxisTitleTextColor

Type:: string
Default:: null

Gets or sets color of title on the X-axis.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisTitleTextColor: "blue"
});
   
// Get
var color = $(".selector").igCategoryChart("option", "xAxisTitleTextColor");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTitleTextColor", "blue");

xAxisTitleTextStyle

Type:: string
Default:: null

Gets or sets CSS font property for title on X-axis.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisTitleTextStyle: "26pt Times New Roman|Georgia|Serif"
});
   
// Get
var textStyle = $(".selector").igCategoryChart("option", "xAxisTitleTextStyle");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTitleTextStyle", "26pt Times New Roman|Georgia|Serif");

xAxisTitleTopMargin

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	xAxisTitleTopMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "xAxisTitleTopMargin");
   
// Set
$(".selector").igCategoryChart("option", "xAxisTitleTopMargin", 10);

yAxisExtent

Type:: number
Default:: ""

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisExtent: 10
});
   
// Get
var extent = $(".selector").igCategoryChart("option", "yAxisExtent");
   
// Set
$(".selector").igCategoryChart("option", "yAxisExtent", 10);

yAxisFormatLabel

Type:: object
Default:: null

Gets or sets function which takes a context object and returns a formatted label for the Y-axis.

Code Sample

 
// Given the following data where Cost is the Y axis...
var data1 = [
	{ "ID": 1, "Cost": 12.5 },
	{ "ID": 2, "Cost": 18.56 },
	{ "ID": 3, "Cost": 22.18 }];
	
// Initialize
$(".selector").igCategoryChart({
	yAxisFormatLabel: function (item) {
		return item.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
	}
});

yAxisInterval

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisInterval: 2
});
   
// Get
var interval = $(".selector").igCategoryChart("option", "yAxisInterval");
   
// Set
$(".selector").igCategoryChart("option", "yAxisInterval", 2);

yAxisInverted

Type:: bool
Default:: null

Gets or sets whether the direction of the Y-axis is inverted, placing minimum numeric value at the top of the axis instead of bottom.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisInverted: true
});
   
// Get
var isInverted = $(".selector").igCategoryChart("option", "yAxisInverted");
   
// Set
$(".selector").igCategoryChart("option", "yAxisInverted", true);

yAxisIsLogarithmic

Type:

bool

Default:

null
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.
Code Sample
```
 
// Initialize
$(".selector").igCategoryChart({
	yAxisIsLogarithmic: true
});
   
// Get
var isInverted = $(".selector").igCategoryChart("option", "yAxisIsLogarithmic");
   
// Set
$(".selector").igCategoryChart("option", "yAxisIsLogarithmic", true);
```

yAxisLabel

Type:: object
Default:: null

Gets or sets the format for labels along the Y-axis.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisLabel: "{0:n}"
});
   
// Get
var label = $(".selector").igCategoryChart("option", "yAxisLabel");
   
// Set
$(".selector").igCategoryChart("option", "yAxisLabel", "{0:n}");

yAxisLabelAngle

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisLabelAngle: 30
});
   
// Get
var angle = $(".selector").igCategoryChart("option", "yAxisLabelAngle");
   
// Set
$(".selector").igCategoryChart("option", "yAxisLabelAngle", 30);

yAxisLabelBottomMargin

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisLabelBottomMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "yAxisLabelBottomMargin");
   
// Set
$(".selector").igCategoryChart("option", "yAxisLabelBottomMargin", 10);

yAxisLabelHorizontalAlignment

Type:: enumeration
Default:: right

Gets or sets the horizontal alignment of Y-axis labels.

Members

left
Type:string
.
center
Type:string
.
right
Type:string
.
stretch
Type:string

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisLabelHorizontalAlignment: "center"
});
   
// Get
var alignment = $(".selector").igCategoryChart("option", "yAxisLabelHorizontalAlignment");
   
// Set
$(".selector").igCategoryChart("option", "yAxisLabelHorizontalAlignment", "center");

yAxisLabelLeftMargin

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisLabelLeftMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "yAxisLabelLeftMargin");
   
// Set
$(".selector").igCategoryChart("option", "yAxisLabelLeftMargin", 10);

yAxisLabelRightMargin

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisLabelRightMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "yAxisLabelRightMargin");
   
// Set
$(".selector").igCategoryChart("option", "yAxisLabelRightMargin", 10);

yAxisLabelTextColor

Type:: string
Default:: null

Gets or sets color of labels on the Y-axis.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisLabelTextColor: "blue"
});
   
// Get
var textColor = $(".selector").igCategoryChart("option", "yAxisLabelTextColor");
   
// Set
$(".selector").igCategoryChart("option", "yAxisLabelTextColor", "blue");

yAxisLabelTextStyle

Type:: string
Default:: null

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisLabelTextStyle: "16pt Verdona"
});
        
// Get
var textStyle = $(".selector").igCategoryChart("option", "yAxisLabelTextStyle");
        
// Set
$(".selector").igCategoryChart("option", "yAxisLabelTextStyle", "16pt Verdona");

yAxisLabelTopMargin

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisLabelTopMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "yAxisLabelTopMargin");
   
// Set
$(".selector").igCategoryChart("option", "yAxisLabelTopMargin", 10);

yAxisLabelVerticalAlignment

Type:: enumeration
Default:: center

Gets or sets the vertical alignment of Y-axis labels.

Members

top
Type:string
.
center
Type:string
.
bottom
Type:string
.
stretch
Type:string

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisLabelVerticalAlignment: "center"
});
   
// Get
var alignment = $(".selector").igCategoryChart("option", "yAxisLabelVerticalAlignment");
   
// Set
$(".selector").igCategoryChart("option", "yAxisLabelVerticalAlignment", "center");

yAxisLabelVisibility

Type:: enumeration
Default:: null

Gets or sets the visibility of Y-axis labels.

Members

visible
Type:string
.
collapsed
Type:string

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisLabelVisibility: "visible"
});
   
// Get
var visibility = $(".selector").igCategoryChart("option", "yAxisLabelVisibility");
   
// Set
$(".selector").igCategoryChart("option", "yAxisLabelVisibility", "visible");

yAxisLogarithmBase

Type:: number
Default:: 10

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.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisLogarithmBase: 10
});
   
// Get
var logBase = $(".selector").igCategoryChart("option", "yAxisLogarithmBase");
   
// Set
$(".selector").igCategoryChart("option", "yAxisLogarithmBase", 10);

yAxisMajorStroke

Type:: string
Default:: null

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisMajorStroke: "blue"
});
   
// Get
var stroke = $(".selector").igCategoryChart("option", "yAxisMajorStroke");
   
// Set
$(".selector").igCategoryChart("option", "yAxisMajorStroke", "blue");

yAxisMajorStrokeThickness

Type:: number
Default:: 1

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisMajorStrokeThickness: 5
});
   
// Get
var thickness = $(".selector").igCategoryChart("option", "yAxisMajorStrokeThickness");
   
// Set
$(".selector").igCategoryChart("option", "yAxisMajorStrokeThickness", 5);

yAxisMaximumValue

Type:: number
Default:: ""

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisMaximumValue: 100
});
   
// Get
var maxValue = $(".selector").igCategoryChart("option", "yAxisMaximumValue");
   
// Set
$(".selector").igCategoryChart("option", "yAxisMaximumValue", 100);

yAxisMinimumValue

Type:: number
Default:: ""

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisMinimumValue: 0
});
   
// Get
var minValue = $(".selector").igCategoryChart("option", "yAxisMinimumValue");
   
// Set
$(".selector").igCategoryChart("option", "yAxisMinimumValue", 0);

yAxisMinorInterval

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisMinorInterval: 1
});
   
// Get
var interval = $(".selector").igCategoryChart("option", "yAxisMinorInterval");
   
// Set
$(".selector").igCategoryChart("option", "yAxisMinorInterval", 1);

yAxisMinorStroke

Type:: string
Default:: null

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisMinorStroke: "grey"
});
   
// Get
var stroke = $(".selector").igCategoryChart("option", "yAxisMinorStroke");
   
// Set
$(".selector").igCategoryChart("option", "yAxisMinorStroke", "grey");

yAxisMinorStrokeThickness

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisMinorStrokeThickness: 5
});
   
// Get
var thickness = $(".selector").igCategoryChart("option", "yAxisMinorStrokeThickness");
   
// Set
$(".selector").igCategoryChart("option", "yAxisMinorStrokeThickness", 5);

yAxisStrip

Type:: string
Default:: null

Gets or sets the color to apply to stripes along the Y-axis.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisStrip: "grey"
});
   
// Get
var strip = $(".selector").igCategoryChart("option", "yAxisStrip");
   
// Set
$(".selector").igCategoryChart("option", "yAxisStrip", "grey");

yAxisStroke

Type:: string
Default:: null

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisStroke: "blue"
});
   
// Get
var stroke = $(".selector").igCategoryChart("option", "yAxisStroke");
   
// Set
$(".selector").igCategoryChart("option", "yAxisStroke", "blue");

yAxisStrokeThickness

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisStrokeThickness: 5
});
   
// Get
var thickness = $(".selector").igCategoryChart("option", "yAxisStrokeThickness");
   
// Set
$(".selector").igCategoryChart("option", "yAxisStrokeThickness", 5);

yAxisTickLength

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisTickLength: 5
});
   
// Get
var tickLength = $(".selector").igCategoryChart("option", "yAxisTickLength");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTickLength", 5);

yAxisTickStroke

Type:: string
Default:: null

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisTickStroke: "blue"
});
   
// Get
var stroke = $(".selector").igCategoryChart("option", "yAxisTickStroke");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTickStroke", "blue");

yAxisTickStrokeThickness

Type:: number
Default:: 2

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisTickStrokeThickness: 5
});
   
// Get
var thickness = $(".selector").igCategoryChart("option", "yAxisTickStrokeThickness");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTickStrokeThickness", 5);

yAxisTitle

Type:: string
Default:: null

Text to display to the left of the Y-axis.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisTitle: "This is an axis title"
});
   
// Get
var title = $(".selector").igCategoryChart("option", "yAxisTitle");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTitle", "This is an axis title");

yAxisTitleAlignment

Type:: enumeration
Default:: center

Gets or sets the vertical alignment of the Y-axis title.

Members

top
Type:string
.
center
Type:string
.
bottom
Type:string
.
stretch
Type:string

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisTitleAlignment: "center"
});
   
// Get
var alignment = $(".selector").igCategoryChart("option", "yAxisTitleAlignment");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTitleAlignment", "center");

yAxisTitleAngle

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisTitleAngle: 30
});
   
// Get
var angle = $(".selector").igCategoryChart("option", "yAxisTitleAngle");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTitleAngle", 30);

yAxisTitleBottomMargin

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisTitleBottomMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "yAxisTitleBottomMargin");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTitleBottomMargin", 10);

yAxisTitleLeftMargin

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisTitleLeftMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "yAxisTitleLeftMargin");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTitleLeftMargin", 10);

yAxisTitleMargin

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisTitleMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "yAxisTitleMargin");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTitleMargin", 10);

yAxisTitleRightMargin

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisTitleRightMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "yAxisTitleRightMargin");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTitleRightMargin", 10);

yAxisTitleTextColor

Type:: string
Default:: null

Gets or sets color of title on the Y-axis.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisTitleTextColor: "blue"
});
   
// Get
var color = $(".selector").igCategoryChart("option", "yAxisTitleTextColor");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTitleTextColor", "blue");

yAxisTitleTextStyle

Type:: string
Default:: null

Gets or sets CSS font property for title on Y-axis.

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisTitleTextStyle: "26pt Times New Roman|Georgia|Serif"
});
   
// Get
var textStyle = $(".selector").igCategoryChart("option", "yAxisTitleTextStyle");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTitleTextStyle", "26pt Times New Roman|Georgia|Serif");

yAxisTitleTopMargin

Type:: number
Default:: 0

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

Code Sample

 
// Initialize
$(".selector").igCategoryChart({
	yAxisTitleTopMargin: 10
});
   
// Get
var margin = $(".selector").igCategoryChart("option", "yAxisTitleTopMargin");
   
// Set
$(".selector").igCategoryChart("option", "yAxisTitleTopMargin", 10);

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

dataBinding
Inherited

Cancellable:: true

Event which is raised before data binding.
Return false in order to cancel data binding.
Function takes first argument null and second argument ui.
Use ui.owner to obtain reference to chart widget.
Use ui.dataSource to obtain reference to instance of $.ig.DataSource.

Code Sample

 
// Delegate
$(document).delegate(".selector", "igcategorychartdatabinding", function (evt, ui) {
    // Get reference to igCategoryChart.
    ui.owner;
     
    // Get reference to instance of $.ig.DataSource.
    ui.dataSource;
});
  
// Initialize
$(".selector").igCategoryChart({
    dataBinding: function(evt, ui) {...}
});

dataBound
Inherited

Cancellable:: false

Event which is raised after data binding.
Function takes first argument null and second argument ui.
Use ui.owner to obtain reference to chart widget.
Use ui.data to obtain reference to array actual data which is displayed by chart.
Use ui.dataSource to obtain reference to instance of $.ig.DataSource.

Code Sample

 
// Delegate
$(document).delegate(".selector", "igcategorychartdatabound", function (evt, ui) {
    // Get reference to igCategoryChart.
    ui.owner;
     
    // Get reference to igCategoryChart's array data.
    ui.data;
     
    // Get reference to instance of $.ig.DataSource.
    ui.dataSource;
});
  
// Initialize
$(".selector").igCategoryChart({
    dataBound: function(evt, ui) {...}
});

hideTooltip
Inherited

Cancellable:

true

Event which is raised before tooltip is hidden.
Return false in order to cancel hiding and keep tooltip visible.
Function takes first argument null and second argument ui.
Use ui.owner to obtain reference to chart widget.
Use ui.item to obtain reference to item.
Use ui.element to obtain reference to jquery object which represents tooltip or value of ui.element from last updateTooltip event. Value of that member can be replaced by custom element.
Code Sample
```
 
// Delegate
$(document).delegate(".selector", "igcategorycharthidetooltip", function (evt, ui) {
    // Get reference to igCategoryChart.
    ui.owner;
     
    // Get reference to the data object.
    ui.item;
     
    // Get or set the jQuery object representing the tooltip.
    ui.element;
});
  
// Initialize
$(".selector").igCategoryChart({
    hideTooltip: function(evt, ui) {...}
});
```

propertyChanged

Cancellable:: false

Event raised when a property value is changed.

Code Sample

 
// Delegate
$(document).delegate(".selector", "igcategorychartpropertychanged", function (evt, ui) {
     
    // Gets the name of the property that changed.
    ui.propertyName;
});
 
// Initialize
$(".selector").igCategoryChart({
    propertyChanged: function (evt, ui) {...}
});

updateTooltip
Inherited

Cancellable:

true

Event which is raised before tooltip is updated.
Return false in order to cancel updating and hide tooltip.
Function takes first argument null and second argument ui.
Use ui.owner to obtain reference to chart widget.
Use ui.text to obtain html of tooltip. Value of that member can be modified. If modified value is null or empty string, then current content of tooltip keeps old value.
Use ui.item to obtain reference to item. Value of that member can be modified or replaced by custom item.
Use ui.x to obtain left position of tooltip in pixels relative to widget. Value of that member can be modified.
Use ui.y to obtain top position of tooltip in pixels relative to widget. Value of that member can be modified.
Use ui.element to obtain reference to jquery object which represents tooltip. Value of that member can be replaced by custom element.
Code Sample
```
 
// Delegate
$(document).delegate(".selector", "igcategorychartupdatetooltip", function (evt, ui) {
    // Get reference to igCategoryChart.
    ui.owner;
     
    // Get or set the tooltip HTML.
    ui.text;
     
    // Get reference to the data object.
    ui.item;
     
    // Get or set the tooltip's left position relative to the widget in pixels.
    ui.x;
     
    // Get or set the tooltip's top position relative to the widget in pixels.
    ui.y;
     
    // Get or set the jQuery object representing the tooltip.
    ui.element;
});
  
// Initialize
$(".selector").igCategoryChart({
    updateTooltip: function(evt, ui) {...}
});
```

Show Details

addItem
Inherited

.igCategoryChart( "addItem", item:object );

Return Type:

object

Return Type Description:

Returns a reference to this chart.
Adds a new item to the data source and notifies the chart.
- item
- Type:object
- The item that we want to add to the data source.
Code Sample
```
 
$(".selector").igCategoryChart("addItem", dataItem);
```
chart
Inherited

.igCategoryChart( "chart" );

Return Type:

object

Return Type Description:

Returns reference to chart.
Get reference to chart object.
Code Sample
```
 
// Not intended for use with derived widget       
var chart = $(".selector").igCategoryChart("chart");
```
dataBind
Inherited

.igCategoryChart( "dataBind" );
Binds data to the chart.
Code Sample
```
 
$(".selector").igCategoryChart("dataBind");
```

destroy

.igCategoryChart( "destroy" );

Code Sample

 
$(".selector").igCategoryChart("destroy");

exportVisualData

.igCategoryChart( "exportVisualData" );

Code Sample

 
var visualData = $(".selector").igCategoryChart("exportVisualData");

findIndexOfItem
Inherited

.igCategoryChart( "findIndexOfItem", item:object );

Return Type:

number

Return Type Description:

Returns -1 or index of item.
Find index of item within actual data used by chart.
- item
- Type:object
- The reference to item.
Code Sample
```
 
var index = $(".selector").igCategoryChart("findIndexOfItem", item);
```
flush
Inherited

.igCategoryChart( "flush" );
Forces any pending deferred work to render on the chart before continuing.
getData
Inherited

.igCategoryChart( "getData" );

Return Type:

array

Return Type Description:

Returns null or reference to data.
Get reference of actual data used by chart.
Code Sample
```
 
var data = $(".selector").igCategoryChart("getData");
```
getDataItem
Inherited

.igCategoryChart( "getDataItem", index:object );

Return Type:

object

Return Type Description:

Returns null or reference to data item.
Get item within actual data used by chart. That is similar to this.getData()[ index ].
- index
- Type:object
- Index of data item.
Code Sample
```
 
var item = $(".selector").igCategoryChart("getDataItem", 0);
```

id

.igCategoryChart( "id" );

Code Sample

 
var id = $(".selector").igCategoryChart("id");

insertItem
Inherited

.igCategoryChart( "insertItem", item:object, index:number );

Return Type:

object

Return Type Description:

Returns a reference to this chart.
Inserts a new item to the data source and notifies the chart.
- item
- Type:object
- the new item that we want to insert in the data source.
- index
- Type:number
- The index in the data source where the new item will be inserted.
Code Sample
```
 
var chart = $(".selector").igCategoryChart("insertItem", item, 9);
```
notifyClearItems
Inherited

.igCategoryChart( "notifyClearItems", dataSource:object );

Return Type:

object

Return Type Description:

Returns a reference to this chart.
Notifies the chart that the items have been cleared from an associated data source.
It's not necessary to notify more than one target of a change if they share the same items source.
- dataSource
- Type:object
- The data source in which the change happened.
Code Sample
```
 
var chart = $(".selector").igCategoryChart("notifyClearItems", dataSource);
```
notifyInsertItem
Inherited

.igCategoryChart( "notifyInsertItem", dataSource:object, index:number, newItem:object );

Return Type:

object

Return Type Description:

Returns a reference to this chart.
Notifies the target axis or series that an item has been inserted at the specified index in its data source.
It's not necessary to notify more than one target of a change if they share the same items source.
- dataSource
- Type:object
- The data source in which the change happened.
- index
- Type:number
- The index in the items source where the new item has been inserted.
- newItem
- Type:object
- the new item that has been set in the collection.
Code Sample
```
 
var chart = $(".selector").igCategoryChart("notifyInsertItem", dataSource, 9, newItem);
```
notifyRemoveItem
Inherited

.igCategoryChart( "notifyRemoveItem", dataSource:object, index:number, oldItem:object );

Return Type:

object

Return Type Description:

Returns a reference to this chart.
Notifies the target axis or series that an item has been removed from the specified index in its data source.
It's not necessary to notify more than one target of a change if they share the same items source.
- dataSource
- Type:object
- The data source in which the change happened.
- index
- Type:number
- The index in the items source from where the old item has been removed.
- oldItem
- Type:object
- the old item that has been removed from the collection.
Code Sample
```
 
var chart = $(".selector").igBaseChart("notifyRemoveItem", dataSource, 0, oldItem);
```
notifySetItem
Inherited

.igCategoryChart( "notifySetItem", dataSource:object, index:number, newItem:object, oldItem:object );

Return Type:

object

Return Type Description:

Returns a reference to this chart.
Notifies the chart that an item has been set in an associated data source.
- dataSource
- Type:object
- The data source in which the change happened.
- index
- Type:number
- The index in the items source that has been changed.
- newItem
- Type:object
- the new item that has been set in the collection.
- oldItem
- Type:object
- the old item that has been overwritten in the collection.
Code Sample
```
 
$(".selector").igCategoryChart("notifySetItem", dataSource, 1, {"Item1": "Value1", "Item2": 1000, "Item3": 1019.75}, {"Item1": "Value2", "Item2": 500, "Item3": 156.22});
```
removeItem
Inherited

.igCategoryChart( "removeItem", index:number );

Return Type:

object

Return Type Description:

Returns a reference to this chart.
Deletes an item from the data source and notifies the chart.
- index
- Type:number
- The index in the data source from where the item will be been removed.
Code Sample
```
 
$(".selector").igCategoryChart("removeItem", 0);
```
setItem
Inherited

.igCategoryChart( "setItem", index:number, item:object );

Return Type:

object

Return Type Description:

Returns a reference to this chart.
Updates an item in the data source and notifies the chart.
- index
- Type:number
- The index of the item in the data source that we want to change.
- item
- Type:object
- The new item object that will be set in the data source.
Code Sample
```
 
$(".selector").igCategoryChart("setItem", 0, item);
```

ui-category ui-corner-all ui-widget-content ui-categorychart-container

Get the class applied to main element: ui-category ui-corner-all ui-widget-content.
ui-category-tooltip ui-widget-content ui-corner-all

Get the class applied to the tooltip element: ui-category-tooltip ui-widget-content ui-corner-all.
ui-html5-non-html5-supported-message ui-helper-clearfix ui-html5-non-html5

Get the class applied to main element, shown when the chart is opened in a non HTML5 compatible browser.

Ignite UI | Samples

ui.igCategoryChart

Code Sample

Related Samples

Related Topics

Dependencies

Inherits

alignsGridLinesToPixels

bottomMargin

Code Sample

brushes

Code Sample

chartType

Members

Code Sample

createWrappedTooltip

dataSourceInherited

Code Sample

dataSourceTypeInherited

Code Sample

dataSourceUrlInherited

Code Sample

excludedProperties

Code Sample

heightInherited

Code Sample

includedProperties

Code Sample

isHorizontalZoomEnabled

Code Sample

isTransitionInEnabled

Code Sample

isVerticalZoomEnabled

Code Sample

itemsSource

Code Sample

leftMargin

Code Sample

legend

Code Sample

markerBrushes

Code Sample

markerCollisionAvoidance

Members

Code Sample

markerOutlines

Code Sample

markerTypes

Code Sample

maxRecCountInherited

Code Sample

negativeBrushes

Code Sample

negativeOutlines

outlines

Code Sample

resolution

Code Sample

responseDataKeyInherited

Code Sample

responseTotalRecCountKeyInherited

Code Sample

rightMargin

Code Sample

subtitle

Code Sample

subtitleAlignment

Members

Code Sample

subtitleBottomMargin

Code Sample

subtitleLeftMargin

Code Sample

subtitleRightMargin

Code Sample

subtitleTextColor

Code Sample

subtitleTextStyle

Code Sample

subtitleTopMargin

dataSource
Inherited

dataSourceType
Inherited

dataSourceUrl
Inherited

height
Inherited

maxRecCount
Inherited

responseDataKey
Inherited

responseTotalRecCountKey
Inherited

width
Inherited