Web Components Chart Synchronization

    The Ignite UI for Web Components data chart allows for synchronization with respect to the coordination of zooming, panning, and crosshair events between multiple charts. This can help you to visualize the same areas of multiple charts, assuming your data sources are similar or the same with respect to the axes.

    Web Components Chart Synchronization Example

    This sample shows synchronization of two Web Components data charts:

    Chart Synchronization Properties

    There are four options of chart synchronization, in that you can synchronize horizontally only, vertically only, both, or you can choose not to synchronize at all, which is the default.

    If you want to synchronize a set of charts, you can assign them the same name to the SyncChannel property and then specify whether or not to synchronize the charts horizontally and/or vertically by setting the SynchronizeHorizontally and SynchronizeVertically properties to the corresponding boolean value.

    Note that in order to synchronize either vertically and/or horizontally, you will need to set the isHorizontalZoomEnabled and/or isVerticalZoomEnabled property to true, respectively. A synchronized chart that is dependent on another chart will still zoom regardless of this property setting.

    API References

    The following is a list of API members mentioned in the above sections: