@tetacom/svg-charts 1.2.24 → 1.2.27

package/fesm2020/tetacom-svg-charts.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, ElementRef, ViewChild, Directive, HostBinding, EventEmitter, Output, NgModule } from '@angular/core';
+import { Injectable, Component, Input, EventEmitter, Directive, Output, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, ViewChild, HostBinding, NgModule } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { BehaviorSubject, Subject, of, withLatestFrom, map, shareReplay, filter, lastValueFrom, take, combineLatest, ReplaySubject, tap, takeWhile, combineLatestWith, observeOn, animationFrameScheduler } from 'rxjs';
@@ -1010,13 +1010,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }] } });
 
-var DragPointType;
-(function (DragPointType) {
-    DragPointType[DragPointType["x"] = 0] = "x";
-    DragPointType[DragPointType["y"] = 1] = "y";
-    DragPointType[DragPointType["xy"] = 2] = "xy";
-})(DragPointType || (DragPointType = {}));
-
 class LinearSeriesBase extends SeriesBaseComponent {
     constructor(svc, cdr, scaleService, zoomService, element) {
         super(svc, cdr, scaleService, zoomService, element);
@@ -1026,6 +1019,7 @@ class LinearSeriesBase extends SeriesBaseComponent {
         this.zoomService = zoomService;
         this.element = element;
         this.defaultClipPointsMapping = new Map();
+        this._update = new BehaviorSubject(null);
     }
     set series(series) {
         this.__series = series;
@@ -1065,7 +1059,8 @@ class LinearSeriesBase extends SeriesBaseComponent {
             const [event, { x, y }] = data;
             return this.getTransform(event, x.get(this.series.xAxisIndex).scale, y.get(this.series.yAxisIndex).scale);
         }), tap(() => setTimeout(() => this.cdr.detectChanges())));
-        this.path = this.scaleService.scales.pipe(map((data) => {
+        this.path = combineLatest([this.scaleService.scales, this._update]).pipe(map(([data]) => {
+            // console.log(data);
             const { x, y } = data;
             this.x = x.get(this.series.xAxisIndex)?.scale;
             this.y = y.get(this.series.yAxisIndex)?.scale;
@@ -1097,16 +1092,17 @@ class LinearSeriesBase extends SeriesBaseComponent {
                 filteredData = filteredData?.filter(filter(min, max));
             }
             return line(filteredData);
-        }), tap(() => {
+        }), tap((_) => {
+            // console.log(_)
             setTimeout(() => {
                 if (this.markers?.length > 0) {
-                    this.addDragEvents();
+                    // this.addDragEvents();
                 }
             });
         }));
     }
     ngOnDestroy() {
-        this.markerListeners?.on('start drag end', null);
+        // this.markerListeners?.on('start drag end', null);
         this.svc.setTooltip({
             point: null,
             series: this.series,
@@ -1115,45 +1111,63 @@ class LinearSeriesBase extends SeriesBaseComponent {
     ngAfterViewInit() {
     }
     addDragEvents() {
-        this.markerListeners?.on('start drag end', null);
-        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();
-        };
-        this.markerListeners = d3
-            .drag()
-            .subject(function (event, d) {
-            const node = d3.select(this);
-            return { x: node.attr('cx'), y: node.attr('cy') };
-        });
-        const dragMarkers = this.markerListeners.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();
+        // this.markerListeners?.on('start drag end', null);
+        // const drag = (node, event: d3.D3DragEvent<any, any, any>, d: BasePoint) => {
+        //   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();
+        // };
+        // this.markerListeners = d3
+        //   .drag()
+        //   .subject(function (event, d: BasePoint) {
+        //     const node = d3.select(this);
+        //     return {x: node.attr('cx'), y: node.attr('cy')};
+        //   });
+        // const dragMarkers =
+        //   this.markerListeners.on(
+        //     'start drag end',
+        //     function (event: d3.D3DragEvent<any, any, any>, d: BasePoint) {
+        //       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 as any);
+        //
+        // this.svgElement = d3
+        //   .select(this.element.nativeElement)
+        //   .select('.line')
+        //   .node() as SVGGeometryElement;
     }
     getTransform(event, scaleX, scaleY) {
         if (event.type === 'mouseleave') {
@@ -1252,6 +1266,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }] } });
 
+var DragPointType;
+(function (DragPointType) {
+    DragPointType[DragPointType["x"] = 0] = "x";
+    DragPointType[DragPointType["y"] = 1] = "y";
+    DragPointType[DragPointType["xy"] = 2] = "xy";
+})(DragPointType || (DragPointType = {}));
+
+class DraggablePointDirective {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+        this.moveStart = new EventEmitter();
+        this.moveProcess = new EventEmitter();
+        this.moveEnd = new EventEmitter();
+    }
+    mouseDown(event) {
+        if (!this.tetaDraggablePoint) {
+            return;
+        }
+        event.stopPropagation();
+        event.preventDefault();
+        this.startPosition = {
+            x: event.x,
+            y: event.y
+        };
+        this.moveStart.emit(this.startPosition);
+    }
+    mouseUp(event) {
+        if (this.startPosition !== null && this.startPosition !== undefined) {
+            let deltaX = event.x - this.startPosition.x;
+            let deltaY = event.y - this.startPosition.y;
+            if (this.dragDirection === DragPointType.x) {
+                deltaY = 0;
+            }
+            if (this.dragDirection === DragPointType.y) {
+                deltaX = 0;
+            }
+            if (this.allowDrag && !this.allowDrag({
+                x: event.x,
+                y: event.y,
+                deltaX,
+                deltaY
+            })) {
+                return;
+            }
+            if (this.transformCache) {
+                this.transformCache.x = this.transformCache.x + deltaX;
+                this.transformCache.y = this.transformCache.y + deltaY;
+            }
+            else {
+                this.transformCache = {
+                    x: deltaX,
+                    y: deltaY
+                };
+            }
+            this.moveEnd.emit({
+                x: event.x,
+                y: event.y,
+                deltaX,
+                deltaY
+            });
+        }
+        this.startPosition = null;
+    }
+    mouseMove(event) {
+        if (this.startPosition) {
+            let deltaX = event.x - this.startPosition.x;
+            let deltaY = event.y - this.startPosition.y;
+            if (this.transformCache) {
+                deltaX = this.transformCache.x + deltaX;
+                deltaY = this.transformCache.y + deltaY;
+            }
+            if (this.allowDrag && !this.allowDrag({
+                x: event.x,
+                y: event.y,
+                deltaX,
+                deltaY
+            })) {
+                return;
+            }
+            if (this.dragDirection === DragPointType.x) {
+                deltaY = 0;
+            }
+            if (this.dragDirection === DragPointType.y) {
+                deltaX = 0;
+            }
+            this.setTransform(deltaX, deltaY);
+            event.stopPropagation();
+            event.preventDefault();
+            this.moveProcess.emit({
+                x: event.x,
+                y: event.y,
+                deltaX,
+                deltaY
+            });
+        }
+    }
+    setTransform(x, y) {
+        this._elementRef.nativeElement.style.transform = `translate(${x}px, ${y}px)`;
+    }
+    resetTransform() {
+        this.setTransform(0, 0);
+        this.transformCache = null;
+    }
+}
+DraggablePointDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggablePointDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+DraggablePointDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: DraggablePointDirective, selector: "[tetaDraggablePoint]", inputs: { tetaDraggablePoint: "tetaDraggablePoint", dragDirection: "dragDirection", allowDrag: "allowDrag" }, outputs: { moveStart: "moveStart", moveProcess: "moveProcess", moveEnd: "moveEnd" }, host: { listeners: { "mousedown": "mouseDown($event)", "touchstart": "mouseDown($event)", "window:mouseup": "mouseUp($event)", "window:touchend": "mouseUp($event)", "window:mousemove": "mouseMove($event)", "window:touchmove": "mouseMove($event)" } }, exportAs: ["tetaDraggablePoint"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggablePointDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tetaDraggablePoint]',
+                    exportAs: 'tetaDraggablePoint'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { tetaDraggablePoint: [{
+                type: Input
+            }], dragDirection: [{
+                type: Input
+            }], allowDrag: [{
+                type: Input
+            }], moveStart: [{
+                type: Output
+            }], moveProcess: [{
+                type: Output
+            }], moveEnd: [{
+                type: Output
+            }], mouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['touchstart', ['$event']]
+            }], mouseUp: [{
+                type: HostListener,
+                args: ['window:mouseup', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['window:touchend', ['$event']]
+            }], mouseMove: [{
+                type: HostListener,
+                args: ['window:mousemove', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['window:touchmove', ['$event']]
+            }] } });
+
 class LineSeriesComponent extends LinearSeriesBase {
     constructor(svc, cdr, scaleService, zoomService, element) {
         super(svc, cdr, scaleService, zoomService, element);
@@ -1260,13 +1418,64 @@ class LineSeriesComponent extends LinearSeriesBase {
         this.scaleService = scaleService;
         this.zoomService = zoomService;
         this.element = element;
+        this.allowDrag = (point) => {
+            return (newPoint) => {
+                if (point.marker.minX !== null && point.marker.minX !== undefined) {
+                    if (this.x.invert(this.x(this.start.x) + newPoint.deltaX) < point.marker.minX) {
+                        return false;
+                    }
+                }
+                if (point.marker.maxX !== null && point.marker.maxX !== undefined) {
+                    if (this.x.invert(this.x(this.start.x) + newPoint.deltaX) > point.marker.minX) {
+                        return false;
+                    }
+                }
+                if (point.marker.minY !== null && point.marker.minY !== undefined) {
+                    if (this.y.invert(this.y(this.start.y) + newPoint.deltaY) < point.marker.minY) {
+                        return false;
+                    }
+                }
+                if (point.marker.maxY !== null && point.marker.maxY !== undefined) {
+                    if (this.y.invert(this.y(this.start.y) + newPoint.deltaY) > point.marker.maxY) {
+                        return false;
+                    }
+                }
+                return true;
+            };
+        };
+    }
+    moveStart(event, point) {
+        this.start = { x: point.x, y: point.y };
+    }
+    moveEnd(event, point) {
+        point.x = this.x.invert(this.x(this.start.x) + event.deltaX);
+        point.y = this.y.invert(this.y(this.start.y) + event.deltaY);
+        this._update.next();
+        this.svc.emitPoint({
+            target: event
+        });
+    }
+    moveProcess(event, point) {
+        point.x = this.x.invert(this.x(this.start.x) + event.deltaX);
+        point.y = this.y.invert(this.y(this.start.y) + event.deltaY);
+        this._update.next();
+        this.svc.emitPoint({
+            target: event
+        });
+    }
+    startLabel(event, label) {
+        this.labelStart = { dx: label.dx, dy: label.dy };
+    }
+    moveLabel(event, label) {
+        label.dx = this.labelStart.dx + event.deltaX;
+        label.dy = this.labelStart.dy + event.deltaY;
     }
 }
 LineSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", 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: "14.0.0", version: "14.0.2", 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 !=null && t?.y!=null\"\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=\"markers as draggablePoints\">\n  <svg:circle\n    class=\"marker\"\n    *ngFor=\"let point of draggablePoints\"\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"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LineSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", 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 !=null && t?.y!=null\"\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=\"markers as draggablePoints\">\n  <svg:g\n    *ngFor=\"let point of draggablePoints\"\n    [attr.transform]=\"'translate(' + x(point.x)+ ',' +y(point.y) + ')'\">\n    <svg:g [tetaDraggablePoint]=\"point.marker.draggable\"\n           [dragDirection]=\"point.marker.dragType\"\n           [allowDrag]=\"allowDrag(point)\"\n           #dragPoint=\"tetaDraggablePoint\"\n           (moveStart)=\"moveStart($event, point)\"\n           (moveEnd)=\"moveEnd($event, point);dragPoint.resetTransform();\"\n           (moveProcess)=\"moveProcess($event, point);dragPoint.resetTransform();\"\n           [class.draggable-marker]=\"point?.marker?.draggable\">\n      <svg:circle\n        class=\"marker\"\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]=\"0\"\n        [attr.cy]=\"0\">\n      </svg:circle>\n      <ng-container *ngIf=\"point.marker.label?.text\">\n        <svg:line\n          [attr.x1]=\"0\"\n          [attr.y1]=\"0\"\n          [attr.x2]=\"point.marker.label?.dx\"\n          [attr.y2]=\"point.marker.label?.dy\"\n          [attr.stroke]=\"point.marker.label?.style?.stroke ?? 'var(--color-text-90)'\"\n          [attr.stroke-width]=\"point.marker.label?.style?.strokeWidth ?? 1\"\n          [attr.stroke-dasharray]=\"point.marker.label?.style?.strokeDasharray ?? null\">\n        </svg:line>\n        <svg:foreignObject\n          [tetaDraggablePoint]=\"point.marker.label?.draggable\"\n          [dragDirection]=\"point.marker.label.dragType\"\n          #labelPoint=\"tetaDraggablePoint\"\n          (moveStart)=\"startLabel($event, point.marker.label)\"\n          (moveProcess)=\"moveLabel($event, point.marker.label); labelPoint.resetTransform();\"\n          (moveEnd)=\"labelPoint.resetTransform();\"\n          [attr.width]=\"annotationNode?.offsetWidth ?? 0\"\n          [attr.height]=\"annotationNode?.offsetHeight ?? 0\"\n          [attr.x]=\"point.marker.label?.dx\"\n          [attr.y]=\"point.marker.label?.dy\"\n          class=\"position-absolute\">\n          <div\n            #annotationNode\n            class=\"shadow-2 padding-2\"\n            [style.color]=\"'var(--color-text-90)'\"\n            [style.background-color]=\"'var(--color-background-50)'\"\n            [style.cursor]=\"'move'\"\n            style=\"border-radius: 2px; display: inline-block;\">\n            {{point.marker.label?.text}}\n          </div>\n        </svg:foreignObject>\n      </ng-container>\n    </svg:g>\n  </svg:g>\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DraggablePointDirective, selector: "[tetaDraggablePoint]", inputs: ["tetaDraggablePoint", "dragDirection", "allowDrag"], outputs: ["moveStart", "moveProcess", "moveEnd"], exportAs: ["tetaDraggablePoint"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LineSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-line-series]', changeDetection: ChangeDetectionStrategy.OnPush, 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 !=null && t?.y!=null\"\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=\"markers as draggablePoints\">\n  <svg:circle\n    class=\"marker\"\n    *ngFor=\"let point of draggablePoints\"\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"] }]
+            args: [{ selector: 'svg:svg[teta-line-series]', changeDetection: ChangeDetectionStrategy.OnPush, 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 !=null && t?.y!=null\"\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=\"markers as draggablePoints\">\n  <svg:g\n    *ngFor=\"let point of draggablePoints\"\n    [attr.transform]=\"'translate(' + x(point.x)+ ',' +y(point.y) + ')'\">\n    <svg:g [tetaDraggablePoint]=\"point.marker.draggable\"\n           [dragDirection]=\"point.marker.dragType\"\n           [allowDrag]=\"allowDrag(point)\"\n           #dragPoint=\"tetaDraggablePoint\"\n           (moveStart)=\"moveStart($event, point)\"\n           (moveEnd)=\"moveEnd($event, point);dragPoint.resetTransform();\"\n           (moveProcess)=\"moveProcess($event, point);dragPoint.resetTransform();\"\n           [class.draggable-marker]=\"point?.marker?.draggable\">\n      <svg:circle\n        class=\"marker\"\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]=\"0\"\n        [attr.cy]=\"0\">\n      </svg:circle>\n      <ng-container *ngIf=\"point.marker.label?.text\">\n        <svg:line\n          [attr.x1]=\"0\"\n          [attr.y1]=\"0\"\n          [attr.x2]=\"point.marker.label?.dx\"\n          [attr.y2]=\"point.marker.label?.dy\"\n          [attr.stroke]=\"point.marker.label?.style?.stroke ?? 'var(--color-text-90)'\"\n          [attr.stroke-width]=\"point.marker.label?.style?.strokeWidth ?? 1\"\n          [attr.stroke-dasharray]=\"point.marker.label?.style?.strokeDasharray ?? null\">\n        </svg:line>\n        <svg:foreignObject\n          [tetaDraggablePoint]=\"point.marker.label?.draggable\"\n          [dragDirection]=\"point.marker.label.dragType\"\n          #labelPoint=\"tetaDraggablePoint\"\n          (moveStart)=\"startLabel($event, point.marker.label)\"\n          (moveProcess)=\"moveLabel($event, point.marker.label); labelPoint.resetTransform();\"\n          (moveEnd)=\"labelPoint.resetTransform();\"\n          [attr.width]=\"annotationNode?.offsetWidth ?? 0\"\n          [attr.height]=\"annotationNode?.offsetHeight ?? 0\"\n          [attr.x]=\"point.marker.label?.dx\"\n          [attr.y]=\"point.marker.label?.dy\"\n          class=\"position-absolute\">\n          <div\n            #annotationNode\n            class=\"shadow-2 padding-2\"\n            [style.color]=\"'var(--color-text-90)'\"\n            [style.background-color]=\"'var(--color-background-50)'\"\n            [style.cursor]=\"'move'\"\n            style=\"border-radius: 2px; display: inline-block;\">\n            {{point.marker.label?.text}}\n          </div>\n        </svg:foreignObject>\n      </ng-container>\n    </svg:g>\n  </svg:g>\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
 
 class BarSeriesComponent extends SeriesBaseComponent {
@@ -1599,7 +1808,7 @@ class XAxisComponent {
         this.ticks = this.x.pipe(withLatestFrom(this._svc.size), map((_) => {
             const [x, size] = _;
             const tickSize = x.ticks().map((_) => getTextWidth(this.axis.options.tickFormat ? this.axis.options.tickFormat(_) : this.axis.defaultFormatter()(_), 0.45, 11));
-            return x.ticks(size.width / parseInt(d3.max(tickSize), 10) / 3);
+            return x.ticks(size.width / parseInt(d3.max(tickSize), 10) / 10);
         }));
     }
     getLabelTransform() {
@@ -1734,7 +1943,11 @@ class PlotBandComponent {
         this.cdr = cdr;
         this.element = element;
         this.orientation = AxisOrientation;
-        this.getTextCenter = () => this.scale((this.plotBand.from + this.plotBand.to) / 2);
+        this.getTextPosition = () => {
+            const [min, max] = this.scale.domain();
+            const position = ((this.plotBand.from <= min ? min : this.plotBand.from) + (this.plotBand.to >= max ? max : this.plotBand.to)) / 2;
+            return this.scale(position);
+        };
     }
     click(event) {
         this.emit({
@@ -1853,10 +2066,10 @@ class PlotBandComponent {
     }
 }
 PlotBandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PlotBandComponent, deps: [{ token: ScaleService }, { token: ZoomService }, { token: ChartService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PlotBandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: { plotBand: "plotBand", axis: "axis", scale: "scale", size: "size" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, ngImport: i0, template: "<svg:rect\n  class=\"plotband\" xmlns:svg=\"http://www.w3.org/1999/html\"\n  [class.draggable]=\"plotBand?.draggable === true\"\n  [attr.fill]=\"getFill(plotBand)\"\n  [attr.opacity]=\"plotBand.style?.plotBand?.opacity\"\n  [attr.height]=\"axis.orientation === orientation.x ? height : bandSize\"\n  [attr.width]=\"axis.orientation === orientation.x ? bandSize : width\"\n  [attr.y]=\"axis.orientation === orientation.y ? from : null\"\n  [attr.x]=\"axis.orientation === orientation.x ? from : null\">\n</svg:rect>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.x\"\n  text-anchor=\"middle\"\n  dominant-baseline=\"central\"\n  class=\"label font-caption fill-text-90\"\n  [attr.x]=\"getTextCenter()\"\n  [attr.transform]=\"'rotate(-90, '+ getTextCenter() +',' + height / 2 + ')'\"\n  [attr.y]=\"height / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.y\"\n  text-anchor=\"middle\"\n  class=\"label font-caption fill-text-90\"\n  dominant-baseline=\"central\"\n  [attr.x]=\"getTextCenter()\"\n  [attr.y]=\"width / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:line class=\"display-grabber\"\n          *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n          [attr.data-grabber]=\"'from'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n\n<svg:line class=\"display-grabber\"\n          *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n          [attr.data-grabber]=\"'to'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n<svg:line class=\"grabber\"\n          *ngIf=\"plotBand.resizable\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"8\"\n          [style.transform]=\"axis.orientation === orientation.x ? 'translateX(2px)' : 'translateY(2px)'\"\n          [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n          [attr.data-grabber]=\"'from'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n<svg:line class=\"grabber\"\n          *ngIf=\"plotBand.resizable\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"8\"\n          [style.transform]=\"axis.orientation === orientation.x ? 'translateX(-2px)' : 'translateY(-2px)'\"\n          [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n          [attr.data-grabber]=\"'to'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n\n", styles: [":host .draggable rect:hover{cursor:grab}:host .draggable rect:active{cursor:grabbing}:host .x-grabber.resizeable{cursor:col-resize}:host .y-grabber.resizeable{cursor:row-resize}:host:hover .grabber{opacity:.1}.grabber{opacity:0}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PlotBandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: { plotBand: "plotBand", axis: "axis", scale: "scale", size: "size" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, ngImport: i0, template: "<svg:rect\n  class=\"plotband\" xmlns:svg=\"http://www.w3.org/1999/html\"\n  [class.draggable]=\"plotBand?.draggable === true\"\n  [attr.fill]=\"getFill(plotBand)\"\n  [attr.opacity]=\"plotBand.style?.plotBand?.opacity\"\n  [attr.height]=\"axis.orientation === orientation.x ? height : bandSize\"\n  [attr.width]=\"axis.orientation === orientation.x ? bandSize : width\"\n  [attr.y]=\"axis.orientation === orientation.y ? from : null\"\n  [attr.x]=\"axis.orientation === orientation.x ? from : null\">\n</svg:rect>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.x\"\n  text-anchor=\"middle\"\n  dominant-baseline=\"middle\"\n  class=\"label font-caption fill-text-90\"\n  [attr.x]=\"getTextPosition()\"\n  [attr.transform]=\"'rotate(-90, '+ getTextPosition() +',' + height / 2 + ')'\"\n  [attr.y]=\"height / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.y\"\n  text-anchor=\"middle\"\n  class=\"label font-caption fill-text-90\"\n  dominant-baseline=\"central\"\n  [attr.x]=\"getTextPosition()\"\n  [attr.y]=\"width / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:line class=\"display-grabber\"\n          *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n          [attr.data-grabber]=\"'from'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n\n<svg:line class=\"display-grabber\"\n          *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n          [attr.data-grabber]=\"'to'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n<svg:line class=\"grabber\"\n          *ngIf=\"plotBand.resizable\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"8\"\n          [style.transform]=\"axis.orientation === orientation.x ? 'translateX(2px)' : 'translateY(2px)'\"\n          [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n          [attr.data-grabber]=\"'from'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n<svg:line class=\"grabber\"\n          *ngIf=\"plotBand.resizable\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"8\"\n          [style.transform]=\"axis.orientation === orientation.x ? 'translateX(-2px)' : 'translateY(-2px)'\"\n          [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n          [attr.data-grabber]=\"'to'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n\n", styles: [":host .draggable rect:hover{cursor:grab}:host .draggable rect:active{cursor:grabbing}:host .x-grabber.resizeable{cursor:col-resize}:host .y-grabber.resizeable{cursor:row-resize}:host:hover .grabber{opacity:.1}.grabber{opacity:0}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PlotBandComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[teta-plot-band]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:rect\n  class=\"plotband\" xmlns:svg=\"http://www.w3.org/1999/html\"\n  [class.draggable]=\"plotBand?.draggable === true\"\n  [attr.fill]=\"getFill(plotBand)\"\n  [attr.opacity]=\"plotBand.style?.plotBand?.opacity\"\n  [attr.height]=\"axis.orientation === orientation.x ? height : bandSize\"\n  [attr.width]=\"axis.orientation === orientation.x ? bandSize : width\"\n  [attr.y]=\"axis.orientation === orientation.y ? from : null\"\n  [attr.x]=\"axis.orientation === orientation.x ? from : null\">\n</svg:rect>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.x\"\n  text-anchor=\"middle\"\n  dominant-baseline=\"central\"\n  class=\"label font-caption fill-text-90\"\n  [attr.x]=\"getTextCenter()\"\n  [attr.transform]=\"'rotate(-90, '+ getTextCenter() +',' + height / 2 + ')'\"\n  [attr.y]=\"height / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.y\"\n  text-anchor=\"middle\"\n  class=\"label font-caption fill-text-90\"\n  dominant-baseline=\"central\"\n  [attr.x]=\"getTextCenter()\"\n  [attr.y]=\"width / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:line class=\"display-grabber\"\n          *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n          [attr.data-grabber]=\"'from'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n\n<svg:line class=\"display-grabber\"\n          *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n          [attr.data-grabber]=\"'to'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n<svg:line class=\"grabber\"\n          *ngIf=\"plotBand.resizable\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"8\"\n          [style.transform]=\"axis.orientation === orientation.x ? 'translateX(2px)' : 'translateY(2px)'\"\n          [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n          [attr.data-grabber]=\"'from'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n<svg:line class=\"grabber\"\n          *ngIf=\"plotBand.resizable\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"8\"\n          [style.transform]=\"axis.orientation === orientation.x ? 'translateX(-2px)' : 'translateY(-2px)'\"\n          [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n          [attr.data-grabber]=\"'to'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n\n", styles: [":host .draggable rect:hover{cursor:grab}:host .draggable rect:active{cursor:grabbing}:host .x-grabber.resizeable{cursor:col-resize}:host .y-grabber.resizeable{cursor:row-resize}:host:hover .grabber{opacity:.1}.grabber{opacity:0}\n"] }]
+            args: [{ selector: '[teta-plot-band]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:rect\n  class=\"plotband\" xmlns:svg=\"http://www.w3.org/1999/html\"\n  [class.draggable]=\"plotBand?.draggable === true\"\n  [attr.fill]=\"getFill(plotBand)\"\n  [attr.opacity]=\"plotBand.style?.plotBand?.opacity\"\n  [attr.height]=\"axis.orientation === orientation.x ? height : bandSize\"\n  [attr.width]=\"axis.orientation === orientation.x ? bandSize : width\"\n  [attr.y]=\"axis.orientation === orientation.y ? from : null\"\n  [attr.x]=\"axis.orientation === orientation.x ? from : null\">\n</svg:rect>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.x\"\n  text-anchor=\"middle\"\n  dominant-baseline=\"middle\"\n  class=\"label font-caption fill-text-90\"\n  [attr.x]=\"getTextPosition()\"\n  [attr.transform]=\"'rotate(-90, '+ getTextPosition() +',' + height / 2 + ')'\"\n  [attr.y]=\"height / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.y\"\n  text-anchor=\"middle\"\n  class=\"label font-caption fill-text-90\"\n  dominant-baseline=\"central\"\n  [attr.x]=\"getTextPosition()\"\n  [attr.y]=\"width / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:line class=\"display-grabber\"\n          *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n          [attr.data-grabber]=\"'from'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n\n<svg:line class=\"display-grabber\"\n          *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n          [attr.data-grabber]=\"'to'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n<svg:line class=\"grabber\"\n          *ngIf=\"plotBand.resizable\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"8\"\n          [style.transform]=\"axis.orientation === orientation.x ? 'translateX(2px)' : 'translateY(2px)'\"\n          [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n          [attr.data-grabber]=\"'from'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n<svg:line class=\"grabber\"\n          *ngIf=\"plotBand.resizable\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"8\"\n          [style.transform]=\"axis.orientation === orientation.x ? 'translateX(-2px)' : 'translateY(-2px)'\"\n          [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n          [attr.data-grabber]=\"'to'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n\n", styles: [":host .draggable rect:hover{cursor:grab}:host .draggable rect:active{cursor:grabbing}:host .x-grabber.resizeable{cursor:col-resize}:host .y-grabber.resizeable{cursor:row-resize}:host:hover .grabber{opacity:.1}.grabber{opacity:0}\n"] }]
         }], ctorParameters: function () { return [{ type: ScaleService }, { type: ZoomService }, { type: ChartService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { plotBand: [{
                 type: Input
             }], axis: [{
@@ -2542,10 +2755,10 @@ class ChartContainerComponent {
     }
 }
 ChartContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartContainerComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ChartContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ChartContainerComponent, selector: "teta-chart-container", ngImport: i0, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  scales: scales | 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  <ng-container *ngIf=\"data.size?.height > 0 && data.size?.width > 0 && data.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length\">\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.y | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible\">\n            <g\n              teta-y-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [brushScale]=\"data.brushScale\"\n              [scale]=\"data.scales.y.get(item.key).scale\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n              [attr.y]=\"0\"\n              [attr.height]=\"data.visibleRect.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.scales.x | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0\">\n            <g\n              teta-x-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [brushScale]=\"data.brushScale\"\n              [scale]=\"data.scales.x.get(item.key).scale\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"0\"\n              [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n              [attr.width]=\"data.visibleRect.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>\n  <ng-container *ngIf=\"data.size?.height > 0 && data.size?.width > 0 && data.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [brushScale]=\"data.brushScale\"\n      [scale]=\"data.brushScale\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate('+ data.visibleRect.x +'px, '+ data.visibleRect.y +'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines?.enable !== false\"\n         [size]=\"data.size\"></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.scales.x.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.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.scales.y.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.y.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.scales.x.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.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.scales.y.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"series-container\">\n        <ng-container *ngFor=\"let series of data.config.series;\">\n          <g teta-series-host\n             *ngIf=\"series.visible\"\n             [config]=\"data.config\"\n             [series]=\"series\"></g>\n        </ng-container>\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      <g class=\"crosshair\" *ngIf=\"data.config.tooltip?.showCrosshair\">\n        <g teta-crosshair [size]=\"data.visibleRect\"></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}:host .crosshair{cursor:crosshair}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["config", "series"] }, { kind: "component", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size"] }, { kind: "component", type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "size"] }, { kind: "component", type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "size"] }, { kind: "component", type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotLine", "size", "axis", "scale"] }, { kind: "component", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: ["plotBand", "axis", "scale", "size"] }, { kind: "component", type: TooltipComponent, selector: "teta-tooltip", inputs: ["size", "config"] }, { kind: "directive", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size", "brushScale", "scale"] }, { kind: "directive", type: BrushableDirective, selector: "[tetaBrushable]", inputs: ["config", "brushScale"] }, { kind: "component", type: AnnotationComponent, selector: "[teta-annotation]", inputs: ["annotation"] }, { kind: "component", type: CrosshairComponent, selector: "[teta-crosshair]", inputs: ["size"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ChartContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ChartContainerComponent, selector: "teta-chart-container", ngImport: i0, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  scales: scales | 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  <ng-container *ngIf=\"data.size?.height > 0 && data.size?.width > 0 && data.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length\">\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.y | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible\">\n            <g\n              teta-y-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [brushScale]=\"data.brushScale\"\n              [scale]=\"data.scales.y.get(item.key).scale\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n              [attr.y]=\"0\"\n              [attr.height]=\"data.visibleRect.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.scales.x | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0\">\n            <g\n              teta-x-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [brushScale]=\"data.brushScale\"\n              [scale]=\"data.scales.x.get(item.key).scale\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"0\"\n              [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n              [attr.width]=\"data.visibleRect.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>\n  <ng-container *ngIf=\"data.size?.height > 0 && data.size?.width > 0 && data.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [brushScale]=\"data.brushScale\"\n      [scale]=\"data.brushScale\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate('+ data.visibleRect.x +'px, '+ data.visibleRect.y +'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines?.enable !== false\"\n         [size]=\"data.size\"></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.scales.x.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.x.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.scales.y.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.y.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.scales.x.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.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.scales.y.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.y.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"series-container\">\n        <ng-container *ngFor=\"let series of data.config.series;\">\n          <g teta-series-host\n             *ngIf=\"series.visible\"\n             [config]=\"data.config\"\n             [series]=\"series\"></g>\n        </ng-container>\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      <g class=\"crosshair\" *ngIf=\"data.config.tooltip?.showCrosshair\">\n        <g teta-crosshair [size]=\"data.visibleRect\"></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}:host .crosshair{cursor:crosshair}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["config", "series"] }, { kind: "component", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size"] }, { kind: "component", type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "size"] }, { kind: "component", type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "size"] }, { kind: "component", type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotLine", "size", "axis", "scale"] }, { kind: "component", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: ["plotBand", "axis", "scale", "size"] }, { kind: "component", type: TooltipComponent, selector: "teta-tooltip", inputs: ["size", "config"] }, { kind: "directive", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size", "brushScale", "scale"] }, { kind: "directive", type: BrushableDirective, selector: "[tetaBrushable]", inputs: ["config", "brushScale"] }, { kind: "component", type: AnnotationComponent, selector: "[teta-annotation]", inputs: ["annotation"] }, { kind: "component", type: CrosshairComponent, selector: "[teta-crosshair]", inputs: ["size"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", 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  scales: scales | 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  <ng-container *ngIf=\"data.size?.height > 0 && data.size?.width > 0 && data.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length\">\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.y | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible\">\n            <g\n              teta-y-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [brushScale]=\"data.brushScale\"\n              [scale]=\"data.scales.y.get(item.key).scale\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n              [attr.y]=\"0\"\n              [attr.height]=\"data.visibleRect.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.scales.x | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0\">\n            <g\n              teta-x-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [brushScale]=\"data.brushScale\"\n              [scale]=\"data.scales.x.get(item.key).scale\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"0\"\n              [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n              [attr.width]=\"data.visibleRect.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>\n  <ng-container *ngIf=\"data.size?.height > 0 && data.size?.width > 0 && data.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [brushScale]=\"data.brushScale\"\n      [scale]=\"data.brushScale\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate('+ data.visibleRect.x +'px, '+ data.visibleRect.y +'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines?.enable !== false\"\n         [size]=\"data.size\"></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.scales.x.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.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.scales.y.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.y.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.scales.x.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.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.scales.y.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"series-container\">\n        <ng-container *ngFor=\"let series of data.config.series;\">\n          <g teta-series-host\n             *ngIf=\"series.visible\"\n             [config]=\"data.config\"\n             [series]=\"series\"></g>\n        </ng-container>\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      <g class=\"crosshair\" *ngIf=\"data.config.tooltip?.showCrosshair\">\n        <g teta-crosshair [size]=\"data.visibleRect\"></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}:host .crosshair{cursor:crosshair}\n"] }]
+            args: [{ selector: 'teta-chart-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  scales: scales | 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  <ng-container *ngIf=\"data.size?.height > 0 && data.size?.width > 0 && data.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length\">\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.y | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible\">\n            <g\n              teta-y-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [brushScale]=\"data.brushScale\"\n              [scale]=\"data.scales.y.get(item.key).scale\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n              [attr.y]=\"0\"\n              [attr.height]=\"data.visibleRect.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.scales.x | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0\">\n            <g\n              teta-x-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [brushScale]=\"data.brushScale\"\n              [scale]=\"data.scales.x.get(item.key).scale\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"0\"\n              [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n              [attr.width]=\"data.visibleRect.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>\n  <ng-container *ngIf=\"data.size?.height > 0 && data.size?.width > 0 && data.scales?.x.size === data.config.xAxis.length && data.scales?.y.size === data.config.yAxis.length\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [brushScale]=\"data.brushScale\"\n      [scale]=\"data.brushScale\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate('+ data.visibleRect.x +'px, '+ data.visibleRect.y +'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines?.enable !== false\"\n         [size]=\"data.size\"></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.scales.x.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.x.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.scales.y.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.y.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.scales.x.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.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.scales.y.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.y.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"series-container\">\n        <ng-container *ngFor=\"let series of data.config.series;\">\n          <g teta-series-host\n             *ngIf=\"series.visible\"\n             [config]=\"data.config\"\n             [series]=\"series\"></g>\n        </ng-container>\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      <g class=\"crosshair\" *ngIf=\"data.config.tooltip?.showCrosshair\">\n        <g teta-crosshair [size]=\"data.visibleRect\"></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}:host .crosshair{cursor:crosshair}\n"] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 
 class LegendComponent {
@@ -2748,7 +2961,8 @@ ChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "1
         BlockSeriesComponent,
         BlockAreaSeriesComponent,
         AnnotationComponent,
-        CrosshairComponent], imports: [CommonModule, LetModule], exports: [ChartComponent,
+        CrosshairComponent,
+        DraggablePointDirective], imports: [CommonModule, LetModule], exports: [ChartComponent,
         LegendComponent,
         SeriesBaseComponent,
         LineSeriesComponent,
@@ -2784,6 +2998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                         BlockAreaSeriesComponent,
                         AnnotationComponent,
                         CrosshairComponent,
+                        DraggablePointDirective,
                     ],
                     exports: [
                         ChartComponent,