Class IgrDomainChart<P, SS>

Type parameters

Hierarchy

Constructors

Properties

Accessors

Methods

Constructors

constructor

  • Parameters

    • props: P

    Returns IgrDomainChart

Properties

context

context: any

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType.

static contextType = MyContext
context!: React.ContextType<typeof MyContext>
deprecated

if used without a type annotation, or without static contextType

see

https://reactjs.org/docs/legacy-context.html

props

props: Readonly<P> & Readonly<object>

refs

refs: object

Type declaration

  • [key: string]: ReactInstance

state

state: Readonly<__type>

Static Optional contextType

contextType: Context<any>

If 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}</>;
  }
}
see

https://reactjs.org/docs/context.html#classcontexttype

Accessors

alignsGridLinesToPixels

  • get alignsGridLinesToPixels(): boolean
  • set alignsGridLinesToPixels(v: boolean): void
  • 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;

    Returns boolean

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

    Parameters

    • v: boolean

    Returns void

animateSeriesWhenAxisRangeChanges

  • get animateSeriesWhenAxisRangeChanges(): boolean
  • set animateSeriesWhenAxisRangeChanges(v: boolean): void
  • Gets or sets whether the series animations should be allowed when a range change has been detected on an axis.

    Returns boolean

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

    Parameters

    • v: boolean

    Returns void

bottomMargin

  • get bottomMargin(): number
  • set bottomMargin(v: number): void
  • 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 />

    Returns number

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

    Parameters

    • v: number

    Returns void

brushes

  • get brushes(): string[]
  • set brushes(v: string[]): void
  • 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"];

    Returns string[]

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

    Parameters

    • v: string[]

    Returns void

calloutStyleUpdating

  • get calloutStyleUpdating(): function
  • set calloutStyleUpdating(ev: function): void

calloutStyleUpdatingEventEnabled

  • get calloutStyleUpdatingEventEnabled(): boolean
  • set calloutStyleUpdatingEventEnabled(v: boolean): void
  • Gets or sets if event annotations should be displayed.

    Returns boolean

  • Gets or sets if event annotations should be displayed.

    Parameters

    • v: boolean

    Returns void

calloutsContentMemberPath

  • get calloutsContentMemberPath(): string
  • set calloutsContentMemberPath(v: string): void
  • Gets or sets the member path of the content data for the callouts.

    Returns string

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

    Parameters

    • v: string

    Returns void

calloutsDataSource

  • get calloutsDataSource(): any[]
  • set calloutsDataSource(value: any[]): void
  • Returns any[]

  • Parameters

    • value: any[]

    Returns void

calloutsLabelMemberPath

  • get calloutsLabelMemberPath(): string
  • set calloutsLabelMemberPath(v: string): void
  • Gets or sets the member path of the label data for the callouts.

    Returns string

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

    Parameters

    • v: string

    Returns void

calloutsVisible

  • get calloutsVisible(): boolean
  • set calloutsVisible(v: boolean): void
  • Gets or sets if callouts should be displayed.

    Returns boolean

  • Gets or sets if callouts should be displayed.

    Parameters

    • v: boolean

    Returns void

calloutsXMemberPath

  • get calloutsXMemberPath(): string
  • set calloutsXMemberPath(v: string): void
  • Gets or sets the member path of the X data for the callouts.

    Returns string

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

    Parameters

    • v: string

    Returns void

calloutsYMemberPath

  • get calloutsYMemberPath(): string
  • set calloutsYMemberPath(v: string): void
  • Gets or sets the member path of the Y data for the callouts.

    Returns string

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

    Parameters

    • v: string

    Returns void

chartTitle

  • get chartTitle(): string
  • set chartTitle(v: string): void
  • Gets or sets text to display above the plot area.

    Use the chartTitle 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"    />

    Returns string

  • Gets or sets text to display above the plot area.

    Use the chartTitle 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"    />

    Parameters

    • v: string

    Returns void

crosshairsAnnotationEnabled

  • get crosshairsAnnotationEnabled(): boolean
  • set crosshairsAnnotationEnabled(v: boolean): void
  • Gets or sets whether annotations are shown along the axis for crosshair values

    Returns boolean

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

    Parameters

    • v: boolean

    Returns void

crosshairsDisplayMode

  • Gets or sets the crosshairs to be displayed.

    Returns CrosshairsDisplayMode

  • Gets or sets the crosshairs to be displayed.

    Parameters

    Returns void

crosshairsSnapToData

  • get crosshairsSnapToData(): boolean
  • set crosshairsSnapToData(v: boolean): void
  • Gets or sets whether crosshairs will snap to the nearest data point.

    Returns boolean

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

    Parameters

    • v: boolean

    Returns void

excludedProperties

  • get excludedProperties(): string[]
  • set excludedProperties(v: string[]): void
  • 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" />

    Returns string[]

  • 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" />

    Parameters

    • v: string[]

    Returns void

finalValueAnnotationsVisible

  • get finalValueAnnotationsVisible(): boolean
  • set finalValueAnnotationsVisible(v: boolean): void
  • Gets or sets whether annotations for the final value of each series is displayed on the axis.

    Returns boolean

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

    Parameters

    • v: boolean

    Returns void

i

  • get i(): DomainChart
  • Returns DomainChart

includedProperties

  • get includedProperties(): string[]
  • set includedProperties(v: string[]): void
  • 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" />

    Returns string[]

  • 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" />

    Parameters

    • v: string[]

    Returns void

isHorizontalZoomEnabled

  • get isHorizontalZoomEnabled(): boolean
  • set isHorizontalZoomEnabled(v: boolean): void
  • 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;

    Returns boolean

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

    Parameters

    • v: boolean

    Returns void

isSeriesHighlightingEnabled

  • get isSeriesHighlightingEnabled(): boolean
  • set isSeriesHighlightingEnabled(v: boolean): void
  • Gets or sets whether the chart can highlight series through user interactions. This property applies to Category Chart and Financial Chart controls.

    Returns boolean

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

    Parameters

    • v: boolean

    Returns void

isVerticalZoomEnabled

  • get isVerticalZoomEnabled(): boolean
  • set isVerticalZoomEnabled(v: boolean): void
  • 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"/>

    Returns boolean

  • 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"/>

    Parameters

    • v: boolean

    Returns void

leftMargin

  • get leftMargin(): number
  • set leftMargin(v: number): void
  • 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}/>

    Returns number

  • 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}/>

    Parameters

    • v: number

    Returns void

legend

  • get legend(): any
  • set legend(v: any): void
  • Returns any

  • Parameters

    • v: any

    Returns void

markerBrushes

  • get markerBrushes(): string[]
  • set markerBrushes(v: string[]): void
  • 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}/>

    Returns string[]

  • 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}/>

    Parameters

    • v: string[]

    Returns void

markerMaxCount

  • get markerMaxCount(): number
  • set markerMaxCount(v: number): void
  • Gets or sets the maximum number of markers displyed 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}/>

    Returns number

  • Gets or sets the maximum number of markers displyed 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}/>

    Parameters

    • v: number

    Returns void

markerOutlines

  • get markerOutlines(): string[]
  • set markerOutlines(v: string[]): void
  • 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}/>

    Returns string[]

  • 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}/>

    Parameters

    • v: string[]

    Returns void

markerTypes

  • 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

    Returns IgrMarkerTypeCollection

  • 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

    Parameters

    Returns void

outlines

  • get outlines(): string[]
  • set outlines(v: string[]): void
  • 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}/>

    Returns string[]

  • 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}/>

    Parameters

    • v: string[]

    Returns void

pixelScalingRatio

  • get pixelScalingRatio(): number
  • set pixelScalingRatio(v: number): void
  • 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.

    Returns number

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

    Parameters

    • v: number

    Returns void

resolution

  • get resolution(): number
  • set resolution(v: number): void
  • 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 datapoint. When Resolution = 0, all datapoints 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}/>

    Returns number

  • 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 datapoint. When Resolution = 0, all datapoints 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}/>

    Parameters

    • v: number

    Returns void

rightMargin

  • get rightMargin(): number
  • set rightMargin(v: number): void
  • 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}/>

    Returns number

  • 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}/>

    Parameters

    • v: number

    Returns void

seriesAdded

  • get seriesAdded(): function
  • set seriesAdded(ev: function): void
  • 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)
    {
    }

    Returns function

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

    Parameters

    Returns void

seriesPointerDown

  • get seriesPointerDown(): function
  • set seriesPointerDown(ev: function): void
  • 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)
      {
    
      }

    Returns function

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

    Parameters

    Returns void

seriesPointerEnter

  • get seriesPointerEnter(): function
  • set seriesPointerEnter(ev: function): void
  • 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)
      {
    
      }

    Returns function

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

    Parameters

    Returns void

seriesPointerLeave

  • get seriesPointerLeave(): function
  • set seriesPointerLeave(ev: function): void
  • 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)
      {
    
      }

    Returns function

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

    Parameters

    Returns void

seriesPointerMove

  • get seriesPointerMove(): function
  • set seriesPointerMove(ev: function): void
  • 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)
      {
    
      }

    Returns function

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

    Parameters

    Returns void

seriesPointerUp

  • get seriesPointerUp(): function
  • set seriesPointerUp(ev: function): void
  • 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)
      {
    
      }

    Returns function

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

    Parameters

    Returns void

seriesRemoved

  • get seriesRemoved(): function
  • set seriesRemoved(ev: function): void
  • 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)
      {
    
      }

    Returns function

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

    Parameters

    Returns void

subtitle

  • get subtitle(): string
  • set subtitle(v: string): void
  • 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" ;

    Returns string

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

    Parameters

    • v: string

    Returns void

subtitleAlignment

  • get subtitleAlignment(): HorizontalAlignment
  • set subtitleAlignment(v: HorizontalAlignment): void
  • 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;

    Returns HorizontalAlignment

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

    Parameters

    • v: HorizontalAlignment

    Returns void

subtitleBottomMargin

  • get subtitleBottomMargin(): number
  • set subtitleBottomMargin(v: number): void
  • 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 ;

    Returns number

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

    Parameters

    • v: number

    Returns void

subtitleLeftMargin

  • get subtitleLeftMargin(): number
  • set subtitleLeftMargin(v: number): void
  • 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}/>

    Returns number

  • 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}/>

    Parameters

    • v: number

    Returns void

subtitleRightMargin

  • get subtitleRightMargin(): number
  • set subtitleRightMargin(v: number): void
  • 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}/>

    Returns number

  • 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}/>

    Parameters

    • v: number

    Returns void

subtitleTextColor

  • get subtitleTextColor(): string
  • set subtitleTextColor(v: string): void
  • 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"/>

    Returns string

  • 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"/>

    Parameters

    • v: string

    Returns void

subtitleTextStyle

  • get subtitleTextStyle(): string
  • set subtitleTextStyle(v: string): void
  • 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"/>

    Returns string

  • 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"/>

    Parameters

    • v: string

    Returns void

subtitleTopMargin

  • get subtitleTopMargin(): number
  • set subtitleTopMargin(v: number): void
  • 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}/>

    Returns number

  • 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}/>

    Parameters

    • v: number

    Returns void

thickness

  • get thickness(): number
  • set thickness(v: number): void
  • 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.

    Returns number

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

    Parameters

    • v: number

    Returns void

titleAlignment

  • get titleAlignment(): HorizontalAlignment
  • set titleAlignment(v: HorizontalAlignment): void
  • 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"/>

    Returns HorizontalAlignment

  • 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"/>

    Parameters

    • v: HorizontalAlignment

    Returns void

titleBottomMargin

  • get titleBottomMargin(): number
  • set titleBottomMargin(v: number): void
  • 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}/>

    Returns number

  • 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}/>

    Parameters

    • v: number

    Returns void

titleLeftMargin

  • get titleLeftMargin(): number
  • set titleLeftMargin(v: number): void
  • 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>

    Returns number

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

    Parameters

    • v: number

    Returns void

titleRightMargin

  • get titleRightMargin(): number
  • set titleRightMargin(v: number): void
  • 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>

    Returns number

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

    Parameters

    • v: number

    Returns void

titleTextColor

  • get titleTextColor(): string
  • set titleTextColor(v: string): void
  • 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" />
    

    Returns string

  • 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" />
    

    Parameters

    • v: string

    Returns void

titleTextStyle

  • get titleTextStyle(): string
  • set titleTextStyle(v: string): void
  • 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>

    Returns string

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

    Parameters

    • v: string

    Returns void

titleTopMargin

  • get titleTopMargin(): number
  • set titleTopMargin(v: number): void
  • 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} />

    Returns number

  • 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} />

    Parameters

    • v: number

    Returns void

toolTipType

  • Gets or sets the style of tooltip to be displayed.

    Returns ToolTipType

  • Gets or sets the style of tooltip to be displayed.

    Parameters

    Returns void

tooltipTemplate

  • get tooltipTemplate(): React.SFC<IChartTooltipProps> | Component<IChartTooltipProps>
  • set tooltipTemplate(v: React.SFC<IChartTooltipProps> | Component<IChartTooltipProps>): void
  • Sets or gets the template reference to use for tooltips for all the series.

    Returns React.SFC<IChartTooltipProps> | Component<IChartTooltipProps>

  • Sets or gets the template reference to use for tooltips for all the series.

    Parameters

    • v: React.SFC<IChartTooltipProps> | Component<IChartTooltipProps>

    Returns void

tooltipTemplates

  • get tooltipTemplates(): (FunctionComponent<IChartTooltipProps> | Component<IChartTooltipProps, __type, any>)[]
  • set tooltipTemplates(v: (FunctionComponent<IChartTooltipProps> | Component<IChartTooltipProps, __type, any>)[]): void
  • Sets or gets the template references to use for tooltips for all the series, in order.

    Returns (FunctionComponent<IChartTooltipProps> | Component<IChartTooltipProps, __type, any>)[]

  • Sets or gets the template references to use for tooltips for all the series, in order.

    Parameters

    • v: (FunctionComponent<IChartTooltipProps> | Component<IChartTooltipProps, __type, any>)[]

    Returns void

topMargin

  • get topMargin(): number
  • set topMargin(v: number): void
  • 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} />

    Returns number

  • 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} />

    Parameters

    • v: number

    Returns void

transitionDuration

  • get transitionDuration(): number
  • set transitionDuration(v: number): void
  • 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} />

    Returns number

  • 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} />

    Parameters

    • v: number

    Returns void

transitionEasingFunction

  • get transitionEasingFunction(): function
  • set transitionEasingFunction(v: function): void
  • 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" />

    Returns function

      • (time: number): number
      • Parameters

        • time: number

        Returns number

  • 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" />

    Parameters

    • v: function
        • (time: number): number
        • Parameters

          • time: number

          Returns number

    Returns void

trendLineBrushes

  • get trendLineBrushes(): string[]
  • set trendLineBrushes(v: string[]): void
  • 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" />

    Returns string[]

  • 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" />

    Parameters

    • v: string[]

    Returns void

trendLinePeriod

  • get trendLinePeriod(): number
  • set trendLinePeriod(v: number): void
  • Returns number

  • Parameters

    • v: number

    Returns void

trendLineThickness

  • get trendLineThickness(): number
  • set trendLineThickness(v: number): void
  • 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} />

    Returns number

  • 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} />

    Parameters

    • v: number

    Returns void

trendLineType

  • get trendLineType(): TrendLineType
  • set trendLineType(v: TrendLineType): void
  • 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" />

    Returns TrendLineType

  • 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" />

    Parameters

    • v: TrendLineType

    Returns void

unknownValuePlotting

  • get unknownValuePlotting(): UnknownValuePlotting
  • set unknownValuePlotting(v: UnknownValuePlotting): void
  • 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" />

    Returns UnknownValuePlotting

  • 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" />

    Parameters

    • v: UnknownValuePlotting

    Returns void

viewport

  • get viewport(): IgRect
  • 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;

    Returns IgRect

windowRect

  • get windowRect(): IgRect
  • set windowRect(v: IgRect): void
  • 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} />

    Returns IgRect

  • 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} />

    Parameters

    • v: IgRect

    Returns void

Methods

Optional UNSAFE_componentWillMount

  • UNSAFE_componentWillMount(): void

Optional UNSAFE_componentWillReceiveProps

  • UNSAFE_componentWillReceiveProps(nextProps: Readonly<P>, nextContext: any): void

Optional UNSAFE_componentWillUpdate

  • UNSAFE_componentWillUpdate(nextProps: Readonly<P>, nextState: Readonly<__type>, nextContext: any): void

bindCalloutsData

  • bindCalloutsData(): void
  • Returns void

Optional componentDidCatch

  • componentDidCatch(error: Error, errorInfo: ErrorInfo): void
  • Catches exceptions generated in descendant components. Unhandled exceptions will cause the entire component tree to unmount.

    Parameters

    • error: Error
    • errorInfo: ErrorInfo

    Returns void

componentDidMount

  • componentDidMount(): void
  • Returns void

Optional componentDidUpdate

  • componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<__type>, snapshot?: SS): void
  • Called immediately after updating occurs. Not called for the initial render.

    The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.

    Parameters

    • prevProps: Readonly<P>
    • prevState: Readonly<__type>
    • Optional snapshot: SS

    Returns void

Optional componentWillMount

  • componentWillMount(): void

Optional componentWillReceiveProps

  • componentWillReceiveProps(nextProps: Readonly<P>, nextContext: any): void

Optional componentWillUnmount

  • componentWillUnmount(): void
  • Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as cancelled network requests, or cleaning up any DOM elements created in componentDidMount.

    Returns void

Optional componentWillUpdate

  • componentWillUpdate(nextProps: Readonly<P>, nextState: Readonly<__type>, nextContext: any): void

destroy

  • destroy(): void
  • Destroy this control

    Use the destroy property to destroy the chart.

    this.chart.destroy();

    Returns void

flush

  • flush(): void
  • Forces any pending refresh to the chart to be finished.

    Method flush used to Forces any pending deferred work to render on the chart before continuing.

    this.chart.flush();

    Returns void

forceUpdate

  • forceUpdate(callBack?: function): void
  • Parameters

    • Optional callBack: function
        • (): void
        • Returns void

    Returns void

Optional getSnapshotBeforeUpdate

  • getSnapshotBeforeUpdate(prevProps: Readonly<P>, prevState: Readonly<__type>): SS | null
  • Runs 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.

    Parameters

    • prevProps: Readonly<P>
    • prevState: Readonly<__type>

    Returns SS | null

hideToolTip

  • hideToolTip(): void
  • Hides the active main tooltip, if displayed.

    Use the hideToolTip method to hide the active tooltip.

    this.chart.hideToolTip();

    Returns void

notifyClearItems

  • notifyClearItems(source_: any): void
  • 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);

    Parameters

    • source_: any

    Returns void

notifyInsertItem

  • notifyInsertItem(source_: any, index: number, newItem: any): void
  • Parameters

    • source_: any
    • index: number
    • newItem: any

    Returns void

notifyRemoveItem

  • notifyRemoveItem(source_: any, index: number, oldItem: any): void
  • Parameters

    • source_: any
    • index: number
    • oldItem: any

    Returns void

notifyResized

  • notifyResized(): void
  • Called when the control has been resized.

    notifyResized method Called when the control has been resized.

    this.chart.notifyResized();

    Returns void

notifySetItem

  • notifySetItem(source_: any, index: number, oldItem: any, newItem: any): void
  • Parameters

    • source_: any
    • index: number
    • oldItem: any
    • newItem: any

    Returns void

notifyVisualPropertiesChanged

  • notifyVisualPropertiesChanged(): void
  • Returns void

provideContainer

  • provideContainer(container: any): void
  • Provides a container for this control

    provideContainer method provide container for the control.

        this.chart.provideContainer("Container");

    Parameters

    • container: any

    Returns void

render

  • render(): any
  • Returns any

setState

  • setState<K>(state: function | S | object, callback?: function): void
  • Type parameters

    • K: keyof __type

    Parameters

    • state: function | S | object
    • Optional callback: function
        • (): void
        • Returns void

    Returns void

shouldComponentUpdate

  • shouldComponentUpdate(nextProps: any, nextState: any): boolean
  • Parameters

    • nextProps: any
    • nextState: any

    Returns boolean