Ver: 18.2
I need to visualize two or more “IgrDataChart” in sync mode. In order to accomplish it, I’m using the same “SyncChannel” property value with “SynchronizeVertically” and “SynchronizeHorizontally” set to “true”, but it seems that the charts are actually ignore it. Any ideas? Am I forgetting to register any “module”?
As example:
Import section:
IgrLegendModule.register();
IgrLineSeriesModule.register();
IgrCrosshairLayerModule.register();
IgrCategoryChartModule.register();
IgrDataChartCategoryModule.register();
IgrDataChartInteractivityModule.register();
IgrDataChartAnnotationModule.register();
IgrSizeScaleModule.register();
IgrCategoryXAxisModule.register();
IgrNumericYAxisModule.register();
renderSection:
return anyFilledArray.map(p=>{
return <IgrDataChart
key={anyStringValue}
width="100%"
height="200px"
windowRectMinWidth={0.02}
windowResponse= "immediate"
SyncChannel="channel1"
SynchronizeVertically={true}
SynchronizeHorizontally={true}
dataSource={this.state.dataMatrix }
defaultInteraction="DragPan"
dragModifier="Control"
panModifier="None"
isHorizontalZoomEnabled={true}
isVerticalZoomEnabled={true} >
<IgrCategoryXAxis name={"xAxis"}
label="anyStringValue" /> //
<IgrNumericYAxis name={"yAxis"}
title={anyStringValue}
minimumValue={anyValue}
maximumValue={anyValue} />
<IgrLineSeries
name={"LineSeries" }
xAxisName={"xAxis"}
yAxisName={"yAxis"}
valueMemberPath={anyStringValue}
/>
<IgrCrosshairLayer
name={"Crosshair"}
isAxisAnnotationEnabled={true}
transitionDuration={100}
useInterpolation={false}
thickness={0.5}
</IgrDataChart>
});
Hello MMLab,
I apologize for the delay in a response on this matter.
I am also seeing a behavior in that the IgrDataChart is ignoring the synchronization settings if placed within the HTML code in the “render()” method of the tsx file. What I have found is that if you set this programmatically though, everything is working normally. I am unsure why this is, and I will be logging a development issue for this behavior so our development teams can look into it.
That said, you can use the attached React component as a guide to set up the synchronization channels in the chart, which sets the synchronization-related properties programmatically.
I hope this helps you. Please let me know if you have any other questions or concerns on this matter.
SyncCharts.zip