@tetacom/svg-charts 1.1.10 → 1.1.13

package/fesm2020/tetacom-svg-charts.mjs

@@ -2,14 +2,12 @@ import * as i0 from '@angular/core';
 import { Injectable, Component, ChangeDetectionStrategy, Input, ViewChild, HostListener, ChangeDetectorRef, Directive, HostBinding, EventEmitter, Output, NgModule } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { BehaviorSubject, Subject, map, shareReplay, filter, combineLatest, withLatestFrom, ReplaySubject, tap, takeWhile } from 'rxjs';
+import { BehaviorSubject, Subject, map, shareReplay, filter, combineLatest, withLatestFrom, ReplaySubject, animationFrameScheduler, tap, takeWhile } from 'rxjs';
 import * as d3 from 'd3';
 import { zoomIdentity } from 'd3';
 import { maxIndex } from 'd3-array';
-import { throttleTime, tap as tap$1 } from 'rxjs/operators';
+import { throttleTime, debounceTime, tap as tap$1 } from 'rxjs/operators';
 import * as i3 from '@angular/platform-browser';
-import * as d3annotation from 'd3-svg-annotation';
-import { annotationBadge, annotationLabel, annotationCallout, annotationCalloutCircle, annotationCalloutCurve, annotationCalloutElbow, annotationCalloutRect, annotationCustomType, annotationXYThreshold } from 'd3-svg-annotation';
 
 var ZoomType;
 (function (ZoomType) {
@@ -54,7 +52,9 @@ const defaultChartConfig = () => ({
     xAxis: [],
     yAxis: [],
     series: [],
-    gridLines: true,
+    gridLines: {
+        enable: true
+    }
 });
 
 var ScaleType;
@@ -110,16 +110,21 @@ class ChartService {
     constructor() {
         this.config$ = new BehaviorSubject(defaultChartConfig());
         this.size$ = new BehaviorSubject(new DOMRectReadOnly());
-        this.pointerMove$ = new BehaviorSubject(null);
+        this.pointerMove$ = new Subject();
         this.tooltips$ = new BehaviorSubject(new Map());
         this.plotBandEvent$ = new Subject();
         this.plotLineMove$ = new Subject();
         this.pointMove$ = new Subject();
         this.chartClick$ = new Subject();
         this.chartContextMenu$ = new Subject();
+        this.annotationEvent$ = new Subject();
+        this.annotationMove$ = new Subject();
         this.config = this.config$
             .asObservable()
-            .pipe(map(this.setDefaults), map(this.setPreparationData), shareReplay(1));
+            .pipe(map(this.setDefaults), map(this.setPreparationData), shareReplay({
+            bufferSize: 1,
+            refCount: true
+        }));
         this.size = this.size$.asObservable();
         this.pointerMove = this.pointerMove$.asObservable();
         this.tooltips = this.tooltips$.asObservable();
@@ -128,6 +133,9 @@ class ChartService {
         this.pointMove = this.pointMove$.asObservable();
         this.chartClick = this.chartClick$.asObservable();
         this.chartContextMenu = this.chartContextMenu$.asObservable();
+        this.annotationClick = this.annotationEvent$.asObservable().pipe(filter((_) => _?.event?.type === 'click'));
+        this.annotationContextMenu = this.annotationEvent$.asObservable().pipe(filter((_) => _?.event?.type === 'contextmenu'));
+        this.annotationMove = this.annotationMove$.asObservable();
         this.plotBandClick = this.plotBandEvent$
             .asObservable()
             .pipe(filter((_) => _?.event?.type === 'click'));
@@ -158,6 +166,12 @@ class ChartService {
     clearTooltips() {
         this.tooltips$.next(new Map());
     }
+    emitMoveAnnotation(event) {
+        this.annotationMove$.next(event);
+    }
+    emitAnnotation(event) {
+        this.annotationEvent$.next(event);
+    }
     emitPlotband(event) {
         this.plotBandEvent$.next(event);
     }
@@ -239,7 +253,10 @@ class ZoomService {
     constructor() {
         this.broadcastSubscription = [];
         this.zoomed$ = new BehaviorSubject(null);
-        this.zoomed = this.zoomed$.asObservable().pipe(shareReplay(1));
+        this.zoomed = this.zoomed$.asObservable().pipe(shareReplay({
+            bufferSize: 1,
+            refCount: true
+        }));
     }
     setZoom(zoom) {
         this.zoomed$.next(zoom);
@@ -510,7 +527,10 @@ class ScaleService {
                 }
             }
             return map;
-        }), shareReplay(1));
+        }), shareReplay({
+            bufferSize: 1,
+            refCount: true
+        }));
         this.yScaleMap = combineLatest([
             this.chartService.size,
             this.chartService.config,
@@ -563,7 +583,10 @@ class ScaleService {
                 }
             }
             return map;
-        }), shareReplay(1));
+        }), shareReplay({
+            bufferSize: 1,
+            refCount: true
+        }));
     }
 }
 ScaleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ScaleService, deps: [{ token: ChartService }, { token: ZoomService }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -610,10 +633,16 @@ class BroadcastService {
         this.brushEmitter.next(value);
     }
     subscribeToZoom(channel) {
-        return this.zoomEmitter.asObservable().pipe(filter((msg) => channel && msg.channel === channel), shareReplay(1));
+        return this.zoomEmitter.asObservable().pipe(filter((msg) => channel && msg.channel === channel), shareReplay({
+            bufferSize: 1,
+            refCount: true
+        }));
     }
     subscribeToBrush(channel) {
-        return this.brushEmitter.asObservable().pipe(filter((msg) => channel && msg.channel === channel), shareReplay(1));
+        return this.brushEmitter.asObservable().pipe(filter((msg) => channel && msg.channel === channel), shareReplay({
+            bufferSize: 1,
+            refCount: true
+        }));
     }
 }
 BroadcastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BroadcastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -626,14 +655,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
         }], ctorParameters: function () { return []; } });
 
 class BrushService {
-    constructor(broadcastService) {
+    constructor(broadcastService, zone) {
         this.broadcastService = broadcastService;
+        this.zone = zone;
         this.brushMap = new Map()
             .set(BrushType.x, d3.brushX())
             .set(BrushType.y, d3.brushY());
     }
     applyBrush(svgElement, config, brushScale) {
         this.broadcastSubscribtion?.unsubscribe();
+        this.brush?.on('start brush end', null);
         if (config.brush?.enable) {
             this.brush = this.brushMap.get(config?.brush?.type ?? BrushType.x);
             const container = d3.select(svgElement.nativeElement);
@@ -642,14 +673,37 @@ class BrushService {
                     if (!_.selection)
                         return;
                     const [from, to] = _.selection;
-                    if (_.type === 'end' && _.sourceEvent instanceof MouseEvent) {
+                    if (to - from === 0) {
+                        const selection = this.selection?.map(brushScale) ?? [config.brush?.from, config.brush?.to].map(brushScale);
+                        const halfBrushHeight = (selection[1] - selection[0]) / 2;
+                        const invertedSelection = [from - halfBrushHeight, to + halfBrushHeight].map(brushScale.invert);
+                        if (invertedSelection[1] - invertedSelection[0] > config.brush?.max) {
+                            container.call(this.brush.move, [invertedSelection[0], invertedSelection[0] + config.brush?.max].map(brushScale));
+                            return;
+                        }
+                        if (invertedSelection[1] - invertedSelection[0] < config.brush?.min) {
+                            container.call(this.brush.move, [invertedSelection[0], invertedSelection[0] + config.brush?.min].map(brushScale));
+                            return;
+                        }
+                        container.call(this.brush.move, [from - halfBrushHeight, to + halfBrushHeight]);
+                        return;
+                    }
+                    if (brushScale.invert(to) - brushScale.invert(from) > config.brush?.max) {
+                        container.call(this.brush.move, this.selection ? [this.selection[0], this.selection[0] + config.brush?.max].map(brushScale) : [config.brush?.from, config.brush?.to].map(brushScale));
+                        return;
+                    }
+                    if (brushScale.invert(to) - brushScale.invert(from) < config.brush?.min) {
+                        container.call(this.brush.move, this.selection ? [this.selection[0], this.selection[0] + config.brush?.min].map(brushScale) : [config.brush?.from, config.brush?.to].map(brushScale));
+                        return;
+                    }
+                    if (_.sourceEvent instanceof MouseEvent) {
                         this.selection = _.selection.map(brushScale.invert);
                     }
                     const brushMessage = new BrushMessage({
                         event: _,
                         selection: [brushScale.invert(from), brushScale.invert(to)],
                         brushType: config?.brush?.type ?? BrushType.x,
-                        brushScale,
+                        brushScale
                     });
                     this.broadcastService.broadcastBrush({
                         channel: config?.zoom?.syncChannel,
@@ -657,25 +711,39 @@ class BrushService {
                     });
                 }
             });
-            setTimeout(() => {
-                container.call(this.brush);
-                let domain = brushScale.domain();
-                if (config?.brush?.from) {
-                    domain[0] = config.brush.from;
-                }
-                if (config?.brush?.to) {
-                    domain[1] = config.brush.to;
-                }
-                container.call(this.brush.move, this.selection ? this.selection.map(brushScale) : domain.map(brushScale), {});
-            }, 0);
+            this.zone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    container.call(this.brush);
+                    let domain = brushScale.domain();
+                    if (config?.brush?.from) {
+                        domain[0] = config.brush.from;
+                    }
+                    if (config?.brush?.to) {
+                        domain[1] = config.brush.to;
+                    }
+                    container.call(this.brush.move, this.selection ? this.selection.map(brushScale) : domain.map(brushScale), {});
+                }, 0);
+            });
             this.broadcastSubscribtion = this.broadcastService.subscribeToZoom(config?.zoom?.syncChannel).pipe(filter((m) => {
                 return m.message.event.sourceEvent instanceof MouseEvent || m.message.event.sourceEvent instanceof WheelEvent;
-            }), throttleTime(50, undefined, { trailing: true }), tap((m) => {
+            }), throttleTime(0, animationFrameScheduler, { trailing: true }), tap((m) => {
                 const { message: { brushDomain } } = m;
                 container.call(this.brush.move, [
                     brushScale(brushDomain[0]),
                     brushScale(brushDomain[1]),
                 ]);
+                if (m.message.event.type === 'end') {
+                    const brushMessage = new BrushMessage({
+                        event: null,
+                        selection: brushDomain,
+                        brushType: config?.brush?.type ?? BrushType.x,
+                        brushScale,
+                    });
+                    this.broadcastService.broadcastBrush({
+                        channel: config?.zoom?.syncChannel,
+                        message: brushMessage,
+                    });
+                }
                 this.selection = brushDomain;
             })).subscribe();
         }
@@ -684,14 +752,14 @@ class BrushService {
         this.selection = null;
     }
 }
-BrushService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BrushService, deps: [{ token: BroadcastService }], target: i0.ɵɵFactoryTarget.Injectable });
+BrushService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BrushService, deps: [{ token: BroadcastService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
 BrushService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BrushService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BrushService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: BroadcastService }]; } });
+        }], ctorParameters: function () { return [{ type: BroadcastService }, { type: i0.NgZone }]; } });
 
 class TooltipComponent {
     constructor(svc, cdr, zoomService, sanitizer, _zone) {
@@ -710,7 +778,7 @@ class TooltipComponent {
             });
         }));
         this.position = this.svc.pointerMove.pipe(filter((event) => !!event), map((_) => {
-            return this.getPoisition(_);
+            return this.getPosition(_);
         }), tap(() => this.cdr.detectChanges()));
         const transformHtml = (html) => {
             return this.sanitizer.bypassSecurityTrustHtml(html);
@@ -737,7 +805,7 @@ class TooltipComponent {
             return formatted;
         }));
     }
-    getPoisition(event) {
+    getPosition(event) {
         const centerX = this.size.width / 2;
         const centerY = this.size.height / 2;
         const padding = { x: 10, y: 10 };
@@ -755,10 +823,10 @@ class TooltipComponent {
     }
 }
 TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TooltipComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ZoomService }, { token: i3.DomSanitizer }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TooltipComponent, selector: "teta-tooltip", inputs: { size: "size", config: "config" }, ngImport: i0, template: "<ng-container *ngIf=\"position | async as p\">\n\n  <div class=\"chart-tooltip color-text-90 bg-background-50 shadow-2 padding-2 border-radius-1\"\n       *ngIf=\"displayTooltips | async as tool\"\n       [style.position]=\"'fixed'\"\n       [style.opacity]=\"display | async\"\n       style=\"pointer-events: none; min-width: 200px;\"\n       [style.left]=\"p.left\"\n       [style.top]=\"p.top\"\n       [style.bottom]=\"p.bottom\"\n       [style.right]=\"p.right\"\n       [innerHTML]=\"tool\">\n  </div>\n</ng-container>\n\n", styles: [":host{position:absolute;z-index:2}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TooltipComponent, selector: "teta-tooltip", inputs: { size: "size", config: "config" }, ngImport: i0, template: "<ng-container *ngIf=\"position | async as p\">\n  <div class=\"chart-tooltip color-text-90 bg-background-50 shadow-2 padding-2 border-radius-1\"\n       *ngIf=\"displayTooltips | async as tool\"\n       [style.position]=\"'fixed'\"\n       [style.opacity]=\"display | async\"\n       style=\"pointer-events: none; min-width: 200px;\"\n       [style.left]=\"p.left\"\n       [style.top]=\"p.top\"\n       [style.bottom]=\"p.bottom\"\n       [style.right]=\"p.right\"\n       [innerHTML]=\"tool\">\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;z-index:2}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"position | async as p\">\n\n  <div class=\"chart-tooltip color-text-90 bg-background-50 shadow-2 padding-2 border-radius-1\"\n       *ngIf=\"displayTooltips | async as tool\"\n       [style.position]=\"'fixed'\"\n       [style.opacity]=\"display | async\"\n       style=\"pointer-events: none; min-width: 200px;\"\n       [style.left]=\"p.left\"\n       [style.top]=\"p.top\"\n       [style.bottom]=\"p.bottom\"\n       [style.right]=\"p.right\"\n       [innerHTML]=\"tool\">\n  </div>\n</ng-container>\n\n", styles: [":host{position:absolute;z-index:2}\n"] }]
+            args: [{ selector: 'teta-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"position | async as p\">\n  <div class=\"chart-tooltip color-text-90 bg-background-50 shadow-2 padding-2 border-radius-1\"\n       *ngIf=\"displayTooltips | async as tool\"\n       [style.position]=\"'fixed'\"\n       [style.opacity]=\"display | async\"\n       style=\"pointer-events: none; min-width: 200px;\"\n       [style.left]=\"p.left\"\n       [style.top]=\"p.top\"\n       [style.bottom]=\"p.bottom\"\n       [style.right]=\"p.right\"\n       [innerHTML]=\"tool\">\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;z-index:2}\n"] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ZoomService }, { type: i3.DomSanitizer }, { type: i0.NgZone }]; }, propDecorators: { size: [{
                 type: Input
             }], config: [{
@@ -885,16 +953,18 @@ class GridlinesComponent {
     }
 }
 GridlinesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: GridlinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GridlinesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: { size: "size", xScaleMap: "xScaleMap", yScaleMap: "yScaleMap" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let tick of tickYValues\">\n  <svg:line [attr.x1]=\"0\" stroke=\"red\"\n            [attr.y1]=\"yScaleMap.get(0)(tick)\"\n            [attr.x2]=\"size?.width\"\n            [attr.y2]=\"yScaleMap.get(0)(tick)\"></svg:line>\n</ng-container>\n\n<ng-container *ngFor=\"let tick of tickXValues\">\n  <svg:line [attr.x1]=\"xScaleMap.get(0)(tick)\"\n            stroke=\"red\"\n            [attr.y1]=\"0\"\n            [attr.x2]=\"xScaleMap.get(0)(tick)\"\n            [attr.y2]=\"size?.height\"></svg:line>\n</ng-container>\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke-dasharray:1,4;stroke:var(--color-text-20)}\n"], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+GridlinesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: { size: "size", xScaleMap: "xScaleMap", yScaleMap: "yScaleMap", config: "config" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"config.gridLines?.showY !== false\" >\n  <ng-container *ngFor=\"let tick of tickYValues\">\n    <svg:line [attr.x1]=\"0\" stroke=\"red\"\n              [attr.y1]=\"yScaleMap.get(0)(tick)\"\n              [attr.x2]=\"size?.width\"\n              [attr.y2]=\"yScaleMap.get(0)(tick)\"></svg:line>\n  </ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"config.gridLines?.showX !== false\" >\n  <ng-container *ngFor=\"let tick of tickXValues\">\n    <svg:line [attr.x1]=\"xScaleMap.get(0)(tick)\"\n              stroke=\"red\"\n              [attr.y1]=\"0\"\n              [attr.x2]=\"xScaleMap.get(0)(tick)\"\n              [attr.y2]=\"size?.height\"></svg:line>\n  </ng-container>\n</ng-container>\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke-dasharray:1,4;stroke:var(--color-text-20)}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: GridlinesComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[teta-gridlines]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let tick of tickYValues\">\n  <svg:line [attr.x1]=\"0\" stroke=\"red\"\n            [attr.y1]=\"yScaleMap.get(0)(tick)\"\n            [attr.x2]=\"size?.width\"\n            [attr.y2]=\"yScaleMap.get(0)(tick)\"></svg:line>\n</ng-container>\n\n<ng-container *ngFor=\"let tick of tickXValues\">\n  <svg:line [attr.x1]=\"xScaleMap.get(0)(tick)\"\n            stroke=\"red\"\n            [attr.y1]=\"0\"\n            [attr.x2]=\"xScaleMap.get(0)(tick)\"\n            [attr.y2]=\"size?.height\"></svg:line>\n</ng-container>\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke-dasharray:1,4;stroke:var(--color-text-20)}\n"] }]
+            args: [{ selector: '[teta-gridlines]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"config.gridLines?.showY !== false\" >\n  <ng-container *ngFor=\"let tick of tickYValues\">\n    <svg:line [attr.x1]=\"0\" stroke=\"red\"\n              [attr.y1]=\"yScaleMap.get(0)(tick)\"\n              [attr.x2]=\"size?.width\"\n              [attr.y2]=\"yScaleMap.get(0)(tick)\"></svg:line>\n  </ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"config.gridLines?.showX !== false\" >\n  <ng-container *ngFor=\"let tick of tickXValues\">\n    <svg:line [attr.x1]=\"xScaleMap.get(0)(tick)\"\n              stroke=\"red\"\n              [attr.y1]=\"0\"\n              [attr.x2]=\"xScaleMap.get(0)(tick)\"\n              [attr.y2]=\"size?.height\"></svg:line>\n  </ng-container>\n</ng-container>\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke-dasharray:1,4;stroke:var(--color-text-20)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { size: [{
                 type: Input
             }], xScaleMap: [{
                 type: Input
             }], yScaleMap: [{
                 type: Input
+            }], config: [{
+                type: Input
             }] } });
 
 class PlotBandComponent {
@@ -930,7 +1000,7 @@ class PlotBandComponent {
         const grabElements = d3
             .select(this.element.nativeElement)
             .selectAll('.grabber');
-        const drag = d3
+        this.dragElements = d3
             .drag()
             .subject(() => {
             if (this.axis.orientation === AxisOrientation.x) {
@@ -939,7 +1009,8 @@ class PlotBandComponent {
             if (this.axis.orientation === AxisOrientation.y) {
                 return { y: plotbandElement.attr('y') };
             }
-        })
+        });
+        const drag = this.dragElements
             .on('start drag end', (event, d) => {
             let bandSize = parseFloat(plotbandElement.attr(this.axis.orientation === AxisOrientation.x ? 'width' : 'height'));
             d.from = this.scale.invert(event[AxisOrientation[this.axis.orientation]]);
@@ -951,8 +1022,9 @@ class PlotBandComponent {
             this.cdr.detectChanges();
         });
         let grabberKey;
-        const resize = d3
-            .drag()
+        this.resizeElements = d3
+            .drag();
+        const resize = this.resizeElements
             .on('start drag end', (event, d) => {
             requestAnimationFrame(() => {
                 if (event?.type === 'start') {
@@ -998,6 +1070,10 @@ class PlotBandComponent {
             grabElements.call(resize);
         }
     }
+    ngOnDestroy() {
+        this.dragElements.on('start drag end', null);
+        this.resizeElements.on('start drag end', null);
+    }
     get bandSize() {
         return Math.abs(this.scale(this.plotBand.to) - this.scale(this.plotBand.from));
     }
@@ -1058,7 +1134,7 @@ class PlotlineComponent {
         const grabElement = d3
             .select(this.element.nativeElement)
             .selectAll('.grabber');
-        const drag = d3
+        this.dragElements = d3
             .drag()
             .subject(() => {
             if (this.axis.orientation === AxisOrientation.y) {
@@ -1067,7 +1143,8 @@ class PlotlineComponent {
             if (this.axis.orientation === AxisOrientation.x) {
                 return { x: plotlineElement.attr('x1') };
             }
-        })
+        });
+        const drag = this.dragElements
             .on('start drag end', (event, d) => {
             d.value = this.scale.invert(event[AxisOrientation[this.axis.orientation]]);
             this.emit({
@@ -1082,6 +1159,9 @@ class PlotlineComponent {
             grabElement.call(drag);
         }
     }
+    ngOnDestroy() {
+        this.dragElements.on('start drag end', null);
+    }
     emit(event) {
         this.chartService.emitPlotline(event);
     }
@@ -1110,59 +1190,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 type: Input
             }] } });
 
-class AnnotationComponent {
-    constructor() { }
-    ngOnInit() { }
-    ngAfterViewInit() {
-        this._node = d3.select(this.node.nativeElement);
-        this.drawAnnotations();
-    }
-    drawAnnotations() {
-        if (!this.node)
-            return;
-        const annotations = this.annotations?.map((annotation) => {
-            const x = this.xScaleMap.get(annotation.xAxisIndex);
-            const y = this.yScaleMap.get(annotation.yAxisIndex);
-            return {
-                note: annotation.note,
-                connector: annotation.connector,
-                x: x(annotation.point?.x),
-                y: y(annotation.point?.y),
-                dx: annotation.dx,
-                dy: annotation.dy,
-                type: annotation.type ?? d3annotation.annotationLabel,
-                className: annotation.className,
-            };
-        });
-        this._makeAnnotations = d3annotation
-            .annotation()
-            .annotations(annotations ?? [])
-            .editMode(false);
-        this._node.call(this._makeAnnotations);
-    }
-    ngOnChanges(changes) {
-        if (changes.hasOwnProperty('xScaleMap') &&
-            changes.hasOwnProperty('yScaleMap')) {
-            this.drawAnnotations();
-        }
-    }
-}
-AnnotationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AnnotationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AnnotationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: AnnotationComponent, selector: "[teta-annotation]", inputs: { annotations: "annotations", xScaleMap: "xScaleMap", yScaleMap: "yScaleMap" }, viewQueries: [{ propertyName: "node", first: true, predicate: ["svg"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<svg:g #svg></svg:g>\n", styles: [""] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AnnotationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: '[teta-annotation]', template: "<svg:g #svg></svg:g>\n", styles: [""] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { annotations: [{
-                type: Input
-            }], xScaleMap: [{
-                type: Input
-            }], yScaleMap: [{
-                type: Input
-            }], node: [{
-                type: ViewChild,
-                args: ['svg']
-            }] } });
-
 class SeriesBaseComponent {
     constructor(svc, cdr, scaleService, zoomService, element) {
         this.svc = svc;
@@ -1171,6 +1198,12 @@ class SeriesBaseComponent {
         this.zoomService = zoomService;
         this.element = element;
     }
+    set config(config) {
+        this._config = config;
+    }
+    get config() {
+        return this._config;
+    }
     set series(series) {
         this._series = series;
     }
@@ -1181,7 +1214,7 @@ class SeriesBaseComponent {
     }
 }
 SeriesBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SeriesBaseComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SeriesBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: SeriesBaseComponent, selector: "ng-component", inputs: { config: "config", series: "series", size: "size", rect: "rect" }, ngImport: i0, template: '', isInline: true });
+SeriesBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: SeriesBaseComponent, selector: "ng-component", inputs: { config: "config", series: "series" }, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SeriesBaseComponent, decorators: [{
             type: Component,
             args: [{
@@ -1191,10 +1224,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 type: Input
             }], series: [{
                 type: Input
-            }], size: [{
-                type: Input
-            }], rect: [{
-                type: Input
             }] } });
 
 var DragPointType;
@@ -1204,7 +1233,7 @@ var DragPointType;
     DragPointType[DragPointType["xy"] = 2] = "xy";
 })(DragPointType || (DragPointType = {}));
 
-class LineSeriesComponent extends SeriesBaseComponent {
+class LinearSeriesBase extends SeriesBaseComponent {
     constructor(svc, cdr, scaleService, zoomService, element) {
         super(svc, cdr, scaleService, zoomService, element);
         this.svc = svc;
@@ -1238,6 +1267,13 @@ class LineSeriesComponent extends SeriesBaseComponent {
             return line(this.series.data);
         }));
     }
+    ngOnDestroy() {
+        this.markers?.on('start drag end', null);
+        this.svc.setTooltip({
+            point: null,
+            series: this.series,
+        });
+    }
     ngAfterViewInit() {
         const drag = (node, event, d) => {
             if (d.marker?.dragType === DragPointType.x ||
@@ -1257,13 +1293,13 @@ class LineSeriesComponent extends SeriesBaseComponent {
             });
             this.cdr.detectChanges();
         };
-        const dragMarkers = d3
+        this.markers = d3
             .drag()
             .subject(function (event, d) {
             const node = d3.select(this);
             return { x: node.attr('cx'), y: node.attr('cy') };
-        })
-            .on('start drag end', function (event, d) {
+        });
+        const dragMarkers = this.markers.on('start drag end', function (event, d) {
             const node = d3.select(this);
             drag(node, event, d);
         });
@@ -1366,6 +1402,25 @@ class LineSeriesComponent extends SeriesBaseComponent {
         }
     }
 }
+LinearSeriesBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: LinearSeriesBase, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+LinearSeriesBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: LinearSeriesBase, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: LinearSeriesBase, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                }]
+        }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
+
+class LineSeriesComponent extends LinearSeriesBase {
+    constructor(svc, cdr, scaleService, zoomService, element) {
+        super(svc, cdr, scaleService, zoomService, element);
+        this.svc = svc;
+        this.cdr = cdr;
+        this.scaleService = scaleService;
+        this.zoomService = zoomService;
+        this.element = element;
+    }
+}
 LineSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: LineSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 LineSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: LineSeriesComponent, selector: "svg:svg[teta-line-series]", usesInheritance: true, ngImport: i0, template: "<svg:path\n  class=\"line\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n  fill=\"none\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t.x !== undefined && t.y!== undefined\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n\n<ng-container *ngIf=\"getMarkers() as markers\">\n  <svg:circle\n    class=\"marker\"\n    *ngFor=\"let point of markers\"\n    [class.draggable-marker]=\"point?.marker?.draggable\"\n    [attr.r]=\"point.marker.style?.radius ?? 5\"\n    [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n    [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n    [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n    [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n    [attr.cx]=\"x(point.x)\"\n    [attr.cy]=\"y(point.y)\"\n  >\n  </svg:circle>\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: LineSeriesComponent, decorators: [{
@@ -1469,7 +1524,7 @@ class BlockSeriesComponent extends SeriesBaseComponent {
         this.id = (Date.now() + Math.random()).toString(36);
     }
     ngOnInit() {
-        const defaultVisiblePixels = 1;
+        const defaultVisiblePixels = 0;
         this.x = this.scaleService.xScaleMap.pipe(map((_) => _.get(this.series.xAxisIndex)));
         this.y = this.scaleService.yScaleMap.pipe(map((_) => _.get(this.series.yAxisIndex)));
         this.displayPoints = this.y.pipe(map((y) => {
@@ -1565,7 +1620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
             args: [{ selector: 'svg:svg[teta-block-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n                        gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngFor=\"let point of data.points\">\n    <svg:g (mouseenter)=\"mouseenter(point)\"\n           (mouseleave)=\"mouseleave(point)\">\n      <svg:rect\n        *ngIf=\"!!config.inverted\"\n        [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n        [attr.y]=\"data.y(point.y)\"\n        [attr.height]=\"data.y(point.y1) - data.y(point.y)\"\n        [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n        [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n        [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n        [attr.stroke-width]=\"series.style?.strokeWidth\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\">\n      </svg:rect>\n      <svg:rect\n        *ngIf=\"!config.inverted\"\n        [attr.x]=\"data.x(point.x)\"\n        [attr.y]=\"data.y(0)\"\n        [attr.height]=\"data.y(0) - data.y(point.y)\"\n        [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n        [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n        [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n        [attr.stroke-width]=\"series.style?.strokeWidth\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\">\n      </svg:rect>\n      <svg:text *ngIf=\"point.text\"\n                x=\"50%\"\n                [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                alignment-baseline=\"middle\"\n                text-anchor=\"middle\">{{ point.text }}\n      </svg:text>\n\n      <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n      <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n\n    </svg:g>\n  </ng-container>\n\n\n</ng-container>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
 
-class AreaSeriesComponent extends SeriesBaseComponent {
+class AreaSeriesComponent extends LinearSeriesBase {
     constructor(svc, cdr, scaleService, zoomService, element) {
         super(svc, cdr, scaleService, zoomService, element);
         this.svc = svc;
@@ -1578,15 +1633,14 @@ class AreaSeriesComponent extends SeriesBaseComponent {
         this.id = (Date.now() + Math.random()).toString(36);
     }
     ngOnInit() {
-        this.transform = this.svc.pointerMove.pipe(withLatestFrom(this.scaleService.xScaleMap, this.scaleService.yScaleMap), map((data) => {
-            const [event, x, y] = data;
-            return this.getTransform(event, x, y);
-        }), tap(() => this.cdr.detectChanges()));
-        this.path = combineLatest([
+        super.ngOnInit();
+        this.areaPath = combineLatest([
             this.scaleService.xScaleMap,
             this.scaleService.yScaleMap,
-        ]).pipe(withLatestFrom(this.scaleService.xAxisMap, this.scaleService.yAxisMap), map((data) => {
-            const [[x, y], xAxisMap, yAxisMap] = data;
+        ]).pipe(map((data) => {
+            const [x, y] = data;
+            this.x = x.get(this.series.xAxisIndex);
+            this.y = y.get(this.series.yAxisIndex);
             this.x = x.get(this.series.xAxisIndex);
             this.y = y.get(this.series.yAxisIndex);
             const area = d3
@@ -1602,134 +1656,12 @@ class AreaSeriesComponent extends SeriesBaseComponent {
             return area(this.series.data);
         }));
     }
-    ngAfterViewInit() {
-        const drag = (node, event, d) => {
-            if (d.marker?.dragType === DragPointType.x ||
-                d.marker?.dragType === DragPointType.xy) {
-                d.x = this.x.invert(event.x);
-            }
-            if (d.marker?.dragType === DragPointType.y ||
-                d.marker?.dragType === DragPointType.xy) {
-                d.y = this.y.invert(event.y);
-            }
-            this.svc.emitPoint({
-                target: {
-                    series: this.series,
-                    point: d,
-                },
-                event,
-            });
-            this.cdr.detectChanges();
-        };
-        const dragMarkers = d3
-            .drag()
-            .subject(function (event, d) {
-            const node = d3.select(this);
-            return { x: node.attr('cx'), y: node.attr('cy') };
-        })
-            .on('start drag end', function (event, d) {
-            const node = d3.select(this);
-            drag(node, event, d);
-        });
-        const draggableMarkers = this.series.data?.filter((_) => _?.marker && _?.marker?.draggable);
-        const element = d3
-            .select(this.element.nativeElement)
-            .selectAll('.draggable-marker')
-            .data(draggableMarkers);
-        element.call(dragMarkers);
-        this.svgElement = d3
-            .select(this.element.nativeElement)
-            .select('.line')
-            .node();
-    }
-    getMarkers() {
-        return this.series.data?.filter((_) => _?.marker);
-    }
-    getTransform(event, x, y) {
-        const mouse = [event?.offsetX, event?.offsetY];
-        const foundX = x.get(this.series.xAxisIndex);
-        const foundY = y.get(this.series.yAxisIndex);
-        const tooltipTracking = this.config?.tooltip?.tracking;
-        const lineIntersection = (p0_x, p0_y, p1_x, p1_y, p2_x, p2_y, p3_x, p3_y) => {
-            const rV = {};
-            let s1_x, s1_y, s2_x, s2_y;
-            s1_x = p1_x - p0_x;
-            s1_y = p1_y - p0_y;
-            s2_x = p3_x - p2_x;
-            s2_y = p3_y - p2_y;
-            let s, t;
-            s =
-                (-s1_y * (p0_x - p2_x) + s1_x * (p0_y - p2_y)) /
-                    (-s2_x * s1_y + s1_x * s2_y);
-            t =
-                (s2_x * (p0_y - p2_y) - s2_y * (p0_x - p2_x)) /
-                    (-s2_x * s1_y + s1_x * s2_y);
-            if (s >= 0 && s <= 1 && t >= 0 && t <= 1) {
-                // Collision detected
-                rV.x = p0_x + t * s1_x;
-                rV.y = p0_y + t * s1_y;
-            }
-            return rV;
-        };
-        if (tooltipTracking === TooltipTracking.x) {
-            const bisect = d3.bisector((_) => _.x).right;
-            const pointer = mouse[0];
-            const x0 = foundX.invert(pointer);
-            const filtered = this.series.data.filter((_) => _.y !== null && _.x !== null);
-            const rightId = bisect(filtered, x0);
-            const range = foundY.range();
-            const intersect = lineIntersection(pointer, range[0], pointer, range[1], foundX(filtered[rightId - 1]?.x), foundY(filtered[rightId - 1]?.y), foundX(filtered[rightId]?.x), foundY(filtered[rightId]?.y));
-            const x = foundX.invert(intersect.x);
-            const y = foundY.invert(intersect.y);
-            if (x !== null && x !== undefined && !isNaN(x) && y !== null && y !== undefined && !isNaN(y)) {
-                this.svc.setTooltip({
-                    point: { x: foundX.invert(intersect.x), y: foundY.invert(intersect.y) },
-                    series: this.series,
-                });
-            }
-            else {
-                this.svc.setTooltip({
-                    point: null,
-                    series: this.series,
-                });
-            }
-            return {
-                x: intersect.x,
-                y: intersect.y,
-            };
-        }
-        if (tooltipTracking === TooltipTracking.y) {
-            const bisect = d3.bisector((_) => _.y).right;
-            const y0 = foundY.invert(mouse[1]);
-            const rightId = bisect(this.series.data, y0);
-            const range = foundX.range();
-            const intersect = lineIntersection(range[0], mouse[1], range[1], mouse[1], foundX(this.series.data[rightId - 1]?.x), foundY(this.series.data[rightId - 1]?.y), foundX(this.series.data[rightId]?.x), foundY(this.series.data[rightId]?.y));
-            const x = foundX.invert(intersect.x);
-            const y = foundY.invert(intersect.y);
-            if (x !== null && x !== undefined && !isNaN(x) && y !== null && y !== undefined && !isNaN(y)) {
-                this.svc.setTooltip({
-                    point: { x: foundX.invert(intersect.x), y: foundY.invert(intersect.y) },
-                    series: this.series,
-                });
-            }
-            else {
-                this.svc.setTooltip({
-                    point: null,
-                    series: this.series,
-                });
-            }
-            return {
-                x: intersect.x,
-                y: intersect.y,
-            };
-        }
-    }
 }
 AreaSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AreaSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AreaSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: AreaSeriesComponent, selector: "svg:svg[teta-area-series]", usesInheritance: true, ngImport: i0, template: "<svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n  <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                      x1=\"0%\"\n                      [attr.y1]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '0%' : '100%'\"\n                      [attr.x2]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '100%' : '0%'\"\n                      y2=\"0%\">\n    <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n    <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n    <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n    <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n    <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n  </svg:linearGradient>\n</svg:defs>\n<svg:path\n  class=\"area\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n  [attr.fill-opacity]=\"series.style?.fillOpacity\"\n  [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : series.style.fill ?? series.color\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t.x !== undefined && t.y!== undefined\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n\n<ng-container *ngIf=\"getMarkers() as markers\">\n  <svg:circle\n    class=\"marker\"\n    *ngFor=\"let point of markers\"\n    [class.draggable-marker]=\"point?.marker?.draggable\"\n    [attr.r]=\"point.marker.style?.radius ?? 5\"\n    [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n    [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n    [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n    [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n    [attr.cx]=\"x(point.x)\"\n    [attr.cy]=\"y(point.y)\"\n  >\n  </svg:circle>\n</ng-container>\n\n\n\n", styles: [""], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AreaSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: AreaSeriesComponent, selector: "svg:svg[teta-area-series]", usesInheritance: true, ngImport: i0, template: "<svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n  <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                      x1=\"0%\"\n                      [attr.y1]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '0%' : '100%'\"\n                      [attr.x2]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '100%' : '0%'\"\n                      y2=\"0%\">\n    <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n    <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n    <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n    <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n    <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.8\"></svg:stop>\n  </svg:linearGradient>\n</svg:defs>\n<svg:path\n  class=\"area\"\n  *ngIf=\"series?.fillType === fillType.gradient\"\n  [attr.d]=\"areaPath | async\"\n  [attr.stroke-width]=\"0\"\n  [attr.fill-opacity]=\"series.style?.fillOpacity\"\n  [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : series.style.fill ?? series.color\">\n</svg:path>\n<svg:path\n  class=\"area\"\n  fill=\"none\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t.x !== undefined && t.y!== undefined\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"getMarkers() as markers\">\n  <svg:circle\n    class=\"marker\"\n    *ngFor=\"let point of markers\"\n    [class.draggable-marker]=\"point?.marker?.draggable\"\n    [attr.r]=\"point.marker.style?.radius ?? 5\"\n    [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n    [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n    [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n    [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n    [attr.cx]=\"x(point.x)\"\n    [attr.cy]=\"y(point.y)\"\n  >\n  </svg:circle>\n</ng-container>\n\n\n\n", styles: [""], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AreaSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n  <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                      x1=\"0%\"\n                      [attr.y1]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '0%' : '100%'\"\n                      [attr.x2]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '100%' : '0%'\"\n                      y2=\"0%\">\n    <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n    <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n    <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n    <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n    <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n  </svg:linearGradient>\n</svg:defs>\n<svg:path\n  class=\"area\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n  [attr.fill-opacity]=\"series.style?.fillOpacity\"\n  [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : series.style.fill ?? series.color\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t.x !== undefined && t.y!== undefined\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n\n<ng-container *ngIf=\"getMarkers() as markers\">\n  <svg:circle\n    class=\"marker\"\n    *ngFor=\"let point of markers\"\n    [class.draggable-marker]=\"point?.marker?.draggable\"\n    [attr.r]=\"point.marker.style?.radius ?? 5\"\n    [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n    [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n    [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n    [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n    [attr.cx]=\"x(point.x)\"\n    [attr.cy]=\"y(point.y)\"\n  >\n  </svg:circle>\n</ng-container>\n\n\n\n", styles: [""] }]
+            args: [{ selector: 'svg:svg[teta-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n  <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                      x1=\"0%\"\n                      [attr.y1]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '0%' : '100%'\"\n                      [attr.x2]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '100%' : '0%'\"\n                      y2=\"0%\">\n    <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n    <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n    <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n    <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n    <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.8\"></svg:stop>\n  </svg:linearGradient>\n</svg:defs>\n<svg:path\n  class=\"area\"\n  *ngIf=\"series?.fillType === fillType.gradient\"\n  [attr.d]=\"areaPath | async\"\n  [attr.stroke-width]=\"0\"\n  [attr.fill-opacity]=\"series.style?.fillOpacity\"\n  [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : series.style.fill ?? series.color\">\n</svg:path>\n<svg:path\n  class=\"area\"\n  fill=\"none\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t.x !== undefined && t.y!== undefined\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"getMarkers() as markers\">\n  <svg:circle\n    class=\"marker\"\n    *ngFor=\"let point of markers\"\n    [class.draggable-marker]=\"point?.marker?.draggable\"\n    [attr.r]=\"point.marker.style?.radius ?? 5\"\n    [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n    [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n    [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n    [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n    [attr.cx]=\"x(point.x)\"\n    [attr.cy]=\"y(point.y)\"\n  >\n  </svg:circle>\n</ng-container>\n\n\n\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
 
 const defaultSeriesTypeMapping = new Map()
@@ -1741,15 +1673,9 @@ const defaultSeriesTypeMapping = new Map()
     .set(SeriesType.blockArea, BlockAreaSeriesComponent);
 
 class SeriesHostComponent {
-    constructor(viewContainerRef, chartService) {
+    constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
-        this.chartService = chartService;
         this._init = false;
-        this.chartService.size
-            .pipe(tap(() => {
-            this._componentRef?.injector.get(ChangeDetectorRef).detectChanges();
-        }))
-            .subscribe();
     }
     ngOnInit() {
         if (!SeriesBaseComponent.isPrototypeOf(this.series.component)) {
@@ -1759,24 +1685,21 @@ class SeriesHostComponent {
         this._componentRef = this.viewContainerRef.createComponent(this.series.component);
         this._componentRef.instance.config = this.config;
         this._componentRef.instance.series = this.series;
-        this._componentRef.instance.size = this.size;
-        this._componentRef.instance.rect = this.rect;
         this._init = true;
     }
-    ngOnDestroy() { }
+    ngOnDestroy() {
+        this._componentRef.destroy();
+    }
     ngOnChanges(changes) {
-        if (this._init && changes.hasOwnProperty('series')) {
+        if (this._init && (changes.hasOwnProperty('series') || changes.hasOwnProperty('config'))) {
             this._componentRef.instance.config = this.config;
             this._componentRef.instance.series = this.series;
-            this._componentRef.instance.size = this.size;
-            this._componentRef.instance.rect = this.rect;
-            this._componentRef.injector.get(ChangeDetectorRef).markForCheck();
             this._componentRef.injector.get(ChangeDetectorRef).detectChanges();
         }
     }
 }
-SeriesHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SeriesHostComponent, deps: [{ token: i0.ViewContainerRef }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
-SeriesHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: { config: "config", series: "series", size: "size", rect: "rect" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SeriesHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SeriesHostComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+SeriesHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: { config: "config", series: "series" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SeriesHostComponent, decorators: [{
             type: Component,
             args: [{
@@ -1784,23 +1707,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: ChartService }]; }, propDecorators: { config: [{
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { config: [{
                 type: Input
             }], series: [{
                 type: Input
-            }], size: [{
-                type: Input
-            }], rect: [{
+            }] } });
+
+class AnnotationComponent {
+    constructor(scaleService, cdr, chartService) {
+        this.scaleService = scaleService;
+        this.cdr = cdr;
+        this.chartService = chartService;
+        this.x = this.scaleService.xScaleMap.pipe(map((_) => _.get(this.annotation.xAxisIndex ?? 0)));
+        this.y = this.scaleService.yScaleMap.pipe(map((_) => _.get(this.annotation.yAxisIndex ?? 0)));
+        this.drag = d3.drag();
+    }
+    set annotation(annotation) {
+        this._annotation = annotation;
+    }
+    get annotation() {
+        return this._annotation;
+    }
+    set node(node) {
+        this._node = node;
+        this.init();
+        this.cdr.detectChanges();
+    }
+    get node() {
+        return this._node;
+    }
+    click(event) {
+        this.chartService.emitAnnotation({
+            event,
+            target: this.annotation
+        });
+    }
+    contextMenu(event) {
+        this.chartService.emitAnnotation({
+            event,
+            target: this.annotation
+        });
+    }
+    ngOnDestroy() {
+        this.drag.on('drag end', null);
+    }
+    init() {
+        d3.select(this.node.nativeElement).datum(this.annotation);
+        if (this.annotation.draggable) {
+            this.drag.on('drag end', (event, d) => {
+                d.dx += event.dx;
+                d.dy += event.dy;
+                this.cdr.detectChanges();
+                this.chartService.emitMoveAnnotation({
+                    event,
+                    target: d
+                });
+            });
+            d3.select(this.node.nativeElement).call(this.drag);
+        }
+    }
+}
+AnnotationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AnnotationComponent, deps: [{ token: ScaleService }, { token: i0.ChangeDetectorRef }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
+AnnotationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: AnnotationComponent, selector: "[teta-annotation]", inputs: { annotation: "annotation" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, viewQueries: [{ propertyName: "node", first: true, predicate: ["annotationNode"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"{\n      x: x | async,\n      y: y | async\n    } as data\">\n  <svg:circle\n    [attr.r]=\"annotation.style?.radius ?? 5\"\n    [attr.cx]=\"data.x(annotation.point.x)\"\n    [attr.fill]=\"annotation?.style?.fill ?? 'var(--color-text-90)'\"\n    [attr.cy]=\"data.y(annotation.point.y)\">\n  </svg:circle>\n  <svg:line\n    [attr.x1]=\"data.x(annotation.point.x)\"\n    [attr.y1]=\"data.y(annotation.point.y)\"\n    [attr.x2]=\"data.x(annotation.point.x) + (annotation.dx ?? 0)\"\n    [attr.y2]=\"data.y(annotation.point.y) + (annotation.dy ?? 0)\"\n    [attr.stroke]=\"annotation.style?.stroke ?? 'var(--color-text-90)'\"\n    [attr.stroke-width]=\"annotation.style?.strokeWidth ?? 1\"\n    [attr.stroke-dasharray]=\"annotation.style?.strokeDasharray ?? null\"\n  >\n  </svg:line>\n  <svg:foreignObject\n    class=\"position-absolute\"\n    [attr.width]=\"node?.nativeElement.offsetWidth ?? 0\"\n    [attr.height]=\"node?.nativeElement.offsetHeight ?? 0\"\n    [attr.x]=\"data.x(annotation.point.x) + (annotation.dx ?? 0) - 10\"\n    [attr.y]=\"data.y(annotation.point.y) + (annotation.dy ?? 0) - 10\">\n    <div\n      #annotationNode\n      [style.background-color]=\"annotation.style?.fill ?? 'var(--color-text-90)'\"\n      [style.cursor]=\"annotation?.draggable ? 'move' : 'default'\"\n      class=\"color-text-10 padding-h-2\"\n      style=\"border-radius: 2px; display: inline-block;\">\n      <ng-container *ngIf=\"annotation.template;else default\">\n        <ng-container *ngTemplateOutlet=\"annotation.template;context: {$implicit: annotation}\"></ng-container>\n      </ng-container>\n    </div>\n  </svg:foreignObject>\n</ng-container>\n<ng-template #default>\n  {{ annotation.note?.label}}\n</ng-template>\n", styles: [""], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AnnotationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[teta-annotation]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n      x: x | async,\n      y: y | async\n    } as data\">\n  <svg:circle\n    [attr.r]=\"annotation.style?.radius ?? 5\"\n    [attr.cx]=\"data.x(annotation.point.x)\"\n    [attr.fill]=\"annotation?.style?.fill ?? 'var(--color-text-90)'\"\n    [attr.cy]=\"data.y(annotation.point.y)\">\n  </svg:circle>\n  <svg:line\n    [attr.x1]=\"data.x(annotation.point.x)\"\n    [attr.y1]=\"data.y(annotation.point.y)\"\n    [attr.x2]=\"data.x(annotation.point.x) + (annotation.dx ?? 0)\"\n    [attr.y2]=\"data.y(annotation.point.y) + (annotation.dy ?? 0)\"\n    [attr.stroke]=\"annotation.style?.stroke ?? 'var(--color-text-90)'\"\n    [attr.stroke-width]=\"annotation.style?.strokeWidth ?? 1\"\n    [attr.stroke-dasharray]=\"annotation.style?.strokeDasharray ?? null\"\n  >\n  </svg:line>\n  <svg:foreignObject\n    class=\"position-absolute\"\n    [attr.width]=\"node?.nativeElement.offsetWidth ?? 0\"\n    [attr.height]=\"node?.nativeElement.offsetHeight ?? 0\"\n    [attr.x]=\"data.x(annotation.point.x) + (annotation.dx ?? 0) - 10\"\n    [attr.y]=\"data.y(annotation.point.y) + (annotation.dy ?? 0) - 10\">\n    <div\n      #annotationNode\n      [style.background-color]=\"annotation.style?.fill ?? 'var(--color-text-90)'\"\n      [style.cursor]=\"annotation?.draggable ? 'move' : 'default'\"\n      class=\"color-text-10 padding-h-2\"\n      style=\"border-radius: 2px; display: inline-block;\">\n      <ng-container *ngIf=\"annotation.template;else default\">\n        <ng-container *ngTemplateOutlet=\"annotation.template;context: {$implicit: annotation}\"></ng-container>\n      </ng-container>\n    </div>\n  </svg:foreignObject>\n</ng-container>\n<ng-template #default>\n  {{ annotation.note?.label}}\n</ng-template>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: ScaleService }, { type: i0.ChangeDetectorRef }, { type: ChartService }]; }, propDecorators: { annotation: [{
                 type: Input
+            }], node: [{
+                type: ViewChild,
+                args: ['annotationNode', { static: false }]
+            }], click: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], contextMenu: [{
+                type: HostListener,
+                args: ['contextmenu', ['$event']]
             }] } });
 
 class ZoomableDirective {
-    constructor(elementRef, zoomService, broadcastService) {
+    constructor(elementRef, zoomService, broadcastService, zone) {
         this.elementRef = elementRef;
         this.zoomService = zoomService;
         this.broadcastService = broadcastService;
+        this.zone = zone;
         this.zoomable = false;
         this.alive = true;
+        this.currentTransform = zoomIdentity;
+        this.zoomed = (event) => {
+            if (event.sourceEvent) {
+                if (Object.keys(event.sourceEvent).length !== 0) {
+                    if (this.currentTransform === event.transform && event.type !== 'end') {
+                        return;
+                    }
+                    const origin = this.brushScale.copy().domain(this.zoomAxis.extremes);
+                    let domain = this.config.zoom?.type === ZoomType.y ?
+                        event.transform.rescaleY(origin).domain() :
+                        event.transform.rescaleX(origin).domain();
+                    const message = new ZoomMessage({
+                        event,
+                        axis: this.zoomAxis,
+                        brushDomain: domain
+                    });
+                    this.broadcastService.broadcastZoom({
+                        channel: this.config?.zoom?.syncChannel,
+                        message,
+                    });
+                }
+                this.zoomService.setZoom({
+                    event,
+                    target: this.zoomAxis
+                });
+                this.currentTransform = event.transform;
+            }
+        };
     }
     ngOnInit() {
         if (this.axis?.options?.zoom || this.config?.zoom?.enable) {
@@ -1808,84 +1828,80 @@ class ZoomableDirective {
         }
     }
     ngAfterViewInit() {
-        const enable = this.axis?.options?.zoom || this.config?.zoom?.enable;
+        const enable = this.axis?.options?.zoom && this.axis?.options.visible || this.config?.zoom?.enable;
         if (!enable) {
             return;
         }
         this._element = d3.select(this.elementRef.nativeElement);
         this.zoom = d3
             .zoom()
-            .scaleExtent([0, Infinity])
             .extent([
             [0, 0],
             [this.size.width, this.size.height],
         ]);
         const commonZoomAxis = Axis.createAxis(this.config?.zoom.type === ZoomType.x ? AxisOrientation.x : AxisOrientation.y, this.config, 0, true);
         this.zoomAxis = this.axis ?? commonZoomAxis;
-        const zoomed = (event) => {
-            if (enable) {
-                if (event.sourceEvent) {
-                    this.zoomService.setZoom({
-                        event,
-                        target: this.zoomAxis
-                    });
-                    const message = new ZoomMessage({
-                        event,
-                        axis: this.zoomAxis,
-                        brushDomain: this.config.brush?.type === BrushType.x
-                            ? this.brushScale.domain()
-                            : this.brushScale.domain(),
-                    });
-                    this.broadcastService.broadcastZoom({
-                        channel: this.config?.zoom?.syncChannel,
-                        message,
-                    });
-                }
-            }
-        };
-        this.zoom.on('start zoom end', zoomed);
-        this._element.call(this.zoom);
+        if (enable) {
+            const maxZoom = this.config.zoom?.max ? (this.zoomAxis.extremes[1] - this.zoomAxis.extremes[0]) / this.config.zoom?.max : 0;
+            const minZoom = this.config.zoom?.min ? (this.zoomAxis.extremes[1] - this.zoomAxis.extremes[0]) / this.config.zoom?.min : Infinity;
+            this.zoom.scaleExtent([maxZoom, minZoom]);
+            console.log(this.zoom.scaleExtent());
+            this.zoom.on('start zoom end', this.zoomed);
+            this._element.call(this.zoom);
+        }
         // Subscribe to zoom events
-        this.broadcastService.subscribeToZoom(this.config?.zoom.syncChannel).pipe(takeWhile((_) => this.alive), filter((m) => m.message.event.sourceEvent instanceof MouseEvent || m.message.event.sourceEvent instanceof WheelEvent), throttleTime(50, undefined, { trailing: true }), filter((m) => {
+        this.broadcastService.subscribeToZoom(this.config?.zoom.syncChannel).pipe(filter((m) => m.message.event.sourceEvent instanceof MouseEvent || m.message.event.sourceEvent instanceof WheelEvent), debounceTime(30), filter((m) => {
             return this.zoomAxis.index === m.message?.axis?.index && this.zoomAxis.orientation === m.message?.axis?.orientation;
         }), tap$1((m) => {
             const currentTransform = d3.zoomTransform(this.elementRef.nativeElement);
             if (currentTransform !== m.message.event.transform) {
                 this._element.call(this.zoom.transform, m.message.event.transform, null, {});
             }
-        })).subscribe();
+        }), takeWhile((_) => this.alive)).subscribe();
         // Subscribe to brush events x or y
-        if ((this.config.brush?.type === BrushType.x && this.zoomAxis.orientation === AxisOrientation.x) || (this.config.brush?.type === BrushType.y && this.zoomAxis.orientation === AxisOrientation.y)) {
-            this.broadcastService.subscribeToBrush(this.config?.zoom.syncChannel).pipe(takeWhile((_) => this.alive), throttleTime(50, undefined, { trailing: true }), filter((m) => Boolean(m.message.selection)), tap$1((m) => {
-                const s = m.message.selection;
-                this.brushScale.domain(m.message.brushScale.domain());
-                const domain = this.brushScale.domain();
-                const scale = (domain[1] - domain[0]) / (s[1] - s[0]);
-                let transform = zoomIdentity.scale(scale);
-                if (m.message?.brushType === BrushType.x) {
-                    transform = transform.translate(-this.brushScale(s[0]), 0);
-                }
-                if (m.message?.brushType === BrushType.y) {
-                    transform = transform.translate(0, -this.brushScale(s[0]));
+        if ((this.config.brush?.type === BrushType.x && this.zoomAxis.orientation === AxisOrientation.x) ||
+            (this.config.brush?.type === BrushType.y && this.zoomAxis.orientation === AxisOrientation.y)) {
+            this.broadcastService.subscribeToBrush(this.config?.zoom.syncChannel).pipe(debounceTime(30), filter((m) => Boolean(m.message.selection)), tap$1((m) => {
+                const currentTransform = d3.zoomTransform(this.elementRef.nativeElement);
+                if (!m.message.event && this.currentSelection && currentTransform.k !== 1) {
+                    return;
                 }
-                this._element.call(this.zoom.transform, transform, null, {});
-            })).subscribe();
+                this.currentSelection = m.message.selection;
+                this.zone.runOutsideAngular(() => {
+                    setTimeout(() => {
+                        this.updateZoom(m);
+                    }, 100);
+                });
+            }), takeWhile((_) => this.alive)).subscribe();
         }
     }
-    ngOnChanges(changes) {
-    }
     ngOnDestroy() {
+        this.zoom?.on('start zoom end', null);
         this.alive = false;
     }
+    updateZoom(m) {
+        const s = m.message.selection;
+        this.brushScale.domain(this.zoomAxis.extremes);
+        const domain = this.brushScale.domain();
+        const scale = (domain[1] - domain[0]) / (s[1] - s[0]);
+        let transform = zoomIdentity.scale(scale);
+        if (m.message?.brushType === BrushType.x) {
+            transform = transform.translate(-this.brushScale(s[0]), 0);
+        }
+        if (m.message?.brushType === BrushType.y) {
+            transform = transform.translate(0, -this.brushScale(s[0]));
+        }
+        this._element.transition().duration(150).call(this.zoom.transform, transform, null, {});
+    }
 }
-ZoomableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ZoomableDirective, deps: [{ token: i0.ElementRef }, { token: ZoomService }, { token: BroadcastService }], target: i0.ɵɵFactoryTarget.Directive });
-ZoomableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: { config: "config", axis: "axis", size: "size", brushScale: "brushScale" }, host: { properties: { "class.zoomable": "this.zoomable" } }, usesOnChanges: true, ngImport: i0 });
+ZoomableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ZoomableDirective, deps: [{ token: i0.ElementRef }, { token: ZoomService }, { token: BroadcastService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+ZoomableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: { config: "config", axis: "axis", size: "size", brushScale: "brushScale" }, host: { properties: { "class.zoomable": "this.zoomable" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ZoomableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tetaZoomable]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ZoomService }, { type: BroadcastService }]; }, propDecorators: { config: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ZoomService }, { type: BroadcastService }, { type: i0.NgZone }]; }, propDecorators: { config: [{
                 type: Input
             }], axis: [{
                 type: Input
@@ -1905,7 +1921,8 @@ class BrushableDirective {
         this.element = element;
     }
     ngOnInit() { }
-    ngAfterViewInit() { }
+    ngAfterViewInit() {
+    }
     ngOnChanges(changes) {
         if (changes.hasOwnProperty('config')) {
             this.brushService.clearPreviousSelection();
@@ -1955,7 +1972,10 @@ class ChartContainerComponent {
             return config.brush?.type === BrushType.x
                 ? x.get(0)
                 : y.get(0);
-        }), shareReplay(1));
+        }), shareReplay({
+            bufferSize: 1,
+            refCount: true
+        }));
         this.visibleRect = combineLatest([
             this.size,
             this.xAxisMap,
@@ -2002,7 +2022,8 @@ class ChartContainerComponent {
         });
         this._observer.observe(this._elementRef.nativeElement);
     }
-    ngAfterViewInit() {
+    ngOnDestroy() {
+        this._observer.disconnect();
     }
     getTranslate(axis, size) {
         return combineLatest([this.xAxisMap, this.yAxisMap]).pipe(map((data) => {
@@ -2074,10 +2095,10 @@ class ChartContainerComponent {
     }
 }
 ChartContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartContainerComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ChartContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ChartContainerComponent, selector: "teta-chart-container", ngImport: i0, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  xAxisMap: xAxisMap | async,\n  yAxisMap: yAxisMap | async,\n  xScaleMap: xScaleMap | async,\n  yScaleMap: yScaleMap | async,\n  visibleRect: visibleRect | async,\n  brushScale: brushScale | async\n} as data\">\n  <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\"\n                [size]=\"data.size\"\n                [config]=\"data.config\"></teta-tooltip>\n\n  <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n    <g class=\"y-axis-container\">\n      <ng-container *ngFor=\"let item of data.yAxisMap | keyvalue; trackBy: identify\">\n        <ng-container *ngIf=\"item.value.options.visible\">\n          <g\n            teta-y-axis\n            [axis]=\"item.value\"\n            [scale]=\"data.yScaleMap.get(item.key)\"\n            [size]=\"data.size\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n          <rect\n            tetaZoomable\n            fill-opacity=\"0\"\n            [brushScale]=\"data.brushScale\"\n            [axis]=\"item.value\"\n            [config]=\"data.config\"\n            [size]=\"data.size\"\n            [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n            [attr.y]=\"0\"\n            [attr.height]=\"data.size.height\"\n            [attr.width]=\"item.value.selfSize\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n        </ng-container>\n\n      </ng-container>\n    </g>\n    <g class=\"x-axis-container\">\n      <ng-container *ngFor=\"let item of data.xAxisMap | keyvalue; trackBy: identify\">\n        <ng-container *ngIf=\"item.value.options.visible\">\n          <g\n            teta-x-axis\n            [axis]=\"item.value\"\n            [scale]=\"data.xScaleMap.get(item.key)\"\n            [size]=\"data.size\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n          <rect\n            tetaZoomable\n            fill-opacity=\"0\"\n            [brushScale]=\"data.brushScale\"\n            [axis]=\"item.value\"\n            [config]=\"data.config\"\n            [size]=\"data.size\"\n            [attr.x]=\"0\"\n            [attr.y]=\"0\"\n            [attr.width]=\"data.size.width\"\n            [attr.height]=\"item.value.selfSize\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n        </ng-container>\n      </ng-container>\n    </g>\n  </svg>\n  <ng-container *ngIf=\"data.visibleRect?.width > 0 && data.visibleRect?.height > 0\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      [size]=\"data.size\"\n      [brushScale]=\"data.brushScale\"\n      [config]=\"data.config\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.transform]=\"'translate('+ data.visibleRect.x +', '+ data.visibleRect.y +')'\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      (contextmenu)=\"contextMenu($event, data.xScaleMap, data.yScaleMap)\"\n      (click)=\"click($event, data.xScaleMap, data.yScaleMap)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines !== false\"\n         [size]=\"data.size\"\n         [xScaleMap]=\"data.xScaleMap\"\n         [yScaleMap]=\"data.yScaleMap\"></g>\n\n      <g class=\"x-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.xScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.xAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.yScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.yAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.xScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.xAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.yScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.yAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"annotations\">\n        <g teta-annotation\n           [xScaleMap]=\"data.xScaleMap\"\n           [yScaleMap]=\"data.yScaleMap\"\n           [annotations]=\"data.config.annotations\"></g>\n      </g>\n      <g class=\"series-container\">\n        <g teta-series-host\n           *ngFor=\"let series of data.config.series\"\n           [config]=\"data.config\"\n           [series]=\"series\"\n           [size]=\"data.size\"></g>\n      </g>\n\n    </svg>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}\n"], components: [{ type: TooltipComponent, selector: "teta-tooltip", inputs: ["size", "config"] }, { type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "scale", "size"] }, { type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "scale", "size"] }, { type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size", "xScaleMap", "yScaleMap"] }, { type: PlotBandComponent, selector: "[teta-plot-band]", inputs: ["plotBand", "axis", "scale", "size"] }, { type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotLine", "size", "axis", "scale"] }, { type: AnnotationComponent, selector: "[teta-annotation]", inputs: ["annotations", "xScaleMap", "yScaleMap"] }, { type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["config", "series", "size", "rect"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size", "brushScale"] }, { type: BrushableDirective, selector: "svg:svg[tetaBrushable]", inputs: ["config", "size", "brushScale"] }], pipes: { "async": i4.AsyncPipe, "keyvalue": i4.KeyValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ChartContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ChartContainerComponent, selector: "teta-chart-container", ngImport: i0, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  xAxisMap: xAxisMap | async,\n  yAxisMap: yAxisMap | async,\n  xScaleMap: xScaleMap | async,\n  yScaleMap: yScaleMap | async,\n  visibleRect: visibleRect | async,\n  brushScale: brushScale | async\n} as data\" xmlns:svg=\"http://www.w3.org/1999/html\">\n  <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\"\n                [size]=\"data.size\"\n                [config]=\"data.config\"></teta-tooltip>\n\n  <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n    <g class=\"y-axis-container\">\n      <ng-container *ngFor=\"let item of data.yAxisMap | keyvalue;\">\n        <ng-container *ngIf=\"item.value.options.visible\">\n          <g\n            teta-y-axis\n            [axis]=\"item.value\"\n            [scale]=\"data.yScaleMap.get(item.key)\"\n            [size]=\"data.size\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n          <rect\n            tetaZoomable\n            fill-opacity=\"0\"\n            [brushScale]=\"data.brushScale\"\n            [axis]=\"item.value\"\n            [config]=\"data.config\"\n            [size]=\"data.size\"\n            [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n            [attr.y]=\"0\"\n            [attr.height]=\"data.size.height\"\n            [attr.width]=\"item.value.selfSize\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n        </ng-container>\n\n      </ng-container>\n    </g>\n    <g class=\"x-axis-container\">\n      <ng-container *ngFor=\"let item of data.xAxisMap | keyvalue;\">\n        <ng-container *ngIf=\"item.value.options.visible\">\n          <g\n            teta-x-axis\n            [axis]=\"item.value\"\n            [scale]=\"data.xScaleMap.get(item.key)\"\n            [size]=\"data.size\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n          <rect\n            tetaZoomable\n            fill-opacity=\"0\"\n            [brushScale]=\"data.brushScale\"\n            [axis]=\"item.value\"\n            [config]=\"data.config\"\n            [size]=\"data.size\"\n            [attr.x]=\"0\"\n            [attr.y]=\"0\"\n            [attr.width]=\"data.size.width\"\n            [attr.height]=\"item.value.selfSize\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n        </ng-container>\n      </ng-container>\n    </g>\n  </svg>\n  <ng-container *ngIf=\"data.visibleRect?.width > 0 && data.visibleRect?.height > 0\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      [size]=\"data.size\"\n      [brushScale]=\"data.brushScale\"\n      [config]=\"data.config\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.transform]=\"'translate('+ data.visibleRect.x +', '+ data.visibleRect.y +')'\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      (contextmenu)=\"contextMenu($event, data.xScaleMap, data.yScaleMap)\"\n      (click)=\"click($event, data.xScaleMap, data.yScaleMap)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines?.enable !== false\"\n         [size]=\"data.size\"\n         [config]=\"data.config\"\n         [xScaleMap]=\"data.xScaleMap\"\n         [yScaleMap]=\"data.yScaleMap\"></g>\n\n      <g class=\"x-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.xScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.xAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.yScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.yAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.xScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.xAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.yScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.yAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"series-container\">\n        <g teta-series-host\n           *ngFor=\"let series of data.config.series\"\n           [config]=\"data.config\"\n           [series]=\"series\"></g>\n      </g>\n      <g class=\"annotations\">\n        <g teta-annotation\n            *ngFor=\"let annotation of data.config.annotations\"\n            [annotation]=\"annotation\"></g>\n      </g>\n    </svg>\n\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}\n"], components: [{ type: TooltipComponent, selector: "teta-tooltip", inputs: ["size", "config"] }, { type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "scale", "size"] }, { type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "scale", "size"] }, { type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size", "xScaleMap", "yScaleMap", "config"] }, { type: PlotBandComponent, selector: "[teta-plot-band]", inputs: ["plotBand", "axis", "scale", "size"] }, { type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotLine", "size", "axis", "scale"] }, { type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["config", "series"] }, { type: AnnotationComponent, selector: "[teta-annotation]", inputs: ["annotation"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size", "brushScale"] }, { type: BrushableDirective, selector: "svg:svg[tetaBrushable]", inputs: ["config", "size", "brushScale"] }], pipes: { "async": i4.AsyncPipe, "keyvalue": i4.KeyValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-chart-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  xAxisMap: xAxisMap | async,\n  yAxisMap: yAxisMap | async,\n  xScaleMap: xScaleMap | async,\n  yScaleMap: yScaleMap | async,\n  visibleRect: visibleRect | async,\n  brushScale: brushScale | async\n} as data\">\n  <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\"\n                [size]=\"data.size\"\n                [config]=\"data.config\"></teta-tooltip>\n\n  <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n    <g class=\"y-axis-container\">\n      <ng-container *ngFor=\"let item of data.yAxisMap | keyvalue; trackBy: identify\">\n        <ng-container *ngIf=\"item.value.options.visible\">\n          <g\n            teta-y-axis\n            [axis]=\"item.value\"\n            [scale]=\"data.yScaleMap.get(item.key)\"\n            [size]=\"data.size\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n          <rect\n            tetaZoomable\n            fill-opacity=\"0\"\n            [brushScale]=\"data.brushScale\"\n            [axis]=\"item.value\"\n            [config]=\"data.config\"\n            [size]=\"data.size\"\n            [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n            [attr.y]=\"0\"\n            [attr.height]=\"data.size.height\"\n            [attr.width]=\"item.value.selfSize\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n        </ng-container>\n\n      </ng-container>\n    </g>\n    <g class=\"x-axis-container\">\n      <ng-container *ngFor=\"let item of data.xAxisMap | keyvalue; trackBy: identify\">\n        <ng-container *ngIf=\"item.value.options.visible\">\n          <g\n            teta-x-axis\n            [axis]=\"item.value\"\n            [scale]=\"data.xScaleMap.get(item.key)\"\n            [size]=\"data.size\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n          <rect\n            tetaZoomable\n            fill-opacity=\"0\"\n            [brushScale]=\"data.brushScale\"\n            [axis]=\"item.value\"\n            [config]=\"data.config\"\n            [size]=\"data.size\"\n            [attr.x]=\"0\"\n            [attr.y]=\"0\"\n            [attr.width]=\"data.size.width\"\n            [attr.height]=\"item.value.selfSize\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n        </ng-container>\n      </ng-container>\n    </g>\n  </svg>\n  <ng-container *ngIf=\"data.visibleRect?.width > 0 && data.visibleRect?.height > 0\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      [size]=\"data.size\"\n      [brushScale]=\"data.brushScale\"\n      [config]=\"data.config\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.transform]=\"'translate('+ data.visibleRect.x +', '+ data.visibleRect.y +')'\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      (contextmenu)=\"contextMenu($event, data.xScaleMap, data.yScaleMap)\"\n      (click)=\"click($event, data.xScaleMap, data.yScaleMap)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines !== false\"\n         [size]=\"data.size\"\n         [xScaleMap]=\"data.xScaleMap\"\n         [yScaleMap]=\"data.yScaleMap\"></g>\n\n      <g class=\"x-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.xScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.xAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.yScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.yAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.xScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.xAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.yScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.yAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"annotations\">\n        <g teta-annotation\n           [xScaleMap]=\"data.xScaleMap\"\n           [yScaleMap]=\"data.yScaleMap\"\n           [annotations]=\"data.config.annotations\"></g>\n      </g>\n      <g class=\"series-container\">\n        <g teta-series-host\n           *ngFor=\"let series of data.config.series\"\n           [config]=\"data.config\"\n           [series]=\"series\"\n           [size]=\"data.size\"></g>\n      </g>\n\n    </svg>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}\n"] }]
+            args: [{ selector: 'teta-chart-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  xAxisMap: xAxisMap | async,\n  yAxisMap: yAxisMap | async,\n  xScaleMap: xScaleMap | async,\n  yScaleMap: yScaleMap | async,\n  visibleRect: visibleRect | async,\n  brushScale: brushScale | async\n} as data\" xmlns:svg=\"http://www.w3.org/1999/html\">\n  <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\"\n                [size]=\"data.size\"\n                [config]=\"data.config\"></teta-tooltip>\n\n  <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n    <g class=\"y-axis-container\">\n      <ng-container *ngFor=\"let item of data.yAxisMap | keyvalue;\">\n        <ng-container *ngIf=\"item.value.options.visible\">\n          <g\n            teta-y-axis\n            [axis]=\"item.value\"\n            [scale]=\"data.yScaleMap.get(item.key)\"\n            [size]=\"data.size\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n          <rect\n            tetaZoomable\n            fill-opacity=\"0\"\n            [brushScale]=\"data.brushScale\"\n            [axis]=\"item.value\"\n            [config]=\"data.config\"\n            [size]=\"data.size\"\n            [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n            [attr.y]=\"0\"\n            [attr.height]=\"data.size.height\"\n            [attr.width]=\"item.value.selfSize\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n        </ng-container>\n\n      </ng-container>\n    </g>\n    <g class=\"x-axis-container\">\n      <ng-container *ngFor=\"let item of data.xAxisMap | keyvalue;\">\n        <ng-container *ngIf=\"item.value.options.visible\">\n          <g\n            teta-x-axis\n            [axis]=\"item.value\"\n            [scale]=\"data.xScaleMap.get(item.key)\"\n            [size]=\"data.size\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n          <rect\n            tetaZoomable\n            fill-opacity=\"0\"\n            [brushScale]=\"data.brushScale\"\n            [axis]=\"item.value\"\n            [config]=\"data.config\"\n            [size]=\"data.size\"\n            [attr.x]=\"0\"\n            [attr.y]=\"0\"\n            [attr.width]=\"data.size.width\"\n            [attr.height]=\"item.value.selfSize\"\n            [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n        </ng-container>\n      </ng-container>\n    </g>\n  </svg>\n  <ng-container *ngIf=\"data.visibleRect?.width > 0 && data.visibleRect?.height > 0\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      [size]=\"data.size\"\n      [brushScale]=\"data.brushScale\"\n      [config]=\"data.config\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.transform]=\"'translate('+ data.visibleRect.x +', '+ data.visibleRect.y +')'\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      (contextmenu)=\"contextMenu($event, data.xScaleMap, data.yScaleMap)\"\n      (click)=\"click($event, data.xScaleMap, data.yScaleMap)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines?.enable !== false\"\n         [size]=\"data.size\"\n         [config]=\"data.config\"\n         [xScaleMap]=\"data.xScaleMap\"\n         [yScaleMap]=\"data.yScaleMap\"></g>\n\n      <g class=\"x-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.xScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.xAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.yScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.yAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.xScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.xAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.yScaleMap.get(i)\"\n             [size]=\"data.size\"\n             [axis]=\"data.yAxisMap.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"series-container\">\n        <g teta-series-host\n           *ngFor=\"let series of data.config.series\"\n           [config]=\"data.config\"\n           [series]=\"series\"></g>\n      </g>\n      <g class=\"annotations\">\n        <g teta-annotation\n            *ngFor=\"let annotation of data.config.annotations\"\n            [annotation]=\"annotation\"></g>\n      </g>\n    </svg>\n\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}\n"] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
 
 class LegendComponent {
@@ -2107,9 +2128,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
             }] } });
 
 class ChartComponent {
-    constructor(_svc, _zoomService) {
-        this._svc = _svc;
+    constructor(chartService, _zoomService, _scaleService) {
+        this.chartService = chartService;
         this._zoomService = _zoomService;
+        this._scaleService = _scaleService;
+        this.pointerMove = new EventEmitter();
         this.plotBandsMove = new EventEmitter();
         this.plotBandClick = new EventEmitter();
         this.plotBandContextMenu = new EventEmitter();
@@ -2117,45 +2140,89 @@ class ChartComponent {
         this.pointMove = new EventEmitter();
         this.chartClick = new EventEmitter();
         this.chartContextMenu = new EventEmitter();
+        this.annotationContextMenu = new EventEmitter();
+        this.annotationClick = new EventEmitter();
+        this.annotationMove = new EventEmitter();
         this._alive = true;
-        this.svcConfig = this._svc.config;
+        this.svcConfig = this.chartService.config;
         this.hasSeriesData = this.svcConfig.pipe(map((_) => _.series?.length > 0 && _.series?.some((_) => _.data?.length > 0)));
     }
     set config(config) {
-        this._svc.setConfig(config);
+        this.chartService.setConfig(config);
     }
     ngOnChanges(changes) {
     }
     ngOnInit() {
-        this._svc.plotBandEvent
+        this.chartService.pointerMove
+            .pipe(takeWhile(() => this._alive), withLatestFrom(this._scaleService.xScaleMap, this._scaleService.yScaleMap, this.chartService.config))
+            .subscribe((data) => {
+            const [event, x, y, config] = data;
+            const tooltipTracking = config?.tooltip?.tracking;
+            if (tooltipTracking === TooltipTracking.y) {
+                const result = new Map();
+                y.forEach((value, key) => {
+                    result.set(key, value.invert(event.offsetY));
+                });
+                this.pointerMove.emit({
+                    event: event,
+                    target: result
+                });
+            }
+            else {
+                const result = new Map();
+                x.forEach((value, key) => {
+                    result.set(key, value.invert(event.offsetX));
+                });
+                this.pointerMove.emit({
+                    event: event,
+                    target: result
+                });
+            }
+        });
+        this.chartService.plotBandEvent
             .pipe(takeWhile(() => this._alive))
             .subscribe((_) => {
             this.plotBandsMove.emit(_);
         });
-        this._svc.plotLineMove.pipe(takeWhile(() => this._alive)).subscribe((_) => {
+        this.chartService.plotLineMove.pipe(takeWhile(() => this._alive)).subscribe((_) => {
             this.plotLinesMove.emit(_);
         });
-        this._svc.pointMove.pipe(takeWhile(() => this._alive)).subscribe((_) => {
+        this.chartService.pointMove.pipe(takeWhile(() => this._alive)).subscribe((_) => {
             this.pointMove.emit(_);
         });
-        this._svc.chartClick
+        this.chartService.chartClick
             .pipe(takeWhile(() => this._alive)).subscribe((_) => {
             this.chartClick.emit(_);
         });
-        this._svc.chartContextMenu
+        this.chartService.chartContextMenu
             .pipe(takeWhile(() => this._alive)).subscribe((_) => {
             this.chartContextMenu.emit(_);
         });
-        this._svc.plotBandClick
+        this.chartService.plotBandClick
             .pipe(takeWhile(() => this._alive))
             .subscribe((_) => {
             this.plotBandClick.emit(_);
         });
-        this._svc.plotBandContextMenu
+        this.chartService.plotBandContextMenu
             .pipe(takeWhile(() => this._alive))
             .subscribe((_) => {
             this.plotBandContextMenu.emit(_);
         });
+        this.chartService.annotationContextMenu
+            .pipe(takeWhile(() => this._alive))
+            .subscribe((_) => {
+            this.annotationContextMenu.emit(_);
+        });
+        this.chartService.annotationClick
+            .pipe(takeWhile(() => this._alive))
+            .subscribe((_) => {
+            this.annotationClick.emit(_);
+        });
+        this.chartService.annotationMove
+            .pipe(takeWhile(() => this._alive))
+            .subscribe((_) => {
+            this.annotationMove.emit(_);
+        });
     }
     ngAfterViewInit() {
     }
@@ -2166,12 +2233,14 @@ class ChartComponent {
         });
     }
 }
-ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartComponent, deps: [{ token: ChartService }, { token: ZoomService }], target: i0.ɵɵFactoryTarget.Component });
-ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ChartComponent, selector: "teta-svg-chart", inputs: { config: "config" }, outputs: { plotBandsMove: "plotBandsMove", plotBandClick: "plotBandClick", plotBandContextMenu: "plotBandContextMenu", plotLinesMove: "plotLinesMove", pointMove: "pointMove", chartClick: "chartClick", chartContextMenu: "chartContextMenu" }, providers: [ChartService, ZoomService, ScaleService, BrushService], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  hasSeriesData: hasSeriesData | async,\n  svcConfig: svcConfig | async\n} as data\">\n  <ng-container *ngIf=\"data.hasSeriesData === true else noData\">\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container\"></teta-chart-container>\n    </div>\n    <teta-legend *ngIf=\"data.svcConfig.legend?.enable === true\" [series]=\"data.svcConfig.series\"></teta-legend>\n  </ng-container>\n</ng-container>\n<ng-template #noData>\n  <div class=\"column column_auto align-center justify-content-center\">\n    <span class=\"font-body-3 color-text-40\">\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044E\u0442</span>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"], components: [{ type: ChartContainerComponent, selector: "teta-chart-container" }, { type: LegendComponent, selector: "teta-legend", inputs: ["series"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartComponent, deps: [{ token: ChartService }, { token: ZoomService }, { token: ScaleService }], target: i0.ɵɵFactoryTarget.Component });
+ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ChartComponent, selector: "teta-svg-chart", inputs: { config: "config" }, outputs: { pointerMove: "pointerMove", plotBandsMove: "plotBandsMove", plotBandClick: "plotBandClick", plotBandContextMenu: "plotBandContextMenu", plotLinesMove: "plotLinesMove", pointMove: "pointMove", chartClick: "chartClick", chartContextMenu: "chartContextMenu", annotationContextMenu: "annotationContextMenu", annotationClick: "annotationClick", annotationMove: "annotationMove" }, providers: [ChartService, ZoomService, ScaleService, BrushService], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  hasSeriesData: hasSeriesData | async,\n  svcConfig: svcConfig | async\n} as data\">\n  <ng-container *ngIf=\"data.hasSeriesData === true else noData\">\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container\"></teta-chart-container>\n    </div>\n    <teta-legend *ngIf=\"data.svcConfig.legend?.enable === true\" [series]=\"data.svcConfig.series\"></teta-legend>\n  </ng-container>\n</ng-container>\n<ng-template #noData>\n  <div class=\"column column_auto align-center justify-content-center\">\n    <span class=\"font-body-3 color-text-40\">\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044E\u0442</span>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"], components: [{ type: ChartContainerComponent, selector: "teta-chart-container" }, { type: LegendComponent, selector: "teta-legend", inputs: ["series"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-svg-chart', providers: [ChartService, ZoomService, ScaleService, BrushService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  hasSeriesData: hasSeriesData | async,\n  svcConfig: svcConfig | async\n} as data\">\n  <ng-container *ngIf=\"data.hasSeriesData === true else noData\">\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container\"></teta-chart-container>\n    </div>\n    <teta-legend *ngIf=\"data.svcConfig.legend?.enable === true\" [series]=\"data.svcConfig.series\"></teta-legend>\n  </ng-container>\n</ng-container>\n<ng-template #noData>\n  <div class=\"column column_auto align-center justify-content-center\">\n    <span class=\"font-body-3 color-text-40\">\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044E\u0442</span>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: ChartService }, { type: ZoomService }]; }, propDecorators: { plotBandsMove: [{
+        }], ctorParameters: function () { return [{ type: ChartService }, { type: ZoomService }, { type: ScaleService }]; }, propDecorators: { pointerMove: [{
+                type: Output
+            }], plotBandsMove: [{
                 type: Output
             }], plotBandClick: [{
                 type: Output
@@ -2185,6 +2254,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 type: Output
             }], chartContextMenu: [{
                 type: Output
+            }], annotationContextMenu: [{
+                type: Output
+            }], annotationClick: [{
+                type: Output
+            }], annotationMove: [{
+                type: Output
             }], config: [{
                 type: Input
             }] } });
@@ -2197,6 +2272,7 @@ ChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         ChartContainerComponent,
         LegendComponent,
         SeriesBaseComponent,
+        LinearSeriesBase,
         LineSeriesComponent,
         GridlinesComponent,
         XAxisComponent,
@@ -2230,6 +2306,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                         ChartContainerComponent,
                         LegendComponent,
                         SeriesBaseComponent,
+                        LinearSeriesBase,
                         LineSeriesComponent,
                         GridlinesComponent,
                         XAxisComponent,
@@ -2291,18 +2368,6 @@ class PlotLine {
     }
 }
 
-const annotationMap = [
-    annotationBadge,
-    annotationLabel,
-    annotationCallout,
-    annotationCalloutCircle,
-    annotationCalloutCurve,
-    annotationCalloutElbow,
-    annotationCalloutRect,
-    annotationCustomType,
-    annotationXYThreshold,
-];
-
 /*
  * Public API Surface of chart
  */