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:
EXAMPLE
DATA
TS
HTML
CSS
exportclassSampleFinancialData{
publicstatic create(items?: number): any[] {
// initial valueslet v = 10000;
let o = 500;
let h = Math.round(o + (Math.random() * 5));
let l = Math.round(o - (Math.random() * 5));
let c = Math.round(l + (Math.random() * (h - l)));
if (items === undefined) {
items = 200;
}
const today = newDate();
const end = newDate(today.getFullYear(), 11, 1);
let time = this.addDays(end, -items);
const data: any[] = [];
for (let i = 0; i < items; i++) {
const date = time.toDateString();
const label = this.getShortDate(time, false);
// adding new data item
data.push({"Time": time, "Date": date, "Label": label, "Close": c, "Open": o, "High": h, "Low": l, "Volume": v});
// generating new valuesconst mod = Math.random() - 0.45;
o = Math.round(o + (mod * 5 * 2));
v = Math.round(v + (mod * 5 * 100));
h = Math.round(o + (Math.random() * 5));
l = Math.round(o - (Math.random() * 5));
c = Math.round(l + (Math.random() * (h - l)));
time = this.addDays(time, 1);
}
return data;
}
publicstatic addDays(dt: Date, days: number): Date {
returnnewDate(dt.getTime() + days * 24 * 60 * 60 * 1000);
}
publicstatic getShortDate(dt: Date, showYear: boolean): string {
const months = [
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];
const ind = dt.getMonth();
const day = dt.getDay() + 1;
let label = months[ind] + " " + day;
if (showYear) {
label += " " + dt.getFullYear();
}
return label;
}
}
ts
<!DOCTYPE html><html><head><title>DataChartSynchronization</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="container"style="height: 100%"><igc-data-chartid="chart1"width="100%"height="50%"is-horizontal-zoom-enabled="true"is-vertical-zoom-enabled="true"sync-channel="ChannelA"synchronize-horizontally="true"synchronize-vertically="true"subtitle="Google Stock Prices"><igc-category-x-axisname="xAxis"label="Label"></igc-category-x-axis><igc-numeric-y-axisname="yAxis" ></igc-numeric-y-axis><igc-financial-price-seriesid="series1"x-axis-name="xAxis"y-axis-name="yAxis"display-type="OHLC"high-member-path="High"low-member-path="Low"close-member-path="Close"open-member-path="Open"volume-member-path="Volume"></igc-financial-price-series></igc-data-chart><igc-data-chartid="chart2"width="100%"height="50%"is-horizontal-zoom-enabled="true"is-vertical-zoom-enabled="true"sync-channel="ChannelA"synchronize-horizontally="true"synchronize-vertically="true"subtitle="Amazon Stock Prices"subtitle-top-margin="10"><igc-category-x-axisname="xAxis"label="Label"></igc-category-x-axis><igc-numeric-y-axisname="yAxis" ></igc-numeric-y-axis><igc-financial-price-seriesid="series1"x-axis-name="xAxis"y-axis-name="yAxis"display-type="OHLC"high-member-path="High"low-member-path="Low"close-member-path="Close"open-member-path="Open"volume-member-path="Volume"></igc-financial-price-series></igc-data-chart></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
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: