Web Components Chart Navigation

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

export class SampleFinancialData {

    public static create(items?: number): any[] {
        // initial values
        let 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 = new Date();
        const end = new Date(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 values
            const 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;
    }

    public static addDays(dt: Date, days: number): Date {
        return new Date(dt.getTime() + days * 24 * 60 * 60 * 1000);
    }

    public static 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コピー

import { ModuleManager } from 'igniteui-webcomponents-core';
// data chart's modules:
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
// financial series modules:
import { IgcDataChartFinancialModule } from 'igniteui-webcomponents-charts';
// data chart's elements:
import { IgcNumericYAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcCategoryXAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcFinancialPriceSeriesComponent } from 'igniteui-webcomponents-charts';
import { InteractionState } from 'igniteui-webcomponents-core';
import { ModifierKeys } from 'igniteui-webcomponents-core';
import { SampleFinancialData } from './SampleFinancialData';

ModuleManager.register(
    IgcDataChartCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartFinancialModule,
    IgcDataChartInteractivityModule,
);

export class DataChartNavigation {

    private chart: IgcDataChartComponent;

    constructor() {

        this.chart = document.getElementById('chart') as IgcDataChartComponent;
        this.chart.dataSource = SampleFinancialData.create();

        this.chart.actualWindowScaleHorizontal = 0.60;
        this.chart.actualWindowScaleVertical = 0.60;
        this.chart.actualWindowPositionVertical = 0.20;
        this.chart.actualWindowPositionHorizontal = 0.20;

        const panUp = document.getElementById('panUp') as HTMLButtonElement;
        panUp!.addEventListener('click', this.onPanUpClick);

        const panLeft = document.getElementById('panLeft') as HTMLButtonElement;
        panLeft!.addEventListener('click', this.onPanLeftClick);

        const zoomIn = document.getElementById('zoomIn') as HTMLButtonElement;
        zoomIn!.addEventListener('click', this.onZoomInClick);

        const panDown = document.getElementById('panDown') as HTMLButtonElement;
        panDown!.addEventListener('click', this.onPanDownClick);

        const panRight = document.getElementById('panRight') as HTMLButtonElement;
        panRight!.addEventListener('click', this.onPanRightClick);

        const zoomOut = document.getElementById('zoomOut') as HTMLButtonElement;
        zoomOut!.addEventListener('click', this.onZoomOutClick);

        const panModSelect = document.getElementById('panModSelect') as HTMLSelectElement;
        panModSelect!.value = 'Alt';
        panModSelect!.addEventListener('change', this.onPanModifierChange);

        const interactionSelect = document.getElementById('interactionSelect') as HTMLSelectElement;
        interactionSelect!.value = 'DragPan';
        interactionSelect!.addEventListener('change', this.onDefaultInteractionChange);

        const dragModSelect = document.getElementById('dragModSelect') as HTMLSelectElement;
        dragModSelect!.value = 'Shift';
        dragModSelect!.addEventListener('change', this.onDragModifierChange);

        const zoomEnabled = document.getElementById('zoomEnabled') as HTMLInputElement;
        zoomEnabled!.checked = true;
        zoomEnabled!.addEventListener('change', this.onZoomEnabledChange);
    }

    public onDefaultInteractionChange = (e: any) => {
        switch (e.target.value) {
            case 'DragZoom':
                this.chart.defaultInteraction = InteractionState.DragZoom;
                break;
            case 'DragPan':
                this.chart.defaultInteraction = InteractionState.DragPan;
                break;
            case 'None':
                this.chart.defaultInteraction = InteractionState.None;
                break;
        }
    }

    public onPanModifierChange = (e: any) => {
        switch (e.target.value) {
            case 'Alt':
                this.chart.panModifier = ModifierKeys.Alt;
                break;
            case 'Control':
                this.chart.panModifier = ModifierKeys.Control;
                break;
            case 'Shift':
                this.chart.panModifier = ModifierKeys.Shift;
                break;
            case 'Windows':
                this.chart.panModifier = ModifierKeys.Windows;
                break;
            case 'Apple':
                this.chart.panModifier = ModifierKeys.Apple;
                break;
            case 'None':
                this.chart.panModifier = ModifierKeys.None;
                break;
        }
    }

    public onDragModifierChange = (e: any) => {
        switch (e.target.value) {
            case 'Alt':
                this.chart.dragModifier = ModifierKeys.Alt;
                break;
            case 'Control':
                this.chart.dragModifier = ModifierKeys.Control;
                break;
            case 'Shift':
                this.chart.dragModifier = ModifierKeys.Shift;
                break;
            case 'Windows':
                this.chart.dragModifier = ModifierKeys.Windows;
                break;
            case 'Apple':
                this.chart.dragModifier = ModifierKeys.Apple;
                break;
            case 'None':
                this.chart.dragModifier = ModifierKeys.None;
                break;
        }
    }

    public onZoomEnabledChange = (e: any) => {
        const isZoomEnabled = e.target.checked;
        this.chart.isHorizontalZoomEnabled = isZoomEnabled;
        this.chart.isVerticalZoomEnabled = isZoomEnabled;
    }

    public onPanUpClick = (e: any) => {
        this.chart.actualWindowPositionVertical -= 0.05;
    }

    public onPanDownClick = (e: any) => {
        this.chart.actualWindowPositionVertical += 0.05;
    }

    public onPanLeftClick = (e: any) => {
        this.chart.actualWindowPositionHorizontal -= 0.05;
    }

    public onPanRightClick = (e: any) => {
        this.chart.actualWindowPositionHorizontal += 0.05;
    }

    public onZoomOutClick = (e: any) => {
        if (this.chart.actualWindowPositionHorizontal > 0.025) {
            this.chart.actualWindowPositionHorizontal -= 0.025;
        }
        if (this.chart.actualWindowPositionVertical > 0.025) {
            this.chart.actualWindowPositionVertical -= 0.025;
        }

        if (this.chart.actualWindowScaleHorizontal < 1.0) {
            this.chart.actualWindowScaleHorizontal += 0.05;
        }
        if (this.chart.actualWindowScaleVertical < 1.0) {
            this.chart.actualWindowScaleVertical += 0.05;
        }
    }

    public onZoomInClick = (e: any) => {
        if (this.chart.actualWindowPositionHorizontal < 1.0) {
            this.chart.actualWindowPositionHorizontal += 0.025;
        }
        if (this.chart.actualWindowPositionVertical < 1.0) {
            this.chart.actualWindowPositionVertical += 0.025;
        }

        if (this.chart.actualWindowScaleHorizontal > 0.05) {
            this.chart.actualWindowScaleHorizontal -= 0.05;
        }
        if (this.chart.actualWindowScaleVertical > 0.05) {
            this.chart.actualWindowScaleVertical -= 0.05;
        }
    }
}

new DataChartNavigation();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>DataChartNavigation</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <div class="options horizontal">
        <div class="options vertical" style="width: 100px">
            <button id="panUp">Pan Up</button>
            <button id="panDown">Pan Down</button>
        </div>
        <div class="options vertical" style="width: 100px">
            <button id="panLeft">Pan Left</button>
            <button id="panRight">Pan Right</button>
        </div>
        <div class="options vertical" style="width: 100px">
            <button id="zoomIn">Zoom In</button>
            <button id="zoomOut">Zoom Out</button>
        </div>
        <div class="options vertical" style="width: 120px; align-self: center">
            <label class="options-label" style="margin: 5px">Pan Modifier:</label>
            <label class="options-label" style="margin: 5px">Zoom Modifier:</label>
        </div>
        <div class="options vertical" style="width: 100px">
            <select id="panModSelect" style="margin: 5px">
                <option>Alt</option>
                <option>Control</option>
                <option>Shift</option>
                <option>Windows</option>
                <option>Apple</option>
                <option>None</option>
            </select>
            <select id="dragModSelect" style="margin: 5px">
                <option>Alt</option>
                <option>Control</option>
                <option>Shift</option>
                <option>Windows</option>
                <option>Apple</option>
                <option>None</option>
            </select>
        </div>
        <div class="options vertical" style="width: 150px; align-self: center">
            <label class="options-label" style="margin: 5px;">Interaction:</label>
            <label class="options-label" style="margin: 5px;">Zooming:</label>
        </div>
        <div class="options vertical" style="width: 100px">
            <select id="interactionSelect" style="margin: 5px">
                <option>DragZoom</option>
                <option>DragPan</option>
                <option>None</option>
            </select>
            <input id="zoomEnabled" class="options-item" type="checkbox" @onchange="OnEnableZoomingChange" checked="@IsZoomingEnabled" />
        </div>
    </div>

    <div class="container vertical">
        <igc-data-chart
            id="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-axis
                name="xAxis"
                label="Label"></igc-category-x-axis>
            <igc-numeric-y-axis
                name="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-series
                x-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) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

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:

Modifier Value	Corresponding Key
Shift	Shift
Control	Ctrl
Windows	Win
Apple	Apple
None	no keys

Chart Navigation with Scrollbars

The chart can be scrolled by enabling the verticalViewScrollbarMode and horizontalViewScrollbarMode properties.

These can be configured to the following options

• Persistent - The scrollbars always stay visible, as long as the chart is zoomed in, and fade away when fully zoomed out.
• Fading - The scrollbars disappear after use and reappear when the mouse is near their location.
• FadeToLine - The scrollbars are reduced to a thinner line when zooming is not in use.
• None - Default, no scrollbars are shown.

The following example demonstrates enabling scrollbars.

EXAMPLE

DATA

TS

HTML

CSS

//begin async data
export class MultipleStocks extends Array<Array<StockItem>> {
    public static async fetch(): Promise<MultipleStocks> {
        const dataSources: any[] = [
          //await this.getAmazonStock(),
          await this.getGoogleStock(),
          await this.getAmazonStock(),
          //await this.getTeslaStock()
        ];
        return new Promise<MultipleStocks>((resolve, reject) => {
        resolve(dataSources);
        });
    }

    /** gets Amazon stock OHLC prices from a .JSON file */
    public static async getAmazonStock(): Promise<StockItem[]> {
      let url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json";
      let response = await fetch(url);
      let jsonData = await response.json();
      let stockData = this.convertData(jsonData);
      // setting data intent for Series Title, e.g. FinancialChart usage
      (stockData as any).__dataIntents = {
        close: ["SeriesTitle/Amazon"]
      };
      // console.log("fetchAmazonStock: ", stockData.length);

      return new Promise<StockItem[]>((resolve, reject) => {
        resolve(stockData);
      });
    }

    /** gets Tesla stock OHLC prices from a .JSON file */
    public static async getTeslaStock(): Promise<StockItem[]> {
      let url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json";
      let response = await fetch(url);
      let jsonData = await response.json();
      let stockData = this.convertData(jsonData);
      // setting data intent for Series Title, e.g. FinancialChart usage
      (stockData as any).__dataIntents = {
        close: ["SeriesTitle/Tesla"]
      };
      return new Promise<StockItem[]>((resolve, reject) => {
        resolve(stockData);
      });
    }

    /** gets Microsoft stock OHLC prices from a .JSON file */
    public static async getMicrosoftStock(): Promise<StockItem[]> {
      let url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json";
      let response = await fetch(url);
      let jsonData = await response.json();
      let stockData = this.convertData(jsonData);
      // setting data intent for Series Title, e.g. FinancialChart usage
      (stockData as any).__dataIntents = {
        close: ["SeriesTitle/Microsoft"]
      };
      return new Promise<StockItem[]>((resolve, reject) => {
        resolve(stockData);
      });
    }

    /** gets Google stock OHLC prices from a .JSON file */
    public static async getGoogleStock(): Promise<StockItem[]> {
      let url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json";
      let response = await fetch(url);
      let jsonData = await response.json();
      let stockData = this.convertData(jsonData);
      // setting data intent for Series Title, e.g. FinancialChart usage
      (stockData as any).__dataIntents = {
        close: ["SeriesTitle/Google"]
      };
      return new Promise<StockItem[]>((resolve, reject) => {
        resolve(stockData);
      });
    }

    public static convertData(jsonData: any[]): StockItem[] {
      let stockItems: StockItem[] = [];

      for (let json of jsonData) {
        let parts = json.date.split("-"); // "2020-01-01"
        let item = new StockItem();
        item.date = new Date(parts[0], parts[1], parts[2],13,0,0);
        item.open = json.open;
        item.high = json.high;
        item.low = json.low;
        item.close = json.close;
        item.volume = json.volume;
        stockItems.push(item);

      }

      return stockItems;
    }
  }

  export class StockItem {
    public open?: number;
    public close?: number;
    public high?: number;
    public low?: number;
    public volume?: number;

    public date?: Date;

  }
//end async datatsコピー

import { IgcFinancialChartModule, IgcDataChartInteractivityModule, IgcLegendModule } from 'igniteui-webcomponents-charts';
import { IgcFinancialChartComponent } from 'igniteui-webcomponents-charts';
import { MultipleStocks } from './MultipleStocks';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcFinancialChartModule,
    IgcDataChartInteractivityModule,
    IgcLegendModule
);

export class Sample {

    private chart: IgcFinancialChartComponent
    private _bind: () => void;

    constructor() {
        var chart = this.chart = document.getElementById('chart') as IgcFinancialChartComponent;

        this._bind = () => {
            chart.dataSource = this.multipleStocks;
        }
        this._bind();
    }

    private _multipleStocks: MultipleStocks = null;
    private _isFetching: boolean = false;
    public get multipleStocks(): MultipleStocks {
        if (this._multipleStocks == null && !this._isFetching)
        {
            this._isFetching = true;
            ( async () => { this._multipleStocks = await (await MultipleStocks.fetch()); if ((this as any)._bind) { (this as any)._bind(); }  })();
        }
        return this._multipleStocks;
    }

}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">

    <div class="container fill">
        <igc-financial-chart
        name="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) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

cssコピー

Edit in: Codesandbox

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:

• Chart Tooltips
• Chart Trendlines

API References

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

• defaultInteraction
• dragModifier
• isHorizontalZoomEnabled
• isVerticalZoomEnabled
• panModifier
• IgcCategoryChartComponent
• IgcDataChartComponent
• IgcFinancialChartComponent