ui.igCategoryChart

ui.igCategoryChart_image

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

Related Topics

Dependencies

jquery.js
jquery-ui.js
infragistics.util.js
infragistics.util.jquery.js
infragistics.datasource.js
infragistics.templating.js
infragistics.ext_core.js
infragistics.ext_collections.js
infragistics.ext_ui.js
infragistics.dv_core.js
infragistics.dv_datasource.js
infragistics.dv_dataseriesadapter.js
infragistics.dv_geometry.js
infragistics.dv_jquerydom.js
infragistics.datachart_core.js
infragistics.datachart_categorycore.js
infragistics.dvcommonwidget.js
infragistics.datachart_category.js
infragistics.categorychart.js
infragistics.ui.widget.js
infragistics.ui.basechart.js
infragistics.ui.categorychart.js

Inherits

  • actualOutlines

    Type:
    object
    Default:
    null

    Gets the actual 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.

  • alignsGridLinesToPixels

    Type:
    bool
    Default:
    true

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

  • animateSeriesWhenAxisRangeChanges

    Type:
    bool
    Default:
    false

    Gets or sets whether the series animations should be allowed when a range change has been detected on an axis.

  • areaFillOpacity

    Type:
    number
    Default:
    NaN

    Gets or sets the fill opacity for all series that have area visuals in this chart.
    For example, Area, SplineArea, Column chart types.

  • autoExpandMarginExtraPadding

    Type:
    number
    Default:
    2

    Gets or sets the extra amount the series viewer should auto expand margins to accommodate the initial horizontal axis labels.

  • autoExpandMarginMaximumValue

    Type:
    number
    Default:
    60

    Gets or sets the maximum amount the series viewer should auto expand margins to accommodate the initial horizontal axis labels.

  • bottomMargin

    Type:
    number
    Default:
    NaN

    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" ]);

  • calloutsContentMemberPath

    Type:
    string
    Default:
    null

    Gets or sets the member path of the content data for the callouts.

  • calloutsItemsSource

    Type:
    object
    Default:
    null

    Gets or sets the collection of callout data to be annotated.

  • calloutsLabelMemberPath

    Type:
    string
    Default:
    null

    Gets or sets the member path of the label data for the callouts.

  • calloutStyleUpdatingEventEnabled

    Type:
    bool
    Default:
    false

    Gets or sets if event annotations should be displayed.

  • calloutsVisible

    Type:
    bool
    Default:
    false

    Gets or sets if callouts should be displayed.

  • calloutsXMemberPath

    Type:
    string
    Default:
    null

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

  • calloutsYMemberPath

    Type:
    string
    Default:
    null

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

  • chartType

    Type:
    enumeration
    Default:
    null

    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");

  • computedPlotAreaMarginMode

    Type:
    enumeration
    Default:
    auto

    Gets or sets the highlighting mode to use for the series in the component, when supported. This takes precedence over the series level IsHightlightingEnabled.

    Members

    • auto
    • Type:string
    • Computed plot area margin mode is determined by the component.
    • series
    • Type:string
    • The series in the chart are queried for their requested margins to incorporate into the plot area margin.
    • none
    • Type:string
    • There is no automatic determination of the plot area margin.

  • createWrappedTooltip

    Type:
    object
    Default:
    null

    Gets or sets a function for creating wrapped tooltip.

  • crosshairsAnnotationEnabled

    Type:
    bool
    Default:
    true

    Gets or sets whether annotations are shown along the axis for crosshair values.

  • crosshairsAnnotationXAxisBackground

    Type:
    string
    Default:
    null

    Gets or sets the background of crosshair annotation on x-axis.

  • crosshairsAnnotationXAxisPrecision

    Type:
    number
    Default:
    -1

    Gets or sets precision on interpolated values of crosshairs on x-axis.

  • crosshairsAnnotationXAxisTextColor

    Type:
    string
    Default:
    null

    Gets or sets the text color of crosshair annotation on x-axis.

  • crosshairsAnnotationYAxisBackground

    Type:
    string
    Default:
    null

    Gets or sets the background of crosshair annotation on y-axis.

  • crosshairsAnnotationYAxisPrecision

    Type:
    number
    Default:
    -1

    Gets or sets precision on interpolated values of crosshairs on y-axis.

  • crosshairsAnnotationYAxisTextColor

    Type:
    string
    Default:
    null

    Gets or sets the text color of crosshair annotation on y-axis.

  • crosshairsDisplayMode

    Type:
    enumeration
    Default:
    auto

    Gets or sets the crosshairs to be displayed.

    Members

    • auto
    • Type:string
    • Display crosshair lines depending on chart type, e.g. no vertical crosshair lines for column and waterfall charts.
    • none
    • Type:string
    • Display no crosshair lines in the chart.
    • horizontal
    • Type:string
    • Display horizontal line of crosshairs in the chart.
    • vertical
    • Type:string
    • Display vertical line of crosshairs in the chart.
    • both
    • Type:string
    • Display both horizontal and vertical lines of crosshairs in the chart.

  • crosshairsLineHorizontalStroke

    Type:
    string
    Default:
    null

    Gets or sets the color to apply to horizontal crosshairs line.

  • crosshairsLineThickness

    Type:
    number
    Default:
    NaN

    Gets or sets thickness of crosshairs lines.

  • crosshairsLineVerticalStroke

    Type:
    string
    Default:
    null

    Gets or sets the color to apply to vertical crosshairs line.

  • crosshairsSnapToData

    Type:
    bool
    Default:
    false

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

  • 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" ]);

  • finalValueAnnotationsBackground

    Type:
    string
    Default:
    null

    Gets or sets the background of final value annotation.

  • finalValueAnnotationsPrecision

    Type:
    number
    Default:
    -1

    Gets or sets precision on final value annotation.

  • finalValueAnnotationsTextColor

    Type:
    string
    Default:
    null

    Gets or sets the text color of final value annotation.

  • finalValueAnnotationsVisible

    Type:
    bool
    Default:
    false

    Gets or sets whether annotations for the final value of each series is displayed on the axis.

  • 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);

  • highlightingBehavior

    Type:
    enumeration
    Default:
    auto

    Gets or sets the highlighting Behavior to use for the series in the component, when supported. This takes precedence over the series level IsHightlightingEnabled.

    Members

    • auto
    • Type:string
    • Highlighting behavior is determined by the component.
    • directlyOver
    • Type:string
    • Series are highlighted when the cursor is directly above them.
    • nearestItems
    • Type:string
    • The nearest items to the cursor will be highlighted.
    • nearestItemsRetainMainShapes
    • Type:string
    • The nearest items to the cursor will be highlighted, the main shapes of the series will not be de-emphasized.
    • nearestItemsAndSeries
    • Type:string
    • The nearest items to the cursor will be highlighted, the main shapes of the series closest to the cursor will not be de-emphasized.

  • highlightingMode

    Type:
    enumeration
    Default:
    auto

    Gets or sets the highlighting mode to use for the series in the component, when supported. This takes precedence over the series level IsHightlightingEnabled.

    Members

    • auto
    • Type:string
    • Highlighting mode is determined by the component.
    • none
    • Type:string
    • No highlighting is defined at the chart level. Individual series may have local highlight settings.
    • brightenSpecific
    • Type:string
    • Series will brighten when hovered, and, if applicable brighten indiviudal shapes or markers.
    • brighten
    • Type:string
    • Series will brighten when hovered.
    • fadeOthersSpecific
    • Type:string
    • Series will fade if they aren't the hovered series, and, if applicable other shapes in the hovered series will fade.
    • fadeOthers
    • Type:string
    • Series will fade if they aren't the hovered series, and, if applicable other shapes in the hovered series will fade.

  • 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 remainder 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" ]);

  • isCategoryHighlightingEnabled

    Type:
    bool
    Default:
    false

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

  • isHorizontalZoomEnabled

    Type:
    bool
    Default:
    true

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

    Code Sample

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

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

  • isItemHighlightingEnabled

    Type:
    bool
    Default:
    false

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

  • isSeriesHighlightingEnabled

    Type:
    bool
    Default:
    false

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

  • 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:
    true

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

    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.
    The ItemsSource of this chart can be a list of objects containing one or more numeric properties.
    Additionally, if the objects in the list implement the IEnumerable interface,
    the Chart will attempt to delve into the sub-collections when reading through the data source.
    Data binding 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:
    NaN

    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

    Gets or 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' });

  • legendHighlightingMode

    Type:
    enumeration
    Default:
    auto

    Gets or sets the highlighting mode to use for the legend linked to the component, when supported.

    Members

    • auto
    • Type:string
    • Highlighting mode is determined by the component.
    • none
    • Type:string
    • Legend will not attempt to highlight series when rolling over legend items.
    • matchSeries
    • Type:string
    • On rollover of legend, series will highlight matching the highlight configuration of the series.

  • legendItemBadgeMode

    Type:
    enumeration
    Default:
    simplified

    Gets or sets the mode of legend badges representing all series displayed in a legend linked to this component. This property will be ignored when the LegendItemTemplate or LegendItemBadgeTemplate property is set on a series.

    Members

    • simplified
    • Type:string
    • Specifies legend badges with simplified visuals of series, e.g. with fixed thickness, no overlaid markers.
    • matchSeries
    • Type:string
    • Specifies legend badges that match all visuals of series such as thickness and markers (if supported by a series).

  • legendItemBadgeShape

    Type:
    enumeration
    Default:
    automatic

    Gets or sets the type of legend badges representing all series displayed in a legend linked to this component This property will be ignored when the LegendItemTemplate or LegendItemBadgeTemplate property is set on a series.

    Members

    • automatic
    • Type:string
    • Specifies automatic badge with best match of series type, e.g. Square badge for Area Series, Line badge for Line Series etc.
    • circle
    • Type:string
    • Specifies a circle badge in a legend.
    • line
    • Type:string
    • Specifies a thin line badge in a legend.
    • square
    • Type:string
    • Specifies a square badge in a legend.
    • marker
    • Type:string
    • Specifies a marker badge in a legend (if series supports markers otherwise a circle badge).
    • bar
    • Type:string
    • Specifies a thick horizontal bar in a legend.
    • column
    • Type:string
    • Specifies a thick vertical column in a legend.
    • hidden
    • Type:string
    • Specifies hidden badge in a legend, next to the series title.

  • markerAutomaticBehavior

    Type:
    enumeration
    Default:
    circle

    Gets or sets the default marker type for all series plotted in this chart. This property is ignored when the MarkerTypes property is set.

    Members

    • circleSmart
    • Type:string
    • Sets a circle marker on most series and no marker on bar, column, waterfall, polygon, and step series.
    • none
    • Type:string
    • Sets no visible marker on all series in the chart.
    • smartIndexed
    • Type:string
    • Sets an marker on most series based on its index and no marker on bar, column, waterfall, polygon, and step series.
    • indexed
    • Type:string
    • Sets marker for each series in the chart based on its index: circle, triangle, pyramid, etc.
    • circle
    • Type:string
    • Sets circle marker on all series in the chart.
    • triangle
    • Type:string
    • Sets flat-top triangle marker on all series in the chart.
    • pyramid
    • Type:string
    • Sets flat-base triangle marker on all series in the chart.
    • square
    • Type:string
    • Sets square marker shape on all series in the chart.
    • diamond
    • Type:string
    • Sets diamond marker on all series in the chart.
    • pentagon
    • Type:string
    • Sets pentagon marker on all series in the chart.
    • hexagon
    • Type:string
    • Sets Hexagon marker on all series in the chart.
    • tetragram
    • Type:string
    • Sets four-pointed star marker on all series in the chart.
    • pentagram
    • Type:string
    • Sets five-pointed star marker on all series in the chart.
    • hexagram
    • Type:string
    • Sets six-pointed star marker on all series in the chart.

  • markerBrushes

    Type:
    object
    Default:
    null

    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
    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
    • Collision avoidance is disabled.
    • omit
    • Type:string
    • Items colliding with other items will be hidden from view.

    Code Sample

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

  • markerFillMode

    Type:
    enumeration
    Default:
    auto

    Gets or sets the MarkerFillMode for all series that support markers in this chart.

    Members

    • auto
    • Type:string
    • Outline mode is managed by the series.
    • normal
    • Type:string
    • This series base its marker brush on the marker outlines collection.
    • matchMarkerOutline
    • Type:string
    • The series should match the marker fill to the marker outline.

  • markerFillOpacity

    Type:
    number
    Default:
    NaN

    Gets or sets the Marker Fill Opacity for all series that support markers in this chart.

  • markerMaxCount

    Type:
    number
    Default:
    400

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

  • markerOutlineMode

    Type:
    enumeration
    Default:
    auto

    Gets or sets the MarkerOutlineMode for all series that support markers in this chart.

    Members

    • auto
    • Type:string
    • Outline mode is managed by the series.
    • normal
    • Type:string
    • This series base its marker brush on the marker outlines collection.
    • matchMarkerBrush
    • Type:string
    • The series should match the marker outline to the marker brush.

  • markerOutlines

    Type:
    object
    Default:
    null

    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
    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" ]);

  • markerThickness

    Type:
    number
    Default:
    NaN

    Gets or sets the Marker Thickness for all series that support markers in this chart.

  • markerTypes

    Type:
    object
    Default:
    null

    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.

    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.

  • outlineMode

    Type:
    enumeration
    Default:
    auto

    Gets or sets the OutlineMode for all series in this chart.

    Members

    • auto
    • Type:string
    • Outline mode is managed by the series.
    • visible
    • Type:string
    • This series should show the outline portion of the visual.
    • collapsed
    • Type:string
    • The series should hide the outline portion of the visual.

  • 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" ]);

  • pixelScalingRatio

    Type:
    number
    Default:
    NaN

    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.

  • plotAreaMarginBottom

    Type:
    number
    Default:
    NaN

    Margin applied below the plot area.

  • plotAreaMarginLeft

    Type:
    number
    Default:
    NaN

    Margin applied to the Left of the plot area.

  • plotAreaMarginRight

    Type:
    number
    Default:
    NaN

    Margin applied to the right of the plot area.

  • plotAreaMarginTop

    Type:
    number
    Default:
    NaN

    Margin applied to the Top of the plot area.

  • resolution

    Type:
    number
    Default:
    1

    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 data point. When Resolution = 0, all data points 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:
    NaN

    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);

  • shouldAutoExpandMarginForInitialLabels

    Type:
    bool
    Default:
    false

    Gets or sets a whether the series viewer should auto expand margins to accommodate the initial horizontal axis labels.

  • shouldAvoidAxisAnnotationCollisions

    Type:
    bool
    Default:
    false

    Gets or sets whether annotations for the final value of each series is displayed on the axis.

  • shouldDisplayMockData

    Type:
    bool
    Default:
    false

    Gets or sets whether the chart should display mock data when the data source has not been provided, if supported for this type of chart.

  • shouldUseSkeletonStyleForMockData

    Type:
    bool
    Default:
    false

    Gets or sets whether the chart should use a faded skeleton style for mock data.

  • subtitle

    Type:
    string
    Default:
    null

    Gets or sets text to display below the 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 control.

    Members

    • left
    • Type:string
    • Align the item to the left.
    • center
    • Type:string
    • Center the item.
    • right
    • Type:string
    • Align the item to the right.
    • stretch
    • Type:string
    • Stretch the item to the full width.

    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:
    NaN

    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.

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

    Members

    • left
    • Type:string
    • Align the item to the left.
    • center
    • Type:string
    • Center the item.
    • right
    • Type:string
    • Align the item to the right.
    • stretch
    • Type:string
    • Stretch the item to the full width.

    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:
    object
    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);

  • tooltipTemplates

    Type:
    object
    Default:
    null

    Gets or sets the names of tooltip templates.

  • toolTipType

    Type:
    enumeration
    Default:
    default

    Gets or sets the style of tooltip to be displayed.

    Members

    • default
    • Type:string
    • Display default tooltip for each series in the chart.
    • item
    • Type:string
    • Display individual tooltips for all series in the chart.
    • category
    • Type:string
    • Display combined tooltip for all series in the chart.
    • none
    • Type:string
    • Display no tooltips in the chart.

  • topMargin

    Type:
    number
    Default:
    NaN

    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:
    1000

    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
    • Series transitions in an automatically chosen based on type of series and its orientation.
    • fromZero
    • Type:string
    • Series transitions in from the reference value of the value axis.
    • sweepFromLeft
    • Type:string
    • Series sweeps in from the left.
    • sweepFromRight
    • Type:string
    • Series sweeps in from the right.
    • sweepFromTop
    • Type:string
    • Series sweeps in from the top.
    • sweepFromBottom
    • Type:string
    • Series sweeps in from the bottom.
    • sweepFromCenter
    • Type:string
    • Series sweeps in from the center.
    • accordionFromLeft
    • Type:string
    • Series accordions in from the left.
    • accordionFromRight
    • Type:string
    • Series accordions in from the right.
    • accordionFromTop
    • Type:string
    • Series accordions in from the top.
    • accordionFromBottom
    • Type:string
    • Series accordions in from the bottom.
    • expand
    • Type:string
    • Series expands from the value midpoints.
    • sweepFromCategoryAxisMinimum
    • Type:string
    • Series sweeps in from the category axis minimum.
    • sweepFromCategoryAxisMaximum
    • Type:string
    • Series sweeps in from the category axis maximum.
    • sweepFromValueAxisMinimum
    • Type:string
    • Series sweeps in from the value axis minimum.
    • sweepFromValueAxisMaximum
    • Type:string
    • Series sweeps in from the value axis maximum.
    • accordionFromCategoryAxisMinimum
    • Type:string
    • Series accordions in from the category axis minimum.
    • accordionFromCategoryAxisMaximum
    • Type:string
    • Series accordions in from the category axis maximum.
    • accordionFromValueAxisMinimum
    • Type:string
    • Series accordions in from the value axis minimum.
    • accordionFromValueAxisMaximum
    • Type:string
    • Series accordions in from the value axis maximum.

    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
    • A speed type is automatically selected.
    • normal
    • Type:string
    • All speeds are normal, data points will arrive at the same time.
    • valueScaled
    • Type:string
    • Data points will arrive later if their value is further from the start point.
    • indexScaled
    • Type:string
    • Data points will arrive later if their index is further from the axis origin.
    • random
    • Type:string
    • Data points will arrive at random times.

    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" ]);

  • trendLinePeriod

    Type:
    number
    Default:
    7

  • trendLineThickness

    Type:
    number
    Default:
    1.5

    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.

    Code Sample

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

  • trendLineType

    Type:
    enumeration
    Default:
    none

    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.

    Members

    • none
    • Type:string
    • No trend line will be displayed.
    • linearFit
    • Type:string
    • Linear fit.
    • quadraticFit
    • Type:string
    • Quadratic polynomial fit.
    • cubicFit
    • Type:string
    • Cubic polynomial fit.
    • quarticFit
    • Type:string
    • Quartic polynomial fit.
    • quinticFit
    • Type:string
    • Quintic polynomial fit.
    • logarithmicFit
    • Type:string
    • Logarithmic fit.
    • exponentialFit
    • Type:string
    • Exponential fit.
    • powerLawFit
    • Type:string
    • Powerlaw fit.
    • simpleAverage
    • Type:string
    • Simple moving average.
    • exponentialAverage
    • Type:string
    • Exponential moving average.
    • modifiedAverage
    • Type:string
    • Modified moving average.
    • cumulativeAverage
    • Type:string
    • Cumulative moving average.
    • weightedAverage
    • Type:string
    • Weighted moving average.

    Code Sample

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

  • unknownValuePlotting

    Type:
    enumeration
    Default:
    linearInterpolate

    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
    • Plot the unknown value as the midpoint between surrounding known values using linear interpolation.
    • dontPlot
    • Type:string
    • Do not plot the unknown value on the chart.

    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

    Gets or sets the widget of this control.

  • 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:
    NaN

    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:
    false

    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.

    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:
    5

    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);

  • xAxisLabelFormat

    Type:
    string
    Default:
    null

    Gets or sets the format string for the X axis label.

  • xAxisLabelFormatSpecifiers

    Type:
    object
    Default:
    null

    Gets or sets the format specifiers to use with the XAxisLabelFormat string.

  • xAxisLabelHorizontalAlignment

    Type:
    enumeration
    Default:
    center

    Gets or sets Horizontal alignment of X-axis labels.

    Members

    • left
    • Type:string
    • Align the item to the left.
    • center
    • Type:string
    • Center the item.
    • right
    • Type:string
    • Align the item to the right.
    • stretch
    • Type:string
    • Stretch the item to the full width.

    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);

  • xAxisLabelLocation

    Type:
    enumeration
    Default:
    auto

    Gets or sets location of X-axis labels, relative to the plot area.

    Members

    • outsideTop
    • Type:string
    • Places the x-axis labels at the top, outside of the plotting area.
    • outsideBottom
    • Type:string
    • Places the x-axis labels at the bottom, outside of the plotting area.
    • insideTop
    • Type:string
    • Places the x-axis labels inside the plotting area above the axis line.
    • insideBottom
    • Type:string
    • Places the x-axis labels inside the plotting area below the axis line.
    • auto
    • Type:string
    • Places the x-axis labels based on the type of chart component.

  • 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:
    5

    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 Vertical alignment of X-axis labels.

    Members

    • top
    • Type:string
    • Align the item to the top.
    • center
    • Type:string
    • Center the item.
    • bottom
    • Type:string
    • Align the item to the bottom.
    • stretch
    • Type:string
    • Stretch the item to the full height.

    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 Visibility of X-axis labels.

    Members

    • visible
    • Type:string
    • Display the element.
    • collapsed
    • Type:string
    • Do not display the element.

    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:
    1

    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:
    1

    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:
    8

    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:
    1

    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

    Gets or sets the 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 Horizontal alignment of the X-axis title.

    Members

    • left
    • Type:string
    • Align the item to the left.
    • center
    • Type:string
    • Center the item.
    • right
    • Type:string
    • Align the item to the right.
    • stretch
    • Type:string
    • Stretch the item to the full width.

    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:
    NaN

    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:
    NaN

    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:
    NaN

    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:
    NaN

    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);

  • yAxisAbbreviateLargeNumbers

    Type:
    bool
    Default:
    true

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

  • yAxisExtent

    Type:
    number
    Default:
    NaN

    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:
    NaN

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

    Code Sample

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

  • yAxisIsLogarithmic

    Type:
    bool
    Default:
    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.

    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 property or string from which the labels are derived.

    Code Sample

     
// Get
var label = $(".selector").igCategoryChart("option", "yAxisLabel");

  • 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);

  • yAxisLabelFormat

    Type:
    string
    Default:
    null

    Gets or sets the format string for the Y axis label.

  • yAxisLabelFormatSpecifiers

    Type:
    object
    Default:
    null

    Gets or sets the format specifiers to use with the YAxisLabelFormat string.

  • yAxisLabelHorizontalAlignment

    Type:
    enumeration
    Default:
    right

    Gets or sets Horizontal alignment of Y-axis labels.

    Members

    • left
    • Type:string
    • Align the item to the left.
    • center
    • Type:string
    • Center the item.
    • right
    • Type:string
    • Align the item to the right.
    • stretch
    • Type:string
    • Stretch the item to the full width.

    Code Sample

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

  • yAxisLabelLeftMargin

    Type:
    number
    Default:
    5

    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);

  • yAxisLabelLocation

    Type:
    enumeration
    Default:
    auto

    Gets or sets location of Y-axis labels, relative to the plot area.

    Members

    • outsideLeft
    • Type:string
    • Places the y-axis labels to the left, outside of the plotting area.
    • outsideRight
    • Type:string
    • Places the y-axis labels to the right, outside of the plotting area.
    • insideLeft
    • Type:string
    • Places the y-axis labels inside the plotting area and to the left of the axis line.
    • insideRight
    • Type:string
    • Places the y-axis labels inside the plotting area and to the right of the axis line.
    • auto
    • Type:string
    • Places the y-axis labels based on the type of chart component.

  • yAxisLabelRightMargin

    Type:
    number
    Default:
    5

    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 Vertical alignment of Y-axis labels.

    Members

    • top
    • Type:string
    • Align the item to the top.
    • center
    • Type:string
    • Center the item.
    • bottom
    • Type:string
    • Align the item to the bottom.
    • stretch
    • Type:string
    • Stretch the item to the full height.

    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 Visibility of Y-axis labels.

    Members

    • visible
    • Type:string
    • Display the element.
    • collapsed
    • Type:string
    • Do not display the element.

    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:
    NaN

    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:
    NaN

    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:
    1

    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:
    1

    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:
    1

    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

    Gets or sets the 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 Vertical alignment of the Y-axis title.

    Members

    • top
    • Type:string
    • Align the item to the top.
    • center
    • Type:string
    • Center the item.
    • bottom
    • Type:string
    • Align the item to the bottom.
    • stretch
    • Type:string
    • Stretch the item to the full height.

    Code Sample

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

  • yAxisTitleAngle

    Type:
    number
    Default:
    -90

    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:
    NaN

    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:
    NaN

    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:
    NaN

    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:
    NaN

    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

  • calloutStyleUpdating

    Cancellable:
    false

    Occurs when the style of a callout is updated.

  • 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 on this chart.

    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) {...}
});

  • seriesAdded

    Cancellable:
    false

    Event raised when a series is initialized and added to this chart.

  • seriesPointerDown

    Cancellable:
    false

    Occurs when the pointer is pressed down over a Series.

  • seriesPointerEnter

    Cancellable:
    false

    Occurs when the pointer enters a Series.

  • seriesPointerLeave

    Cancellable:
    false

    Occurs when the pointer leaves a Series.

  • seriesPointerMove

    Cancellable:
    false

    Occurs when the pointer moves over a Series.

  • seriesPointerUp

    Cancellable:
    false

    Occurs when the pointer is released over a Series.

  • seriesRemoved

    Cancellable:
    false

    Event raised when a series is removed from this chart.

  • 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) {...}
});

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

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.