Web Components Toolbar Overview

The Web Components Toolbar component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our IgcDataChartComponent or IgcCategoryChartComponent components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.

Web Components Toolbar Example

EXAMPLE

DATA

TS

HTML

CSS

export class CountryRenewableElectricityItem {
    public constructor(init: Partial<CountryRenewableElectricityItem>) {
        Object.assign(this, init);
    }

    public year: string;
    public europe: number;
    public china: number;
    public america: number;

}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
    public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CountryRenewableElectricityItem(
                {
                    year: `2009`,
                    europe: 34,
                    china: 21,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2010`,
                    europe: 43,
                    china: 26,
                    america: 24
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2011`,
                    europe: 66,
                    china: 29,
                    america: 28
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2012`,
                    europe: 69,
                    china: 32,
                    america: 26
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2013`,
                    europe: 58,
                    china: 47,
                    america: 38
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2014`,
                    europe: 40,
                    china: 46,
                    america: 31
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2015`,
                    europe: 78,
                    china: 50,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2016`,
                    europe: 13,
                    china: 90,
                    america: 52
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2017`,
                    europe: 78,
                    china: 132,
                    america: 50
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2019`,
                    europe: 80,
                    china: 96,
                    america: 38
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsCOPY CODE

import { IgcLegendModule, IgcCategoryChartModule, IgcCategoryChartToolbarModule } from 'igniteui-webcomponents-charts';
import { IgcToolbarModule } from 'igniteui-webcomponents-layouts';
import { IgcCheckboxListModule } from 'igniteui-webcomponents-grids';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { IgcToolbarComponent } from 'igniteui-webcomponents-layouts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcLegendModule,
    IgcToolbarModule,
    IgcCategoryChartModule,
    IgcCategoryChartToolbarModule,
    IgcCheckboxListModule
);

export class Sample {

    private legend: IgcLegendComponent
    private toolbar: IgcToolbarComponent
    private chart: IgcCategoryChartComponent
    private _bind: () => void;

    constructor() {
        var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
        var toolbar = this.toolbar = document.getElementById('toolbar') as IgcToolbarComponent;
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

        this._bind = () => {
            toolbar.target = this.chart;
            chart.dataSource = this.countryRenewableElectricity;
            chart.legend = this.legend;
        }
        this._bind();
    }

    private _countryRenewableElectricity: CountryRenewableElectricity = null;
    public get countryRenewableElectricity(): CountryRenewableElectricity {
        if (this._countryRenewableElectricity == null)
        {
            this._countryRenewableElectricity = new CountryRenewableElectricity();
        }
        return this._countryRenewableElectricity;
    }

}

new Sample();
tsCOPY CODE

<!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="legend-title">
        Renewable Electricity Generated
    </div>

    <div class="aboveContentSplit">
        <div class="aboveContentLeftContainer">
            <igc-toolbar
            name="toolbar"
            id="toolbar"
            orientation="Horizontal">
            </igc-toolbar>
        </div>
        <div class="aboveContentRightContainer">
            <igc-legend
            name="legend"
            id="legend"
            orientation="Horizontal">
            </igc-legend>
        </div>
    </div>

    <div class="container fill">
        <igc-category-chart
        name="chart"
        id="chart"
        chart-type="Line"
        is-horizontal-zoom-enabled="true"
        is-vertical-zoom-enabled="true"
        included-properties="year, europe, china, america"
        y-axis-title="TWh"
        y-axis-title-left-margin="10"
        y-axis-title-right-margin="5"
        y-axis-label-left-margin="0"
        y-axis-label-location="OutsideRight"
        is-transition-in-enabled="true">
        </igc-category-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>htmlCOPY CODE

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

.aboveContentSplit {
    display: flex;
    flex-direction: row;
}
.aboveContentLeftContainer {
    margin-left: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: flex-end;
}
.aboveContentRightContainer {
    margin-right: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: flex-end;
}
cssCOPY CODE

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.

Dependencies

Install the Ignite UI for Web Components layouts, inputs, charts and core packages:

npm install igniteui-webcomponents-layouts
npm install igniteui-webcomponents-inputs
npm install igniteui-webcomponents-charts
npm install igniteui-webcomponents-core
cmd

The following modules are required when using the IgcToolbarComponent with the IgcDataChartComponent component and it's features.

import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcToolbarModule } from 'igniteui-webcomponents-layouts';
import { IgcDataChartToolbarModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartAnnotationModule, IgcDataChartInteractivityModule, IgcDataChartCategoryTrendLineModule } from 'igniteui-webcomponents-charts';

ModuleManager.register(
    IgcToolbarModule,
    IgcToolActionLabelModule,
    IgcDataChartToolbarModule,
    IgcDataChartCategoryModule,
    IgcDataChartCoreModule,
    IgcDataChartInteractivityModule,
    IgcDataChartAnnotationModule,
    IgcDataChartCategoryTrendLineModule
);
ts

Usage

Tool Actions

The following is a list of the different IgcToolActionComponent items that you can add to the Toolbar.

• IgcToolActionButtonComponent
• IgcToolActionCheckboxComponent
• IgcToolActionIconButtonComponent
• IgcToolActionIconMenuComponent
• IgcToolActionLabelComponent
• IgcToolActionNumberInputComponent
• IgcToolActionRadioComponent
• IgcToolActionSubPanelComponent

Each of these tools exposes an OnCommand event that is triggered by mouse click. Note, the IgcToolActionIconMenuComponent is a wrapper for other tools that can also be wrapped inside a IgcToolActionIconMenuComponent.

New and existing tools can be repositioned and marked hidden using the overlayId, beforeId and afterId properties on the IgcToolActionComponent object. ToolActions also expose a visibility property.

The following example demonstrates a couple of features. First you can group tools together in the IgcToolActionSubPanelComponent including hiding built in tools such as the ZoomReset and AnalyzeMenu menu tool actions. In this example a new instance of the ZoomReset tool action is added and placed within the ZoomMenu by using the the afterId property and assigning that to ZoomOut. It is also highlighted via the isHighlighted property on the tool. This will ensure the new Reset tool is promptly displayed at the bottom of the ZoomMenu.

EXAMPLE

DATA

TS

HTML

CSS

export class CountryRenewableElectricityItem {
    public constructor(init: Partial<CountryRenewableElectricityItem>) {
        Object.assign(this, init);
    }

    public year: string;
    public europe: number;
    public china: number;
    public america: number;

}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
    public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CountryRenewableElectricityItem(
                {
                    year: `2009`,
                    europe: 34,
                    china: 21,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2010`,
                    europe: 43,
                    china: 26,
                    america: 24
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2011`,
                    europe: 66,
                    china: 29,
                    america: 28
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2012`,
                    europe: 69,
                    china: 32,
                    america: 26
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2013`,
                    europe: 58,
                    china: 47,
                    america: 38
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2014`,
                    europe: 40,
                    china: 46,
                    america: 31
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2015`,
                    europe: 78,
                    china: 50,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2016`,
                    europe: 13,
                    china: 90,
                    america: 52
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2017`,
                    europe: 78,
                    china: 132,
                    america: 50
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2019`,
                    europe: 80,
                    china: 96,
                    america: 38
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsCOPY CODE

import { IgcToolbarModule } from 'igniteui-webcomponents-layouts';
import { IgcDataChartToolbarModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartAnnotationModule, IgcDataChartInteractivityModule, IgcDataChartCategoryTrendLineModule } from 'igniteui-webcomponents-charts';
import { IgcToolbarComponent, IgcToolActionIconMenuComponent, IgcToolActionGroupHeaderComponent, IgcToolActionSubPanelComponent, IgcToolActionCheckboxComponent, IgcToolActionLabelComponent } from 'igniteui-webcomponents-layouts';
import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcLineSeriesComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgcToolCommandEventArgs } from 'igniteui-webcomponents-layouts';
import { IgcSeriesComponent, IgcDataToolTipLayerComponent, IgcCrosshairLayerComponent, IgcFinalValueLayerComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcToolbarModule,
    IgcDataChartToolbarModule,
    IgcDataChartCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartAnnotationModule,
    IgcDataChartInteractivityModule,
    IgcDataChartCategoryTrendLineModule
);

export class Sample {

    private toolbar: IgcToolbarComponent
    private menuForSubPanelTool: IgcToolActionIconMenuComponent
    private subPanelGroup: IgcToolActionGroupHeaderComponent
    private customSubPanelTools: IgcToolActionSubPanelComponent
    private enableTooltipsLabel: IgcToolActionCheckboxComponent
    private enableCrosshairsLabel: IgcToolActionCheckboxComponent
    private enableFinalValuesLabel: IgcToolActionCheckboxComponent
    private zoomResetLabel: IgcToolActionLabelComponent
    private zoomResetHidden: IgcToolActionLabelComponent
    private analyzeMenu: IgcToolActionIconMenuComponent
    private copyMenu: IgcToolActionLabelComponent
    private chart: IgcDataChartComponent
    private xAxis: IgcCategoryXAxisComponent
    private yAxis: IgcNumericYAxisComponent
    private lineSeries1: IgcLineSeriesComponent
    private lineSeries2: IgcLineSeriesComponent
    private lineSeries3: IgcLineSeriesComponent
    private _bind: () => void;

    constructor() {
        var toolbar = this.toolbar = document.getElementById('toolbar') as IgcToolbarComponent;
        this.toolbarToggleAnnotations = this.toolbarToggleAnnotations.bind(this);
        var menuForSubPanelTool = this.menuForSubPanelTool = document.getElementById('MenuForSubPanelTool') as IgcToolActionIconMenuComponent;
        var subPanelGroup = this.subPanelGroup = document.getElementById('SubPanelGroup') as IgcToolActionGroupHeaderComponent;
        var customSubPanelTools = this.customSubPanelTools = document.getElementById('CustomSubPanelTools') as IgcToolActionSubPanelComponent;
        var enableTooltipsLabel = this.enableTooltipsLabel = document.getElementById('EnableTooltipsLabel') as IgcToolActionCheckboxComponent;
        var enableCrosshairsLabel = this.enableCrosshairsLabel = document.getElementById('EnableCrosshairsLabel') as IgcToolActionCheckboxComponent;
        var enableFinalValuesLabel = this.enableFinalValuesLabel = document.getElementById('EnableFinalValuesLabel') as IgcToolActionCheckboxComponent;
        var zoomResetLabel = this.zoomResetLabel = document.getElementById('zoomResetLabel') as IgcToolActionLabelComponent;
        var zoomResetHidden = this.zoomResetHidden = document.getElementById('zoomResetHidden') as IgcToolActionLabelComponent;
        var analyzeMenu = this.analyzeMenu = document.getElementById('AnalyzeMenu') as IgcToolActionIconMenuComponent;
        var copyMenu = this.copyMenu = document.getElementById('CopyMenu') as IgcToolActionLabelComponent;
        var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
        var xAxis = this.xAxis = document.getElementById('xAxis') as IgcCategoryXAxisComponent;
        var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
        var lineSeries1 = this.lineSeries1 = document.getElementById('lineSeries1') as IgcLineSeriesComponent;
        var lineSeries2 = this.lineSeries2 = document.getElementById('LineSeries2') as IgcLineSeriesComponent;
        var lineSeries3 = this.lineSeries3 = document.getElementById('LineSeries3') as IgcLineSeriesComponent;

        this._bind = () => {
            toolbar.target = this.chart;
            toolbar.onCommand = this.toolbarToggleAnnotations;
            xAxis.dataSource = this.countryRenewableElectricity;
            lineSeries1.xAxis = this.xAxis;
            lineSeries1.yAxis = this.yAxis;
            lineSeries1.dataSource = this.countryRenewableElectricity;
            lineSeries2.xAxis = this.xAxis;
            lineSeries2.yAxis = this.yAxis;
            lineSeries2.dataSource = this.countryRenewableElectricity;
            lineSeries3.xAxis = this.xAxis;
            lineSeries3.yAxis = this.yAxis;
            lineSeries3.dataSource = this.countryRenewableElectricity;
        }
        this._bind();
    }

    private _countryRenewableElectricity: CountryRenewableElectricity = null;
    public get countryRenewableElectricity(): CountryRenewableElectricity {
        if (this._countryRenewableElectricity == null)
        {
            this._countryRenewableElectricity = new CountryRenewableElectricity();
        }
        return this._countryRenewableElectricity;
    }

    public toolbarToggleAnnotations(sender: any, args: IgcToolCommandEventArgs): void {
        var target = this.chart;
        switch (args.command.commandId)
    	{
    		case "EnableTooltips":
    			var enable = args.command.argumentsList[0].value as boolean;
    			if (enable)
    			{
    				target.series.add(new IgcDataToolTipLayerComponent());
    			}
    			else
    			{
    				var toRemove = null;
    				for (var i = 0; i < target.actualSeries.length; i++) {
                        let s = target.actualSeries[i] as IgcSeriesComponent;
    					if (s instanceof IgcDataToolTipLayerComponent)
    					{
    						toRemove = s;
    					}
    				}
    				if (toRemove != null)
    				{
    					target.series.remove(toRemove);
    				}
    			}
    			break;
    		case "EnableCrosshairs":
    			var enable = args.command.argumentsList[0].value as boolean;
    			if (enable)
    			{
    				target.series.add(new IgcCrosshairLayerComponent());
    			}
    			else
    			{
    				var toRemove = null;
    				for (var i = 0; i < target.actualSeries.length; i++) {
    					let s = target.actualSeries[i] as IgcSeriesComponent;
    					if (s instanceof IgcCrosshairLayerComponent)
    					{
    						toRemove = s;
    					}
    				}
    				if (toRemove != null)
    				{
    					target.series.remove(toRemove);
    				}
    			}
    			break;
    		case "EnableFinalValues":
    			var enable = args.command.argumentsList[0].value as boolean;
    			if (enable)
    			{
    				target.series.add(new IgcFinalValueLayerComponent());
    			}
    			else
    			{
    				var toRemove = null;
    				for (var i = 0; i < target.actualSeries.length; i++) {
    					let s = target.actualSeries[i] as IgcSeriesComponent;
    					if (s instanceof IgcFinalValueLayerComponent)
    					{
    						toRemove = s;
    					}
    				}
    				if (toRemove != null)
    				{
    					target.series.remove(toRemove);
    				}
    			}
    			break;
    	}
    }

}

new Sample();
tsCOPY CODE

<!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="aboveContentSplit">
        <div class="aboveContentLeftContainer">
            <igc-toolbar
            name="toolbar"
            id="toolbar"
            orientation="Horizontal">
                <igc-tool-action-icon-menu
                name="MenuForSubPanelTool"
                id="MenuForSubPanelTool"
                icon-collection-name="ChartToolbarIcons"
                icon-name="analyze">
                    <igc-tool-action-group-header
                    name="SubPanelGroup"
                    id="SubPanelGroup"
                    close-on-execute="true"
                    title="Visualizations"
                    subtitle="Layers">
                    </igc-tool-action-group-header>
                    <igc-tool-action-sub-panel
                    name="CustomSubPanelTools"
                    id="CustomSubPanelTools">
                        <igc-tool-action-checkbox
                        name="EnableTooltipsLabel"
                        id="EnableTooltipsLabel"
                        title="Enable Tooltips"
                        command-id="EnableTooltips">
                        </igc-tool-action-checkbox>
                        <igc-tool-action-checkbox
                        name="EnableCrosshairsLabel"
                        id="EnableCrosshairsLabel"
                        title="Enable Crosshairs"
                        command-id="EnableCrosshairs">
                        </igc-tool-action-checkbox>
                        <igc-tool-action-checkbox
                        name="EnableFinalValuesLabel"
                        id="EnableFinalValuesLabel"
                        title="Enable Final Values"
                        command-id="EnableFinalValues">
                        </igc-tool-action-checkbox>
                    </igc-tool-action-sub-panel>
                </igc-tool-action-icon-menu>
                <igc-tool-action-label
                name="zoomResetLabel"
                id="zoomResetLabel"
                title="Reset"
                after-id="ZoomOut"
                icon-name="reset"
                icon-collection-name="ChartToolbarIcons"
                command-id="ZoomReset"
                is-highlighted="true">
                </igc-tool-action-label>
                <igc-tool-action-label
                name="zoomResetHidden"
                id="zoomResetHidden"
                overlay-id="ZoomReset"
                visibility="Collapsed">
                </igc-tool-action-label>
                <igc-tool-action-icon-menu
                name="AnalyzeMenu"
                id="AnalyzeMenu"
                overlay-id="AnalyzeMenu"
                visibility="Collapsed">
                </igc-tool-action-icon-menu>
                <igc-tool-action-label
                name="CopyMenu"
                id="CopyMenu"
                overlay-id="CopyMenu"
                visibility="Collapsed">
                </igc-tool-action-label>
            </igc-toolbar>
        </div>
        <div class="aboveContentRightContainer">
            <!-- insert aboveContentRight -->
            <!-- end aboveContentRight -->
        </div>
    </div>

    <div class="container fill">
        <igc-data-chart
        computed-plot-area-margin-mode="Series"
        is-horizontal-zoom-enabled="true"
        is-vertical-zoom-enabled="true"
        name="chart"
        id="chart">
            <igc-category-x-axis
            name="xAxis"
            id="xAxis"
            label="year">
            </igc-category-x-axis>
            <igc-numeric-y-axis
            name="yAxis"
            id="yAxis"
            title="TWh"
            label-location="OutsideRight">
            </igc-numeric-y-axis>
            <igc-line-series
            name="lineSeries1"
            id="lineSeries1"
            title="Electricity"
            value-member-path="america">
            </igc-line-series>
            <igc-line-series
            name="LineSeries2"
            id="LineSeries2"
            title="Electricity"
            value-member-path="europe">
            </igc-line-series>
            <igc-line-series
            name="LineSeries3"
            id="LineSeries3"
            title="Electricity"
            value-member-path="china">
            </igc-line-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>htmlCOPY CODE

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

.aboveContentSplit {
    display: flex;
    flex-direction: row;
}
.aboveContentLeftContainer {
    margin-left: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: flex-end;
}
.aboveContentRightContainer {
    margin-right: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: flex-end;
}
cssCOPY CODE

Edit in: Codesandbox

Web Components Data Chart Integration

The Web Components Toolbar contains a Target property. This is used to link a component, such as the IgcDataChartComponent as shown in the code below:

  <div>
      <igc-toolbar
      name="Toolbar"
      id="Toolbar">
      </igc-toolbar>
  </div>

  <div class="container fill">
      <igc-data-chart
      is-horizontal-zoom-enabled="true"
      name="chart"
      id="chart">
      </igc-data-chart>
  </div>
html

  private _bind: () => void;
  constructor() {
    var toolbar = this.toolbar = document.getElementById('Toolbar') as IgcToolbarComponent;
    var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;

    this._bind = () => {
        toolbar.target = this.chart;
    }
    this._bind();
  }
ts

Several pre-existing IgcToolActionComponent items and menus become available when the IgcDataChartComponent is linked with the Toolbar. Here is a list of the built-in Web Components IgcDataChartComponent Tool Actions and their associated overlayId:

Zooming Actions

• ZoomReset: A IgcToolActionLabelComponent that invokes the resetZoom method on the chart to reset the zoom level to it's default position.
• ZoomMenu: A IgcToolActionIconMenuComponent that exposes two IgcToolActionLabelComponent items to invoke the zoomIn and zoomOut methods on the chart for increasing/decreasing the chart's zoom level.

Trend Actions

• AnalyzeMenu: A IgcToolActionIconMenuComponent that contains several options for configuring different options of the chart.
• AnalyzeHeader: A sub section header.
• LinesMenu: A sub menu containing various tools for showing different dashed horizontal lines on the chart.
  • LinesHeader: A sub menu section header for the following three tools:
    • MaxValue: A IgcToolActionCheckboxComponent that displays a dashed horizontal line along the yAxis at the maximum value of the series.
    • MinValue: A IgcToolActionCheckboxComponent that displays a dashed horizontal line along the yAxis at the minimum value of the series.
    • Average: A IgcToolActionCheckboxComponent that displays a dashed horizontal line along the yAxis at the average value of the series.
• TrendsMenu: A sub menu containing tools for applying various trendlines to the IgcDataChartComponent plot area.
  • TrendsHeader: A sub menu section header for the following three tools:
    • Exponential: A IgcToolActionRadioComponent that sets the trendLineType on each series in the chart to ExponentialFit.
    • Linear: A IgcToolActionRadioComponent that sets the trendLineType on each series in the chart to LinearFit.
    • Logarithmic: A IgcToolActionRadioComponent that sets the trendLineType on each series in the the chart to LogarithmicFit.
• HelpersHeader: A sub section header.
• SeriesAvg: A IgcToolActionCheckboxComponent that adds or removes a IgcValueLayerComponent to the chart's series collection using the ValueLayerValueMode of type Average.
• ValueLabelsMenu: A sub menu containing various tools for showing different annotations on the IgcDataChartComponent's plot area.
  • ValueLabelsHeader: A sub menu section header for the following tools:
    • ShowValueLabels: A IgcToolActionCheckboxComponent that toggles data point values by using a IgcCalloutLayerComponent.
    • ShowLastValueLabel: A IgcToolActionCheckboxComponent that toggles final value axis annotations by using a IgcFinalValueLayerComponent.
• ShowCrosshairs: A IgcToolActionCheckboxComponent that toggles mouse-over crosshair annotations via the chart's crosshairsDisplayMode property.
• ShowGridlines: A IgcToolActionCheckboxComponent that toggles extra gridlines by applying a MajorStroke to the X-Axis.

Save to Image Action

• CopyAsImage: A IgcToolActionLabelComponent that exposes an option to copy the chart to the clipboard.
• CopyHeader: A sub section header.

SVG Icons

When adding tools manually, icons can be assigned using the RenderIconFromText method. There are three paramters to pass in this method. The first is the icon collection name defined on the tool eg. iconCollectionName. The second is the name of the icon defined on the tool eg. iconName, followed by adding the SVG string.

Data URL Icons

Similarly to adding svg, you can also add an Icon image from a URL via the RegisterIconFromDataURL. The method's third parameter would be used to enter a string URL.

The following snippet shows both methods of adding an Icon.

public toolbarCustomIconOnViewInit(): void {

  const icon = '<svg width="28px" height="28px" stroke="none" viewBox="0 0 3.5 3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z" fill="#000000" fill-rule="evenodd"/></svg>';
  
  this.toolbar.registerIconFromText("CustomCollection", "CustomIcon", icon);
}
ts

public toolbarCustomIconOnViewInit(): void {

  toolbar.registerIconFromDataURL("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");

}
ts

<igc-tool-action-label
    title="Custom Icon"
    icon-name="CustomIcon"
    icon-collection-name="CustomCollection">
</igc-tool-action-label>
html

public toolbarCustomIconOnViewInit(): void {

  const icon = '<svg width="28px" height="28px" stroke="none" viewBox="0 0 3.5 3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z" fill="#000000" fill-rule="evenodd"/></svg>';

  this.toolbar.registerIconFromText("CustomCollection", "CustomIcon", icon);

}
ts

public toolbarCustomIconOnViewInit(): void {

  toolbar.registerIconFromDataURL("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
  
}
ts

@code {

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    var toolbar = this.toolbar;

    if (firstRender) {
        this.ToolbarCustomIconOnViewInit();
    }
}

private IgbToolbar toolbar;

public void ToolbarCustomIconOnViewInit()
{
	this.toolbar.EnsureReady().ContinueWith(new Action<Task>((e) =>
	{
        this.toolbar.RegisterIconFromDataURLAsync("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
	}));
}
typescript

}

```tsx
<IgrToolbar orientation="Vertical" />
autohotkey

Vertical Orientation

By default the Web Components Toolbar is shown horizontally, but it also has the ability to shown vertically by setting the orientation property.

<igc-toolbar orientation="Vertical" />
html

The following example demonstrates the vertical orientation of the Web Components Toolbar.

EXAMPLE

DATA

TS

HTML

CSS

export class CountryRenewableElectricityItem {
    public constructor(init: Partial<CountryRenewableElectricityItem>) {
        Object.assign(this, init);
    }

    public year: string;
    public europe: number;
    public china: number;
    public america: number;

}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
    public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CountryRenewableElectricityItem(
                {
                    year: `2009`,
                    europe: 34,
                    china: 21,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2010`,
                    europe: 43,
                    china: 26,
                    america: 24
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2011`,
                    europe: 66,
                    china: 29,
                    america: 28
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2012`,
                    europe: 69,
                    china: 32,
                    america: 26
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2013`,
                    europe: 58,
                    china: 47,
                    america: 38
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2014`,
                    europe: 40,
                    china: 46,
                    america: 31
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2015`,
                    europe: 78,
                    china: 50,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2016`,
                    europe: 13,
                    china: 90,
                    america: 52
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2017`,
                    europe: 78,
                    china: 132,
                    america: 50
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2019`,
                    europe: 80,
                    china: 96,
                    america: 38
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsCOPY CODE

import { IgcToolbarModule } from 'igniteui-webcomponents-layouts';
import { IgcDataChartToolbarModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartAnnotationModule, IgcDataChartInteractivityModule, IgcAnnotationLayerProxyModule, IgcDataChartCategoryTrendLineModule } from 'igniteui-webcomponents-charts';
import { IgcToolbarComponent } from 'igniteui-webcomponents-layouts';
import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcLineSeriesComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcToolbarModule,
    IgcDataChartToolbarModule,
    IgcDataChartCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartAnnotationModule,
    IgcDataChartInteractivityModule,
    IgcAnnotationLayerProxyModule,
    IgcDataChartCategoryTrendLineModule
);

export class Sample {

    private toolbar: IgcToolbarComponent
    private chart: IgcDataChartComponent
    private xAxis: IgcCategoryXAxisComponent
    private yAxis: IgcNumericYAxisComponent
    private lineSeries1: IgcLineSeriesComponent
    private _bind: () => void;

    constructor() {
        var toolbar = this.toolbar = document.getElementById('toolbar') as IgcToolbarComponent;
        var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
        var xAxis = this.xAxis = document.getElementById('xAxis') as IgcCategoryXAxisComponent;
        var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
        var lineSeries1 = this.lineSeries1 = document.getElementById('lineSeries1') as IgcLineSeriesComponent;

        this._bind = () => {
            toolbar.target = this.chart;
            xAxis.dataSource = this.countryRenewableElectricity;
            lineSeries1.xAxis = this.xAxis;
            lineSeries1.yAxis = this.yAxis;
            lineSeries1.dataSource = this.countryRenewableElectricity;
        }
        this._bind();
    }

    private _countryRenewableElectricity: CountryRenewableElectricity = null;
    public get countryRenewableElectricity(): CountryRenewableElectricity {
        if (this._countryRenewableElectricity == null)
        {
            this._countryRenewableElectricity = new CountryRenewableElectricity();
        }
        return this._countryRenewableElectricity;
    }

}

new Sample();
tsCOPY CODE

<!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="aboveContent">
        <igc-toolbar
        name="toolbar"
        id="toolbar"
        orientation="Vertical">
        </igc-toolbar>
    </div>

    <div class="container fill">
        <igc-data-chart
        is-horizontal-zoom-enabled="true"
        name="chart"
        id="chart">
            <igc-category-x-axis
            name="xAxis"
            id="xAxis"
            label="year">
            </igc-category-x-axis>
            <igc-numeric-y-axis
            name="yAxis"
            id="yAxis"
            title="TWh"
            label-location="OutsideRight">
            </igc-numeric-y-axis>
            <igc-line-series
            name="lineSeries1"
            id="lineSeries1"
            title="Electricity"
            value-member-path="america">
            </igc-line-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>htmlCOPY CODE

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

cssCOPY CODE

Edit in: Codesandbox

Color Editor

You can add a custom color editor tool to the the Web Components Toolbar, which will also work with the Command event to perform custom styling to your application.

<igc-toolbar
  name="toolbar"
  id="toolbar">
      <igc-tool-action-color-editor
      title="Series Brush Color"
      name="colorEditorTool"
      id="colorEditorTool">
      </igc-tool-action-color-editor>
</igc-toolbar>
ts

The following example demonstrates styling the Web Components Data Chart series brush with the Color Editor tool.

EXAMPLE

DATA

TS

HTML

CSS

export class CountryRenewableElectricityItem {
    public constructor(init: Partial<CountryRenewableElectricityItem>) {
        Object.assign(this, init);
    }

    public year: string;
    public europe: number;
    public china: number;
    public america: number;

}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
    public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CountryRenewableElectricityItem(
                {
                    year: `2009`,
                    europe: 34,
                    china: 21,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2010`,
                    europe: 43,
                    china: 26,
                    america: 24
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2011`,
                    europe: 66,
                    china: 29,
                    america: 28
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2012`,
                    europe: 69,
                    china: 32,
                    america: 26
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2013`,
                    europe: 58,
                    china: 47,
                    america: 38
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2014`,
                    europe: 40,
                    china: 46,
                    america: 31
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2015`,
                    europe: 78,
                    china: 50,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2016`,
                    europe: 13,
                    china: 90,
                    america: 52
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2017`,
                    europe: 78,
                    china: 132,
                    america: 50
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2019`,
                    europe: 80,
                    china: 96,
                    america: 38
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsCOPY CODE

import { IgcToolbarModule, IgcToolActionComboModule, IgcToolActionColorEditorModule } from 'igniteui-webcomponents-layouts';
import { IgcDataChartToolbarModule, IgcDataLegendModule, IgcNumberAbbreviatorModule, IgcDataChartCategoryModule, IgcDataChartCoreModule, IgcDataChartAnnotationModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcToolbarComponent, IgcToolActionColorEditorComponent } from 'igniteui-webcomponents-layouts';
import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcLineSeriesComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgcToolCommandEventArgs } from 'igniteui-webcomponents-layouts';
import { IgcSeriesComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcToolbarModule,
    IgcToolActionComboModule,
    IgcToolActionColorEditorModule,
    IgcDataChartToolbarModule,
    IgcDataLegendModule,
    IgcNumberAbbreviatorModule,
    IgcDataChartCategoryModule,
    IgcDataChartCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartAnnotationModule,
    IgcDataChartInteractivityModule,
    IgcDataChartAnnotationModule
);

export class Sample {

    private toolbar: IgcToolbarComponent
    private colorEditorTool: IgcToolActionColorEditorComponent
    private chart: IgcDataChartComponent
    private xAxis: IgcCategoryXAxisComponent
    private yAxis: IgcNumericYAxisComponent
    private lineSeries1: IgcLineSeriesComponent
    private _bind: () => void;

    constructor() {
        var toolbar = this.toolbar = document.getElementById('toolbar') as IgcToolbarComponent;
        this.colorEditorToggleSeriesBrush = this.colorEditorToggleSeriesBrush.bind(this);
        var colorEditorTool = this.colorEditorTool = document.getElementById('colorEditorTool') as IgcToolActionColorEditorComponent;
        var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
        var xAxis = this.xAxis = document.getElementById('xAxis') as IgcCategoryXAxisComponent;
        var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
        var lineSeries1 = this.lineSeries1 = document.getElementById('lineSeries1') as IgcLineSeriesComponent;

        this._bind = () => {
            toolbar.target = this.chart;
            toolbar.onCommand = this.colorEditorToggleSeriesBrush;
            xAxis.dataSource = this.countryRenewableElectricity;
            lineSeries1.xAxis = this.xAxis;
            lineSeries1.yAxis = this.yAxis;
            lineSeries1.dataSource = this.countryRenewableElectricity;
        }
        this._bind();
    }

    private _countryRenewableElectricity: CountryRenewableElectricity = null;
    public get countryRenewableElectricity(): CountryRenewableElectricity {
        if (this._countryRenewableElectricity == null)
        {
            this._countryRenewableElectricity = new CountryRenewableElectricity();
        }
        return this._countryRenewableElectricity;
    }

    public colorEditorToggleSeriesBrush(sender: any, args: IgcToolCommandEventArgs): void {
        var target = this.chart;
        var color = args.command.argumentsList[0].value;

    	switch (args.command.commandId)
    	{
            case "ToggleSeriesBrush":
                let series = target.contentSeries[0] as IgcSeriesComponent;
                series.brush = color as any;
            break;
        }
    }

}

new Sample();
tsCOPY CODE

<!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="aboveContentSplit">
        <div class="aboveContentLeftContainer">
            <igc-toolbar
            name="toolbar"
            id="toolbar">
                <igc-tool-action-color-editor
                title="Series Brush"
                name="colorEditorTool"
                id="colorEditorTool"
                command-id="ToggleSeriesBrush">
                </igc-tool-action-color-editor>
            </igc-toolbar>
        </div>
        <div class="aboveContentRightContainer">
            <!-- insert aboveContentRight -->
            <!-- end aboveContentRight -->
        </div>
    </div>

    <div class="container fill">
        <igc-data-chart
        is-horizontal-zoom-enabled="true"
        name="chart"
        id="chart">
            <igc-category-x-axis
            name="xAxis"
            id="xAxis"
            label="year">
            </igc-category-x-axis>
            <igc-numeric-y-axis
            name="yAxis"
            id="yAxis"
            title="TWh"
            label-location="OutsideRight">
            </igc-numeric-y-axis>
            <igc-line-series
            name="lineSeries1"
            id="lineSeries1"
            title="Electricity"
            value-member-path="america"
            marker-type="None">
            </igc-line-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>htmlCOPY CODE

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

.aboveContentSplit {
    display: flex;
    flex-direction: row;
}
.aboveContentLeftContainer {
    margin-left: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: flex-end;
}
.aboveContentRightContainer {
    margin-right: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: flex-end;
}
cssCOPY CODE

Edit in: Codesandbox

API References

• IgcToolbarComponent
• IgcDataChartComponent

Additional Resources

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub