Optional actualOptional actualGets the actual palette of brushes to use for outlines on the chart series.
Optional actualXAxisGets the actual color of labels on the X-axis
Optional actualYAxisGets the actual color of labels on the Y-axis
Optional alignsGets or sets a value indicating whether grid and tick lines are aligned to device pixels.
Use AlignsGridLinesToPixels propert to indicat whether grid and tick lines are aligned to device pixels.
this.chart.alignsGridLinesToPixels= true;
Optional animateGets or sets whether the series animations should be allowed when a range change has been detected on an axis.
Optional applyEvent raised by the chart when custom indicator data is needed from the application. During series rendering, event will be raised once for each value in the CustomIndicatorNames collection.
Optional areaGets or sets the fill opacity for all series that have area visuals in this chart. For example, Area, SplineArea, Column chart types
Optional autoGets or sets if the auto value callouts should be displayed.
Optional bottomGets or sets the bottom margin around the chart content.
Use the bottomMargin property for the bottom margin around the chart content.
this.chart.bottomMargin=20;
<IgrCategoryChart dataSource={this.state.data}
bottomMargin= 20 />
Optional brushesGets or sets the palette of brushes to use for coloring the chart series. The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection
Use the Brushes property to set the brushes.
this.chart.brushes = ["#ff0000","#00ff00"];
Optional calloutOccurs when the style of a callout is updated.
Optional calloutOccurs when the style of a callout is updated.
Optional calloutGets or sets if event annotations should be displayed.
Optional calloutsGets or sets the allowed positions that the callout layer is allowed to use.
Optional calloutsGets or sets the member path of the content data for the callouts.
Optional calloutsOptional calloutsGets or sets the member path of the label data for the callouts.
Optional calloutsGets or sets if callouts should be displayed.
Optional calloutsXMemberGets or sets the member path of the X data for the callouts.
Optional calloutsYMemberGets or sets the member path of the Y data for the callouts.
Optional chartGets or sets text to display above the plot area.
Use the Title property to display the text above the plot area.
this.chart.title= "This is a Title";
<IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
title= "CategoryChart Subtitle" />
Optional chartThe type of price series to display in the main chart.
Use the ChartType property to set a type of series that will be used to render prices in the Financial Chart control, e.g.
<IgrFinancialChart
width="100%"
height="400px"
chartType="Candle"
dataSource={this.data} />
Optional childrenOptional computedGets or sets mode to use for automatically calculating the plot area margin.
Optional crosshairsGets or sets whether annotations are shown along the axis for crosshair values
Optional crosshairsGets or sets the background of crosshair annotation on x-axis.
Optional crosshairsGets or sets precision on interpolated values of crosshairs on x-axis.
Optional crosshairsGets or sets the text color of crosshair annotation on x-axis.
Optional crosshairsGets or sets the background of crosshair annotation on y-axis.
Optional crosshairsGets or sets precision on interpolated values of crosshairs on y-axis.
Optional crosshairsGets or sets the text color of crosshair annotation on y-axis.
Optional crosshairsGets or sets the crosshairs to be displayed.
Optional crosshairsGets or sets the color to apply to horizontal crosshairs line.
Optional crosshairsGets or sets thickness of crosshairs lines.
Optional crosshairsGets or sets the color to apply to vertical crosshairs line.
Optional crosshairsGets or sets whether crosshairs will snap to the nearest data point.
Optional customThe names of custom indicators to add to the chart. When CustomIndicatorNames is set, the ApplyCustomIndicators event will be raised for each custom indicator name.
Optional dataGets or sets the data for the chart to use. This can be overriden at the series and axis level.
Optional dataOptional dataOptional dataOptional dataOptional dataGets or sets the BadgeShape for the data legend.
Optional dataGets or sets the offset of the tooltip layer on the X axis.
Optional dataGets or sets the offset of the tooltip layer on the Y axis.
Optional dataGets or sets names of data columns or their labels to exclude from displaying in the data legend, e.g. "High, Low" or "H, L" The DataToolTipExcludedColumns property takes precedence over values of DataToolTipIncludedColumns property
Optional dataGets or sets indexes, titles, or names of series to exclude from displaying in the data tooltip, e.g. "0, 1" or "Series1 Title, Series2 Title" The DataToolTipExcludedSeries property takes precedence over values of DataToolTipIncludedSeries property
Optional dataOptional dataOptional dataOptional dataOptional dataGets or sets whether to show Group row.
Optional dataGets or sets the Group text color.
Optional dataOptional dataOptional dataOptional dataOptional dataGets or Sets the style to use for the Group text.
Optional dataGets or sets the tooltip position mode on the X axis for grouped series.
Optional dataGets or sets the tooltip position mode on the Y axis for grouped series.
Optional dataOptional dataGets or sets globalization culture when displaying header as date time This property is ignored when setting HeaderFormatSpecifiers or HeaderFormatString properties
Optional dataGets or sets date format for the header This property is ignored when setting HeaderFormatSpecifiers or HeaderFormatString properties
Optional dataGets or sets the format specifiers to use with the HeaderFormatString string.
Optional dataGets or sets the format string for header text displayed in the data legend.
Optional dataGets or sets time format for the header This property is ignored when setting HeaderFormatSpecifiers or HeaderFormatString properties
Optional dataOptional dataOptional dataOptional dataOptional dataGets or sets whether to show Header row.
Optional dataGets or sets the HeaderText for the data legend.
Optional dataGets or sets the header text color.
Optional dataOptional dataOptional dataOptional dataOptional dataGets or Sets the style to use for the header text.
Optional dataGets or sets names of data columns or their labels to include in displaying in the data legend, e.g. "High, Low" or "H, L" The DataToolTipExcludedColumns property takes precedence over values of DataToolTipIncludedColumns property
Optional dataGets or sets indexes, titles, or names of series to include in displaying in the data tooltip, e.g. "0, 1" or "Series1 Title, Series2 Title" The DataToolTipExcludedSeries property takes precedence over values of DataToolTipIncludedSeries property
Optional dataGets or sets the mode for displaying labels before series values in the data legend, e.g. O: H: L: C: for financial series
Optional dataGets or sets the units text color.
Optional dataOptional dataOptional dataOptional dataOptional dataGets or Sets the style to use for the units text.
Optional dataGets or sets the offset of the tooltip layer on the X axis.
Optional dataGets or sets the offset of the tooltip layer on the Y axis.
Optional dataGets or sets whether the data legend should update when the series data is mutated.
Optional dataGets or sets the units text for the data legend.
Optional dataGets or sets the units text color.
Optional dataGets or Sets the style to use for the units text.
Optional dataOptional dataOptional dataOptional dataOptional dataGets or sets the SummaryTitleText for the data legend.
Optional dataGets or sets the summary text color.
Optional dataOptional dataOptional dataOptional dataOptional dataGets or Sets the style to use for the summary text.
Optional dataGets or sets the SummaryType for the data legend.
Optional dataGets or sets the units text for the data legend.
Optional dataGets or sets the units text color.
Optional dataGets or Sets the style to use for the units text.
Optional dataGets or sets the units text color.
Optional dataGets or Sets the style to use for the units text.
Optional dataGets or sets the display text color.
Optional dataOptional dataOptional dataOptional dataOptional dataGets or Sets the style to use for the display text.
Optional dataGets or sets the UnitsMode for the data legend.
Optional dataGets or sets the units text for the data legend.
Optional dataGets or sets the units text color.
Optional dataOptional dataOptional dataOptional dataOptional dataGets or Sets the style to use for the units text.
Optional dataGets or sets mode for abbreviating large numbers displayed in the legend This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties
Optional dataGets or sets globalization culture when displaying values as currencies, e.g. use "en-GB" to display British pound symbol when the ValueFormatMode property is set to 'Currency' mode This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties
Optional dataGets or sets maximum digits for formatting numbers displayed in the legend This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties
Optional dataGets or sets minimum digits for formatting numbers displayed in the legend This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties
Optional dataGets or sets the mode for displaying values in the data legend, e.g. Currency ($500.25), Decimal (500.25), Integer (500)
Optional dataGets or sets the format specifiers to use with the ValueFormatString string.
Optional dataGets or sets the format string for values displayed in the data legend.
Optional dataGets or sets whether or not use grouping separator, e.g, 15,000 for 15000 This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties
Optional dataOptional dataOptional dataOptional dataOptional dataGets or sets whether to show series rows.
Optional dataGets or sets the units text color.
Optional dataOptional dataOptional dataOptional dataOptional dataGets or Sets the style to use for the units text.
Optional dataGets or sets whether to use series colors when displaying values in the legend
Optional dataGets or sets text displayed when data column is missing a value, e.g. "no data"
Optional excludedGets or sets a set of property paths that should be excluded from consideration by the category chart.
The ExcludedProperties property used for the property paths that should be excluded from consideration by the category chart.
this.chart.excludedProperties = ["ID", "Discount"];
<IgrCategoryChart
chartType="Line"
markerTypes={this.state.markersTypes}
dataSource={this.categoryData}
excludedProperties="value" />
Optional filterOptional finalGets or sets the background of final value annotation.
Optional finalGets or sets precision on final value annotation.
Optional finalGets or sets the text color of final value annotation.
Optional finalGets or sets whether annotations for the final value of each series is displayed on the axis.
Optional focusGets or sets the focus brush to use for the series.
Optional focusGets or sets the focus mode to use for the series in the component, when supported.
Optional focusedOptional groupGets or sets the sorts to apply after grouping has been applied.
Optional heightOptional highlightedGets or sets whether and how to display highlighted values for the series. Note, this is distinct from the highlighting feature that indicates what is closest or under the mouse. This property applies to Category Chart and Financial Chart controls.
Optional highlightingGets or sets the highlighting Behavior to use for the series in the component, when supported. This takes precedence over the series level IsHighlightingEnabled.
Optional highlightingGets or sets the highlighting mode to use for the series in the component, when supported. This takes precedence over the series level IsHighlightingEnabled.
Optional horizontalGets or sets the corner radius to use for the horizontal scrollbar in the component, when enabled.
Optional horizontalGets or sets the fill to use for the horizontal scrollbar in the component, when enabled.
Optional horizontalGets or sets the height to use for the horizontal scrollbar in the component, when enabled.
Optional horizontalGets or sets the inset distance to use for the horizontal scrollbar in the component, when enabled.
Optional horizontalGets or sets the max opacity to use for the horizontal scrollbar in the component, when enabled.
Optional horizontalGets or sets the horizontal scrollbar mode to use for the series viewer.
Optional horizontalGets or sets the outline to use for the horizontal scrollbar in the component, when enabled.
Optional horizontalGets or sets the position to use for the horizontal scrollbar in the component, when enabled.
Optional horizontalGets or sets whether to use automatic track insets for the horizontal scrollbar in the component, when enabled.
Optional horizontalGets or sets the stroke thickness to use for the horizontal scrollbar in the component, when enabled.
Optional horizontalGets or sets the track end inset to use for the horizontal scrollbar in the component, when enabled.
Optional horizontalGets or sets the track start inset to use for the horizontal scrollbar in the component, when enabled.
Optional includedGets or sets a set of property paths that should be included for consideration by the category chart, leaving the remainder excluded. If null, all properties will be considered.
The IncludedProperties property used to include the properties for the consideration of the category chart.
this.chart.includedProperties = ["ProductName", "Cost"];
<IgrCategoryChart
chartType="Line"
markerTypes={this.state.markersTypes}
dataSource={this.categoryData}
excludedProperties="value" />
Optional indicatorBrushes to use for financial indicators.
Use the IndicatorBrushes property to set a collection of brushes that will be used to render positive elements of indicators in the Financial Chart control, e.g.
<IgrFinancialChart
width="100%"
height="400px"
dataSource={this.data}
indicatorBrushes="Green" />
Optional indicatorThe display types of financial indicators.
Use the IndicatorDisplayTypes property to set display types that will determine whether render all indicators as area, lines, or columns in the Financial Chart control, e.g.
<IgrFinancialChart
width="100%"
height="400px"
dataSource={this.data}
indicatorDisplayTypes="line" />
Optional indicatorThe long period of financial indicators, where applicable.
The IndicatorLongPeriod property applies only to these indicator types:
<IgrFinancialChart
width="100%"
height="400px"
dataSource={this.data}
indicatorLongPeriod={8} />
Optional indicatorThe multiplier of financial indicators, e.g. BollingerBandWidth indicator.
The IndicatorMultiplier property applies to only to BollingerBandWidth indicator type.
<IgrFinancialChart
width="100%"
height="400px"
dataSource={this.data}
indicatorMultiplier= {8} />
Optional indicatorBrushes to use for negative elements in financial indicators.
Use the IndicatorNegativeBrushes property to set a collection of brushes that will be used to render negative elements of indicators in the Financial Chart control, e.g.
<IgrFinancialChart
width="100%"
height="400px"
dataSource={this.data}
indicatorNegativeBrushes="Red"/>
Optional indicatorThe period of financial indicators, where applicable.
The indicatorPeriod property applies to only the BollingerBands overlay as well as to these indicators types: AverageDirectionalIndex, AverageTrueRange, BollingerBandWidth, ChaikinVolatility, CommodityChannelIndex, DetrendedPriceOscillator, FastStochasticOscillator, ForceIndex, FullStochasticOscillator, MoneyFlowIndex, PriceChannelOverlay, RateOfChangeAndMomentum, RelativeStrengthIndex, SlowStochasticOscillator, StandardDeviation, StochRSI, TRIX, WilliamsPercentR
<IgrFinancialChart
width="100%"
height="400px"
dataSource={this.data}
indicatorPeriod={8} />
Optional indicatorThe short period of financial indicators, where applicable.
The IndicatorShortPeriod property applies only to these indicator types:
<IgrFinancialChart
width="100%"
height="400px"
dataSource={this.data}
indicatorShortPeriod={8} />
Optional indicatorThe signal period of financial indicators, where applicable.
The IndicatorSignalPeriod property applies to only to MovingAverageConvergenceDivergence indicator type.
<IgrFinancialChart
width="100%"
height="400px"
dataSource={this.data}
indicatorSignalPeriod ={8} />
Optional indicatorThe smoothing period of financial indicators, where applicable.
The IndicatorSmoothingPeriod property applies to only to FullStochasticOscillator indicator type.
<IgrFinancialChart
width="100%"
height="400px"
dataSource={this.data}
indicatorSmoothingPeriod={8} />
Optional indicatorThe outline or stroke thickness of financial indicators.
Use the IndicatorThickness property to set a number that will be used to render outline thickness of all indicators in the Financial Chart control, e.g.
<IgrFinancialChart
width="100%"
height="400px"
dataSource={this.data}
indicatorThickness={2.5} />
Optional indicatorA collection indicating what financial indicator types to display on the Financial Chart.
Use the IndicatorTypes property to set types of indicators that will be rendered below the price pane in the Financial Chart control, e.g.
<IgrFinancialChart
width="100%"
height="400px"
dataSource={this.data}
indicatorTypes="ForceIndex" />
Optional initialGets or sets the filter to apply to the chart. This property will become ignored if the filter is changed outside of this property.
Optional initialGets or sets the groupings to apply to the chart. This property will become ignored if sorts are changed outside of this property.
Optional initialGets or sets the filter to apply to the chart. This property will become ignored if the filter is changed outside of this property.
Optional initialGets or sets the sorts to apply to the chart. This property will become ignored if sorts are changed outside of this property.
Optional initialGets or sets the summaries to apply to the chart. This property will become ignored if sorts are changed outside of this property.
Optional isGets or sets whether the chart can be horizontally zoomed through user interactions.
Use the IsHorizontalZoomEnabled property to allow chart horizontally zoomed .
<IgrCategoryChart dataSource={this.state.data}
width="700px"
height="500px"
xAxisLabelTextStyle="10pt Verdana"
xAxisLabelTopMargin={5}
xAxisLabelTextColor="gray"
yAxisLabelTextStyle="10pt Verdana"
yAxisLabelRightMargin={5}
yAxisLabelTextColor="gray"
isHorizontalZoomEnabled= true/>
<IgrCategoryChart dataSource={this.state.data}
IsHorizontalZoomEnabled= true />
this.chart.isHorizontalZoomEnabled = true;
Optional isGets or sets weather or not a legend is visible between toolbar and chart's plot area
Optional isGets or sets whether the chart can highlight series through user interactions. This property applies to Category Chart and Financial Chart controls.
Optional isA boolean property controlling the visibility of the toolbar.
Optional isGets or sets whether the chart can be vertically zoomed through user interactions.
Use the IsVerticalZoomEnabled property to allow chart zoom vertically.
this.chart.isVerticalZoomEnabled = true;
<IgrCategoryChart dataSource={this.state.data}
isVerticalZoomEnabled= "true"/>
Optional isA boolean indicating whether the chart should automatically zoom in vertically on the currently visible range of data. When this property is set to true, panning and zooming along the X-axis will result in a corresponding zoom on the Y-axis, so that the visible range of data fills the zoom window as fully as possible.
Optional leftGets or sets the left margin of the chart content.
Use the 'leftMargin' property for the left margin of the chart content.
this.chart.leftMargin = 20;
<IgrCategoryChart dataSource={this.state.data}
leftMargin= {20}/>
Optional legendOptional legendGets or sets the highlighting mode to use for the legend linked to the component, when supported.
Optional legendGets 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
Optional legendGets 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
Optional markerGets or sets the default marker type for all series plotted in this chart. This property is ignored when the MarkerTypes property is set
Optional markerGets or sets the palette of brushes used for rendering fill area of data point markers. This property applies only to these chart types: point, line, spline, bubble, and polygon
MarkerBrushes property used for rendering fill area of data point markers.
this.chart.markerBrushes=[ "#ff0000", "#ffff00", "#00ffff" ];
<IgrCategoryChart
chartType="Line"
markerBrushes ="#ffff00"
dataSource={this.categoryData}/>
Optional markerGets or sets the MarkerFillMode for all series that support markers in this chart.
Optional markerGets or sets the Marker Fill Opacity for all series that support markers in this chart.
Optional markerGets or sets the maximum number of markers displayed in the plot area of the chart.
markerMaxCount property used to display maximum number of markers in the plot area of the chart.
this.chart.markerMaxCount = 100 ;
<IgrCategoryChart
chartType="Line"
markerMaxCount= {2}
dataSource={this.categoryData}/>
Optional markerGets or sets the MarkerOutlineMode for all series that support markers in this chart.
Optional markerGets or sets the palette of brushes used for rendering outlines of data point markers. This property applies only to these chart types: point, line, spline, bubble, and polygon
MarkerOutlines property used for rendering outlines of data point markers.
this.chart.markerOutlines= ["#ff0000", "#ffff00", "#00ffff"] ;
<IgrCategoryChart
chartType="Line"
markerOutlines= "#ff0000"
dataSource={this.categoryData}/>
Optional markerGets or sets the Marker Thickness for all series that support markers in this chart.
Optional markerGets 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
Optional negativeGets or sets the palette used for coloring negative items of Waterfall chart type.
Use the NegativeBrushes property to set a collection of brushes that will be used to render fill area of negative elements in the price pane, e.g.
<IgrFinancialChart
width="100%"
height="400px"
dataSource={this.data}
negativeBrushes="Red" />
Optional negativeBrushes to use for drawing negative elements, when using a chart type with contextual coloring, such as Waterfall.
Use the NegativeOutlines property to set a collection of brushes that will be used to render outline of negative elements in the price pane, e.g.
<IgrFinancialChart
width="100%"
height="400px"
dataSource={this.data}
negativeOutlines= "Green"/>
Optional outlineGets or sets the OutlineMode for all series in this chart.
Optional outlinesGets or sets the palette of brushes to use for outlines on the chart series. The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection
Use the Outlines property to sets the palette of brushes to use for outlines on the chart series
<IgrCategoryChart
chartType="Line"
outlines= "#ff0000"
dataSource={this.categoryData}/>
Optional overlayBrushes to use for filling financial overlays.
Use the OverlayBrushes property to set a collection of brushes that will be used to render fill area of overlays in the Financial Chart control, e.g.
<IgrFinancialChart
width="100%"
height="400px"
dataSource={this.data}
overlayBrushes="Green" />
Optional overlayThe multiplier of financial overlay, e.g. BollingerBands overlay.
Optional overlayBrushes to use for outlining financial overlays.
Use the OverlayOutlines property to set a collection of brushes that will be used to render outlines of overlays in the Financial Chart control, e.g.
<IgrFinancialChart
width="100%"
height="400px"
dataSource={this.data}
overlayOutlines="Red" />
Optional overlayThe outline thickness of financial overlays.
Use the OverlayThickness property to set a number that will be used to render outline thickness of all overlays in the Financial Chart control, e.g.
<IgrFinancialChart
width="100%"
height="400px"
dataSource={this.data}
overlayThickness ={2.5} />
Optional overlayA collection indicating what financial overlay types to display on the Financial Chart.
Use the OverlayTypes property to set types of overlays that will be rendered behind price series in the Financial Chart control, e.g.
<IgrFinancialChart
width="100%"
height="400px"
dataSource={this.data}
overlayType ="PriceChannel" />
Optional pixelGets 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.
Optional plotMargin applied below the plot area.
Optional plotMargin applied to the Left of the plot area.
Optional plotMargin applied to the right of the plot area.
Optional plotMargin applied to the Top of the plot area.
Optional rangeA FinancialChartRangeSelectorOptionCollection containing the available range selector options on the toolbar.
Optional resolutionGets or sets the rendering resolution for all series in this chart. Where n = Resolution, for every n horizontal pixels, combine all items into a single datapoint. When Resolution = 0, all datapoints will be rendered as graphical objects. Charts with a higher resolution will have faster performance.
Optional rightGets or sets the right margin of the chart content.
Use rightMargin property for the right margin of the chart content.
this.chart.rightMargin = 20 ;
<IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
markerTypes={this.state.markersTypes}
dataSource={this.categoryData}
rightMargin= {4}/>
Optional selectedOptional selectionGets or sets the selection behavior to use for the series in the component, when supported.
Optional selectionGets or sets the selection brush to use for the series.
Optional selectionGets or sets the selection mode to use for the series in the component, when supported.
Optional seriesEvent raised when a series is initialized and added to this chart.
SeriesAdded event raised when a series is initialized and added to this chart.
<IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
markerTypes={this.state.markersTypes}
dataSource={this.categoryData}
seriesAdded={this.CategoryChart_SeriesAdded}/>
``
```ts
CategoryChart_SeriesAdded(sender:any ,aregs:ChartSeriesEventArgs)
{
}
Optional seriesGets or sets horizontal mode to use for automatically calculating the plot area margin based ont the series.
Optional seriesGets or sets vertical mode to use for automatically calculating the plot area margin based ont the series.
Optional seriesOccurs when the pointer is pressed down over a Series.
SeriesPointerDown event raised when the pointer is pressed down over a Series
<IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
markerTypes={this.state.markersTypes}
dataSource={this.categoryData}
seriesPointerDown={this.CategoryChart_seriesPointerDown}/>
``
```ts
CategoryChart_seriesPointerDown(sender: any , aregs: ChartSeriesEventArgs)
{
}
Optional seriesOccurs when the pointer enters a Series.
SeriesPointerEnter event raised when the pointer enters a Series.
<IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
markerTypes={this.state.markersTypes}
dataSource={this.categoryData}
seriesPointerEnter={this.CategoryChart_seriesPointerDown}/>
CategoryChart_seriesPointerEnter(sender: any , aregs: ChartSeriesEventArgs)
{
}
Optional seriesOccurs when the pointer leaves a Series.
SeriesPointerLeave event raised when the pointer leaves a Series.
<IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
markerTypes={this.state.markersTypes}
dataSource={this.categoryData}
seriesPointerLeave={this.CategoryChart_seriesPointerLeave}/>
CategoryChart_seriesPointerLeave(sender: any , aregs: ChartSeriesEventArgs)
{
}
Optional seriesOccurs when the pointer moves over a Series.
SeriesPointerMove event raised when the pointer moves over a Series.
<IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
markerTypes={this.state.markersTypes}
dataSource={this.categoryData}
seriesPointerMove={this.CategoryChart_seriesPointerMove}/>
CategoryChart_seriesPointerMove(sender: any , aregs: ChartSeriesEventArgs)
{
}
Optional seriesOccurs when the pointer is released over a Series.
SeriesPointerUp event raised when the pointer is released over a Series.
<IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
markerTypes={this.state.markersTypes}
dataSource={this.categoryData}
seriesPointerUp={this.CategoryChart_seriesPointerUp}/>
CategoryChart_seriesPointerUp(sender: any , aregs: ChartSeriesEventArgs)
{
}
Optional seriesEvent raised when a series is removed from this chart.
SeriesRemoved event raised when a series is removed from this chart.
<IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
markerTypes={this.state.markersTypes}
dataSource={this.categoryData}
seriesRemoved={this.CategoryChart_seriesRemoved}/>
CategoryChart_seriesRemoved(sender: any , aregs: ChartSeriesEventArgs)
{
}
Optional shouldGets or sets whether annotations for the final value of each series is displayed on the axis.
Optional shouldGets or sets whether the chart should display mock data when the data source has not been provided, if supported for this type of chart.
Optional shouldGets or sets a whether the chart should pan its content when zoo,ing in passed max zoom level.
Optional shouldGets or sets whether the chart should use a faded skeleton style for mock data.
Optional subtitleGets or sets text to display below the Title, above the plot area.
Use the Subtitle property to display the text below and above the plot area.
<IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
subtitle= "CategoryChart Subtitle"/>
this.chart.subtitle ="CategoryChart Subtitle" ;
Optional subtitleGets or sets horizontal alignment which determines the subtitle position, relative to the left and right edges of the control.
Use the SubtitleAlignment property to Gets or sets horizontal alignment.
<IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
subtitle= "CategoryChart Subtitle"
subtitleAlignment="Right"/>
this.chart.subtitleAlignment = HorizontalAlignment.Right;
Optional subtitleGets or sets the bottom margin of chart subtitle
Use subtitleBottomMargin property for the bottom margin of chart subtitle.
<IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
subtitle= "CategoryChart Subtitle"
subtitleBottomMargin= {10}/>
this.chart.subtitleBottomMargin = 10 ;
Optional subtitleGets or sets the left margin of chart subtitle
Use subtitleLeftMargin property for the left margin of chart subtitle.
this.chart.subtitleLeftMargin = 20 ;
<IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
subtitle= "CategoryChart Subtitle"
subtitleLeftMargin= {20}/>
Optional subtitleGets or sets the right margin of chart subtitle
Use subtitleRightMargin property for the right margin of chart subtitle.
this.chart.subtitleRightMargin = 20 ;
<IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
subtitle= "CategoryChart Subtitle"
subtitleAlignment="Right"
subtitleRightMargin ={20}/>
Optional subtitleGets or sets color of chart subtitle
Use subtitleTextColor property to color the subtitle.
this.chart.subtitleTextColor = "#ff0000" ;
<IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
subtitle= "CategoryChart Subtitle"
subtitleTextColor="#ff0000"/>
Optional subtitleGets or sets CSS font property for the chart subtitle
Use subtitleTextStyle property for the CSS font of the chart subtitle.
this.chart.subtitleTextStyle= "16pt Verdona";
<IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
subtitleTextStyle="16pt Verdona"/>
Optional subtitleGets or sets the top margin of chart subtitle
Use subtitleTopMargin property for the top margin of chart subtitle.
this.chart.subtitleTopMargin = 10;
<IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
subtitle= "CategoryChart Subtitle"
subtitleTopMargin= {10}/>
Optional thicknessGets or sets the thickness for all series in this chart. Depending on the ChartType, this can be the main brush used, or just the outline.
Use the Thickness property for the thickness of all the series in this chart.
Optional titleGets or sets horizontal alignment which determines the title position, relative to the left and right edges of the control.
Use the TitleAlignment property for the horizontal alignment of the title.
this.chart.titleAlignment = HorizontalAlignment.Center;
<IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
titleAlignment= "Center"/>
Optional titleGets or sets the bottom margin of chart title
Use titleBottomMargin property for the bottom margin of chart title.
this.chart.titleBottomMargin = 5;
<IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
subtitle= "CategoryChart Subtitle"
subtitleAlignment="Right"
titleBottomMargin={5}/>
Optional titleGets or sets the left margin of chart title
Use titleLeftMargin property for the left margin of chart title.
this.chart.titleLeftMargin = 10;
<IgrCategoryChart dataSource={this.state.data}
titleLeftMargin={20}>
</IgrCategoryChart>
Optional titleGets or sets the right margin of chart title
Use titleLeftMargin property for the right margin of chart title.
this.chart.titleRightMargin = 10;
<IgrCategoryChart
dataSource={this.state.data}
titleRightMargin = 10>
</IgrCategoryChart>
Optional titleGets or sets color of chart title
Use titleTextColor property to color the chart title
this.chart.titleTextColor="red" ;
<IgrCategoryChart
dataSource={this.state.data}
width="700px"
height="500px"
xAxisTitle="Countries"
titleTextColor="Red" />
Optional titleGets or sets CSS font property for the chart title
Use titleTextStyle property for the CSS font property of the chart title
this.chart.xAxisTitleTextStyle = "24pt Verdona";
<IgrCategoryChart dataSource={this.state.data}
width="700px"
height="500px"
xAxisTitle="Countries"
xAxisTitleTextColor="gray"
xAxisTitleTextStyle="12pt Verdana"
xAxisTitleAngle={0}
yAxisTitle="Trillions of Watt-hours (TWh)"
yAxisTitleTextStyle="12pt Verdana"
yAxisTitleTextColor="gray"
yAxisTitleAngle={90}
yAxisTitleLeftMargin={5}>
</IgrCategoryChart>
Optional titleGets or sets the top margin of chart title
Use titleTopMargin property for the top margin of chart title.
this.chart.titleTopMargin = 10;
<IgrCategoryChart dataSource={this.state.data}
titleTopMargin={10} />
Optional toolGets or sets the style of tooltip to be displayed.
Optional toolbarOptional tooltipOptional tooltipOptional topGets or sets the top margin of the chart content.
Use topMargin property for the margin of the chart content.
this.chart.topMargin=20;
<IgrCategoryChart dataSource={this.state.data}
topMargin={10} />
Optional transitionGets or sets the duration used for animating series plots when the data is changing
Use the TransitionDuration property to animating between data values.
this.chart.transitionDuratio= 500;
<IgrCategoryChart dataSource={this.state.data}
transitionDuratio={500} />
Optional transitionGets or sets the easing function used for animating series plots when the data is changing. This can be set to one of the known values "linear" or "cubic," or it can be set to an easing function which takes a single numeric parameter and returns a number.
The 'transitionInEasingFunction' property used for easing function for animating series plots when the chart is loading into view.
this.chart.transitionInEasingFunction= this.cubicFunc;
cubicFunc(time: number) : number
{
return time;
}
<IgrCategoryChart dataSource={this.state.data}
transitionInEasingFunction="cubic" />
Optional trendGets or sets the palette of brushes to used for coloring trend lines in this chart. The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection
Use the TrendLineBrushes property for coloring trend lines in the chart.
this.chart.trendLineBrushes=["#ff0000", "#ffff00", "#00ffff"] ;
<IgrCategoryChart dataSource={this.state.data}
trendLineBrushes="#ffff00" />
Optional trendOptional trendGets or sets the thickness of the trend lines in this chart. This property applies only to these chart types: point, line, spline, and bubble
Use the TrendLineThickness property for the thickness of the trend lines in the chart.
this.chart.trendLineThickness=2;
<IgrCategoryChart dataSource={this.state.data}
trendLineThickness={2} />
Optional trendGets or sets the formula used for calculating trend lines in this chart. This property applies only to these chart types: point, line, spline, and bubble
Use the TrendLineType property for calculating trend lines.
this.chart.trendLineType = TrendLineType.CubicFit;
<IgrCategoryChart dataSource={this.state.data}
trendLineType="CubicFit" />
Optional unknownGets or sets the behavior that determines how unknown values will be plotted on the chart. Null and Double.NaN are two examples of unknown values.
Use the UnknownValuePlotting property to determines the behavior that how unknown values will be plotted on the chart.
this.chart.unknownValuePlotting =UnknownValuePlotting.DontPlot;
<IgrCategoryChart dataSource={this.state.data}
unknownValuePlotting= "dontPlot" />
Optional valueGets or sets what value lines to use in the chart.
Optional valueGets or sets the palette of brushes to use for coloring the value lines present in the ValueLines property. 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
Optional valueGets or sets thickness of value lines.
Optional verticalGets or sets the corner radius to use for the vertical scrollbar in the component, when enabled.
Optional verticalGets or sets the fill to use for the vertical scrollbar in the component, when enabled.
Optional verticalGets or sets the inset distance to use for the vertical scrollbar in the component, when enabled.
Optional verticalGets or sets the max opacity to use for the vertical scrollbar in the component, when enabled.
Optional verticalGets or sets the vertical scrollbar mode to use for the series viewer.
Optional verticalGets or sets the outline to use for the vertical scrollbar in the component, when enabled.
Optional verticalGets or sets the position to use for the vertical scrollbar in the component, when enabled.
Optional verticalGets or sets whether to use automatic track insets for the vertical scrollbar in the component, when enabled.
Optional verticalGets or sets the stroke thickness to use for the vertical scrollbar in the component, when enabled.
Optional verticalGets or sets the track end inset to use for the vertical scrollbar in the component, when enabled.
Optional verticalGets or sets the track start inset to use for the vertical scrollbar in the component, when enabled.
Optional verticalGets or sets the width to use for the vertical scrollbar in the component, when enabled.
Optional volumeBrushes to use for filling volume series in the volume pane.
Use the VolumeBrushes property to set a collection of brushes that will be used to render fill area of multiple series in the volume pane of the Financial Chart control, e.g.
<IgrFinancialChart
width="100%"
height="400px"
dataSource={this.data}
volumeBrushes="Green" />
Optional volumeBrushes to use for outlining volume series in the volume pane.
Use the VolumeOutlines property to set a collection of brushes that will be used to render outline of multiple series in the volume pane of the Financial Chart control, e.g.
<IgrFinancialChart
width="100%"
height="400px"
dataSource={this.data}
volumeOutlines="Green" />
Optional volumeThe outline thickness of volume series in the volume pane.
Use the VolumeThickness property to set a number that will be used to render outline thickness of all series in the volume pane, e.g.
<IgrFinancialChart
width="100%"
height="400px"
dataSource={this.data}
volumeThickness= {2.5}/>
Optional volumeThe type of series to display in the volume pane.
Use the VolumeType property to set a type of all series that will be rendered in the volume pane, e.g.
<IgrFinancialChart
width="100%"
height="400px"
dataSource={this.data}
volumeType="Column" />
Optional widthOptional windowGets or sets the rectangle representing the current scroll and zoom state of the chart. WindowRect is expressed as a Rectangle with coordinates and sizes between 0 and 1.
Use WindowRect property representing the current scroll and zoom state of the chart.
this.chart.windowRect =[0,0,1,1];
<IgrCategoryChart dataSource={this.state.data}
WindowRect={1,0,1,1} />
Optional windowSets or gets the minimum height that the window rect is allowed to reach before being clamped. Decrease this value if you want to allow for further zooming into the viewer. If this value is lowered too much it can cause graphical corruption due to floating point arithmetic inaccuracy. This property accepts values between 0.0 (max zooming) and 1.0 (no zooming)
Optional windowSets or gets the minimum width that the window rect is allowed to reach before being clamped. Decrease this value if you want to allow for further zooming into the viewer. If this value is lowered too much it can cause graphical corruption due to floating point arithmetic inaccuracy. This property accepts values between 0.0 (max zooming) and 1.0 (no zooming)
Optional windowSets or gets minimum pixel height that the window is allowed to reach before being clamped. Decrease this value if you want to allow for further zooming into the viewer. If this value is lowered too much it can cause graphical corruption due to floating point arithmetic inaccuracy. This property is overridden by the WindowRectMinHeight property
Optional windowSets or gets minimum pixel width that the window is allowed to reach before being clamped. Decrease this value if you want to allow for further zooming into the viewer. If this value is lowered too much it can cause graphical corruption due to floating point arithmetic inaccuracy. This property is overridden by the WindowRectMinWidth property
Optional xGets or sets whether the x axis enhanced interval management should prefer to show all the labels if possible without collisions for supported types of category axes. This is for use with EnhancedIntervalMinimumCharacters = -1 and axes that have an integral interval.
Optional xGets or sets the distance between the X-axis and the bottom of the chart.
To allocate space between the x-axis and the edge of the chart, set the XAxisExtent property.
this.chart.xAxisExtent="250";
<IgrCategoryChart
xAxisExtent ={250}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional xGets or sets function which takes an context object and returns a formatted label for the X-axis.
To customize the text of the x-axis label, set XAxisFormatLabel to a single-parameter function. The argument passed to that function will be your data item.
formatX(item: any): string {
return "[ " + item.label + "! ]";
}
<IgrCategoryChart
xAxisFormatLabel="formatX"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional xGets or sets whether to invert the direction of the X-axis by placing the first data items on the right side of the chart.
To reverse the direction of items along the x-axis, set the XAxisInverted property to true.
this.chart.XAxisInverted="True";
<IgrCategoryChart
XAxisInverted="True"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional xGets or sets the format for labels along the X-axis.
Optional xGets or sets the angle of rotation for labels along the X-axis.
To control the rotation of labels on the x-axis, set the XAxisLabelAngle property to a number of rotational degrees.
this.chart.xAxisLabelAngle="45";
<IgrCategoryChart
xAxisLabelAngle={45}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional xGets or sets the bottom margin of labels on the X-axis
Use the XAxisLabelBottomMargin property to apply a margin below the x-axis labels.
this.chart.xAxisLabelBottomMargin ="100";
<IgrCategoryChart
xAxisLabelBottomMargin={100}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional xGets or sets the format string for the X axis label.
Optional xGets or sets the format specifiers to use with the XAxisLabelFormat string.
Optional xGets or sets Horizontal alignment of X-axis labels.
Optional xGets or sets the left margin of labels on the X-axis
Use the XAxisLabelLeftMargin property to apply a margin left of the x-axis labels.
this.chart.xAxisLabelLeftMargin ="100";
<IgrCategoryChart
xAxisLabelLeftMargin={100}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional xGets or sets location of X-axis labels, relative to the plot area.
Optional xGets or sets the right margin of labels on the X-axis
Use the XAxisLabelRightMargin property to apply a margin right of the x-axis labels.
this.chart.xAxisLabelRightMargin="100";
<IgrCategoryChart
xAxisLabelRightMargin={250}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional xGets or sets color of labels on the X-axis
To change the color of x-axis labels, set the XAxisLabelTextColor property to a color string.
this.chart.xAxisLabelTextColor="green";
<IgrCategoryChart
xAxisLabelTextColor="green"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional xGets or sets CSS font property for labels on X-axis
To change the font of x-axis labels, set the XAxisLabelTextStyle property.
this.chart.xAxisLabelTextStyle="italic 15px arial, sans-serif";
<IgrCategoryChart
xAxisLabelTextStyle="italic 15px arial, sans-serif"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional xGets or sets the top margin of labels on the X-axis
Use the XAxisLabelTopMargin property to apply a margin above the x-axis labels.
this.chart.xAxisTitleTopMargin="250";
<IgrCategoryChart
xAxisTitleTopMargin ={250}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional xGets or sets Vertical alignment of X-axis labels.
Use the XAxisLabelVerticalAlignment property to change the vertical position of x-axis labels.
this.chart.xAxisLabelVerticalAlignment="bottom";
<IgrCategoryChart
xAxisLabelVerticalAlignment="bottom"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional xGets or sets Visibility of X-axis labels.
To hide the x-axis labels, set XAxisLabelVisibility to collapsed.
this.chart.xAxisLabelVisibility="collapsed";
<IgrCategoryChart
xAxisLabelVisibility="collapsed"
dataSource={this.state.data}>
</IgrCategoryChart>
Optional xGets or sets the color to apply to major gridlines along the X-axis.
Set XAxisMajorStroke to control the color of major gridlines extending vertically from the x-axis.
this.chart.xAxisMajorStroke="green";
<IgrCategoryChart
xAxisMajorStroke="green"
dataSource={this.state.data} >
</IgrCategoryChart>
Optional xGets or sets the thickness to apply to major gridlines along the X-axis.
Set XAxisMajorStrokeThickness to control the thickness of major gridlines extending vertically from the x-axis.
this.chart.xAxisMajorStrokeThickness="3" ;
<IgrCategoryChart
xAxisMajorStrokeThickness="3"
xAxisExtent ={250}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional xGets or sets maximum value on x-axis
Optional xGets or sets minimum value on x-axis
Optional xGets or sets the color to apply to minor gridlines along the X-axis.
Set XAxisMinorStroke to control the color of minor gridlines extending vertically from the x-axis.
this.chart.xAxisExtent="250";
<IgrCategoryChart
xAxisMinorStroke="green"
dataSource={this.state.data}>
</IgrCategoryChart>
Optional xGets or sets the thickness to apply to minor gridlines along the X-axis.
Set XAxisMinorStrokeThickness to control the thickness of minor gridlines extending vertically from the x-axis.
this.chart.xAxisMinorStrokeThickness="3";
<IgrCategoryChart
xAxisMinorStrokeThickness="3"
dataSource={this.state.data} >
</IgrCategoryChart>
Optional xThe scaling mode of the X-axis.
Use the XAxisMode property to plot data items without any breaks in data range (Ordinal mode) or with breaks in data range (Time mode) such as weekends/holidays. Note that the Ordinal axis mode is less expensive to use in the financial chart than the Time axis mode.
<IgrFinancialChart
xAxisMode="time"
dataSource={this.data} />
Optional xGets or sets the color to apply to stripes along the X-axis.
Set XAxisStrip to control the alternating color of stripes extending vertically from the x-axis.
this.chart.xAxisStrip="green";
<IgrCategoryChart
xAxisStrip="green"
dataSource={this.state.data} >
</IgrCategoryChart>
Optional xGets or sets the color to apply to the X-axis line.
Set XAxisStroke to control the color of the x-axis line.
this.chart.xAxisStroke="green"";
<IgrCategoryChart
xAxisStroke="green"
dataSource={this.state.data}>
</IgrCategoryChart>
Optional xGets or sets the thickness to apply to the X-axis line.
Set XAxisStrokeThickness to control the thickness of the x-axis line.
this.chart.xAxisStrokeThickness="2";
<IgrCategoryChart
xAxisStrokeThickness={2}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional xGets or sets the length of tickmarks along the X-axis.
Set XAxisTickLength to control the length of tickmarks extending vertically from the x-axis line.
this.chart.xAxisTickLength="25";
<IgrCategoryChart
xAxisTickLength ={25}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional xGets or sets the color to apply to tickmarks along the X-axis.
Set XAxisTickStroke to control the color of tickmarks extending vertically from the x-axis line.
this.chart. xAxisTickStroke="green";
<IgrCategoryChart
xAxisTickStroke="green"
dataSource={this.state.data}>
</IgrCategoryChart>
Optional xGets or sets the thickness to apply to tickmarks along the X-axis.
Set XAxisTickStrokeThickness to control the thickness of tickmarks extending vertically from the x-axis line.
this.chart.xAxisTickStrokeThickness="20";
<IgrCategoryChart
xAxisTickStrokeThickness={20}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional xGets or sets the Text to display below the X-axis.
Set XAxisTitle to display a label adjacent to the x-axis.
this.chart. xAxisTitle="x axis";
<IgrCategoryChart
xAxisTitle="x axis"
dataSource={this.state.data} >
</IgrCategoryChart>
Optional xGets or sets Horizontal alignment of the X-axis title.
Set XAxisTitleAlignment to control the horizontal alignment of the x-axis title.
this.chart.xAxisTitleAlignment="right";
<IgrCategoryChart
xAxisTitleAlignment="right"
dataSource={this.state.data}>
</IgrCategoryChart>
Optional xGets or sets the angle of rotation for the X-axis title.
Set XAxisTitleAngle to control the rotation of the x-axis title.
this.chart.xAxisTitleAngle="50";
<IgrCategoryChart
xAxisTitleAngle ={50}
dataSource={this.state.data}>
</IgrCategoryChart>
Optional xGets or sets the bottom margin of a title on the X-axis
Use the XAxisTitleBottomMargin property to apply a margin below the x-axis title.
this.chart.xAxisTitleBottomMargin="150";
<IgrCategoryChart
xAxisTitleBottomMargin={250}
dataSource={this.state.data}>
</IgrCategoryChart>
Optional xGets or sets the left margin of a title on the X-axis
Use the XAxisTitleLeftMargin property to apply a margin left of the x-axis title.
this.chart.xAxisTitleLeftMargin="150";
<IgrCategoryChart
xAxisTitleLeftMargin={150}
dataSource={this.state.data}>
</IgrCategoryChart>
Optional xGets or sets the margin around a title on the X-axis
Use the XAxisTitleMargin property to set a margin around the y-axis title.
Optional xGets or sets the right margin of a title on the X-axis
Use the XAxisTitleRightMargin property to apply a margin right of the x-axis title.
this.chart.xAxisTitleRightMargin="100";
<IgrCategoryChart
xAxisTitleRightMargin="100"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional xGets or sets color of title on the X-axis
To change the color of the x-axis title, set the XAxisTitleTextColor property to a color string.
this.chart.xAxisTitleTextColor="green";
<IgrCategoryChart
xAxisTitleTextColor="green"
dataSource={this.state.data} >
</IgrCategoryChart>
Optional xGets or sets CSS font property for title on X-axis
To change the font of the x-axis title, set the XAxisTitleTextStyle property.
this.chart.xAxisTitleTextStyle="italic 15px arial, sans-serif";
<IgrCategoryChart
xAxisTitleTextStyle="italic 15px arial, sans-serif"
dataSource={this.state.data}>
</IgrCategoryChart>
Optional xGets or sets the top margin of a title on the X-axis
Use the XAxisTitleTopMargin property to apply a margin above the x-axis title.
this.chart.xAxisTitleTopMargin="150";
<IgrCategoryChart
xAxisTitleTopMargin ={150}
dataSource={this.state.data} >
</IgrCategoryChart>
Optional xGets or sets number of visible categories at maximum zooming level This property works only with ordinal XAxisMode and it is overridden by chart's WindowRectMinWidth property
Optional xGets or sets maximum pixel span of series item that will be visible at maximum zooming level This property ensures that series item does not get stretch above specified value. This property works only with ordinal XAxisMode and it is overridden by chart's WindowRectMinWidth property
Optional xGets or sets number of categories that the chart will zoom in and fill plot area This property is overridden by chart's WindowRect or WindowScaleHorizontal properties
Optional xGets or sets starting category that chart will move its zoom window. Acceptable value is between 0 and number of data items This property works only with ordinal XAxisMode and it is overridden by chart's WindowRect or WindowScaleHorizontal properties
Optional xGets or sets pixel span of series item that will be used to zoom chart such that the item has desired span Chart will automatically zoom in until series item has specified pixel span. This property works only with ordinal XAxisMode and it is overridden by chart's WindowRect or WindowScaleHorizontal properties
Optional yGets or sets whether the large numbers on the Y-axis labels are abbreviated.
Optional yGets or sets whether the y axis enhanced interval management should prefer to show all the labels if possible without collisions for supported types of category axes. This is for use with EnhancedIntervalMinimumCharacters = -1 and axes that have an integral interval.
Optional yGets or sets the distance between the Y-axis and the left edge of the chart.
To allocate space between the x-axis and the edge of the chart, set the XAxisExtent property.
this.chart.xAxisExtent="250";
<IgrCategoryChart
xAxisExtent ={250}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional yGets or sets function which takes a context object and returns a formatted label for the Y-axis.
To customize the text of the y-axis label, set YAxisFormatLabel to a single-parameter function. The argument passed to that function will be the numeric value corresponding to a position on the y-axis.
formatY(value: any): string {
return "[ " + value+ "! ]";
}
<IgrCategoryChart
yAxisFormatLabel="formatY"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional yGets or sets the distance between each label and grid line along the Y-axis.
The YAxisInterval determines how often to show a label, tickmark, and/or gridline along the y-axis. Set this property to a number less than the numeric range of the y-axis.
<IgrFinancialChart
width="100%"
height="400px"
dataSource={this.data}
yAxisInterval={20}
/>
Optional yGets or sets whether to invert the direction of the Y-axis by placing the minimum numeric value at the top of the chart.
You can use YAxisInverted to invert the scale of the y axis like this:
this.chart.yAxisInverted="true";
<IgrCategoryChart
yAxisInverted="true"
dataSource={this.state.data}>
</IgrCategoryChart>
The default value of YAxisInverted is false.
Optional yGets 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.
Optional yGets or sets the property or string from which the labels are derived.
Optional yGets or sets the angle of rotation for labels along the Y-axis.
To control the rotation of labels on the y-axis, set the YAxisLabelAngle property to a number of rotational degrees.
this.chart.yAxisLabelAngle="25";
<IgrCategoryChart
yAxisLabelAngle ={25}
dataSource={this.state.data} >
</IgrCategoryChart>
Optional yGets or sets the bottom margin of labels on the Y-axis
Use the YAxisLabelBottomMargin property to apply a margin below the y-axis labels.
this.chart.yAxisLabelBottomMargin="250";
<IgrCategoryChart
yAxisLabelBottomMargin={250}
dataSource={this.state.data} >
</IgrCategoryChart>
Optional yGets or sets the format string for the Y axis label.
Optional yGets or sets the format specifiers to use with the YAxisLabelFormat string.
Optional yGets or sets Horizontal alignment of Y-axis labels.
Optional yGets or sets the left margin of labels on the Y-axis
Use the YAxisLabelLeftMargin property to apply a margin left of the y-axis labels.
this.chart. yAxisLabelLeftMargin="250";
<IgrCategoryChart
yAxisLabelLeftMargin={250}
dataSource={this.state.data} >
</IgrCategoryChart>
Optional yGets or sets location of Y-axis labels, relative to the plot area.
Set the YAxisLabelLocation property to change the location of the y-axis and its labels.
this.chart.yAxisLabelLocation="outsideRight";
<IgrCategoryChart
yAxisLabelLocation="outsideRight"
dataSource={this.state.data} >
</IgrCategoryChart>
Optional yGets or sets the right margin of labels on the Y-axis
Use the YAxisLabelRightMargin property to apply a margin right of the y-axis labels.
this.chart.yAxisLabelRightMargin="250";
<IgrCategoryChart
yAxisLabelRightMargin={250}
dataSource={this.state.data} >
</IgrCategoryChart>
Optional yGets or sets color of labels on the Y-axis
To change the color of y-axis labels, set the YAxisLabelTextColor property to a color string.
this.chart.yAxisLabelTextColor="green";
<IgrCategoryChart
yAxisLabelTextColor="green"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional yGets or sets CSS font property for labels on Y-axis
To change the font of x-axis labels, set the YAxisLabelTextStyle property.
this.chart. yAxisLabelTextStyle="italic 15px arial, sans-serif";
<IgrCategoryChart
yAxisLabelTextStyle="italic 15px arial, sans-serif"
dataSource={this.state.data}>
</IgrCategoryChart>
Optional yGets or sets the top margin of labels on the Y-axis
Use the YAxisLabelTopMargin property to apply a margin above the y-axis labels.
this.chart.yAxisLabelTopMargin="250";
<IgrCategoryChart
yAxisLabelTopMargin ={250}
dataSource={this.state.data} >
</IgrCategoryChart>
Optional yGets or sets Vertical alignment of Y-axis labels.
Optional yGets or sets Visibility of Y-axis labels.
To hide the y-axis labels, set YAxisLabelVisibility to collapsed.
this.chart.yAxisLabelVisibility="collapsed"";
<IgrCategoryChart
yAxisLabelVisibility="collapsed"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional yGets 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.
Optional yGets or sets the color to apply to major gridlines along the Y-axis.
Set YAxisMajorStroke to control the color of major gridlines extending horizontally from the y-axis.
this.chart.yAxisMajorStroke="green";
<IgrCategoryChart
yAxisMajorStroke="green"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional yGets or sets the thickness to apply to major gridlines along the Y-axis.
Set YAxisMajorStrokeThickness to control the thickness of major gridlines extending horizontally from the y-axis.
this.chart.yAxisMajorStrokeThickness="2";
<IgrCategoryChart
yAxisMajorStrokeThickness={2}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional yGets or sets the data value corresponding to the maximum value of the Y-axis.
The YAxisMaximumValue determines ending value of labels, tickmarks, and gridlines on the y-axis.
<IgrFinancialChart
yAxisMinimumValue={-200}
yAxisMaximumValue={100}
dataSource={this.data} />
Optional yGets or sets the data value corresponding to the minimum value of the Y-axis.
The YAxisMinimumValue determines starting value of labels, tickmarks, and gridlines on the y-axis.
<IgrFinancialChart
yAxisMinimumValue={-200}
yAxisMaximumValue={1000}
dataSource={this.data} />
Optional yGets or sets the frequency of displayed minor lines along the Y-axis.
The YAxisMinorInterval determines how often to show minor gridline along the y-axis. Set this property to a number less than the YAxisInterval and the numeric range of the y-axis.
<IgrFinancialChart
yAxisMinorInterval={50}
dataSource={this.data} />
Optional yGets or sets the color to apply to minor gridlines along the Y-axis.
Set YAxisMinorStroke to control the color of minor gridlines extending horizontally from the y-axis.
this.chart.yAxisMinorStroke="green";
<IgrCategoryChart
yAxisMinorStroke="green"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional yGets or sets the thickness to apply to minor gridlines along the Y-axis.
Set YAxisMinorStrokeThickness to control the thickness of minor gridlines extending horizontally from the y-axis.
this.chart.yAxisMinorStrokeThickness="3";
<IgrCategoryChart
yAxisMinorStrokeThickness={3}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional yThe scaling mode of the Y-axis.
Use the YAxisMode property to plot data items using their actual values (Numeric) or using percent changes from the first data point (PercentChange), e.g.
<IgrFinancialChart
yAxisMode={this.state.yAxisMode}
dataSource={this.data} />
Optional yGets or sets the color to apply to stripes along the Y-axis.
Set YAxisStrip to control the alternating color of stripes extending horizontally from the y-axis.
this.chart.yAxisStrip="green";
<IgrCategoryChart
yAxisStrip="green"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional yGets or sets the color to apply to the Y-axis line.
Set YAxisStroke to control the color of the y-axis line.
this.chart.yAxisStroke="green";
<IgrCategoryChart
yAxisStroke="green"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional yGets or sets the thickness to apply to the Y-axis line.
Set YAxisStrokeThickness to control the thickness of the y-axis line.
this.chart. yAxisStrokeThickness="2";
<IgrCategoryChart
yAxisStrokeThickness={2}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional yGets or sets the length of tickmarks along the Y-axis.
Set YAxisTickLength to control the length of tickmarks extending horizontally from the y-axis line.
this.chart.yAxisTickLength="25";
<IgrCategoryChart
yAxisTickLength ={25}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional yGets or sets the color to apply to tickmarks along the Y-axis.
Set YAxisTickStroke to control the color of tickmarks extending horizontally from the y-axis line.
this.chart.yAxisTickStroke="green";
<IgrCategoryChart
yAxisTickStroke="green"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional yGets or sets the thickness to apply to tickmarks along the Y-axis.
Set YAxisTickStrokeThickness to control the thickness of tickmarks extending vertically from the y-axis line.
this.chart.yAxisTickStrokeThickness="25";
<IgrCategoryChart
yAxisTickStrokeThickness ={25}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional yGets or sets the Text to display to the left of the Y-axis.
Set YAxisTitle to display a label adjacent to the y-axis.
this.chart.yAxisTitle="y axis";
<IgrCategoryChart
yAxisTitle="y axis"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional yGets or sets Vertical alignment of the Y-axis title.
Set YAxisTitleAlignment to control the vertical alignment of the x-axis title.
this.chart.yAxisTitleAlignment="bottom";
<IgrCategoryChart
yAxisTitleAlignment="bottom"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional yGets or sets the angle of rotation for the Y-axis title.
Set YAxisTitleAngle to control the rotation of the y-axis title.
this.chart.yAxisTitleAngle="25";
<IgrCategoryChart
yAxisTitleAngle ={24}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional yGets or sets the bottom margin of a title on the Y-axis
Use the YAxisTitleBottomMargin property to apply a margin below the y-axis title.
this.chart.yAxisTitleBottomMargin="150";
<IgrCategoryChart
yAxisTitleBottomMargin ={150}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional yGets or sets the left margin of a title on the Y-axis
Use the YAxisTitleLeftMargin property to apply a margin left of the y-axis title.
this.chart.yAxisTitleLeftMargin="150";
<IgrCategoryChart
yAxisTitleLeftMargin={150}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional yGets or sets the margin around a title on the Y-axis
Use the YAxisTitleMargin property to set a margin around the y-axis title.
Optional yGets or sets the right margin of a title on the Y-axis
Use the YAxisTitleRightMargin property to apply a margin right of the y-axis title.
this.chart.yAxisTitleRightMargin="150";
<IgrCategoryChart
yAxisTitleRightMargin={150}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional yGets or sets color of title on the Y-axis
To change the color of the y-axis title, set the YAxisTitleTextColor property to a color string.
this.chart.yAxisTitleTextColor="green";
<IgrCategoryChart
yAxisTitleTextColor="green"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional yGets or sets CSS font property for title on Y-axis
To change the font of the x-axis title, set the YAxisTitleTextStyle property.
this.chart.yAxisTitleTextStyle="italic 15px arial, sans-serif";
<IgrCategoryChart
yAxisTitleTextStyle="italic 15px arial, sans-serif"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional yGets or sets the top margin of a title on the Y-axis
Use the YAxisTitleTopMargin property to apply a margin above the y-axis title.
this.chart.yAxisTitleTopMargin="150";
<IgrCategoryChart
yAxisTitleTopMargin ={150}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional zoomGets or sets type of series to display in the zoom slider pane.
Use the ZoomSliderType property to set a type of all series that will be rendered in the zoom pane, e.g.
<IgrFinancialChart
zoomSliderType="Candle"
dataSource={this.data} />
Optional zoomGets or sets stroke brush of major gridlines on x-axis of the zoom slider pane
Optional zoomGets or sets thickness of major gridlines on x-axis of the zoom slider pane
Gets the actual palette of brushes to use for coloring the chart series.