diff --git a/samples/charts/toolbar/layout-actions-for-data-chart/src/app.component.html b/samples/charts/toolbar/layout-actions-for-data-chart/src/app.component.html
index fde3de103..2231c6efa 100644
--- a/samples/charts/toolbar/layout-actions-for-data-chart/src/app.component.html
+++ b/samples/charts/toolbar/layout-actions-for-data-chart/src/app.component.html
@@ -6,20 +6,42 @@
#toolbar
[target]="chart"
orientation="Horizontal"
- (onCommand)="this.toolbarToggleTooltip($event)">
-
-
-
-
+ (onCommand)="this.toolbarToggleAnnotations($event)">
+
+
+
+
+
+
+
+
+
+
+
+
+ commandId="ZoomReset"
+ isHighlighted="true">
+
+
+
+
diff --git a/samples/charts/toolbar/layout-actions-for-data-chart/src/app.component.ts b/samples/charts/toolbar/layout-actions-for-data-chart/src/app.component.ts
index 91a403fde..06edf30fa 100644
--- a/samples/charts/toolbar/layout-actions-for-data-chart/src/app.component.ts
+++ b/samples/charts/toolbar/layout-actions-for-data-chart/src/app.component.ts
@@ -1,8 +1,8 @@
import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgxToolCommandEventArgs } from 'igniteui-angular-layouts';
-import { IgxDataChartComponent, IgxSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts';
-import { IgxToolbarComponent, IgxToolActionCheckboxComponent, IgxToolActionLabelComponent, IgxToolActionIconMenuComponent } from 'igniteui-angular-layouts';
+import { IgxDataChartComponent, IgxSeriesComponent, IgxDataToolTipLayerComponent, IgxCrosshairLayerComponent, IgxFinalValueLayerComponent } from 'igniteui-angular-charts';
+import { IgxToolbarComponent, IgxToolActionIconMenuComponent, IgxToolActionGroupHeaderComponent, IgxToolActionSubPanelComponent, IgxToolActionCheckboxComponent, IgxToolActionLabelComponent } from 'igniteui-angular-layouts';
import { IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxLineSeriesComponent } from 'igniteui-angular-charts';
@Component({
@@ -18,14 +18,26 @@ export class AppComponent implements AfterViewInit
@ViewChild("toolbar", { static: true } )
private toolbar: IgxToolbarComponent
+ @ViewChild("menuForSubPanelTool", { static: true } )
+ private menuForSubPanelTool: IgxToolActionIconMenuComponent
+ @ViewChild("subPanelGroup", { static: true } )
+ private subPanelGroup: IgxToolActionGroupHeaderComponent
+ @ViewChild("customSubPanelTools", { static: true } )
+ private customSubPanelTools: IgxToolActionSubPanelComponent
@ViewChild("enableTooltipsLabel", { static: true } )
private enableTooltipsLabel: IgxToolActionCheckboxComponent
- @ViewChild("zoomResetHidden", { static: true } )
- private zoomResetHidden: IgxToolActionLabelComponent
+ @ViewChild("enableCrosshairsLabel", { static: true } )
+ private enableCrosshairsLabel: IgxToolActionCheckboxComponent
+ @ViewChild("enableFinalValuesLabel", { static: true } )
+ private enableFinalValuesLabel: IgxToolActionCheckboxComponent
@ViewChild("zoomResetLabel", { static: true } )
private zoomResetLabel: IgxToolActionLabelComponent
+ @ViewChild("zoomResetHidden", { static: true } )
+ private zoomResetHidden: IgxToolActionLabelComponent
@ViewChild("analyzeMenu", { static: true } )
private analyzeMenu: IgxToolActionIconMenuComponent
+ @ViewChild("copyMenu", { static: true } )
+ private copyMenu: IgxToolActionLabelComponent
@ViewChild("chart", { static: true } )
private chart: IgxDataChartComponent
@ViewChild("xAxis", { static: true } )
@@ -55,7 +67,7 @@ export class AppComponent implements AfterViewInit
{
}
- public toolbarToggleTooltip({ sender, args }: { sender: any, args: IgxToolCommandEventArgs }): void {
+ public ToolbarToggleAnnotations({ sender, args }: { sender: any, args: IgxToolCommandEventArgs }): void {
var target = this.chart;
switch (args.command.commandId)
{
@@ -80,6 +92,50 @@ export class AppComponent implements AfterViewInit
target.series.remove(toRemove);
}
}
+ break;
+ case "EnableCrosshairs":
+ var enable = args.command.argumentsList[0].value as boolean;
+ if (enable)
+ {
+ target.series.add(new IgxCrosshairLayerComponent());
+ }
+ else
+ {
+ var toRemove = null;
+ for (var i = 0; i < target.actualSeries.length; i++) {
+ let s = target.actualSeries[i] as IgxSeriesComponent;
+ if (s instanceof IgxCrosshairLayerComponent)
+ {
+ 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 IgxFinalValueLayerComponent());
+ }
+ else
+ {
+ var toRemove = null;
+ for (var i = 0; i < target.actualSeries.length; i++) {
+ let s = target.actualSeries[i] as IgxSeriesComponent;
+ if (s instanceof IgxFinalValueLayerComponent)
+ {
+ toRemove = s;
+ }
+ }
+ if (toRemove != null)
+ {
+ target.series.remove(toRemove);
+ }
+ }
break;
}
}