The Ignite UI for Web Components charts allows for interactive panning and zooming via the mouse, keyboard and touch.
Web Components Chart Navigation Example
The following example shows all of the available panning and zooming options that are available. You can interact with the example by using the buttons, or select your desired options using the dropdowns or checkboxes.
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>DataChartNavigation</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="options horizontal"><divclass="options vertical"style="width: 100px"><buttonid="panUp">Pan Up</button><buttonid="panDown">Pan Down</button></div><divclass="options vertical"style="width: 100px"><buttonid="panLeft">Pan Left</button><buttonid="panRight">Pan Right</button></div><divclass="options vertical"style="width: 100px"><buttonid="zoomIn">Zoom In</button><buttonid="zoomOut">Zoom Out</button></div><divclass="options vertical"style="width: 120px; align-self: center"><labelclass="options-label"style="margin: 5px">Pan Modifier:</label><labelclass="options-label"style="margin: 5px">Zoom Modifier:</label></div><divclass="options vertical"style="width: 100px"><selectid="panModSelect"style="margin: 5px"><option>Alt</option><option>Control</option><option>Shift</option><option>Windows</option><option>Apple</option><option>None</option></select><selectid="dragModSelect"style="margin: 5px"><option>Alt</option><option>Control</option><option>Shift</option><option>Windows</option><option>Apple</option><option>None</option></select></div><divclass="options vertical"style="width: 150px; align-self: center"><labelclass="options-label"style="margin: 5px;">Interaction:</label><labelclass="options-label"style="margin: 5px;">Zooming:</label></div><divclass="options vertical"style="width: 100px"><selectid="interactionSelect"style="margin: 5px"><option>DragZoom</option><option>DragPan</option><option>None</option></select><inputid="zoomEnabled"class="options-item"type="checkbox" @onchange="OnEnableZoomingChange"checked="@IsZoomingEnabled" /></div></div><divclass="container vertical"><igc-data-chartid="chart"width="100%"height="100%"subtitle="Stock Prices Series in Candlestick Display Type"subtitle-top-margin="10"is-horizontal-zoom-enabled="true"is-vertical-zoom-enabled="true"pan-modifier="Alt"drag-modifier="Shift"default-interaction="DragPan"><igc-category-x-axisname="xAxis"label="Label"></igc-category-x-axis><igc-numeric-y-axisname="yAxis"title="Amount (in USD)"title-right-margin="10"label-right-margin="10"label-horizontal-alignment="Left"label-location="OutsideRight"></igc-numeric-y-axis><igc-financial-price-seriesx-axis-name="xAxis"y-axis-name="yAxis"display-type="Candlestick"open-member-path="Open"close-member-path="Close"high-member-path="High"low-member-path="Low"volume-member-path="Volume"show-default-tooltip="true"is-transition-in-enabled="true"title="Price"></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.
Like this sample? Get access to our complete Web Components toolkit and start building your own apps in minutes. Download it for free.
Chart Navigation with User Interactions
Whether or not zooming is on by default depends on the chart you are using. If you are using IgcCategoryChartComponent, it is on by default, but it is not in the IgcDataChartComponent. In order to enable or disable navigation in the UI, you need to set either the isHorizontalZoomEnabled and/or the isVerticalZoomEnabled properties of the chart, depending on the direction that you wish to enable or disable zooming.
It is also possible to zoom or pan simply by clicking the mouse or using touch. The defaultInteraction property of the data chart determines what happens on mouse click or touch events. This property defaults to DragZoom and when set to this with zooming enabled, clicking and dragging will place a preview rectangle over the plot area that will become the zoomed area of the chart. This defaultInteraction property can also be set to either DragPan to allow panning or None to prevent these operations.
Chart Navigation with Touch, Mouse and Keyboard
Navigation in the Web Components data chart can happen with either touch, the mouse or the keyboard. The following operations can be invoked using touch, mouse or keyboard operations by default:
Panning: Using 🡐🡒🡑🡓 arrow keys on the keyboard or holding the Shift key, clicking and dragging with the mouse or pressing and moving your finger via touch.
Zoom In: Using the Page Up key on the keyboard, rolling the mouse wheel up, or pinching to zoom in via touch.
Zoom Out: Using the Page Down key on the keyboard, rolling the mouse wheel down, or pinching to zoom out via touch.
Fit to Chart Plot Area: Using the Home key on the keyboard. There is no mouse or touch operation for this.
Area Zoom: Click and drag the mouse within the plot area with the defaultInteraction property set to its default - DragZoom.
The zoom and pan operations can also be enabled by using modifier keys by setting the dragModifier and panModifier properties, respectively. These properties can be set to the following modifier keys, and when pressed, the corresponding operation will be executed:
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</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" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="container fill"><igc-financial-chartname="chart"id="chart"is-toolbar-visible="false"is-vertical-zoom-enabled="true"is-horizontal-zoom-enabled="true"vertical-view-scrollbar-mode="Fading"horizontal-view-scrollbar-mode="Persistent"zoom-slider-type="None"window-rect="0, 0, 0.5, 1"></igc-financial-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
Chart Navigation through Code
Code navigation of the chart can only be used for the IgcDataChartComponent control.
The Web Components data chart provides several navigation properties that are updated each time a zoom or pan operation happens in the chart. You can also set each of these properties to zoom or pan the data chart programmatically. The following is a list of these properties:
windowPositionHorizontal: A numeric value describing the X portion of the content view rectangle displayed by the data chart.
windowPositionVertical: A numeric value describing the Y portion of the content view rectangle displayed by the data chart.
windowRect: A Rect object representing a rectangle that represents the portion of the chart that is currently in view. For example, a windowRect of "0, 0, 1, 1" would be the entirety of the data chart.
windowScaleHorizontal: A numeric value describing the width portion of the content view rectangle displayed by the data chart.
windowScaleVertical: A numeric value describing the height portion of the content view rectangle displayed by the data chart.
Additional Resources
You can find more information about related chart features in these topics: