React Charts API
The Ignite UI for React charts provide simple and easy to use APIs to plot your data in IgrCategoryChart, IgrFinancialChart, IgrDataChart, IgrDataPieChart, IgrDoughnutChart, IgrPieChart, and IgrSparkline UI elements.
React Category Chart API
The React IgrCategoryChart has the following API members:
| Chart Properties | Axis Properties | Series Properties |
|---|---|---|
- chartType - excludedProperties - includedProperties - isHorizontalZoomEnabled - isVerticalZoomEnabled - crosshairsDisplayMode - transitionInMode - highlightingBehavior - highlightingMode - trendLineType |
- xAxisInterval - xAxisLabelLocation - xAxisGap - xAxisOverlap - xAxisTitle - yAxisInterval - yAxisLabelLocation - yAxisTitle - yAxisMinimumValue - yAxisMaximumValue |
- brushes - outlines - markerBrushes - markerOutlines - markerTypes - toolTipType |
React Financial Chart API
The React IgrFinancialChart has the following API members:
| Chart Properties | Axis Properties | Series Properties |
|---|---|---|
- chartType - excludedProperties - includedProperties - isHorizontalZoomEnabled - isVerticalZoomEnabled - toolTipType - crosshairsDisplayMode - highlightingBehavior - highlightingMode - trendLineType |
- xAxisInterval - xAxisLabelLocation - xAxisTitle - yAxisInterval - yAxisLabelLocation - yAxisTitle - yAxisMinimumValue - yAxisMaximumValue - yAxisMode - xAxisMode |
- brushes - outlines - markerBrushes - markerOutlines - markerTypes - indicatorTypes - volumeType - zoomSliderType |
React Data Chart API
The React IgrDataChart has the following API members:
| Chart Properties | Axis Classes |
|---|---|
- chartTitle - subtitle - isHorizontalZoomEnabled - isVerticalZoomEnabled - brushes - outlines - markerBrushes - markerOutlines - XamDataChart.Axes - IgrSeries |
- IgrAxis is base class for all axis types - IgrCategoryXAxis used with Category Series, Stacked Series, and Financial Series - IgrCategoryYAxis used with Category Series, Stacked Series - IgrCategoryAngleAxis used with Radial Series - IgrNumericXAxis used with Scatter Series and Bar Series - IgrNumericYAxis used with Scatter Series, Category Series, Stacked Series, and Financial Series - IgrNumericAngleAxis used with Polar Series - IgrNumericRadiusAxis used with Polar Series and Radial Series - IgrTimeXAxis used with Category Series and Financial Series |
The React IgrDataChart can use the following type of series that inherit from IgrSeries:
| Radial Series | Polar Series |
|---|---|
- IgrRadialLineSeries - IgrRadialAreaSeries - IgrRadialPieSeries - IgrRadialColumnSeries |
- IgrPolarScatterSeries - IgrPolarLineSeries - IgrPolarAreaSeries - IgrPolarSplineSeries - IgrPolarSplineAreaSeries |
React Data Legend API
The React IgrDataLegend has the following API members:
includedColumnsexcludedColumnsincludedSeriesexcludedSeriesvalueFormatAbbreviationvalueFormatModevalueFormatCulturevalueFormatMinFractionsvalueFormatMaxFractionsvalueTextColortitleTextColorlabelTextColorunitsTextColorsummaryTypeheaderTextColorbadgeShape
React Donut Chart API
The React IgrDoughnutChart has the following API members:
React Data Pie Chart API
The React IgrDataPieChart has the following API members:
chartTypehighlightingBehaviorothersCategoryThresholdothersCategoryTypeselectionModeselectionBehavior
React Pie Chart API
The React IgrPieChart has the following API members:
legendItemBadgeTemplatelegendItemTemplatelegendLabelMemberPathothersCategoryThresholdothersCategoryTypeselectionMode
React Sparkline Chart API
The React IgrSparkline has the following API members:
displayNormalRangeInFrontdisplayTypelowMarkerBrushlowMarkerSizelowMarkerVisibilitynormalRangeFillunknownValuePlotting
Additional Resources
You can find more information about charts in these topics: