added folded

demo-angularIO/src/app/zoom-pan-demmo/zoom-pan-demmo.component.html

+<mat-card>
+    <mat-card-title>
+        Zoom and Pan Demo
+    </mat-card-title>
+    <mat-card-subtitle>
+        For when you actually care about details
+    </mat-card-subtitle>
+    <mat-card-content>
+        <div fxLayout="row"
+             fxLayoutGap="10px "
+             fxLayoutAlign="start stretch">
+            <div xFlex="initial"
+                 class="chart"
+                 #drawspace> </div>
+        </div>
+    </mat-card-content>
+</mat-card>

demo-angularIO/src/app/zoom-pan-demmo/zoom-pan-demmo.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ZoomPanDemmoComponent } from './zoom-pan-demmo.component';
+
+describe('ZoomPanDemmoComponent', () => {
+  let component: ZoomPanDemmoComponent;
+  let fixture: ComponentFixture<ZoomPanDemmoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ZoomPanDemmoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ZoomPanDemmoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

demo-angularIO/src/app/zoom-pan-demmo/zoom-pan-demmo.component.ts

+import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
+import { ChartCanvas, ContinuousAxis, DataPoint, PanBehavior, ScatterChart, ScatterStyle, ZoomBehavior } from 'gist-charts';
+
+@Component( {
+  selector: 'app-zoom-pan-demmo',
+  templateUrl: './zoom-pan-demmo.component.html',
+  styleUrls: [ './zoom-pan-demmo.component.css' ]
+} )
+export class ZoomPanDemmoComponent implements AfterViewInit, OnDestroy {
+  @ViewChild( 'drawspace' )
+  drawspace: ElementRef;
+  chart: ChartCanvas;
+  intervals: number[] = [];
+
+
+
+  ngAfterViewInit() {
+    const me = this;
+    me.chart = new ChartCanvas( me.drawspace.nativeElement );
+    ( window as any ).chart = me.chart;
+    console.log( ( window as any ).chart );
+    const pointCount = 20;
+
+    const baseChart = new ScatterChart();
+    const selectionChart = new ScatterChart();
+    baseChart.margin = 5;
+    selectionChart.margin = 15;
+
+    // selectionChart.debugLogger.isEnabled = true;
+
+    selectionChart.background = 'rgba(255,255,255,0.5)';
+    selectionChart.isActive = false;
+
+    baseChart.getStyle = ( dp: DataPoint<ScatterData> ) => {
+      const style = dp.data as ScatterData;
+      return new ScatterStyle( '#333', '#333', style.radius );
+    };
+
+    selectionChart.getStyle = ( dp: DataPoint<ScatterData> ) => {
+      const style = dp.data as ScatterData;
+      return new ScatterStyle( style.stroke, style.fill, style.radius * 2 );
+    };
+
+
+    const leftAxis: ContinuousAxis = new ContinuousAxis( 'left' );
+    const bottomAxis: ContinuousAxis = new ContinuousAxis( 'bottom' );
+    const rightAxis: ContinuousAxis = new ContinuousAxis( 'right' );
+    const topAxis: ContinuousAxis = new ContinuousAxis( 'top' );
+    const axis = [
+      bottomAxis,
+      leftAxis
+    ];
+
+    axis.forEach( a => {
+      a.registerChart( baseChart );
+      a.registerChart( selectionChart );
+      a.explicitBounds = [ 0, pointCount ];
+      // a.fill = 'white';
+    } );
+
+    topAxis.getValue = bottomAxis.getValue = ( dp ) => dp.data.x;
+    rightAxis.getValue = leftAxis.getValue = ( dp ) => dp.data.y;
+
+    leftAxis.label = 'left';
+    bottomAxis.label = 'bottom';
+    rightAxis.label = 'right';
+    topAxis.label = 'top';
+
+    leftAxis.shouldExtendTicksAcrossChart = true;
+    bottomAxis.shouldExtendTicksAcrossChart = true;
+
+    let selectedData: DataPoint[] = [];
+    baseChart.margin = 5;
+    selectionChart.datalist( selectedData );
+    me.chart.addChart( [ baseChart, selectionChart ] );
+    me.chart.addAxis( axis );
+
+    let zoom = new ZoomBehavior();
+    zoom.limitZoom( axis, 0.5, 1.5 );
+
+    let pan = new PanBehavior( 'wheel' ); // use wheel because we want to click on the data
+    pan.limitPan( bottomAxis, pointCount * -0.25, pointCount * 1.25 );
+
+    me.chart.addBehavior(
+      [ zoom, pan ]
+    );
+
+    const dataList = testDataX( pointCount );
+    baseChart.datalist( dataList );
+    me.chart.beginRender();
+
+  }
+  ngOnDestroy() {
+    this.intervals.forEach( int => {
+      window.clearInterval( int );
+    } );
+  }
+
+}
+
+function testDataX( pointCount: number = 10000 ): Array<DataPoint> {
+  const scdp: Array<DataPoint> = [];
+  for ( let i = 0; i <= pointCount; i++ ) {
+    scdp.push( new DataPoint( {
+      x: i,
+      y: i,
+      radius: 3,
+      fill: 'red',
+    } ) );
+  }
+  for ( let i = 0; i <= pointCount; i++ ) {
+    scdp.push( new DataPoint( {
+      x: i,
+      y: pointCount - i,
+      radius: 3,
+      fill: 'red',
+    } ) );
+  }
+  for ( let i = 0; i <= pointCount; i++ ) {
+    scdp.push( new DataPoint( {
+      x: i,
+      y: pointCount / 2,
+      radius: 3,
+      fill: 'red',
+    } ) );
+  }
+  for ( let i = 0; i <= pointCount; i++ ) {
+    scdp.push( new DataPoint( {
+      x: pointCount / 2,
+      y: i,
+      radius: 3,
+      fill: 'red',
+    } ) );
+  }
+
+  return scdp;
+}
+
+function randomInt( min: number, max: number ): number {
+  const diff = max - min;
+  return Math.round( Math.random() * diff + min );
+}
+
+class ScatterData {
+  x = 0;
+  y = 0;
+  radius = 0;
+  fill = '';
+  stroke = '';
+}