demo file created

demo-angularIO/src/app/app-routing.module.ts

-import { ResizeableChartDemoComponent } from './resizeable-demo/resizeable-demo.component';
-import { RadialChartDemoComponent } from './radialchart-demo/radialchart-demo.component';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AreaChartDemoComponent } from './areachart-demo/areachart-demo.component';
+import { BarChartDemoComponent } from './barchart-demo/barchart-demo.component';
 import { BoxplotDemoComponent } from './boxplot-demo/boxplot-demo.component';
+import { DemoAppComponent } from './demo-app/demo-app.component';
 import { HeatmapChartDemoComponent } from './heatmapchart-demo/heatmapchart-demo.component';
-import { BarChartDemoComponent } from './barchart-demo/barchart-demo.component';
-import { ScatterChartDemoComponent } from './scatterchart-demo/scatterchart-demo.component';
-import { AreaChartDemoComponent } from './areachart-demo/areachart-demo.component';
 import { LineChartDemoComponent } from './linechart-demo/linechart-demo.component';
-import { DemoAppComponent } from './demo-app/demo-app.component';
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { RadialChartDemoComponent } from './radialchart-demo/radialchart-demo.component';
+import { ResizeableChartDemoComponent } from './resizeable-demo/resizeable-demo.component';
+import { ScatterChartDemoComponent } from './scatterchart-demo/scatterchart-demo.component';
+import { ZoomPanDemmoComponent } from './zoom-pan-demmo/zoom-pan-demmo.component';
 
 @NgModule( {
     imports: [
@@ -49,6 +51,10 @@ import { RouterModule, Routes } from '@angular/router';
                 path: 'resize',
                 component: ResizeableChartDemoComponent,
             },
+            {
+                path: 'zoom',
+                component: ZoomPanDemmoComponent,
+            },
             {
                 path: '**',
                 redirectTo: 'gistcharts'

demo-angularIO/src/app/app.module.ts

@@ -19,6 +19,7 @@ const materialItems = [ MatToolbarModule, MatCardModule ];
 
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule } from '@angular/forms';
+import { ZoomPanDemmoComponent } from './zoom-pan-demmo/zoom-pan-demmo.component';
 
 @NgModule( {
   declarations: [
@@ -31,7 +32,8 @@ import { FormsModule } from '@angular/forms';
     LineChartDemoComponent,
     RadialChartDemoComponent,
     ScatterChartDemoComponent,
-    ResizeableChartDemoComponent
+    ResizeableChartDemoComponent,
+    ZoomPanDemmoComponent
   ],
   imports: [
     BrowserModule,

gist-charts/source/classes/chartCanvas.class.ts

@@ -354,7 +354,6 @@ export class ChartCanvas {
         const me = this;
         if ( x | y ) {
             me.axisList.forEach( ( axis: BaseAxis ) => {
-
                 axis.zoom( me._currentZoomState, ( axis._implementation.isVertical ) ? y : x );
             } );
             me.beginRender();

gist-charts/source/configs/axis/baseAxis.class.ts

@@ -220,7 +220,9 @@ export abstract class BaseAxis<T = any> {
      */
     public zoom( zoom: number = 1.14, offset: number = 0 ) {
         let multiplier: number = 1;
-        if ( zoom !== this._implementation.currentZoomLevel ) { multiplier = zoom / this._implementation.currentZoomLevel; }
+        if ( zoom !== this._implementation.currentZoomLevel ) {
+            multiplier = zoom / this._implementation.currentZoomLevel;
+        }
         this._implementation.currentZoomLevel = Math.max( Math.min( zoom, this._implementation.scaleExtent[ 1 ] ), this._implementation.scaleExtent[ 0 ] );
         this._implementation.offset *= multiplier;
         this._implementation.offset += offset;