@tetacom/svg-charts 1.1.13 → 1.1.16

package/fesm2020/tetacom-svg-charts.mjs

@@ -2,12 +2,14 @@ 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, animationFrameScheduler, tap, takeWhile } from 'rxjs';
+import { BehaviorSubject, Subject, of, withLatestFrom, map, shareReplay, filter, combineLatest, ReplaySubject, animationFrameScheduler, tap, takeWhile } from 'rxjs';
 import * as d3 from 'd3';
 import { zoomIdentity } from 'd3';
 import { maxIndex } from 'd3-array';
-import { throttleTime, debounceTime, tap as tap$1 } from 'rxjs/operators';
+import { throttleTime, tap as tap$1, debounceTime } from 'rxjs/operators';
 import * as i3 from '@angular/platform-browser';
+import * as i4$1 from '@taiga-ui/cdk';
+import { TuiLetModule } from '@taiga-ui/cdk';
 
 var ZoomType;
 (function (ZoomType) {
@@ -18,7 +20,7 @@ var ZoomType;
 
 class ChartBounds {
     constructor(options) {
-        this.top = 0;
+        this.top = 30;
         this.right = 30;
         this.bottom = 0;
         this.left = 0;
@@ -35,10 +37,17 @@ var TooltipTracking;
     TooltipTracking[TooltipTracking["y"] = 1] = "y";
 })(TooltipTracking || (TooltipTracking = {}));
 
+var ZoomBehaviorType;
+(function (ZoomBehaviorType) {
+    ZoomBehaviorType[ZoomBehaviorType["move"] = 0] = "move";
+    ZoomBehaviorType[ZoomBehaviorType["wheel"] = 1] = "wheel";
+})(ZoomBehaviorType || (ZoomBehaviorType = {}));
+
 const defaultChartConfig = () => ({
     zoom: {
         enable: true,
         type: ZoomType.x,
+        zoomBehavior: ZoomBehaviorType.move
     },
     bounds: new ChartBounds(),
     legend: {
@@ -48,6 +57,10 @@ const defaultChartConfig = () => ({
         enable: true,
         showMarkers: true,
         tracking: TooltipTracking.x,
+        padding: {
+            x: 16,
+            y: 16
+        }
     },
     xAxis: [],
     yAxis: [],
@@ -119,9 +132,10 @@ class ChartService {
         this.chartContextMenu$ = new Subject();
         this.annotationEvent$ = new Subject();
         this.annotationMove$ = new Subject();
+        this.id = of((Date.now() + Math.random()).toString(36));
         this.config = this.config$
             .asObservable()
-            .pipe(map(this.setDefaults), map(this.setPreparationData), shareReplay({
+            .pipe(withLatestFrom(this.id), map(this.setDefaults), map(this.setPreparationData), shareReplay({
             bufferSize: 1,
             refCount: true
         }));
@@ -187,13 +201,15 @@ class ChartService {
     emitChartContextMenu(event) {
         this.chartContextMenu$.next(event);
     }
-    setDefaults(config) {
+    setDefaults(data) {
+        let [config, id] = data;
         const defaultConfig = (defaultConfig) => {
             return (source) => {
                 return Object.assign({}, defaultConfig, source);
             };
         };
         config = Object.assign({}, defaultChartConfig(), config);
+        config.id = id;
         config.xAxis = config.xAxis.map(defaultConfig(defaultAxisConfig));
         config.yAxis = config.yAxis.map(defaultConfig(defaultAxisConfig));
         config.series = config.series.map(defaultConfig(defaultSeriesConfig()));
@@ -204,7 +220,6 @@ class ChartService {
             };
         });
         config.tooltip = Object.assign({}, defaultChartConfig().tooltip, config.tooltip);
-        const id = (Date.now() + Math.random()).toString(36);
         config.zoom.syncChannel = config.zoom?.syncChannel ?? id;
         return config;
     }
@@ -466,6 +481,9 @@ class ScaleService {
                 map.set(index, Axis.createAxis(AxisOrientation.x, config, index));
             });
             return map;
+        }), shareReplay({
+            bufferSize: 1,
+            refCount: true
         }));
         this.yAxisMap = combineLatest([
             this.chartService.size,
@@ -477,6 +495,9 @@ class ScaleService {
                 map.set(index, Axis.createAxis(AxisOrientation.y, config, index));
             });
             return map;
+        }), shareReplay({
+            bufferSize: 1,
+            refCount: true
         }));
         this.xScaleMap = combineLatest([
             this.chartService.size,
@@ -610,6 +631,7 @@ class ZoomMessage {
         this.event = options?.event;
         this.axis = options?.axis;
         this.brushDomain = options.brushDomain;
+        this.chartId = options?.chartId;
     }
 }
 class BrushMessage {
@@ -678,11 +700,11 @@ class BrushService {
                         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));
+                            container.call(this.brush.move, [Math.floor(invertedSelection[0]), Math.floor(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));
+                            container.call(this.brush.move, [Math.floor(invertedSelection[0]), Math.ceil(invertedSelection[0] + config.brush?.min)].map(brushScale));
                             return;
                         }
                         container.call(this.brush.move, [from - halfBrushHeight, to + halfBrushHeight]);
@@ -728,23 +750,25 @@ class BrushService {
                 return m.message.event.sourceEvent instanceof MouseEvent || m.message.event.sourceEvent instanceof WheelEvent;
             }), 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,
-                    });
+                if (m.message?.axis.index === 0 && m.message?.axis.orientation === AxisOrientation.y && config.brush?.type === BrushType.y || m.message?.axis.orientation === AxisOrientation.x && config.brush?.type === BrushType.x) {
+                    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;
                 }
-                this.selection = brushDomain;
             })).subscribe();
         }
     }
@@ -808,12 +832,12 @@ class TooltipComponent {
     getPosition(event) {
         const centerX = this.size.width / 2;
         const centerY = this.size.height / 2;
-        const padding = { x: 10, y: 10 };
+        const padding = this.config?.tooltip?.padding;
         const scene = {
             left: event.pageX > centerX ? 'initial' : `${event.pageX + padding.x}px`,
             top: event.pageY > centerY ? 'initial' : `${event.pageY + padding.y}px`,
             bottom: event.pageY > centerY
-                ? `${window.innerHeight - event.pageY}px`
+                ? `${window.innerHeight - event.pageY + padding.y}px`
                 : 'initial',
             right: event.pageX > centerX
                 ? `${window.innerWidth - event.pageX + padding.x}px`
@@ -939,31 +963,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
             }] } });
 
 class GridlinesComponent {
-    constructor() {
-    }
-    draw() {
-        this.tickYValues = this.yScaleMap.get(0).ticks();
-        this.tickXValues = this.xScaleMap.get(0).ticks();
+    constructor(svc, chartService) {
+        this.svc = svc;
+        this.chartService = chartService;
+        this.config = this.chartService.config;
+        this.tickYValues = this.svc.yScaleMap.pipe(map((_) => _.get(0).ticks()));
+        this.tickXValues = this.svc.xScaleMap.pipe(map((_) => _.get(0).ticks()));
+        this.y = this.svc.yScaleMap.pipe(map((_) => _.get(0)));
+        this.x = this.svc.xScaleMap.pipe(map((_) => _.get(0)));
     }
-    ngOnChanges(changes) {
-        if (changes.hasOwnProperty('xScaleMap') &&
-            changes.hasOwnProperty('yScaleMap')) {
-            this.draw();
-        }
+    ngAfterViewInit() {
     }
 }
-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", 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 });
+GridlinesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: GridlinesComponent, deps: [{ token: ScaleService }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
+GridlinesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: { size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"{\n  xValues: tickXValues | async,\n  yValues: tickYValues | async,\n  x: x | async,\n  y: y | async,\n  config: config | async\n} as data\">\n  <ng-container *ngIf=\"data.config.gridLines?.showY !== false\">\n    <ng-container *ngFor=\"let tick of data.yValues\">\n      <svg:line [attr.x1]=\"0\"\n                [attr.y1]=\"data.y(tick)\"\n                [attr.x2]=\"size?.width\"\n                [attr.y2]=\"data.y(tick)\"></svg:line>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"data.config.gridLines?.showX !== false\">\n    <ng-container *ngFor=\"let tick of data.xValues\">\n      <svg:line [attr.x1]=\"data.x(tick)\"\n                [attr.y1]=\"0\"\n                [attr.x2]=\"data.x(tick)\"\n                [attr.y2]=\"size?.height\"></svg:line>\n    </ng-container>\n  </ng-container>\n\n</ng-container>\n\n\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"] }], pipes: { "async": i4.AsyncPipe }, 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 *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: [{
+            args: [{ selector: '[teta-gridlines]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  xValues: tickXValues | async,\n  yValues: tickYValues | async,\n  x: x | async,\n  y: y | async,\n  config: config | async\n} as data\">\n  <ng-container *ngIf=\"data.config.gridLines?.showY !== false\">\n    <ng-container *ngFor=\"let tick of data.yValues\">\n      <svg:line [attr.x1]=\"0\"\n                [attr.y1]=\"data.y(tick)\"\n                [attr.x2]=\"size?.width\"\n                [attr.y2]=\"data.y(tick)\"></svg:line>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"data.config.gridLines?.showX !== false\">\n    <ng-container *ngFor=\"let tick of data.xValues\">\n      <svg:line [attr.x1]=\"data.x(tick)\"\n                [attr.y1]=\"0\"\n                [attr.x2]=\"data.x(tick)\"\n                [attr.y2]=\"size?.height\"></svg:line>\n    </ng-container>\n  </ng-container>\n\n</ng-container>\n\n\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke-dasharray:1,4;stroke:var(--color-text-20)}\n"] }]
+        }], ctorParameters: function () { return [{ type: ScaleService }, { type: ChartService }]; }, propDecorators: { size: [{
                 type: Input
             }] } });
 
@@ -1246,7 +1263,7 @@ class LinearSeriesBase extends SeriesBaseComponent {
         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()));
+        }), tap(() => setTimeout(() => this.cdr.detectChanges())));
         this.path = combineLatest([
             this.scaleService.xScaleMap,
             this.scaleService.yScaleMap,
@@ -1318,6 +1335,9 @@ class LinearSeriesBase extends SeriesBaseComponent {
         return this.series.data?.filter((_) => _?.marker);
     }
     getTransform(event, scaleX, scaleY) {
+        if (event.type === 'mouseleave') {
+            return null;
+        }
         const mouse = [event?.offsetX, event?.offsetY];
         const foundX = scaleX.get(this.series.xAxisIndex);
         const foundY = scaleY.get(this.series.yAxisIndex);
@@ -1422,10 +1442,10 @@ class LineSeriesComponent extends LinearSeriesBase {
     }
 }
 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 });
+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 *tuiLet=\"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=\"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$1.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { 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: [{
             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 !== 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"] }]
+            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 *tuiLet=\"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=\"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"] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
 
 class BarSeriesComponent extends SeriesBaseComponent {
@@ -1658,10 +1678,10 @@ class AreaSeriesComponent extends LinearSeriesBase {
     }
 }
 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.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 });
+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  [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 *tuiLet=\"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=\"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$1.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { 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.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: [""] }]
+            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  [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 *tuiLet=\"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=\"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()
@@ -1786,10 +1806,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
             }] } });
 
 class ZoomableDirective {
-    constructor(elementRef, zoomService, broadcastService, zone) {
+    constructor(elementRef, zoomService, broadcastService, chartService, zone) {
         this.elementRef = elementRef;
         this.zoomService = zoomService;
         this.broadcastService = broadcastService;
+        this.chartService = chartService;
         this.zone = zone;
         this.zoomable = false;
         this.alive = true;
@@ -1807,7 +1828,8 @@ class ZoomableDirective {
                     const message = new ZoomMessage({
                         event,
                         axis: this.zoomAxis,
-                        brushDomain: domain
+                        brushDomain: domain,
+                        chartId: this.config.id
                     });
                     this.broadcastService.broadcastZoom({
                         channel: this.config?.zoom?.syncChannel,
@@ -1828,7 +1850,7 @@ class ZoomableDirective {
         }
     }
     ngAfterViewInit() {
-        const enable = this.axis?.options?.zoom && this.axis?.options.visible || this.config?.zoom?.enable;
+        const enable = this.axis?.options?.zoom && this.axis?.options.visible !== false || this.config?.zoom?.enable;
         if (!enable) {
             return;
         }
@@ -1839,44 +1861,110 @@ class ZoomableDirective {
             [0, 0],
             [this.size.width, this.size.height],
         ]);
+        if (this.config.zoom?.limitTranslateByData) {
+            this.zoom.translateExtent([[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;
         if (enable) {
-            const maxZoom = this.config.zoom?.max ? (this.zoomAxis.extremes[1] - this.zoomAxis.extremes[0]) / this.config.zoom?.max : 0;
+            const maxZoom = this.config.zoom?.max ? (this.zoomAxis.extremes[1] - this.zoomAxis.extremes[0]) / this.config.zoom?.max : this.config.zoom?.limitZoomByData ? 1 : 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);
+            this._element.call(this.zoom)
+                .on('dblclick.zoom', null);
+            if (this.config?.zoom?.zoomBehavior === ZoomBehaviorType.wheel) {
+                let wheeling;
+                let type = 'start';
+                this.zoom
+                    .filter((event) => event.ctrlKey)
+                    .wheelDelta((event) => {
+                    const delta = this.config?.zoom.type === ZoomType.x ? -event.deltaX : -event.deltaY;
+                    return delta * 0.002;
+                });
+                this._element.on('wheel', (event) => {
+                    event.preventDefault();
+                    if (event.ctrlKey) {
+                        return;
+                    }
+                    const emit = (type) => {
+                        let transform = zoomIdentity;
+                        const origin = this.brushScale.copy().domain(this.zoomAxis.extremes);
+                        if (this.config.zoom?.type === ZoomType.y) {
+                            transform = transform.translate(0, this.currentTransform.y - event.deltaY);
+                        }
+                        transform = transform.scale(this.currentTransform.k);
+                        let domain = this.config.zoom?.type === ZoomType.y ?
+                            transform.rescaleY(origin).domain() :
+                            transform.rescaleX(origin).domain();
+                        const message = new ZoomMessage({
+                            event: {
+                                sourceEvent: event,
+                                transform,
+                                type
+                            },
+                            axis: this.zoomAxis,
+                            brushDomain: domain,
+                            chartId: this.config.id
+                        });
+                        this.zoomService.setZoom({
+                            event: {
+                                sourceEvent: event,
+                                transform,
+                                type
+                            },
+                            target: this.zoomAxis
+                        });
+                        this.broadcastService.broadcastZoom({
+                            channel: this.config?.zoom?.syncChannel,
+                            message,
+                        });
+                        this._element.call(this.zoom.transform, transform);
+                        this.currentTransform = transform;
+                    };
+                    this.zone.runOutsideAngular(() => {
+                        clearTimeout(wheeling);
+                        emit(type);
+                        type = 'zoom';
+                        wheeling = setTimeout(() => {
+                            type = 'end';
+                            emit(type);
+                            type = 'start';
+                        }, 400);
+                    });
+                });
+            }
         }
         // Subscribe to zoom events
-        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) => {
+        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), 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) {
+            if (this.config.id !== m.message.chartId) {
                 this._element.call(this.zoom.transform, m.message.event.transform, null, {});
             }
-        }), takeWhile((_) => this.alive)).subscribe();
+            else {
+                if (m.message.axis.isFake && !this.zoomAxis.isFake || !m.message.axis.isFake && this.zoomAxis.isFake) {
+                    this._element.call(this.zoom.transform, m.message.event.transform);
+                }
+            }
+        })).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(debounceTime(30), filter((m) => Boolean(m.message.selection)), tap$1((m) => {
-                const currentTransform = d3.zoomTransform(this.elementRef.nativeElement);
+            combineLatest([this.broadcastService.subscribeToBrush(this.config?.zoom.syncChannel), this.chartService.size]).pipe(takeWhile((_) => this.alive), debounceTime(150), filter((data) => Boolean(data[0].message.selection)), tap$1((data) => {
+                const [m] = data;
+                const currentTransform = d3.zoomTransform(this._element.node());
                 if (!m.message.event && this.currentSelection && currentTransform.k !== 1) {
                     return;
                 }
                 this.currentSelection = m.message.selection;
-                this.zone.runOutsideAngular(() => {
-                    setTimeout(() => {
-                        this.updateZoom(m);
-                    }, 100);
-                });
-            }), takeWhile((_) => this.alive)).subscribe();
+                this.updateZoom(m);
+            })).subscribe();
         }
     }
     ngOnDestroy() {
         this.zoom?.on('start zoom end', null);
+        this._element.on('wheel', null);
         this.alive = false;
     }
     updateZoom(m) {
@@ -1894,14 +1982,14 @@ class ZoomableDirective {
         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 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+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: ChartService }, { 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 }, { type: i0.NgZone }]; }, propDecorators: { config: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ZoomService }, { type: BroadcastService }, { type: ChartService }, { type: i0.NgZone }]; }, propDecorators: { config: [{
                 type: Input
             }], axis: [{
                 type: Input
@@ -1931,16 +2019,14 @@ class BrushableDirective {
     }
 }
 BrushableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BrushableDirective, deps: [{ token: BrushService }, { token: ChartService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-BrushableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: BrushableDirective, selector: "svg:svg[tetaBrushable]", inputs: { config: "config", size: "size", brushScale: "brushScale" }, usesOnChanges: true, ngImport: i0 });
+BrushableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: BrushableDirective, selector: "[tetaBrushable]", inputs: { config: "config", brushScale: "brushScale" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BrushableDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'svg:svg[tetaBrushable]',
+                    selector: '[tetaBrushable]',
                 }]
         }], ctorParameters: function () { return [{ type: BrushService }, { type: ChartService }, { type: i0.ElementRef }]; }, propDecorators: { config: [{
                 type: Input
-            }], size: [{
-                type: Input
             }], brushScale: [{
                 type: Input
             }] } });
@@ -1962,8 +2048,14 @@ class ChartContainerComponent {
         this.size = this._svc.size;
         this.yAxisMap = this._scaleService.yAxisMap;
         this.xAxisMap = this._scaleService.xAxisMap;
-        this.yScaleMap = this._scaleService.yScaleMap;
-        this.xScaleMap = this._scaleService.xScaleMap;
+        this.yScaleMap = this._scaleService.yScaleMap.pipe(throttleTime(0, animationFrameScheduler, { trailing: true }), tap(() => this._cdr.detectChanges()), shareReplay({
+            bufferSize: 1,
+            refCount: true
+        }));
+        this.xScaleMap = this._scaleService.xScaleMap.pipe(throttleTime(0, animationFrameScheduler, { trailing: true }), tap(() => this._cdr.detectChanges()), shareReplay({
+            bufferSize: 1,
+            refCount: true
+        }));
         this.brushScale = combineLatest([
             this._scaleService.xScaleMap,
             this._scaleService.yScaleMap,
@@ -1979,9 +2071,8 @@ class ChartContainerComponent {
         this.visibleRect = combineLatest([
             this.size,
             this.xAxisMap,
-            this.yAxisMap,
-            this._zoomService.zoomed,
-        ]).pipe(map((data) => {
+            this.yAxisMap
+        ]).pipe(throttleTime(0, animationFrameScheduler, { trailing: true }), map((data) => {
             const [size, x, y] = data;
             const yAxesArray = [...y.values()];
             const xAxesArray = [...x.values()];
@@ -2003,12 +2094,9 @@ class ChartContainerComponent {
                 width: size.width - left - right,
                 height: size.height - top - bottom,
             };
-        }), tap((_) => {
-            this._cdr.detectChanges();
-        }));
+        }), tap(() => setTimeout(() => this._cdr.detectChanges())));
     }
     ngOnInit() {
-        this.uniqId = (Date.now() + Math.random()).toString(36);
         this._observer = new ResizeObserver((entries) => {
             requestAnimationFrame(() => {
                 if (!Array.isArray(entries) ||
@@ -2090,21 +2178,19 @@ class ChartContainerComponent {
     mouseLeave(event) {
         this._svc.setPointerMove(event);
     }
-    id() {
-        return this.uniqId;
-    }
 }
 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\" 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 });
+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  <ng-container *ngIf=\"data.visibleRect?.width > 0 && data.visibleRect?.height > 0 && data.xScaleMap && data.yScaleMap\">\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 && data.xScaleMap && data.yScaleMap\">\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>\n  <ng-container *ngIf=\"data.visibleRect?.width > 0 && data.visibleRect?.height > 0 && data.xScaleMap && data.yScaleMap\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      class=\"position-absolute\"\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.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.xScaleMap, data.yScaleMap)\"\n      (click)=\"click($event, data.xScaleMap, data.yScaleMap)\"\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\"\n         [config]=\"data.config\"></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"] }, { 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: "[tetaBrushable]", inputs: ["config", "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\" 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"] }]
+            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  <ng-container *ngIf=\"data.visibleRect?.width > 0 && data.visibleRect?.height > 0 && data.xScaleMap && data.yScaleMap\">\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 && data.xScaleMap && data.yScaleMap\">\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>\n  <ng-container *ngIf=\"data.visibleRect?.width > 0 && data.visibleRect?.height > 0 && data.xScaleMap && data.yScaleMap\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      class=\"position-absolute\"\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.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.xScaleMap, data.yScaleMap)\"\n      (click)=\"click($event, data.xScaleMap, data.yScaleMap)\"\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\"\n         [config]=\"data.config\"></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 {
     constructor() {
         this.sizeMapping = new Map()
             .set(SeriesType.line, 2)
+            .set(SeriesType.scatter, 12)
             .set(SeriesType.bar, 12)
             .set(SeriesType.area, 2)
             .set(SeriesType.block, 12)
@@ -2287,7 +2373,7 @@ ChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         ScatterSeriesComponent,
         BlockSeriesComponent,
         BlockAreaSeriesComponent,
-        AnnotationComponent], imports: [CommonModule], exports: [ChartComponent,
+        AnnotationComponent], imports: [CommonModule, TuiLetModule], exports: [ChartComponent,
         LegendComponent,
         SeriesBaseComponent,
         LineSeriesComponent,
@@ -2296,7 +2382,7 @@ ChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         AreaSeriesComponent,
         BlockSeriesComponent,
         BlockAreaSeriesComponent] });
-ChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartModule, imports: [[CommonModule]] });
+ChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartModule, imports: [[CommonModule, TuiLetModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartModule, decorators: [{
             type: NgModule,
             args: [{
@@ -2334,7 +2420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                         BlockSeriesComponent,
                         BlockAreaSeriesComponent,
                     ],
-                    imports: [CommonModule],
+                    imports: [CommonModule, TuiLetModule],
                 }]
         }] });
 
@@ -2376,5 +2462,5 @@ class PlotLine {
  * Generated bundle index. Do not edit.
  */
 
-export { AreaSeriesComponent, Axis, AxisOrientation, BarSeriesComponent, BlockAreaSeriesComponent, BlockSeriesComponent, BroadcastService, BrushMessage, BrushService, BrushType, ChartBounds, ChartComponent, ChartModule, ChartService, DragPointType, FillDirection, FillType, LegendComponent, LineSeriesComponent, PlotBand, PlotLine, ScaleService, ScaleType, ScatterSeriesComponent, SeriesBaseComponent, SeriesType, TooltipTracking, ZoomMessage, ZoomService, ZoomType };
+export { AreaSeriesComponent, Axis, AxisOrientation, BarSeriesComponent, BlockAreaSeriesComponent, BlockSeriesComponent, BroadcastService, BrushMessage, BrushService, BrushType, ChartBounds, ChartComponent, ChartModule, ChartService, DragPointType, FillDirection, FillType, LegendComponent, LineSeriesComponent, PlotBand, PlotLine, ScaleService, ScaleType, ScatterSeriesComponent, SeriesBaseComponent, SeriesType, TooltipTracking, ZoomBehaviorType, ZoomMessage, ZoomService, ZoomType };
 //# sourceMappingURL=tetacom-svg-charts.mjs.map