Interface IIgrScatterPolylineSeriesProps

Hierarchy

Properties

Optional actualAreaFillOpacity

actualAreaFillOpacity: number | string

Gets the actual opacity applied to the area fill visual.

let actualFillOpacity: number = series.actualAreaFillOpacity;

Optional actualBrush

actualBrush: string

Gets the effective brush for the current series object.

let actualBrush: string = series.actualBrush;

Optional actualHitTestMode

actualHitTestMode: SeriesHitTestMode | string

Resolved method of hit testing to use when pointing to items in the chart.

let hitTestMode: SeriesHitTestMode = this.series.actualHitTestMode;

Optional actualOutline

actualOutline: string

Gets the effective outline for the current series object.

let actualOutline: string = series.ActualOutline;

Optional areaFillOpacity

areaFillOpacity: number | string

Gets or sets the opacity applied to the area fill visual. This property only applies to series that have area visual.

 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
   actualAreaFillOpacity= {1} />
 </IgrDataChart>

Optional brush

brush: string

Gets or sets the brush to use for the series.

The brush along with the outline and Negative Brush can be used to affect the visuals of the IgrSeries.

this.series.brush = "red";
 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    brush="Gray"
    outline="Black" />
 </IgrDataChart>

Optional coercionMethods

coercionMethods: any

Gets or sets the coercion methods to use when loading data from data sources. Should be specified before setting any member paths, if being used. Setting it later will not cause data to be reimported into the chart.

<-- position: content member-->

cMethods: any = {
    ValueCoercion: function(value:number): number {return value+2;}
 }
 <IgrDataChart
    dataSource={this.state.dataSource}
    width="700px"
    height="500px">

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrScatterPolygonSeries
     name="series1"
     shapeMemberPath="Points"
     title="House Floor Plan"
     brush="Gray"
     outline="Black"
     coercionMethods = {this.ValueCoercion} />
 </IgrDataChart>

Optional dataSource

dataSource: any

Optional discreteLegendItemTemplate

discreteLegendItemTemplate: IgDataTemplate

Gets or sets the DiscreteLegendItemTemplate property. The legend item control content is created according to the DiscreteLegendItemTemplate on-demand by the series object itself.

Optional expectFunctions

expectFunctions: boolean | string

Gets or sets whether the series should expect that properties in its items source may be functions that need to be evaluated to yield their value. This defaults to false, as there will be a subtle performance impact to using this feature. This value must be set before assigning an item's source to take effect.

expectFunctions is used to decide whether the series should expect that its data source members need to be called as functions to get their values.

 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="MyFunction"
    expectFunctions={true} />
 </IgrDataChart>
this.series.expectFunctions=true;

Optional finalValue

finalValue: number | string

The final value of this series.

Optional hitTestMode

hitTestMode: SeriesHitTestMode | string

Method of hit testing to use when pointing to items in this series.

The hitTestMode can be set to either:

  • Auto: automatically decide the appropriate hit test mode for the series.
  • ColorEncoded: use a color encoded off screen buffer for hit testing. Should always be O(1) time for determining a hit series. This increases frame render time and memory usage, however. Consider using this if hit testing time is degrading performance.
  • Computational: use a computational based approach to determine whether the series has been hit. This uses loose bounding boxes, in some cases, and can range in time complexity between O(1) and O(log n) to find a hit. This decreases frame render time compared to color encoded
this.series.hitTestMode = SeriesHitTestMode.Computational;

Optional isDefaultToolTipSelected

isDefaultToolTipSelected: boolean | string

Gets if the default tooltip has been selected for display.

To use the default tooltip set showDefaultTooltip to true.

let isDefaultToolTipSelected: boolean = this.series.isDefaultToolTipSelected;

Optional isDropShadowEnabled

isDropShadowEnabled: boolean | string

Gets or sets whether drop shadow should be enabled for this series.

isDropShadowEnabled is used to decide whether drop shadow should be enabled for this series.

this.series.isDropShadowEnabled = true;
<IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    isDropShadowEnabled="true" />
 </IgrDataChart>

Optional isHighlightingEnabled

isHighlightingEnabled: boolean | string

Gets or sets whether highlighting should be enabled for this series, if this type of series supports highlighting.

this.series.isHighlightingEnabled = true;
<IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    isHighlightingEnabled="true" />
 </IgrDataChart>

Optional legendItemBadgeTemplate

legendItemBadgeTemplate: IgDataTemplate

Gets or sets the LegendItemBadgeTemplate property. The legend item badge is created according to the LegendItemBadgeTemplate on-demand by the series object itself.

Optional legendItemTemplate

legendItemTemplate: IgDataTemplate

Gets or sets the LegendItemTemplate property. The legend item control content is created according to the LegendItemTemplate on-demand by the series object itself.

Optional legendItemVisibility

legendItemVisibility: Visibility | string

Gets or sets the legend item visibility for the current series object.

The LegendItemVisibilty can be used to exclude only certain IgrSeries from the IgrLegend.

 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    legendItemVisibility= "collapsed" />
 </IgrDataChart>

Optional mouseOverEnabled

mouseOverEnabled: boolean | string

Gets or sets the whether the chart reacts to mouse move events.

name

name: string

Sets or gets a required unique name for the series.

Optional outline

outline: string

Gets or sets the brush to use for the outline of the series. Some series types, such as LineSeries, do not display outlines. Therefore, this property does not affect some charts.

The outline along with the brush and NegativeBrush can be used to affect the visuals of the IgrSeries.

this.series.brush = "red";
 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    brush="Gray"
    outline="Black" />
 </IgrDataChart>

Optional percentChange

percentChange: number | string

The percent change from the beginning to the end of this series.

Optional renderRequested

renderRequested: function

This event is raised every time a render has been requested from a series.

 const series1 = new IgrAreaSeries({ name: "series1" });
series1.valueMemberPath = "USA";
series1.title = "USA";
series1.xAxisName = "xAxis";
series1.yAxisName = "yAxis";
series1.renderRequested= this.onRenderRequested;

public onRenderRequested =( s:IgrSeries, e: RenderRequestedEventArgs) => {
          }
 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    shadowBlur="7"
    shadowColor="blue"
    renderRequested= {this.onRenderRequested}/>
 </IgrDataChart>

Type declaration

Optional resolution

resolution: number | string

Gets or sets the current series object's rendering resolution.

Setting the resolution on a Series to a higher value can help with performance, but it will lower the graphical fidelity of the line. As such, it can be increased up until the fidelity is unacceptable.

this.series.resolution = 1.5;
 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    resolution= {1.5} />
 </IgrDataChart>

Optional shadowBlur

shadowBlur: number | string

Gets or sets the shadow blur. This property is ignored when Series.UseSingleShadow is set to true.

shadowBlur can be set in conjection with isDropShadowEnabled to further define the drop shadow effect.

this.series.shadowBlur = 7;
 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    shadowBlur={7}
    shadowColor="blue" />
 </IgrDataChart>

Optional shadowColor

shadowColor: string

Gets or sets the drop shadow color.

shadowColor can be set in conjection with isDropShadowEnabled to further define the drop shadow effect.

this.series.shadowColor = "blue";
 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    shadowBlur="7"
    shadowColor="blue" />
 </IgrDataChart>

Optional shadowOffsetX

shadowOffsetX: number | string

Gets or sets the drop shadow x-offset.

shadowOffsetX can be set in conjection with isDropShadowEnabled to further define the drop shadow effect.

this.series.shadowOffsetX = 10;
 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    shadowOffsetX= {10}
    shadowOffsetY={10] />
 </IgrDataChart>

Optional shadowOffsetY

shadowOffsetY: number | string

Gets or sets the drop shadow y-offset.

shadowOffsetY can be set in conjection with isDropShadowEnabled to further define the drop shadow effect.

this.series.shadowOffsetY = 10;
 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    shadowOffsetX= {10}
    shadowOffsetY= {10} />
 </IgrDataChart>

Optional shapeFilterResolution

shapeFilterResolution: number | string

The resolution at which to filter out shapes in the series. For example, if the ShapeFilterResolution is set to 3, then elements with a bounding rectangle smaller than 3 X 3 pixels will be filtered out. In the case of ScatterPolylineSeries, the resolution is compared to either dimension, rather than both. In other words, a polyline will not be filtered if its height or its width exceeds the value of this property. Whereas with a ShapeSeries, both the height and the width must exceed the value of this property.

Optional shapeMemberPath

shapeMemberPath: string

The name of the property on ItemsSource items which, for each shape, contains a list of points to be converted to a polygon. To be consistent with the Shapefile technical description, it is expected that each list of points is defined as an IEnumerable of IEnumerable of Point, or in other words, a list of lists of points.

Optional shapeStyle

shapeStyle: IgrStyle

The default style to apply to all Shapes in the series.

Optional showDefaultTooltip

showDefaultTooltip: boolean | string

Gets or sets whether default tooltip will be shown.

The default tooltips display all the information relevant to the particular series item (series title, data values, axis values etc.) and are styled to match the series' style. When using default tooltips, you should also set the series title.

 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    showDefaultTooltip ="true"
    title="InStock Items" />
 </IgrDataChart>
this.series.showDefaultTooltip ="true";

Optional styleShape

styleShape: function

Raised when tile's image URI should be provided

Type declaration

Optional thickness

thickness: number | string

Gets or sets the width of the current series object's line thickness.

Depending on the IgrSeries type, this can be the main brush used, or just the outline. For example, when using a IgrLineSeries it will affect the thickness of the lines drawn, whereas when using a IgrColumnSeries it will affect the outer border thickness of the columns.

this.series.thickness=5;
 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    thickness= {5} />
 </IgrDataChart>

Optional title

title: any

Gets or sets the Title property. The legend item control is created according to the Title on-demand by the series object itself.

The IgrSeries title may be used in tooltips and legends.

this.series.title = "InStock Items";
 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
   title="InStock Items" />
 </IgrDataChart>

Optional tooltipTemplate

tooltipTemplate: React.SFC<IChartTooltipProps> | Component<IChartTooltipProps>

Optional transitionDuration

transitionDuration: number | string

Gets or sets the duration of the current series's morph.

The transitionDuration can be used to play animation when data is added or removed from a IgrSeries. To play an initial animation see transitionInDuration.

this.series.transitionDuration = 500;
 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    isTransitionInEnabled=true
    transitionInSpeedType="indexScaled"
    transitionDuration= {500}
    transitionInDuration = {500} />
 </IgrDataChart>

Optional transitionEasingFunction

transitionEasingFunction: function

Gets or sets the easing function used to morph the current series.

The TransitioninDuration and transitionEasingFunction can be used to play animation when data is added or removed from a IgrSeries. To play an initial animation see transitionInDuration.

 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    isDropShadowEnabled=true
    markerType="circle"
   transitionEasingFunction ="cubicEase"
   isTransitionInEnabled= {true}  />
 </IgrDataChart>
this.series.transitionEasingFunction =  EasingFunctions.cubicEase;

Type declaration

    • (time: number): number
    • Parameters

      • time: number

      Returns number

Optional transitionInDuration

transitionInDuration: number | string

Gets or sets the duration of the current series's transition in morph.

The transitionInDuration can be used with IsTransitionInEnabled to cofigure the animation when a new datasource is loaded.

this.series.transitionDuration = 500;
 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    isTransitionInEnabled= {true}
    transitionInSpeedType="indexScaled"
    transitionDuration={500}
    transitionInDuration= {500} />
 </IgrDataChart>

Optional transitionInEasingFunction

transitionInEasingFunction: function

Gets or sets the EasingFunction used to morph the current series during the initial transition.

The transitionInEasingFunction can be used with IsTransitionInEnabled to cofigure the animation when a new datasource is loaded.

 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    isDropShadowEnabled=true
    markerType="circle"
   transitionInEasingFunction ="cubicEase"
   isTransitionInEnabled= {true}  />
 </IgrDataChart>
this.series.transitionInEasingFunction =  EasingFunctions.cubicEase;

Type declaration

    • (time: number): number
    • Parameters

      • time: number

      Returns number

Optional transitionInSpeedType

transitionInSpeedType: TransitionInSpeedType | string

Gets or sets the duration of the current series's transition in morph.

The transitionInSpeedType can be used with IsTransitionInEnabled to cofigure the animation when a new datasource is loaded.

this.series.transitionInSpeedType = TransitionInSpeedType.IndexScaled;
 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    isTransitionInEnabled=true
    transitionInSpeedType="indexScaled"
    transitionDuration=500
    transitionInDuration=500 />
 </IgrDataChart>

Optional useSingleShadow

useSingleShadow: boolean | string

Gets or sets whether drop shadow is applied to the whole series visual or to each of the individual shapes forming the series. When this property is set to true, no Series.ShadowBlur is applied.

this.series.useSingleShadow = true;
 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    isDropShadowEnabled=true
    markerType="circle"
    useSingleShadow= {true} />
 </IgrDataChart>

Optional xAxis

Gets or sets the effective x-axis for the current ScatterBase object.

Optional xAxisName

xAxisName: string

Gets or sets the name to use to resolve xAxis from markup.

Optional yAxis

Gets or sets the effective y-axis for the current ScatterBase object.

Optional yAxisName

yAxisName: string

Gets or sets the name to use to resolve yAxis from markup.