If using the new style context, re-declare this in your class to be the
React.ContextType
of your static contextType
.
Should be used with type annotation or static contextType.
static contextType = MyContext
// For TS pre-3.7:
context!: React.ContextType<typeof MyContext>
// For TS 3.7 and above:
declare context: React.ContextType<typeof MyContext>
Readonly
propsStatic
Optional
contextIf set, this.context
will be set at runtime to the current value of the given Context.
Usage:
type MyContext = number
const Ctx = React.createContext<MyContext>(0)
class Foo extends React.Component {
static contextType = Ctx
context!: React.ContextType<typeof Ctx>
render () {
return <>My context's value: {this.context}</>;
}
}
Gets the actual palette of brushes to use for coloring the chart series.
Gets the actual palette of brushes to use for outlines on the chart series.
Gets the actual color of labels on the X-axis
Gets the actual color of labels on the Y-axis
Gets or sets a value indicating whether grid and tick lines are aligned to device pixels.
Use AlignsGridLinesToPixels
propert to indicat whether grid and tick lines are aligned to device pixels.
this.chart.alignsGridLinesToPixels= true;
Gets or sets whether the series animations should be allowed when a range change has been detected on an axis.
Gets or sets the fill opacity for all series that have area visuals in this chart. For example, Area, SplineArea, Column chart types
Gets or sets if the auto value callouts should be displayed.
Gets 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 />
Gets or sets the palette of brushes to use for coloring the chart series. The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection
Use the Brushes
property to set the brushes.
this.chart.brushes = ["#ff0000","#00ff00"];
Occurs when the style of a callout is updated.
Occurs when the style of a callout is updated.
Occurs when the style of a callout is updated.
Occurs when the style of a callout is updated.
Gets or sets if event annotations should be displayed.
Gets or sets the allowed positions that the callout layer is allowed to use.
Gets or sets the member path of the content data for the callouts.
Gets or sets the member path of the label data for the callouts.
Gets or sets if callouts should be displayed.
Gets or sets the member path of the X data for the callouts.
Gets or sets the member path of the Y data for the callouts.
Gets 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" />
Gets or sets mode to use for automatically calculating the plot area margin.
Gets or sets whether annotations are shown along the axis for crosshair values
Gets or sets the background of crosshair annotation on x-axis.
Gets or sets precision on interpolated values of crosshairs on x-axis.
Gets or sets the text color of crosshair annotation on x-axis.
Gets or sets the background of crosshair annotation on y-axis.
Gets or sets precision on interpolated values of crosshairs on y-axis.
Gets or sets the text color of crosshair annotation on y-axis.
Gets or sets the crosshairs to be displayed.
Gets or sets the color to apply to horizontal crosshairs line.
Gets or sets thickness of crosshairs lines.
Gets or sets the color to apply to vertical crosshairs line.
Gets or sets whether crosshairs will snap to the nearest data point.
Gets or sets the BadgeShape for the data legend.
Gets or sets the offset of the tooltip layer on the X axis.
Gets or sets the offset of the tooltip layer on the Y axis.
Gets 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
Gets 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
Gets or sets whether to show Group row.
Gets or sets the Group text color.
Gets or Sets the style to use for the Group text.
Gets or sets the tooltip position mode on the X axis for grouped series.
Gets or sets the tooltip position mode on the Y axis for grouped series.
Gets or sets globalization culture when displaying header as date time This property is ignored when setting HeaderFormatSpecifiers or HeaderFormatString properties
Gets or sets date format for the header This property is ignored when setting HeaderFormatSpecifiers or HeaderFormatString properties
Gets or sets the format specifiers to use with the HeaderFormatString string.
Gets or sets the format string for header text displayed in the data legend.
Gets or sets time format for the header This property is ignored when setting HeaderFormatSpecifiers or HeaderFormatString properties
Gets or sets whether to show Header row.
Gets or sets the HeaderText for the data legend.
Gets or sets the header text color.
Gets or Sets the style to use for the header text.
Gets 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
Gets 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
Gets or sets the mode for displaying labels before series values in the data legend, e.g. O: H: L: C: for financial series
Gets or sets the units text color.
Gets or Sets the style to use for the units text.
Gets or sets the offset of the tooltip layer on the X axis.
Gets or sets the offset of the tooltip layer on the Y axis.
Gets or sets whether the data legend should update when the series data is mutated.
Gets or sets the units text for the data legend.
Gets or sets the units text color.
Gets or Sets the style to use for the units text.
Gets or sets the SummaryTitleText for the data legend.
Gets or sets the summary text color.
Gets or Sets the style to use for the summary text.
Gets or sets the SummaryType for the data legend.
Gets or sets the units text for the data legend.
Gets or sets the units text color.
Gets or Sets the style to use for the units text.
Gets or sets the units text color.
Gets or Sets the style to use for the units text.
Gets or sets the display text color.
Gets or Sets the style to use for the display text.
Gets or sets the UnitsMode for the data legend.
Gets or sets the units text for the data legend.
Gets or sets the units text color.
Gets or Sets the style to use for the units text.
Gets or sets mode for abbreviating large numbers displayed in the legend This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties
Gets 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
Gets or sets maximum digits for formatting numbers displayed in the legend This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties
Gets or sets minimum digits for formatting numbers displayed in the legend This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties
Gets or sets the mode for displaying values in the data legend, e.g. Currency ($500.25), Decimal (500.25), Integer (500)
Gets or sets the format specifiers to use with the ValueFormatString string.
Gets or sets the format string for values displayed in the data legend.
Gets or sets whether or not use grouping separator, e.g, 15,000 for 15000 This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties
Gets or sets whether to show series rows.
Gets or sets the units text color.
Gets or Sets the style to use for the units text.
Gets or sets whether to use series colors when displaying values in the legend
Gets or sets text displayed when data column is missing a value, e.g. "no data"
Gets the domain type of this chart
Gets or sets a set of property paths that should be excluded from consideration by the category chart.
The ExcludedProperties
property used for the property paths that should be excluded from consideration by the category chart.
this.chart.excludedProperties = ["ID", "Discount"];
<IgrCategoryChart
chartType="Line"
markerTypes={this.state.markersTypes}
dataSource={this.categoryData}
excludedProperties="value" />
Gets the current filter that is applied to the chart. Collection can be updated to modify the filter for the chart. Once filter expressions are in this collection, the chart will no longer listen for changes on their properties.
Gets or sets the background of final value annotation.
Gets or sets precision on final value annotation.
Gets or sets the text color of final value annotation.
Gets or sets whether annotations for the final value of each series is displayed on the axis.
Gets or sets the focus brush to use for the series.
Gets or sets the focus mode to use for the series in the component, when supported.
Gets the currently focused data items. Adding or removing data items from this collection will focus or blur the visuals associated with those items.
Gets the current grouping that is applied to the grid. Collection can be updated to modify the grouping for the grid. Once grouping descriptions are in this collection, the grid will no longer listen for changes on their properties.
Gets or sets the sorts to apply after grouping has been applied.
Gets the current highlight filter that is applied to the chart. Collection can be updated to modify the highlight filter for the chart. Once filter expressions are in this collection, the chart will no longer listen for changes on their properties.
Gets 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.
Gets or sets the highlighting Behavior to use for the series in the component, when supported. This takes precedence over the series level IsHighlightingEnabled.
Gets or sets the highlighting mode to use for the series in the component, when supported. This takes precedence over the series level IsHighlightingEnabled.
Gets or sets the corner radius to use for the horizontal scrollbar in the component, when enabled.
Gets or sets the fill to use for the horizontal scrollbar in the component, when enabled.
Gets or sets the height to use for the horizontal scrollbar in the component, when enabled.
Gets or sets the inset distance to use for the horizontal scrollbar in the component, when enabled.
Gets or sets the max opacity to use for the horizontal scrollbar in the component, when enabled.
Gets or sets the horizontal scrollbar mode to use for the series viewer.
Gets or sets the outline to use for the horizontal scrollbar in the component, when enabled.
Gets or sets the position to use for the horizontal scrollbar in the component, when enabled.
Gets or sets whether to use automatic track insets for the horizontal scrollbar in the component, when enabled.
Gets or sets the stroke thickness to use for the horizontal scrollbar in the component, when enabled.
Gets or sets the track end inset to use for the horizontal scrollbar in the component, when enabled.
Gets or sets the track start inset to use for the horizontal scrollbar in the component, when enabled.
Gets or sets a set of property paths that should be included for consideration by the category chart, leaving the remainder excluded. If null, all properties will be considered.
The IncludedProperties
property used to include the properties for the consideration of the category chart.
this.chart.includedProperties = ["ProductName", "Cost"];
<IgrCategoryChart
chartType="Line"
markerTypes={this.state.markersTypes}
dataSource={this.categoryData}
excludedProperties="value" />
Gets or sets the filter to apply to the chart. This property will become ignored if the filter is changed outside of this property.
Gets the initial filters that are applied to the chart.
Gets the initial groupings that are applied to the chart.
Gets the initial sorts that are applied to the chart after groupings and summaries are applied.
Gets or sets the groupings to apply to the chart. This property will become ignored if sorts are changed outside of this property.
Gets or sets the filter to apply to the chart. This property will become ignored if the filter is changed outside of this property.
Gets the initial highlight filters that are applied to the chart.
Gets the initial sorts that are applied to the chart.
Gets or sets the sorts to apply to the chart. This property will become ignored if sorts are changed outside of this property.
Gets or sets the summaries to apply to the chart. This property will become ignored if sorts are changed outside of this property.
Gets the initial summaries that are applied to the chart.
Gets 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;
Gets or sets whether the chart can highlight series through user interactions. This property applies to Category Chart and Financial Chart controls.
Gets or sets whether the chart can 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"/>
Gets 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}/>
Gets or sets the highlighting mode to use for the legend linked to the component, when supported.
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
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
Gets or sets the default marker type for all series plotted in this chart. This property is ignored when the MarkerTypes property is set
Gets or sets the palette of brushes used for rendering fill area of data point markers. This property applies only to these chart types: point, line, spline, bubble, and polygon
MarkerBrushes
property used for rendering fill area of data point markers.
this.chart.markerBrushes=[ "#ff0000", "#ffff00", "#00ffff" ];
<IgrCategoryChart
chartType="Line"
markerBrushes ="#ffff00"
dataSource={this.categoryData}/>
Gets or sets the MarkerFillMode for all series that support markers in this chart.
Gets or sets the Marker Fill Opacity for all series that support markers in this chart.
Gets 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}/>
Gets or sets the MarkerOutlineMode for all series that support markers in this chart.
Gets or sets the palette of brushes used for rendering outlines of data point markers. This property applies only to these chart types: point, line, spline, bubble, and polygon
MarkerOutlines
property used for rendering outlines of data point markers.
this.chart.markerOutlines= ["#ff0000", "#ffff00", "#00ffff"] ;
<IgrCategoryChart
chartType="Line"
markerOutlines= "#ff0000"
dataSource={this.categoryData}/>
Gets or sets the Marker Thickness for all series that support markers in this chart.
Gets or sets the marker shapes used for indicating location of data points in this chart. This property applies only to these chart types: point, line, spline, bubble, and polygon
Gets or sets the OutlineMode for all series in this chart.
Gets or sets the palette of brushes to use for outlines on the chart series. The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection
Use the Outlines
property to sets the palette of brushes to use for outlines on the chart series
<IgrCategoryChart
chartType="Line"
outlines= "#ff0000"
dataSource={this.categoryData}/>
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.
Margin applied below the plot area.
Margin applied to the Left of the plot area.
Margin applied to the right of the plot area.
Margin applied to the Top of the plot area.
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.
Use the Resolution
property if the callouts should be display.
this.chart.resolution = 2 ;
<IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
markerTypes={this.state.markersTypes}
dataSource={this.categoryData}
calloutsVisible="true"
resolution= {2}/>
Gets 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}/>
Gets the currently selected data items. Adding or removing data items from this collection will select or deselect the visuals associated with those items.
Gets or sets the selection behavior to use for the series in the component, when supported.
Gets or sets the selection brush to use for the series.
Gets or sets the selection mode to use for the series in the component, when supported.
Event raised when a series is initialized and added to this chart.
SeriesAdded
event raised when a series is initialized and added to this chart.
<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)
{
}
Event raised when a series is initialized and added to this chart.
SeriesAdded
event raised when a series is initialized and added to this chart.
<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)
{
}
Gets or sets horizontal mode to use for automatically calculating the plot area margin based ont the series.
Gets or sets vertical mode to use for automatically calculating the plot area margin based ont the series.
Occurs 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)
{
}
Occurs 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)
{
}
Occurs 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)
{
}
Occurs 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)
{
}
Occurs 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)
{
}
Occurs 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)
{
}
Occurs 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)
{
}
Occurs 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)
{
}
Occurs 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)
{
}
Occurs 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)
{
}
Event 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)
{
}
Event 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)
{
}
Gets or sets whether annotations for the final value of each series is displayed on the axis.
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.
Gets or sets a whether the chart should pan its content when zoo,ing in passed max zoom level.
Gets or sets whether the chart should use a faded skeleton style for mock data.
Gets the current sort that is applied to the grid. Collection can be updated to modify the sort for the grid. Once sort descriptions are in this collection, the grid will no longer listen for changes on their properties.
Gets or sets text to display below the Title, above the plot area.
Use the Subtitle
property to display the text below and above the plot area.
<IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
subtitle= "CategoryChart Subtitle"/>
this.chart.subtitle ="CategoryChart Subtitle" ;
Gets or sets horizontal alignment which determines the subtitle position, relative to the left and right edges of the control.
Use the SubtitleAlignment
property to Gets or sets horizontal alignment.
<IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
subtitle= "CategoryChart Subtitle"
subtitleAlignment="Right"/>
this.chart.subtitleAlignment = HorizontalAlignment.Right;
Gets 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 ;
Gets 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}/>
Gets 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}/>
Gets 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"/>
Gets 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"/>
Gets 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}/>
Gets the current summaries that are applied to the grid.
Gets or sets the thickness for all series in this chart. Depending on the ChartType, this can be the main brush used, or just the outline.
Use the Thickness
property for the thickness of all the series in this chart.
Gets or sets horizontal alignment which determines the title position, relative to the left and right edges of the control.
Use the TitleAlignment
property for the horizontal alignment of the title.
this.chart.titleAlignment = HorizontalAlignment.Center;
<IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
titleAlignment= "Center"/>
Gets 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}/>
Gets 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>
Gets 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>
Gets 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" />
Gets 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>
Gets 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} />
Gets or sets the style of tooltip to be displayed.
Sets or gets the template reference to use for tooltips for all the series.
Sets or gets the template references to use for tooltips for all the series, in order.
Gets or sets the top margin of the chart content.
Use topMargin
property for the margin of the chart content.
this.chart.topMargin=20;
<IgrCategoryChart dataSource={this.state.data}
topMargin={10} />
Gets 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} />
Gets or sets the easing function used for animating series plots when the data is changing. This can be set to one of the known values "linear" or "cubic," or it can be set to an easing function which takes a single numeric parameter and returns a number.
The 'transitionInEasingFunction' property used for easing function for animating series plots when the chart is loading into view.
this.chart.transitionInEasingFunction= this.cubicFunc;
cubicFunc(time: number) : number
{
return time;
}
<IgrCategoryChart dataSource={this.state.data}
transitionInEasingFunction="cubic" />
Gets or sets the easing function used for animating series plots when the data is changing. This can be set to one of the known values "linear" or "cubic," or it can be set to an easing function which takes a single numeric parameter and returns a number.
The 'transitionInEasingFunction' property used for easing function for animating series plots when the chart is loading into view.
this.chart.transitionInEasingFunction= this.cubicFunc;
cubicFunc(time: number) : number
{
return time;
}
<IgrCategoryChart dataSource={this.state.data}
transitionInEasingFunction="cubic" />
Gets or sets the palette of brushes to used for coloring trend lines in this chart. The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection
Use the TrendLineBrushes
property for coloring trend lines in the chart.
this.chart.trendLineBrushes=["#ff0000", "#ffff00", "#00ffff"] ;
<IgrCategoryChart dataSource={this.state.data}
trendLineBrushes="#ffff00" />
Gets or sets the thickness of the trend lines in this chart. This property applies only to these chart types: point, line, spline, and bubble
Use the TrendLineThickness
property for the thickness of the trend lines in the chart.
this.chart.trendLineThickness=2;
<IgrCategoryChart dataSource={this.state.data}
trendLineThickness={2} />
Gets or sets the formula used for calculating trend lines in this chart. This property applies only to these chart types: point, line, spline, and bubble
Use the TrendLineType
property for calculating trend lines.
this.chart.trendLineType = TrendLineType.CubicFit;
<IgrCategoryChart dataSource={this.state.data}
trendLineType="CubicFit" />
Gets or sets the behavior that determines how unknown values will be plotted on the chart. Null and Double.NaN are two examples of unknown values.
Use the UnknownValuePlotting
property to determines the behavior that how unknown values will be plotted on the chart.
this.chart.unknownValuePlotting =UnknownValuePlotting.DontPlot;
<IgrCategoryChart dataSource={this.state.data}
unknownValuePlotting= "dontPlot" />
Gets or sets what value lines to use in the chart.
Gets 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
Gets or sets thickness of value lines.
Gets or sets the corner radius to use for the vertical scrollbar in the component, when enabled.
Gets or sets the fill to use for the vertical scrollbar in the component, when enabled.
Gets or sets the inset distance to use for the vertical scrollbar in the component, when enabled.
Gets or sets the max opacity to use for the vertical scrollbar in the component, when enabled.
Gets or sets the vertical scrollbar mode to use for the series viewer.
Gets or sets the outline to use for the vertical scrollbar in the component, when enabled.
Gets or sets the position to use for the vertical scrollbar in the component, when enabled.
Gets or sets whether to use automatic track insets for the vertical scrollbar in the component, when enabled.
Gets or sets the stroke thickness to use for the vertical scrollbar in the component, when enabled.
Gets or sets the track end inset to use for the vertical scrollbar in the component, when enabled.
Gets or sets the track start inset to use for the vertical scrollbar in the component, when enabled.
Gets or sets the width to use for the vertical scrollbar in the component, when enabled.
Gets a rectangle representing the bounds of the plot area.
viewport
property representing the bounds of the plot area.
let viewport:Rect = this.chart.viewport;
Gets or sets the rectangle representing the current scroll and zoom state of the chart. WindowRect is expressed as a Rectangle with coordinates and sizes between 0 and 1.
Use WindowRect
property representing the current scroll and zoom state of the chart.
this.chart.windowRect =[0,0,1,1];
<IgrCategoryChart dataSource={this.state.data}
WindowRect={1,0,1,1} />
Sets 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)
Sets 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)
Sets 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
Sets 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
Gets or sets the distance between the X-axis and the bottom of the chart.
To allocate space between the x-axis and the edge of the chart, set the XAxisExtent
property.
this.chart.xAxisExtent="250";
<IgrCategoryChart
xAxisExtent ={250}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets function which takes an context object and returns a formatted label for the X-axis.
To customize the text of the x-axis label, set XAxisFormatLabel
to a single-parameter function. The argument passed to that function will be your data item.
formatX(item: any): string {
return "[ " + item.label + "! ]";
}
<IgrCategoryChart
xAxisFormatLabel="formatX"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets function which takes an context object and returns a formatted label for the X-axis.
To customize the text of the x-axis label, set XAxisFormatLabel
to a single-parameter function. The argument passed to that function will be your data item.
formatX(item: any): string {
return "[ " + item.label + "! ]";
}
<IgrCategoryChart
xAxisFormatLabel="formatX"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets whether to invert the direction of the X-axis by placing the first data items on the right side of the chart.
To reverse the direction of items along the x-axis, set the XAxisInverted
property to true.
this.chart.XAxisInverted="True";
<IgrCategoryChart
XAxisInverted="True"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets the format for labels along the X-axis.
Gets or sets the angle of rotation for labels along the X-axis.
To control the rotation of labels on the x-axis, set the XAxisLabelAngle
property to a number of rotational degrees.
this.chart.xAxisLabelAngle="45";
<IgrCategoryChart
xAxisLabelAngle={45}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets the bottom margin of labels on the X-axis
Use the XAxisLabelBottomMargin
property to apply a margin below the x-axis labels.
this.chart.xAxisLabelBottomMargin ="100";
<IgrCategoryChart
xAxisLabelBottomMargin={100}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets the format string for the X axis label.
Gets or sets the format specifiers to use with the XAxisLabelFormat string.
Gets or sets Horizontal alignment of X-axis labels.
Gets or sets the left margin of labels on the X-axis
Use the XAxisLabelLeftMargin
property to apply a margin left of the x-axis labels.
this.chart.xAxisLabelLeftMargin ="100";
<IgrCategoryChart
xAxisLabelLeftMargin={100}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets location of X-axis labels, relative to the plot area.
Gets or sets the right margin of labels on the X-axis
Use the XAxisLabelRightMargin
property to apply a margin right of the x-axis labels.
this.chart.xAxisLabelRightMargin="100";
<IgrCategoryChart
xAxisLabelRightMargin={250}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets color of labels on the X-axis
To change the color of x-axis labels, set the XAxisLabelTextColor
property to a color string.
this.chart.xAxisLabelTextColor="green";
<IgrCategoryChart
xAxisLabelTextColor="green"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets 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>
Gets or sets the top margin of labels on the X-axis
Use the XAxisLabelTopMargin
property to apply a margin above the x-axis labels.
this.chart.xAxisTitleTopMargin="250";
<IgrCategoryChart
xAxisTitleTopMargin ={250}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets 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>
Gets 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>
Gets or sets the color to apply to major gridlines along the X-axis.
Set XAxisMajorStroke
to control the color of major gridlines extending vertically from the x-axis.
this.chart.xAxisMajorStroke="green";
<IgrCategoryChart
xAxisMajorStroke="green"
dataSource={this.state.data} >
</IgrCategoryChart>
Gets or sets the thickness to apply to major gridlines along the X-axis.
Set XAxisMajorStrokeThickness
to control the thickness of major gridlines extending vertically from the x-axis.
this.chart.xAxisMajorStrokeThickness="3" ;
<IgrCategoryChart
xAxisMajorStrokeThickness="3"
xAxisExtent ={250}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets the color to apply to minor gridlines along the X-axis.
Set XAxisMinorStroke
to control the color of minor gridlines extending vertically from the x-axis.
this.chart.xAxisExtent="250";
<IgrCategoryChart
xAxisMinorStroke="green"
dataSource={this.state.data}>
</IgrCategoryChart>
Gets or sets the thickness to apply to minor gridlines along the X-axis.
Set XAxisMinorStrokeThickness
to control the thickness of minor gridlines extending vertically from the x-axis.
this.chart.xAxisMinorStrokeThickness="3";
<IgrCategoryChart
xAxisMinorStrokeThickness="3"
dataSource={this.state.data} >
</IgrCategoryChart>
Gets or sets the color to apply to stripes along the X-axis.
Set XAxisStrip
to control the alternating color of stripes extending vertically from the x-axis.
this.chart.xAxisStrip="green";
<IgrCategoryChart
xAxisStrip="green"
dataSource={this.state.data} >
</IgrCategoryChart>
Gets 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>
Gets 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>
Gets or sets the length of tickmarks along the X-axis.
Set XAxisTickLength
to control the length of tickmarks extending vertically from the x-axis line.
this.chart.xAxisTickLength="25";
<IgrCategoryChart
xAxisTickLength ={25}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets the color to apply to tickmarks along the X-axis.
Set XAxisTickStroke
to control the color of tickmarks extending vertically from the x-axis line.
this.chart. xAxisTickStroke="green";
<IgrCategoryChart
xAxisTickStroke="green"
dataSource={this.state.data}>
</IgrCategoryChart>
Gets or sets the thickness to apply to tickmarks along the X-axis.
Set XAxisTickStrokeThickness
to control the thickness of tickmarks extending vertically from the x-axis line.
this.chart.xAxisTickStrokeThickness="20";
<IgrCategoryChart
xAxisTickStrokeThickness={20}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets 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>
Gets 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>
Gets 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>
Gets or sets the bottom margin of a title on the X-axis
Use the XAxisTitleBottomMargin
property to apply a margin below the x-axis title.
this.chart.xAxisTitleBottomMargin="150";
<IgrCategoryChart
xAxisTitleBottomMargin={250}
dataSource={this.state.data}>
</IgrCategoryChart>
Gets or sets the left margin of a title on the X-axis
Use the XAxisTitleLeftMargin
property to apply a margin left of the x-axis title.
this.chart.xAxisTitleLeftMargin="150";
<IgrCategoryChart
xAxisTitleLeftMargin={150}
dataSource={this.state.data}>
</IgrCategoryChart>
Gets or sets the margin around a title on the X-axis
Use the XAxisTitleMargin
property to set a margin around the y-axis title.
Gets or sets the right margin of a title on the X-axis
Use the XAxisTitleRightMargin
property to apply a margin right of the x-axis title.
this.chart.xAxisTitleRightMargin="100";
<IgrCategoryChart
xAxisTitleRightMargin="100"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets color of title on the X-axis
To change the color of the x-axis title, set the XAxisTitleTextColor
property to a color string.
this.chart.xAxisTitleTextColor="green";
<IgrCategoryChart
xAxisTitleTextColor="green"
dataSource={this.state.data} >
</IgrCategoryChart>
Gets 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>
Gets or sets the top margin of a title on the X-axis
Use the XAxisTitleTopMargin
property to apply a margin above the x-axis title.
this.chart.xAxisTitleTopMargin="150";
<IgrCategoryChart
xAxisTitleTopMargin ={150}
dataSource={this.state.data} >
</IgrCategoryChart>
Gets or sets the distance between the Y-axis and the left edge of the chart.
To allocate space between the x-axis and the edge of the chart, set the XAxisExtent
property.
this.chart.xAxisExtent="250";
<IgrCategoryChart
xAxisExtent ={250}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets function which takes a context object and returns a formatted label for the Y-axis.
To customize the text of the y-axis label, set YAxisFormatLabel
to a single-parameter function. The argument passed to that function will be the numeric value corresponding to a position on the y-axis.
formatY(value: any): string {
return "[ " + value+ "! ]";
}
<IgrCategoryChart
yAxisFormatLabel="formatY"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets function which takes a context object and returns a formatted label for the Y-axis.
To customize the text of the y-axis label, set YAxisFormatLabel
to a single-parameter function. The argument passed to that function will be the numeric value corresponding to a position on the y-axis.
formatY(value: any): string {
return "[ " + value+ "! ]";
}
<IgrCategoryChart
yAxisFormatLabel="formatY"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets whether to invert the direction of the Y-axis by placing the minimum numeric value at the top of the chart.
You can use YAxisInverted
to invert the scale of the y axis like this:
this.chart.yAxisInverted="true";
<IgrCategoryChart
yAxisInverted="true"
dataSource={this.state.data}>
</IgrCategoryChart>
The default value of YAxisInverted
is false.
Gets or sets the property or string from which the labels are derived.
Gets or sets the angle of rotation for labels along the Y-axis.
To control the rotation of labels on the y-axis, set the YAxisLabelAngle
property to a number of rotational degrees.
this.chart.yAxisLabelAngle="25";
<IgrCategoryChart
yAxisLabelAngle ={25}
dataSource={this.state.data} >
</IgrCategoryChart>
Gets or sets the bottom margin of labels on the Y-axis
Use the YAxisLabelBottomMargin
property to apply a margin below the y-axis labels.
this.chart.yAxisLabelBottomMargin="250";
<IgrCategoryChart
yAxisLabelBottomMargin={250}
dataSource={this.state.data} >
</IgrCategoryChart>
Gets or sets the format string for the Y axis label.
Gets or sets the format specifiers to use with the YAxisLabelFormat string.
Gets or sets Horizontal alignment of Y-axis labels.
Set the YAxisLabelHorizontalAlignment
property to change the horizontal alignment of y-axis labels.
Gets or sets the left margin of labels on the Y-axis
Use the YAxisLabelLeftMargin
property to apply a margin left of the y-axis labels.
this.chart. yAxisLabelLeftMargin="250";
<IgrCategoryChart
yAxisLabelLeftMargin={250}
dataSource={this.state.data} >
</IgrCategoryChart>
Gets 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>
Gets or sets the right margin of labels on the Y-axis
Use the YAxisLabelRightMargin
property to apply a margin right of the y-axis labels.
this.chart.yAxisLabelRightMargin="250";
<IgrCategoryChart
yAxisLabelRightMargin={250}
dataSource={this.state.data} >
</IgrCategoryChart>
Gets or sets color of labels on the Y-axis
To change the color of y-axis labels, set the YAxisLabelTextColor
property to a color string.
this.chart.yAxisLabelTextColor="green";
<IgrCategoryChart
yAxisLabelTextColor="green"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets 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>
Gets or sets the top margin of labels on the Y-axis
Use the YAxisLabelTopMargin
property to apply a margin above the y-axis labels.
this.chart.yAxisLabelTopMargin="250";
<IgrCategoryChart
yAxisLabelTopMargin ={250}
dataSource={this.state.data} >
</IgrCategoryChart>
Gets or sets Vertical alignment of Y-axis labels.
Gets or sets Visibility of Y-axis labels.
To hide the y-axis labels, set YAxisLabelVisibility
to collapsed.
this.chart.yAxisLabelVisibility="collapsed"";
<IgrCategoryChart
yAxisLabelVisibility="collapsed"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets the color to apply to major gridlines along the Y-axis.
Set YAxisMajorStroke
to control the color of major gridlines extending horizontally from the y-axis.
this.chart.yAxisMajorStroke="green";
<IgrCategoryChart
yAxisMajorStroke="green"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets the thickness to apply to major gridlines along the Y-axis.
Set YAxisMajorStrokeThickness
to control the thickness of major gridlines extending horizontally from the y-axis.
this.chart.yAxisMajorStrokeThickness="2";
<IgrCategoryChart
yAxisMajorStrokeThickness={2}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets the color to apply to minor gridlines along the Y-axis.
Set YAxisMinorStroke
to control the color of minor gridlines extending horizontally from the y-axis.
this.chart.yAxisMinorStroke="green";
<IgrCategoryChart
yAxisMinorStroke="green"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets the thickness to apply to minor gridlines along the Y-axis.
Set YAxisMinorStrokeThickness
to control the thickness of minor gridlines extending horizontally from the y-axis.
this.chart.yAxisMinorStrokeThickness="3";
<IgrCategoryChart
yAxisMinorStrokeThickness={3}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets the color to apply to stripes along the Y-axis.
Set YAxisStrip
to control the alternating color of stripes extending horizontally from the y-axis.
this.chart.yAxisStrip="green";
<IgrCategoryChart
yAxisStrip="green"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets 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>
Gets 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>
Gets or sets the length of tickmarks along the Y-axis.
Set YAxisTickLength
to control the length of tickmarks extending horizontally from the y-axis line.
this.chart.yAxisTickLength="25";
<IgrCategoryChart
yAxisTickLength ={25}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets the color to apply to tickmarks along the Y-axis.
Set YAxisTickStroke
to control the color of tickmarks extending horizontally from the y-axis line.
this.chart.yAxisTickStroke="green";
<IgrCategoryChart
yAxisTickStroke="green"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets the thickness to apply to tickmarks along the Y-axis.
Set YAxisTickStrokeThickness
to control the thickness of tickmarks extending vertically from the y-axis line.
this.chart.yAxisTickStrokeThickness="25";
<IgrCategoryChart
yAxisTickStrokeThickness ={25}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets the Text to display to the left of the Y-axis.
Set YAxisTitle
to display a label adjacent to the y-axis.
this.chart.yAxisTitle="y axis";
<IgrCategoryChart
yAxisTitle="y axis"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets 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>
Gets 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>
Gets or sets the bottom margin of a title on the Y-axis
Use the YAxisTitleBottomMargin
property to apply a margin below the y-axis title.
this.chart.yAxisTitleBottomMargin="150";
<IgrCategoryChart
yAxisTitleBottomMargin ={150}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets the left margin of a title on the Y-axis
Use the YAxisTitleLeftMargin
property to apply a margin left of the y-axis title.
this.chart.yAxisTitleLeftMargin="150";
<IgrCategoryChart
yAxisTitleLeftMargin={150}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets the margin around a title on the Y-axis
Use the YAxisTitleMargin
property to set a margin around the y-axis title.
Gets or sets the right margin of a title on the Y-axis
Use the YAxisTitleRightMargin
property to apply a margin right of the y-axis title.
this.chart.yAxisTitleRightMargin="150";
<IgrCategoryChart
yAxisTitleRightMargin={150}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets or sets color of title on the Y-axis
To change the color of the y-axis title, set the YAxisTitleTextColor
property to a color string.
this.chart.yAxisTitleTextColor="green";
<IgrCategoryChart
yAxisTitleTextColor="green"
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Gets 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>
Gets or sets the top margin of a title on the Y-axis
Use the YAxisTitleTopMargin
property to apply a margin above the y-axis title.
this.chart.yAxisTitleTopMargin="150";
<IgrCategoryChart
yAxisTitleTopMargin ={150}
dataSource={this.state.data}
chartType="stepArea" >
</IgrCategoryChart>
Optional
UNSAFE_Called immediately before mounting occurs, and before Component#render
.
Avoid introducing any side-effects or subscriptions in this method.
This method will not stop working in React 17.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
16.3, use componentDidMount or the constructor instead
Optional
UNSAFE_Called when the component may be receiving new props. React may call this even if props have not changed, so be sure to compare new and existing props if you only want to handle changes.
Calling Component#setState
generally does not trigger this method.
This method will not stop working in React 17.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
16.3, use static getDerivedStateFromProps instead
Optional
UNSAFE_Called immediately before rendering when new props or state is received. Not called for the initial render.
Note: You cannot call Component#setState
here.
This method will not stop working in React 17.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
16.3, use getSnapshotBeforeUpdate instead
Optional
componentOptional
componentCalled immediately after updating occurs. Not called for the initial render.
The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.
Optional
componentCalled immediately before mounting occurs, and before Component#render
.
Avoid introducing any side-effects or subscriptions in this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
16.3, use componentDidMount or the constructor instead; will stop working in React 17
Optional
componentCalled when the component may be receiving new props. React may call this even if props have not changed, so be sure to compare new and existing props if you only want to handle changes.
Calling Component#setState
generally does not trigger this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
16.3, use static getDerivedStateFromProps instead; will stop working in React 17
Optional
componentOptional
componentCalled immediately before rendering when new props or state is received. Not called for the initial render.
Note: You cannot call Component#setState
here.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17
Optional
getRuns before React applies the result of render
to the document, and
returns an object to be given to componentDidUpdate. Useful for saving
things such as scroll position before render
causes changes to it.
Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated lifecycle events from running.
Used to manually notify the chart that the data source has reset or cleared its items.
Use notifyClearItems
method to notifies the chart that the items have been cleared from an associated data source.
this.chart.notifyClearItems(this.data);
Represents a base class for domain charts with X/Y axes