@tetacom/svg-charts 1.2.0 → 1.2.3

package/fesm2015/tetacom-svg-charts.mjs

@@ -3,13 +3,14 @@ import { Injectable, Component, Input, ChangeDetectionStrategy, ChangeDetectorRe
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { __awaiter } from 'tslib';
-import { BehaviorSubject, Subject, of, withLatestFrom, map, shareReplay, filter, lastValueFrom, take, combineLatest, ReplaySubject, tap, takeWhile, animationFrameScheduler } from 'rxjs';
+import { BehaviorSubject, Subject, of, withLatestFrom, map, shareReplay, filter, lastValueFrom, take, combineLatest, ReplaySubject, tap, takeWhile, combineLatestWith, observeOn, animationFrameScheduler } from 'rxjs';
 import * as d3 from 'd3';
 import { zoomIdentity } from 'd3';
 import objectHash from 'object-hash';
 import { maxIndex } from 'd3-array';
-import { tap as tap$1, debounceTime, throttleTime } from 'rxjs/operators';
+import { tetaZoneFull } from '@tetacom/ng-components';
 import * as i3 from '@angular/platform-browser';
+import { tap as tap$1, debounceTime } from 'rxjs/operators';
 
 var ZoomType;
 (function (ZoomType) {
@@ -255,8 +256,13 @@ class ChartService {
         const hiddenSeries = localStorage.getItem(`${config.name}_${ChartService._hiddenSeriesPostfix}`);
         if (hiddenSeries) {
             const json = JSON.parse(hiddenSeries);
-            config.series = config.series.map((serie) => {
+            config.series = config.series.map((serie, index) => {
                 serie.visible = !json.includes(serie.id);
+                const currentSerieIndex = config.series.findIndex((_) => _.id === serie.id);
+                if (currentSerieIndex !== -1) {
+                    const seriesLinkCount = config.series.filter((_) => _.yAxisIndex === config.series[currentSerieIndex].yAxisIndex && _.visible === true).length;
+                    config.yAxis[config.series[currentSerieIndex].yAxisIndex].visible = seriesLinkCount !== 0;
+                }
                 return serie;
             });
             return config;
@@ -327,9 +333,9 @@ class ChartService {
     }
 }
 ChartService._hiddenSeriesPostfix = 'hidden_series';
-ChartService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ChartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ChartService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ChartService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ChartService, decorators: [{
+ChartService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ChartService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -408,9 +414,9 @@ class ZoomService {
         currentElement.transition().call(currentZoom.transform, zoomIdentity, null, new MouseEvent('resetZoom'));
     }
 }
-ZoomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ZoomService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ZoomService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ZoomService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ZoomService, decorators: [{
+ZoomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ZoomService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -764,9 +770,9 @@ class ScaleService {
         }));
     }
 }
-ScaleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ScaleService, deps: [{ token: ChartService }, { token: ZoomService }], target: i0.ɵɵFactoryTarget.Injectable });
-ScaleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ScaleService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ScaleService, decorators: [{
+ScaleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ScaleService, deps: [{ token: ChartService }, { token: ZoomService }], target: i0.ɵɵFactoryTarget.Injectable });
+ScaleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ScaleService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ScaleService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -784,7 +790,7 @@ class ZoomMessage {
     constructor(options) {
         this.event = options === null || options === void 0 ? void 0 : options.event;
         this.axis = options === null || options === void 0 ? void 0 : options.axis;
-        this.brushDomain = options.brushDomain;
+        this.domain = options.domain;
         this.chartId = options === null || options === void 0 ? void 0 : options.chartId;
         this.style = options === null || options === void 0 ? void 0 : options.style;
     }
@@ -823,9 +829,9 @@ class BroadcastService {
         }));
     }
 }
-BroadcastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BroadcastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-BroadcastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BroadcastService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BroadcastService, decorators: [{
+BroadcastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BroadcastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+BroadcastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BroadcastService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BroadcastService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -942,20 +948,20 @@ class BrushService {
                         m.message.event.sourceEvent instanceof TouchEvent));
             }), tap((m) => {
                 var _a, _b, _c, _d, _e, _f, _g, _h;
-                const { message: { brushDomain }, } = m;
+                const { message: { domain }, } = m;
                 if ((((_a = m.message) === null || _a === void 0 ? void 0 : _a.axis.index) === 0 &&
                     ((_b = m.message) === null || _b === void 0 ? void 0 : _b.axis.orientation) === AxisOrientation.y &&
                     ((_c = config.brush) === null || _c === void 0 ? void 0 : _c.type) === BrushType.y) ||
                     (((_d = m.message) === null || _d === void 0 ? void 0 : _d.axis.orientation) === AxisOrientation.x &&
                         ((_e = config.brush) === null || _e === void 0 ? void 0 : _e.type) === BrushType.x)) {
                     container.call(this.brush.move, [
-                        brushScale(brushDomain[0]),
-                        brushScale(brushDomain[1]),
+                        brushScale(domain[0]),
+                        brushScale(domain[1]),
                     ]);
                     if (m.message.event.type === 'end') {
                         const brushMessage = new BrushMessage({
                             event: null,
-                            selection: brushDomain,
+                            selection: domain,
                             brushType: (_g = (_f = config === null || config === void 0 ? void 0 : config.brush) === null || _f === void 0 ? void 0 : _f.type) !== null && _g !== void 0 ? _g : BrushType.x,
                             brushScale,
                         });
@@ -964,7 +970,7 @@ class BrushService {
                             message: brushMessage,
                         });
                     }
-                    this.selection = brushDomain;
+                    this.selection = domain;
                 }
             }))
                 .subscribe();
@@ -974,9 +980,9 @@ class BrushService {
         this.selection = null;
     }
 }
-BrushService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BrushService, deps: [{ token: BroadcastService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-BrushService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BrushService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BrushService, decorators: [{
+BrushService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BrushService, deps: [{ token: BroadcastService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+BrushService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BrushService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BrushService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1006,9 +1012,9 @@ class SeriesBaseComponent {
     ngOnInit() {
     }
 }
-SeriesBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SeriesBaseComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SeriesBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: SeriesBaseComponent, selector: "ng-component", inputs: { config: "config", series: "series" }, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SeriesBaseComponent, decorators: [{
+SeriesBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SeriesBaseComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SeriesBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SeriesBaseComponent, selector: "ng-component", inputs: { config: "config", series: "series" }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SeriesBaseComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',
@@ -1037,22 +1043,30 @@ class LinearSeriesBase extends SeriesBaseComponent {
         this.defaultClipPointsMapping = new Map();
     }
     ngOnInit() {
-        const filterX = (min, max) => (point, idx, arr) => (point.x <= max ||
-            point.x1 <= max ||
-            (arr[idx - 1] && arr[idx - 1].x <= max) ||
-            (arr[idx - 1] && arr[idx - 1].x1 <= max)) &&
-            (point.x >= min ||
-                point.x1 >= min ||
-                (arr[idx + 1] && arr[idx + 1].x >= min) ||
-                (arr[idx + 1] && arr[idx + 1].x1 >= min));
-        const filterY = (min, max) => (point, idx, arr) => (point.y <= max ||
-            point.y1 <= max ||
-            (arr[idx - 1] && arr[idx - 1].y <= max) ||
-            (arr[idx - 1] && arr[idx - 1].y1 <= max)) &&
-            (point.y >= min ||
-                point.y1 >= min ||
-                (arr[idx + 1] && arr[idx + 1].y >= min) ||
-                (arr[idx + 1] && arr[idx + 1].y1 >= min));
+        const filterX = (min, max) => (point, idx, arr) => {
+            const bigger = min > max ? min : max;
+            const smaller = min > max ? max : min;
+            return (point.x <= bigger ||
+                point.x1 <= bigger ||
+                (arr[idx - 1] && arr[idx - 1].x <= bigger) ||
+                (arr[idx - 1] && arr[idx - 1].x1 <= bigger)) &&
+                (point.x >= smaller ||
+                    point.x1 >= smaller ||
+                    (arr[idx + 1] && arr[idx + 1].x >= smaller) ||
+                    (arr[idx + 1] && arr[idx + 1].x1 >= smaller));
+        };
+        const filterY = (min, max) => (point, idx, arr) => {
+            const bigger = min > max ? min : max;
+            const smaller = min > max ? max : min;
+            return (point.y <= bigger ||
+                point.y1 <= bigger ||
+                (arr[idx - 1] && arr[idx - 1].y <= bigger) ||
+                (arr[idx - 1] && arr[idx - 1].y1 <= bigger)) &&
+                (point.y >= smaller ||
+                    point.y1 >= smaller ||
+                    (arr[idx + 1] && arr[idx + 1].y >= smaller) ||
+                    (arr[idx + 1] && arr[idx + 1].y1 >= smaller));
+        };
         this.defaultClipPointsMapping.set(ClipPointsDirection.x, filterX);
         this.defaultClipPointsMapping.set(ClipPointsDirection.y, filterY);
         this.transform = this.svc.pointerMove.pipe(withLatestFrom(this.scaleService.xScaleMap, this.scaleService.yScaleMap), map((data) => {
@@ -1236,9 +1250,9 @@ class LinearSeriesBase extends SeriesBaseComponent {
         }
     }
 }
-LinearSeriesBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LinearSeriesBase, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-LinearSeriesBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LinearSeriesBase, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LinearSeriesBase, decorators: [{
+LinearSeriesBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LinearSeriesBase, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+LinearSeriesBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: LinearSeriesBase, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LinearSeriesBase, decorators: [{
             type: Component,
             args: [{
                     template: '',
@@ -1255,9 +1269,9 @@ class LineSeriesComponent extends LinearSeriesBase {
         this.element = element;
     }
 }
-LineSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", 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.0", 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=\"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"], 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LineSeriesComponent, decorators: [{
+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=\"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"], 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 });
+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=\"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 }]; } });
@@ -1304,9 +1318,9 @@ class BarSeriesComponent extends SeriesBaseComponent {
     }
     ngOnChanges(changes) { }
 }
-BarSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BarSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BarSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: BarSeriesComponent, selector: "svg:svg[teta-bar-series]", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  x: x | async,\n  x1: x1 | async,\n  y: y | async,\n  barSeriesCount: barSeriesCount | async\n} as data\">\n  <ng-container *ngIf=\"data.barSeriesCount > 1\">\n    <svg:rect\n      *ngFor=\"let point of series.data\"\n      (mouseenter)=\"mouseenter(point)\"\n      (mouseleave)=\"mouseleave(point)\"\n      [attr.x]=\"data.x(point.x) + (series.id * data.x1.bandwidth() / data.barSeriesCount)\"\n      [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n      [attr.width]=\"data.x1.bandwidth() / data.barSeriesCount\"\n      [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n      [attr.fill]=\"series.color\"\n    ></svg:rect>\n  </ng-container>\n  <ng-container *ngIf=\"data.barSeriesCount === 1\">\n    <svg:rect\n      *ngFor=\"let point of series.data\"\n      (mouseenter)=\"mouseenter(point)\"\n      (mouseleave)=\"mouseleave(point)\"\n      [attr.x]=\"data.x(point.x)\"\n      [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n      [attr.width]=\"data.x1.bandwidth()\"\n      [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n      [attr.fill]=\"point.color ?? series.color\"\n    ></svg:rect>\n  </ng-container>\n</ng-container>\n\n", styles: [""], 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BarSeriesComponent, decorators: [{
+BarSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BarSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+BarSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: BarSeriesComponent, selector: "svg:svg[teta-bar-series]", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  x: x | async,\n  x1: x1 | async,\n  y: y | async,\n  barSeriesCount: barSeriesCount | async\n} as data\">\n  <ng-container *ngIf=\"data.barSeriesCount > 1\">\n    <svg:rect\n      *ngFor=\"let point of series.data\"\n      (mouseenter)=\"mouseenter(point)\"\n      (mouseleave)=\"mouseleave(point)\"\n      [attr.x]=\"data.x(point.x) + (series.id * data.x1.bandwidth() / data.barSeriesCount)\"\n      [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n      [attr.width]=\"data.x1.bandwidth() / data.barSeriesCount\"\n      [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n      [attr.fill]=\"series.color\"\n    ></svg:rect>\n  </ng-container>\n  <ng-container *ngIf=\"data.barSeriesCount === 1\">\n    <svg:rect\n      *ngFor=\"let point of series.data\"\n      (mouseenter)=\"mouseenter(point)\"\n      (mouseleave)=\"mouseleave(point)\"\n      [attr.x]=\"data.x(point.x)\"\n      [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n      [attr.width]=\"data.x1.bandwidth()\"\n      [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n      [attr.fill]=\"point.color ?? series.color\"\n    ></svg:rect>\n  </ng-container>\n</ng-container>\n\n", styles: [""], 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BarSeriesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'svg:svg[teta-bar-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  x: x | async,\n  x1: x1 | async,\n  y: y | async,\n  barSeriesCount: barSeriesCount | async\n} as data\">\n  <ng-container *ngIf=\"data.barSeriesCount > 1\">\n    <svg:rect\n      *ngFor=\"let point of series.data\"\n      (mouseenter)=\"mouseenter(point)\"\n      (mouseleave)=\"mouseleave(point)\"\n      [attr.x]=\"data.x(point.x) + (series.id * data.x1.bandwidth() / data.barSeriesCount)\"\n      [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n      [attr.width]=\"data.x1.bandwidth() / data.barSeriesCount\"\n      [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n      [attr.fill]=\"series.color\"\n    ></svg:rect>\n  </ng-container>\n  <ng-container *ngIf=\"data.barSeriesCount === 1\">\n    <svg:rect\n      *ngFor=\"let point of series.data\"\n      (mouseenter)=\"mouseenter(point)\"\n      (mouseleave)=\"mouseleave(point)\"\n      [attr.x]=\"data.x(point.x)\"\n      [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n      [attr.width]=\"data.x1.bandwidth()\"\n      [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n      [attr.fill]=\"point.color ?? series.color\"\n    ></svg:rect>\n  </ng-container>\n</ng-container>\n\n" }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
@@ -1339,9 +1353,9 @@ class ScatterSeriesComponent extends SeriesBaseComponent {
         });
     }
 }
-ScatterSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ScatterSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ScatterSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ScatterSeriesComponent, selector: "svg:svg[teta-scatter-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async\n} as scales\">\n  <svg:circle\n    class=\"line\"\n    *ngFor=\"let point of series.data\"\n    (mouseenter)=\"mouseenter(point)\"\n    (mouseleave)=\"mouseleave(point)\"\n    [attr.cx]=\"scales.x(point.x)\"\n    [attr.cy]=\"scales.y(point.y)\"\n    [attr.r]=\"series.style?.radius ?? 1\"\n    [attr.stroke]=\"point.color ?? series.color\"\n    [attr.fill]=\"point.color ?? series.color\"\n    [attr.stroke-width]=\"series.style?.strokeWidth\">\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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ScatterSeriesComponent, decorators: [{
+ScatterSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ScatterSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ScatterSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ScatterSeriesComponent, selector: "svg:svg[teta-scatter-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async\n} as scales\">\n  <svg:circle\n    class=\"line\"\n    *ngFor=\"let point of series.data\"\n    (mouseenter)=\"mouseenter(point)\"\n    (mouseleave)=\"mouseleave(point)\"\n    [attr.cx]=\"scales.x(point.x)\"\n    [attr.cy]=\"scales.y(point.y)\"\n    [attr.r]=\"series.style?.radius ?? 1\"\n    [attr.stroke]=\"point.color ?? series.color\"\n    [attr.fill]=\"point.color ?? series.color\"\n    [attr.stroke-width]=\"series.style?.strokeWidth\">\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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ScatterSeriesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'svg:svg[teta-scatter-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async\n} as scales\">\n  <svg:circle\n    class=\"line\"\n    *ngFor=\"let point of series.data\"\n    (mouseenter)=\"mouseenter(point)\"\n    (mouseleave)=\"mouseleave(point)\"\n    [attr.cx]=\"scales.x(point.x)\"\n    [attr.cy]=\"scales.y(point.y)\"\n    [attr.r]=\"series.style?.radius ?? 1\"\n    [attr.stroke]=\"point.color ?? series.color\"\n    [attr.fill]=\"point.color ?? series.color\"\n    [attr.stroke-width]=\"series.style?.strokeWidth\">\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 }]; } });
@@ -1392,9 +1406,9 @@ class BlockSeriesComponent extends SeriesBaseComponent {
     ngAfterViewInit() {
     }
 }
-BlockSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BlockSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BlockSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: BlockSeriesComponent, selector: "svg:svg[teta-block-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngFor=\"let point of data.points\">\n    <svg:g (mouseenter)=\"mouseenter(point)\"\n           (mouseleave)=\"mouseleave(point)\">\n      <svg:rect\n        x=\"0\"\n        [attr.y]=\"data.y(point.y)\"\n        [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\"\n        width=\"100%\">\n      </svg:rect>\n      <svg:text *ngIf=\"point.text && data.y(point.y1) - data.y(point.y) > 8\"\n                x=\"50%\"\n                [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                alignment-baseline=\"middle\"\n                text-anchor=\"middle\">{{ point.text }}\n      </svg:text>\n      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\"\n                [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>\n      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\"\n                [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>\n    </svg:g>\n  </ng-container>\n\n\n</ng-container>\n", styles: [""], 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BlockSeriesComponent, decorators: [{
+BlockSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BlockSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+BlockSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: BlockSeriesComponent, selector: "svg:svg[teta-block-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngFor=\"let point of data.points\">\n    <svg:g (mouseenter)=\"mouseenter(point)\"\n           (mouseleave)=\"mouseleave(point)\">\n      <svg:rect\n        x=\"0\"\n        [attr.y]=\"data.y(point.y)\"\n        [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\"\n        width=\"100%\">\n      </svg:rect>\n      <svg:text *ngIf=\"point.text && data.y(point.y1) - data.y(point.y) > 8\"\n                x=\"50%\"\n                [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                alignment-baseline=\"middle\"\n                text-anchor=\"middle\">{{ point.text }}\n      </svg:text>\n      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\"\n                [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>\n      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\"\n                [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>\n    </svg:g>\n  </ng-container>\n\n\n</ng-container>\n", styles: [""], 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BlockSeriesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'svg:svg[teta-block-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngFor=\"let point of data.points\">\n    <svg:g (mouseenter)=\"mouseenter(point)\"\n           (mouseleave)=\"mouseleave(point)\">\n      <svg:rect\n        x=\"0\"\n        [attr.y]=\"data.y(point.y)\"\n        [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\"\n        width=\"100%\">\n      </svg:rect>\n      <svg:text *ngIf=\"point.text && data.y(point.y1) - data.y(point.y) > 8\"\n                x=\"50%\"\n                [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                alignment-baseline=\"middle\"\n                text-anchor=\"middle\">{{ point.text }}\n      </svg:text>\n      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\"\n                [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>\n      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\"\n                [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>\n    </svg:g>\n  </ng-container>\n\n\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
@@ -1445,9 +1459,9 @@ class BlockAreaSeriesComponent extends SeriesBaseComponent {
         });
     }
 }
-BlockAreaSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BlockAreaSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BlockAreaSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: BlockAreaSeriesComponent, selector: "svg:svg[teta-block-area-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n                        gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngFor=\"let point of data.points\">\n    <svg:g (mouseenter)=\"mouseenter(point)\"\n           (mouseleave)=\"mouseleave(point)\">\n      <svg:rect\n        *ngIf=\"!!config.inverted\"\n        [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n        [attr.y]=\"data.y(point.y)\"\n        [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n        [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n        [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n        [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n        [attr.stroke-width]=\"series.style?.strokeWidth\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\">\n      </svg:rect>\n      <svg:rect\n        *ngIf=\"!config.inverted\"\n        [attr.x]=\"data.x(point.x)\"\n        [attr.y]=\"data.y(0)\"\n        [attr.height]=\"Math.abs(data.y(0) - data.y(point.y))\"\n        [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n        [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n        [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n        [attr.stroke-width]=\"series.style?.strokeWidth\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\">\n      </svg:rect>\n      <svg:text *ngIf=\"point.text\"\n                x=\"50%\"\n                [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                alignment-baseline=\"middle\"\n                text-anchor=\"middle\">{{ point.text }}\n      </svg:text>\n\n      <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n      <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n\n    </svg:g>\n  </ng-container>\n\n\n</ng-container>\n", styles: [""], 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BlockAreaSeriesComponent, decorators: [{
+BlockAreaSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BlockAreaSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+BlockAreaSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: BlockAreaSeriesComponent, selector: "svg:svg[teta-block-area-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n                        gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngFor=\"let point of data.points\">\n    <svg:g (mouseenter)=\"mouseenter(point)\"\n           (mouseleave)=\"mouseleave(point)\">\n      <svg:rect\n        *ngIf=\"!!config.inverted\"\n        [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n        [attr.y]=\"data.y(point.y)\"\n        [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n        [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n        [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n        [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n        [attr.stroke-width]=\"series.style?.strokeWidth\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\">\n      </svg:rect>\n      <svg:rect\n        *ngIf=\"!config.inverted\"\n        [attr.x]=\"data.x(point.x)\"\n        [attr.y]=\"data.y(0)\"\n        [attr.height]=\"Math.abs(data.y(0) - data.y(point.y))\"\n        [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n        [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n        [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n        [attr.stroke-width]=\"series.style?.strokeWidth\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\">\n      </svg:rect>\n      <svg:text *ngIf=\"point.text\"\n                x=\"50%\"\n                [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                alignment-baseline=\"middle\"\n                text-anchor=\"middle\">{{ point.text }}\n      </svg:text>\n\n      <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n      <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n\n    </svg:g>\n  </ng-container>\n\n\n</ng-container>\n", styles: [""], 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BlockAreaSeriesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'svg:svg[teta-block-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n                        gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngFor=\"let point of data.points\">\n    <svg:g (mouseenter)=\"mouseenter(point)\"\n           (mouseleave)=\"mouseleave(point)\">\n      <svg:rect\n        *ngIf=\"!!config.inverted\"\n        [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n        [attr.y]=\"data.y(point.y)\"\n        [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n        [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n        [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n        [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n        [attr.stroke-width]=\"series.style?.strokeWidth\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\">\n      </svg:rect>\n      <svg:rect\n        *ngIf=\"!config.inverted\"\n        [attr.x]=\"data.x(point.x)\"\n        [attr.y]=\"data.y(0)\"\n        [attr.height]=\"Math.abs(data.y(0) - data.y(point.y))\"\n        [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n        [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n        [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n        [attr.stroke-width]=\"series.style?.strokeWidth\"\n        [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n        [attr.fill-opacity]=\"series.style?.fillOpacity\">\n      </svg:rect>\n      <svg:text *ngIf=\"point.text\"\n                x=\"50%\"\n                [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                alignment-baseline=\"middle\"\n                text-anchor=\"middle\">{{ point.text }}\n      </svg:text>\n\n      <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n      <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n\n    </svg:g>\n  </ng-container>\n\n\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
@@ -1501,9 +1515,9 @@ class AreaSeriesComponent extends LinearSeriesBase {
         }));
     }
 }
-AreaSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", 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: "14.0.0", version: "14.0.0", 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 *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=\"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: [""], 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AreaSeriesComponent, decorators: [{
+AreaSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", 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: "14.0.0", version: "14.0.2", 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 *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=\"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: [""], 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", 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  [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 !=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" }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
@@ -1542,9 +1556,9 @@ class SeriesHostComponent {
         }
     }
 }
-SeriesHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SeriesHostComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-SeriesHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: { config: "config", series: "series" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SeriesHostComponent, decorators: [{
+SeriesHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SeriesHostComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+SeriesHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: { config: "config", series: "series" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SeriesHostComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[teta-series-host]',
@@ -1562,17 +1576,23 @@ class GridlinesComponent {
         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.tickYValues = this.svc.yScaleMap.pipe(map((_) => {
+            const ratio = this.size.height / 40;
+            return _.get(0).ticks(ratio);
+        }));
+        this.tickXValues = this.svc.xScaleMap.pipe(map((_) => {
+            const ratio = this.size.width / 40;
+            return _.get(0).ticks(ratio);
+        }));
         this.y = this.svc.yScaleMap.pipe(map((_) => _.get(0)));
         this.x = this.svc.xScaleMap.pipe(map((_) => _.get(0)));
     }
     ngAfterViewInit() {
     }
 }
-GridlinesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: GridlinesComponent, deps: [{ token: ScaleService }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
-GridlinesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", 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:var(--color-text-10)}\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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: GridlinesComponent, decorators: [{
+GridlinesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GridlinesComponent, deps: [{ token: ScaleService }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
+GridlinesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", 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:var(--color-text-10)}\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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GridlinesComponent, decorators: [{
             type: Component,
             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:var(--color-text-10)}\n"] }]
         }], ctorParameters: function () { return [{ type: ScaleService }, { type: ChartService }]; }, propDecorators: { size: [{
@@ -1619,9 +1639,9 @@ class XAxisComponent {
         //   .call((_) => _.select('.domain').remove());
     }
 }
-XAxisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: XAxisComponent, deps: [{ token: ScaleService }], target: i0.ɵɵFactoryTarget.Component });
-XAxisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: XAxisComponent, selector: "[teta-x-axis]", inputs: { axis: "axis", size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"x | async as scale\">\n  <svg:g text-anchor=\"middle\" *ngFor=\"let tick of scale.ticks()\" [attr.transform]=\"'translate('+ scale(tick) +', 0)'\">\n    <text fill=\"var(--color-text-70)\" [attr.dy]=\"axis.options.opposite ? '-0.71em' : '0.71em'\" [attr.y]=\"axis.options.opposite ? 0 : 9\">{{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}</text>\n    <line stroke=\"var(--color-text-30)\" [attr.y2]=\"axis.options.opposite ? -6 : 6\"></line>\n  </svg:g>\n\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text fill=\"var(--color-text-70)\"  text-anchor=\"middle\" dominant-baseline=\"middle\">{{ axis.options.title }}</text>\n  </svg:g>\n</ng-container>\n\n", styles: [":host .tick{stroke:var(--color-text-20)}\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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: XAxisComponent, decorators: [{
+XAxisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XAxisComponent, deps: [{ token: ScaleService }], target: i0.ɵɵFactoryTarget.Component });
+XAxisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XAxisComponent, selector: "[teta-x-axis]", inputs: { axis: "axis", size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"x | async as scale\">\n  <svg:g text-anchor=\"middle\" *ngFor=\"let tick of scale.ticks()\" [attr.transform]=\"'translate('+ scale(tick) +', 0)'\">\n    <text fill=\"var(--color-text-70)\" [attr.dy]=\"axis.options.opposite ? '-0.71em' : '0.71em'\" [attr.y]=\"axis.options.opposite ? 0 : 9\">{{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}</text>\n    <line stroke=\"var(--color-text-30)\" [attr.y2]=\"axis.options.opposite ? -6 : 6\"></line>\n  </svg:g>\n\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text fill=\"var(--color-text-70)\"  text-anchor=\"middle\" dominant-baseline=\"middle\">{{ axis.options.title }}</text>\n  </svg:g>\n</ng-container>\n\n", styles: [":host .tick{stroke:var(--color-text-20)}\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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XAxisComponent, decorators: [{
             type: Component,
             args: [{ selector: '[teta-x-axis]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"x | async as scale\">\n  <svg:g text-anchor=\"middle\" *ngFor=\"let tick of scale.ticks()\" [attr.transform]=\"'translate('+ scale(tick) +', 0)'\">\n    <text fill=\"var(--color-text-70)\" [attr.dy]=\"axis.options.opposite ? '-0.71em' : '0.71em'\" [attr.y]=\"axis.options.opposite ? 0 : 9\">{{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}</text>\n    <line stroke=\"var(--color-text-30)\" [attr.y2]=\"axis.options.opposite ? -6 : 6\"></line>\n  </svg:g>\n\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text fill=\"var(--color-text-70)\"  text-anchor=\"middle\" dominant-baseline=\"middle\">{{ axis.options.title }}</text>\n  </svg:g>\n</ng-container>\n\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"] }]
         }], ctorParameters: function () { return [{ type: ScaleService }]; }, propDecorators: { axis: [{
@@ -1650,9 +1670,9 @@ class YAxisComponent {
             : -this.axis.selfSize}, ${this.size.height / 2}) rotate(-90)`;
     }
 }
-YAxisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: YAxisComponent, deps: [{ token: ScaleService }], target: i0.ɵɵFactoryTarget.Component });
-YAxisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: YAxisComponent, selector: "[teta-y-axis]", inputs: { axis: "axis", size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"y | async as scale\">\n  <svg:g [attr.text-anchor]=\"axis.options.opposite ? 'start' : 'end'\" *ngFor=\"let tick of scale.ticks()\" [attr.transform]=\"'translate(0, '+ scale(tick) +')'\">\n    <text fill=\"var(--color-text-70)\" dy=\"0.32em\" [attr.x]=\"axis.options.opposite ? 10 : -9\">{{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}</text>\n    <line stroke=\"var(--color-text-30)\" [attr.x2]=\"axis.options.opposite ? 6 : -6\"></line>\n  </svg:g>\n\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text [attr.dy]=\"axis.options.opposite ? '-4px' : '4px'\" text-anchor=\"middle\" [attr.dominant-baseline]=\"axis.options.opposite ? 'auto' : 'hanging'\">{{ axis.options.title }}</text>\n  </svg:g>\n</ng-container>\n\n", styles: [":host{shape-rendering:crispEdges}:host .label-axis{fill:var(--color-text-70)}\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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: YAxisComponent, decorators: [{
+YAxisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: YAxisComponent, deps: [{ token: ScaleService }], target: i0.ɵɵFactoryTarget.Component });
+YAxisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: YAxisComponent, selector: "[teta-y-axis]", inputs: { axis: "axis", size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"y | async as scale\">\n  <svg:g [attr.text-anchor]=\"axis.options.opposite ? 'start' : 'end'\" *ngFor=\"let tick of scale.ticks()\" [attr.transform]=\"'translate(0, '+ scale(tick) +')'\">\n    <text fill=\"var(--color-text-70)\" dy=\"0.32em\" [attr.x]=\"axis.options.opposite ? 10 : -9\">{{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}</text>\n    <line stroke=\"var(--color-text-30)\" [attr.x2]=\"axis.options.opposite ? 6 : -6\"></line>\n  </svg:g>\n\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text [attr.dy]=\"axis.options.opposite ? '-4px' : '4px'\" text-anchor=\"middle\" [attr.dominant-baseline]=\"axis.options.opposite ? 'auto' : 'hanging'\">{{ axis.options.title }}</text>\n  </svg:g>\n</ng-container>\n\n", styles: [":host{shape-rendering:crispEdges}:host .label-axis{fill:var(--color-text-70)}\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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: YAxisComponent, decorators: [{
             type: Component,
             args: [{ selector: '[teta-y-axis]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"y | async as scale\">\n  <svg:g [attr.text-anchor]=\"axis.options.opposite ? 'start' : 'end'\" *ngFor=\"let tick of scale.ticks()\" [attr.transform]=\"'translate(0, '+ scale(tick) +')'\">\n    <text fill=\"var(--color-text-70)\" dy=\"0.32em\" [attr.x]=\"axis.options.opposite ? 10 : -9\">{{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}</text>\n    <line stroke=\"var(--color-text-30)\" [attr.x2]=\"axis.options.opposite ? 6 : -6\"></line>\n  </svg:g>\n\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text [attr.dy]=\"axis.options.opposite ? '-4px' : '4px'\" text-anchor=\"middle\" [attr.dominant-baseline]=\"axis.options.opposite ? 'auto' : 'hanging'\">{{ axis.options.title }}</text>\n  </svg:g>\n</ng-container>\n\n", styles: [":host{shape-rendering:crispEdges}:host .label-axis{fill:var(--color-text-70)}\n"] }]
         }], ctorParameters: function () { return [{ type: ScaleService }]; }, propDecorators: { axis: [{
@@ -1719,9 +1739,9 @@ class PlotlineComponent {
         return this.size.width;
     }
 }
-PlotlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: PlotlineComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ZoomService }, { token: ScaleService }, { token: ChartService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PlotlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: PlotlineComponent, selector: "[teta-plot-line]", inputs: { plotLine: "plotLine", size: "size", axis: "axis", scale: "scale" }, ngImport: i0, template: "<svg:line class=\"plotline\"\n          [attr.stroke]=\"plotLine.style?.stroke || 'red'\"\n          [attr.stroke-width]=\"plotLine.style?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotLine.style?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : value\">\n</svg:line>\n\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.x\"\n  text-anchor=\"middle\"\n  dominant-baseline=\"central\"\n  class=\"label font-title-2 fill-text-70\"\n  [attr.x]=\"value\"\n  dy=\"-2em\"\n  [attr.transform]=\"'rotate(-90, '+ value +',' + height / 2 + ')'\"\n  [attr.y]=\"height / 2\">{{plotLine.label}}\n</svg:text>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.y\"\n  text-anchor=\"middle\"\n  class=\"label font-title-2 fill-text-70\"\n  dominant-baseline=\"central\"\n  [attr.x]=\"value\"\n  [attr.y]=\"width / 2\">{{plotLine.label}}\n</svg:text>\n\n<svg:line class=\"grabber\"\n\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [attr.stroke]=\"'red'\"\n          [attr.stroke-width]=\"8\"\n          opacity=\"0\"\n          [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : value\">\n</svg:line>\n", styles: [":host .x-grabber{cursor:col-resize}:host .y-grabber{cursor:row-resize}\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.0", ngImport: i0, type: PlotlineComponent, decorators: [{
+PlotlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PlotlineComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ZoomService }, { token: ScaleService }, { token: ChartService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+PlotlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PlotlineComponent, selector: "[teta-plot-line]", inputs: { plotLine: "plotLine", size: "size", axis: "axis", scale: "scale" }, ngImport: i0, template: "<svg:line class=\"plotline\"\n          [attr.stroke]=\"plotLine.style?.stroke || 'red'\"\n          [attr.stroke-width]=\"plotLine.style?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotLine.style?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : value\">\n</svg:line>\n\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.x\"\n  text-anchor=\"middle\"\n  dominant-baseline=\"central\"\n  class=\"label font-title-2 fill-text-70\"\n  [attr.x]=\"value\"\n  dy=\"-2em\"\n  [attr.transform]=\"'rotate(-90, '+ value +',' + height / 2 + ')'\"\n  [attr.y]=\"height / 2\">{{plotLine.label}}\n</svg:text>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.y\"\n  text-anchor=\"middle\"\n  class=\"label font-title-2 fill-text-70\"\n  dominant-baseline=\"central\"\n  [attr.x]=\"value\"\n  [attr.y]=\"width / 2\">{{plotLine.label}}\n</svg:text>\n\n<svg:line class=\"grabber\"\n\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [attr.stroke]=\"'red'\"\n          [attr.stroke-width]=\"8\"\n          opacity=\"0\"\n          [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : value\">\n</svg:line>\n", styles: [":host .x-grabber{cursor:col-resize}:host .y-grabber{cursor:row-resize}\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: PlotlineComponent, decorators: [{
             type: Component,
             args: [{ selector: '[teta-plot-line]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:line class=\"plotline\"\n          [attr.stroke]=\"plotLine.style?.stroke || 'red'\"\n          [attr.stroke-width]=\"plotLine.style?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotLine.style?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : value\">\n</svg:line>\n\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.x\"\n  text-anchor=\"middle\"\n  dominant-baseline=\"central\"\n  class=\"label font-title-2 fill-text-70\"\n  [attr.x]=\"value\"\n  dy=\"-2em\"\n  [attr.transform]=\"'rotate(-90, '+ value +',' + height / 2 + ')'\"\n  [attr.y]=\"height / 2\">{{plotLine.label}}\n</svg:text>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.y\"\n  text-anchor=\"middle\"\n  class=\"label font-title-2 fill-text-70\"\n  dominant-baseline=\"central\"\n  [attr.x]=\"value\"\n  [attr.y]=\"width / 2\">{{plotLine.label}}\n</svg:text>\n\n<svg:line class=\"grabber\"\n\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [attr.stroke]=\"'red'\"\n          [attr.stroke-width]=\"8\"\n          opacity=\"0\"\n          [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : value\">\n</svg:line>\n", styles: [":host .x-grabber{cursor:col-resize}:host .y-grabber{cursor:row-resize}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: ZoomService }, { type: ScaleService }, { type: ChartService }, { type: i0.ElementRef }]; }, propDecorators: { plotLine: [{
@@ -1862,9 +1882,9 @@ class PlotBandComponent {
         return (_d = d.style.plotBand) === null || _d === void 0 ? void 0 : _d.fill;
     }
 }
-PlotBandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", 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.0", 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-title-2 fill-text-70\"\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-title-2 fill-text-70\"\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 || 'red'\"\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 || 'red'\"\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]=\"'red'\"\n          [attr.stroke-width]=\"8\"\n          opacity=\"0\"\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=\"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]=\"'red'\"\n          [attr.stroke-width]=\"8\"\n          opacity=\"0\"\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}\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.0", ngImport: i0, type: PlotBandComponent, decorators: [{
+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-title-2 fill-text-70\"\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-title-2 fill-text-70\"\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 || 'red'\"\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 || 'red'\"\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]=\"'red'\"\n          [attr.stroke-width]=\"8\"\n          opacity=\"0\"\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=\"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]=\"'red'\"\n          [attr.stroke-width]=\"8\"\n          opacity=\"0\"\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}\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-title-2 fill-text-70\"\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-title-2 fill-text-70\"\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 || 'red'\"\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 || 'red'\"\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]=\"'red'\"\n          [attr.stroke-width]=\"8\"\n          opacity=\"0\"\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=\"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]=\"'red'\"\n          [attr.stroke-width]=\"8\"\n          opacity=\"0\"\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}\n"] }]
         }], ctorParameters: function () { return [{ type: ScaleService }, { type: ZoomService }, { type: ChartService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { plotBand: [{
@@ -1961,9 +1981,9 @@ class TooltipComponent {
         return format(input);
     }
 }
-TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: TooltipComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ZoomService }, { token: i3.DomSanitizer }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: TooltipComponent, selector: "teta-tooltip", inputs: { size: "size", config: "config" }, ngImport: i0, template: "<ng-container *ngIf=\"position | async as p\">\n  <ng-container *ngIf=\"tooltips | async as t\">\n    <div class=\"chart-tooltip color-text-90 bg-background-50 shadow-2\"\n         [style.position]=\"'fixed'\"\n         *ngIf=\"t.length > 0\"\n         [style.opacity]=\"display | async\"\n         style=\"pointer-events: none; min-width: 200px;\"\n         [style.left]=\"p.left\"\n         [style.top]=\"p.top\"\n         [style.bottom]=\"p.bottom\"\n         [style.right]=\"p.right\"\n    >\n      <ng-container *ngIf=\"config.tooltip?.template\">\n        <ng-container *ngTemplateOutlet=\"config.tooltip.template; context: {$implicit: t}\"></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"config.tooltip?.format; else default\">\n        <div [innerHTML]=\"displayTooltips | async\"></div>\n      </ng-container>\n\n      <ng-template #default>\n        <div *ngIf=\"!config.tooltip?.template\" class=\"padding-2 border-radius-1\">\n          <ng-container *ngFor=\"let tooltip of t\">\n            <div class=\"display-flex align-center\">\n            <span class=\"display-block margin-right-1\" [style.width.px]=\"10\" [style.height.px]=\"2\"\n                  [style.background-color]=\"tooltip.series?.color\"></span>\n              <span class=\"font-title-3\">\n            {{ tooltip.series?.name }}\n                <span class=\"font-body-3\">\n              x: {{ format(tooltip.point?.x) }}\n                  y: {{ format(tooltip.point?.y) }}\n            </span>\n          </span>\n            </div>\n          </ng-container>\n        </div>\n      </ng-template>\n    </div>\n  </ng-container>\n</ng-container>\n\n\n\n", styles: [":host{position:absolute;z-index:2}\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: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: TooltipComponent, decorators: [{
+TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TooltipComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ZoomService }, { token: i3.DomSanitizer }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TooltipComponent, selector: "teta-tooltip", inputs: { size: "size", config: "config" }, ngImport: i0, template: "<ng-container *ngIf=\"position | async as p\">\n  <ng-container *ngIf=\"tooltips | async as t\">\n    <div class=\"chart-tooltip color-text-90 bg-background-50 shadow-2\"\n         [style.position]=\"'fixed'\"\n         *ngIf=\"t.length > 0\"\n         [style.opacity]=\"display | async\"\n         style=\"pointer-events: none; min-width: 200px;\"\n         [style.left]=\"p.left\"\n         [style.top]=\"p.top\"\n         [style.bottom]=\"p.bottom\"\n         [style.right]=\"p.right\"\n    >\n      <ng-container *ngIf=\"config.tooltip?.template\">\n        <ng-container *ngTemplateOutlet=\"config.tooltip.template; context: {$implicit: t}\"></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"config.tooltip?.format; else default\">\n        <div [innerHTML]=\"displayTooltips | async\"></div>\n      </ng-container>\n\n      <ng-template #default>\n        <div *ngIf=\"!config.tooltip?.template\" class=\"padding-2 border-radius-1\">\n          <ng-container *ngFor=\"let tooltip of t\">\n            <div class=\"display-flex align-center\">\n            <span class=\"display-block margin-right-1\" [style.width.px]=\"10\" [style.height.px]=\"2\"\n                  [style.background-color]=\"tooltip.series?.color\"></span>\n              <span class=\"font-title-3\">\n            {{ tooltip.series?.name }}\n                <span class=\"font-body-3\">\n              x: {{ format(tooltip.point?.x) }}\n                  y: {{ format(tooltip.point?.y) }}\n            </span>\n          </span>\n            </div>\n          </ng-container>\n        </div>\n      </ng-template>\n    </div>\n  </ng-container>\n</ng-container>\n\n\n\n", styles: [":host{position:absolute;z-index:2}\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: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"position | async as p\">\n  <ng-container *ngIf=\"tooltips | async as t\">\n    <div class=\"chart-tooltip color-text-90 bg-background-50 shadow-2\"\n         [style.position]=\"'fixed'\"\n         *ngIf=\"t.length > 0\"\n         [style.opacity]=\"display | async\"\n         style=\"pointer-events: none; min-width: 200px;\"\n         [style.left]=\"p.left\"\n         [style.top]=\"p.top\"\n         [style.bottom]=\"p.bottom\"\n         [style.right]=\"p.right\"\n    >\n      <ng-container *ngIf=\"config.tooltip?.template\">\n        <ng-container *ngTemplateOutlet=\"config.tooltip.template; context: {$implicit: t}\"></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"config.tooltip?.format; else default\">\n        <div [innerHTML]=\"displayTooltips | async\"></div>\n      </ng-container>\n\n      <ng-template #default>\n        <div *ngIf=\"!config.tooltip?.template\" class=\"padding-2 border-radius-1\">\n          <ng-container *ngFor=\"let tooltip of t\">\n            <div class=\"display-flex align-center\">\n            <span class=\"display-block margin-right-1\" [style.width.px]=\"10\" [style.height.px]=\"2\"\n                  [style.background-color]=\"tooltip.series?.color\"></span>\n              <span class=\"font-title-3\">\n            {{ tooltip.series?.name }}\n                <span class=\"font-body-3\">\n              x: {{ format(tooltip.point?.x) }}\n                  y: {{ format(tooltip.point?.y) }}\n            </span>\n          </span>\n            </div>\n          </ng-container>\n        </div>\n      </ng-template>\n    </div>\n  </ng-container>\n</ng-container>\n\n\n\n", styles: [":host{position:absolute;z-index:2}\n"] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ZoomService }, { type: i3.DomSanitizer }, { type: i0.NgZone }]; }, propDecorators: { size: [{
@@ -1997,7 +2017,7 @@ class ZoomableDirective {
                     const message = new ZoomMessage({
                         event,
                         axis: this.axis,
-                        brushDomain: domain,
+                        domain,
                         chartId: this.config.id,
                     });
                     this.broadcastService.broadcastZoom({
@@ -2071,12 +2091,11 @@ class ZoomableDirective {
             }
         }
         // Subscribe to zoom events
-        this.broadcastService.subscribeToZoom((_q = this.config) === null || _q === void 0 ? void 0 : _q.zoom.syncChannel)
-            .pipe(takeWhile((_) => this.alive), tap$1((m) => {
-            var _a, _b, _c, _d;
+        this.broadcastService.subscribeToZoom((_q = this.config) === null || _q === void 0 ? void 0 : _q.zoom.syncChannel).pipe(takeWhile((_) => this.alive), tap$1((m) => {
+            var _a, _b, _c, _d, _e;
             if (this.axis.index === ((_b = (_a = m.message) === null || _a === void 0 ? void 0 : _a.axis) === null || _b === void 0 ? void 0 : _b.index) && this.axis.orientation === ((_d = (_c = m.message) === null || _c === void 0 ? void 0 : _c.axis) === null || _d === void 0 ? void 0 : _d.orientation)) {
                 const currentZoom = d3.zoomTransform(this._element.node());
-                if (currentZoom !== m.message.event.transform) {
+                if (currentZoom !== m.message.event.transform && this.config.id === ((_e = m.message) === null || _e === void 0 ? void 0 : _e.chartId)) {
                     this._element.call(this.zoom.transform, m.message.event.transform);
                 }
             }
@@ -2088,9 +2107,28 @@ class ZoomableDirective {
             return (this.axis.index === ((_b = (_a = m.message) === null || _a === void 0 ? void 0 : _a.axis) === null || _b === void 0 ? void 0 : _b.index) &&
                 this.axis.orientation === ((_d = (_c = m.message) === null || _c === void 0 ? void 0 : _c.axis) === null || _d === void 0 ? void 0 : _d.orientation));
         }), tap$1((m) => {
-            var _a;
+            var _a, _b, _c, _d, _e, _f, _g;
             if (this.config.id !== ((_a = m.message) === null || _a === void 0 ? void 0 : _a.chartId)) {
-                this._element.call(this.zoom.transform, m.message.event.transform, null, {});
+                this.brushScale.domain(this.axis.originDomain);
+                const scale = Math.abs(this.axis.originDomain[1] - this.axis.originDomain[0]) / Math.abs(m.message.domain[1] - m.message.domain[0]);
+                let transform = zoomIdentity.scale(scale);
+                if (((_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.zoom) === null || _c === void 0 ? void 0 : _c.type) === ZoomType.x) {
+                    if ((_d = this.config.xAxis[0]) === null || _d === void 0 ? void 0 : _d.inverted) {
+                        transform = transform.translate(-this.brushScale(m.message.domain[0]), 0);
+                    }
+                    else {
+                        transform = transform.translate(this.brushScale(-m.message.domain[1]), 0);
+                    }
+                }
+                if (((_f = (_e = this.config) === null || _e === void 0 ? void 0 : _e.zoom) === null || _f === void 0 ? void 0 : _f.type) === ZoomType.y) {
+                    if ((_g = this.config.yAxis[0]) === null || _g === void 0 ? void 0 : _g.inverted) {
+                        transform = transform.translate(0, -this.brushScale(m.message.domain[0]));
+                    }
+                    else {
+                        transform = transform.translate(0, -this.brushScale(m.message.domain[1]));
+                    }
+                }
+                this._element.call(this.zoom.transform, transform, null, {});
             }
         }))
             .subscribe();
@@ -2100,8 +2138,12 @@ class ZoomableDirective {
             (((_s = this.config.brush) === null || _s === void 0 ? void 0 : _s.type) === BrushType.y &&
                 this.axis.orientation === AxisOrientation.y)) {
             this.broadcastService.subscribeToBrush((_t = this.config) === null || _t === void 0 ? void 0 : _t.zoom.syncChannel)
-                .pipe(takeWhile((_) => this.alive), debounceTime(150), filter((data) => Boolean(data.message.selection)), tap$1((m) => {
-                var _a, _b, _c, _d;
+                .pipe(combineLatestWith(this.chartService.size), takeWhile((_) => this.alive), filter((data) => {
+                const [m] = data;
+                return Boolean(m.message.selection);
+            }), debounceTime(150), tap$1((data) => {
+                var _a, _b, _c, _d, _e, _f;
+                const [m] = data;
                 const currentTransform = d3.zoomTransform(this._element.node());
                 if (!m.message.event &&
                     this.currentSelection &&
@@ -2111,15 +2153,25 @@ class ZoomableDirective {
                 const s = m.message.selection;
                 this.brushScale.domain(this.axis.originDomain);
                 const domain = this.brushScale.domain();
-                const scale = (domain[1] - domain[0]) / (s[1] - s[0]);
+                const scale = Math.abs(domain[1] - domain[0]) / Math.abs(s[1] - s[0]);
                 let transform = zoomIdentity.scale(scale);
                 if (((_a = m.message) === null || _a === void 0 ? void 0 : _a.brushType) === BrushType.x) {
-                    transform = transform.translate(-this.brushScale(s[0]), 0);
+                    if ((_b = this.config.xAxis[0]) === null || _b === void 0 ? void 0 : _b.inverted) {
+                        transform = transform.translate(-this.brushScale(s[0]), 0);
+                    }
+                    else {
+                        transform = transform.translate(-this.brushScale(s[1]), 0);
+                    }
                 }
-                if (((_b = m.message) === null || _b === void 0 ? void 0 : _b.brushType) === BrushType.y) {
-                    transform = transform.translate(0, -this.brushScale(s[0]));
+                if (((_c = m.message) === null || _c === void 0 ? void 0 : _c.brushType) === BrushType.y) {
+                    if ((_d = this.config.yAxis[0]) === null || _d === void 0 ? void 0 : _d.inverted) {
+                        transform = transform.translate(0, -this.brushScale(s[0]));
+                    }
+                    else {
+                        transform = transform.translate(0, -this.brushScale(s[1]));
+                    }
                 }
-                if ((_d = (_c = m.message) === null || _c === void 0 ? void 0 : _c.style) === null || _d === void 0 ? void 0 : _d.transition) {
+                if ((_f = (_e = m.message) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.transition) {
                     this._element.transition().call(this.zoom.transform, transform, null, {});
                 }
                 else {
@@ -2177,7 +2229,7 @@ class ZoomableDirective {
                     type,
                 },
                 axis: this.axis,
-                brushDomain: domain,
+                domain,
                 chartId: this.config.id,
             });
             this.zoomService.fireZoom({
@@ -2212,9 +2264,9 @@ class ZoomableDirective {
         });
     }
 }
-ZoomableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", 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: "14.0.0", version: "14.0.0", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: { config: "config", axis: "axis", size: "size", brushScale: "brushScale", scale: "scale" }, host: { properties: { "class.zoomable": "this.zoomable", "class.crosshair": "this.crosshair" } }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ZoomableDirective, decorators: [{
+ZoomableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", 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: "14.0.0", version: "14.0.2", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: { config: "config", axis: "axis", size: "size", brushScale: "brushScale", scale: "scale" }, host: { properties: { "class.zoomable": "this.zoomable", "class.crosshair": "this.crosshair" } }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tetaZoomable]',
@@ -2244,8 +2296,7 @@ class BrushableDirective {
         this.element = element;
     }
     ngOnInit() { }
-    ngAfterViewInit() {
-    }
+    ngAfterViewInit() { }
     ngOnChanges(changes) {
         var _a, _b;
         if (changes.hasOwnProperty('config')) {
@@ -2256,9 +2307,9 @@ class BrushableDirective {
         }
     }
 }
-BrushableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BrushableDirective, deps: [{ token: BrushService }, { token: ChartService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-BrushableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: BrushableDirective, selector: "[tetaBrushable]", inputs: { config: "config", brushScale: "brushScale" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BrushableDirective, decorators: [{
+BrushableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BrushableDirective, deps: [{ token: BrushService }, { token: ChartService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+BrushableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: BrushableDirective, selector: "[tetaBrushable]", inputs: { config: "config", brushScale: "brushScale" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BrushableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tetaBrushable]',
@@ -2323,9 +2374,9 @@ class AnnotationComponent {
         }
     }
 }
-AnnotationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AnnotationComponent, deps: [{ token: ScaleService }, { token: i0.ChangeDetectorRef }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
-AnnotationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: AnnotationComponent, selector: "[teta-annotation]", inputs: { annotation: "annotation" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, viewQueries: [{ propertyName: "node", first: true, predicate: ["annotationNode"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"{\n      x: x | async,\n      y: y | async\n    } as data\">\n  <svg:circle\n    [attr.r]=\"annotation.style?.radius ?? 5\"\n    [attr.cx]=\"data.x(annotation.point.x)\"\n    [attr.fill]=\"annotation?.style?.fill ?? 'var(--color-text-90)'\"\n    [attr.cy]=\"data.y(annotation.point.y)\">\n  </svg:circle>\n  <svg:line\n    [attr.x1]=\"data.x(annotation.point.x)\"\n    [attr.y1]=\"data.y(annotation.point.y)\"\n    [attr.x2]=\"data.x(annotation.point.x) + (annotation.dx ?? 0)\"\n    [attr.y2]=\"data.y(annotation.point.y) + (annotation.dy ?? 0)\"\n    [attr.stroke]=\"annotation.style?.stroke ?? 'var(--color-text-90)'\"\n    [attr.stroke-width]=\"annotation.style?.strokeWidth ?? 1\"\n    [attr.stroke-dasharray]=\"annotation.style?.strokeDasharray ?? null\"\n  >\n  </svg:line>\n  <svg:foreignObject\n    class=\"position-absolute\"\n    [attr.width]=\"node?.nativeElement.offsetWidth ?? 0\"\n    [attr.height]=\"node?.nativeElement.offsetHeight ?? 0\"\n    [attr.x]=\"data.x(annotation.point.x) + (annotation.dx ?? 0) - 10\"\n    [attr.y]=\"data.y(annotation.point.y) + (annotation.dy ?? 0) - 10\">\n    <div\n      #annotationNode\n      [style.background-color]=\"annotation.style?.fill ?? 'var(--color-text-90)'\"\n      [style.cursor]=\"annotation?.draggable ? 'move' : 'default'\"\n      [className]=\"'padding-h-2 ' + annotation.className ?? ''\"\n      style=\"border-radius: 2px; display: inline-block;\">\n      <ng-container *ngIf=\"annotation.template;else default\">\n        <ng-container *ngTemplateOutlet=\"annotation.template;context: {$implicit: annotation}\"></ng-container>\n      </ng-container>\n    </div>\n  </svg:foreignObject>\n</ng-container>\n<ng-template #default>\n  {{ annotation.note?.label}}\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AnnotationComponent, decorators: [{
+AnnotationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AnnotationComponent, deps: [{ token: ScaleService }, { token: i0.ChangeDetectorRef }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
+AnnotationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: AnnotationComponent, selector: "[teta-annotation]", inputs: { annotation: "annotation" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, viewQueries: [{ propertyName: "node", first: true, predicate: ["annotationNode"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"{\n      x: x | async,\n      y: y | async\n    } as data\">\n  <svg:circle\n    [attr.r]=\"annotation.style?.radius ?? 5\"\n    [attr.cx]=\"data.x(annotation.point.x)\"\n    [attr.fill]=\"annotation?.style?.fill ?? 'var(--color-text-90)'\"\n    [attr.cy]=\"data.y(annotation.point.y)\">\n  </svg:circle>\n  <svg:line\n    [attr.x1]=\"data.x(annotation.point.x)\"\n    [attr.y1]=\"data.y(annotation.point.y)\"\n    [attr.x2]=\"data.x(annotation.point.x) + (annotation.dx ?? 0)\"\n    [attr.y2]=\"data.y(annotation.point.y) + (annotation.dy ?? 0)\"\n    [attr.stroke]=\"annotation.style?.stroke ?? 'var(--color-text-90)'\"\n    [attr.stroke-width]=\"annotation.style?.strokeWidth ?? 1\"\n    [attr.stroke-dasharray]=\"annotation.style?.strokeDasharray ?? null\"\n  >\n  </svg:line>\n  <svg:foreignObject\n    class=\"position-absolute\"\n    [attr.width]=\"node?.nativeElement.offsetWidth ?? 0\"\n    [attr.height]=\"node?.nativeElement.offsetHeight ?? 0\"\n    [attr.x]=\"data.x(annotation.point.x) + (annotation.dx ?? 0) - 10\"\n    [attr.y]=\"data.y(annotation.point.y) + (annotation.dy ?? 0) - 10\">\n    <div\n      #annotationNode\n      [style.background-color]=\"annotation.style?.fill ?? 'var(--color-text-90)'\"\n      [style.cursor]=\"annotation?.draggable ? 'move' : 'default'\"\n      [className]=\"'padding-h-2 ' + annotation.className ?? ''\"\n      style=\"border-radius: 2px; display: inline-block;\">\n      <ng-container *ngIf=\"annotation.template;else default\">\n        <ng-container *ngTemplateOutlet=\"annotation.template;context: {$implicit: annotation}\"></ng-container>\n      </ng-container>\n    </div>\n  </svg:foreignObject>\n</ng-container>\n<ng-template #default>\n  {{ annotation.note?.label}}\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AnnotationComponent, decorators: [{
             type: Component,
             args: [{ selector: '[teta-annotation]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n      x: x | async,\n      y: y | async\n    } as data\">\n  <svg:circle\n    [attr.r]=\"annotation.style?.radius ?? 5\"\n    [attr.cx]=\"data.x(annotation.point.x)\"\n    [attr.fill]=\"annotation?.style?.fill ?? 'var(--color-text-90)'\"\n    [attr.cy]=\"data.y(annotation.point.y)\">\n  </svg:circle>\n  <svg:line\n    [attr.x1]=\"data.x(annotation.point.x)\"\n    [attr.y1]=\"data.y(annotation.point.y)\"\n    [attr.x2]=\"data.x(annotation.point.x) + (annotation.dx ?? 0)\"\n    [attr.y2]=\"data.y(annotation.point.y) + (annotation.dy ?? 0)\"\n    [attr.stroke]=\"annotation.style?.stroke ?? 'var(--color-text-90)'\"\n    [attr.stroke-width]=\"annotation.style?.strokeWidth ?? 1\"\n    [attr.stroke-dasharray]=\"annotation.style?.strokeDasharray ?? null\"\n  >\n  </svg:line>\n  <svg:foreignObject\n    class=\"position-absolute\"\n    [attr.width]=\"node?.nativeElement.offsetWidth ?? 0\"\n    [attr.height]=\"node?.nativeElement.offsetHeight ?? 0\"\n    [attr.x]=\"data.x(annotation.point.x) + (annotation.dx ?? 0) - 10\"\n    [attr.y]=\"data.y(annotation.point.y) + (annotation.dy ?? 0) - 10\">\n    <div\n      #annotationNode\n      [style.background-color]=\"annotation.style?.fill ?? 'var(--color-text-90)'\"\n      [style.cursor]=\"annotation?.draggable ? 'move' : 'default'\"\n      [className]=\"'padding-h-2 ' + annotation.className ?? ''\"\n      style=\"border-radius: 2px; display: inline-block;\">\n      <ng-container *ngIf=\"annotation.template;else default\">\n        <ng-container *ngTemplateOutlet=\"annotation.template;context: {$implicit: annotation}\"></ng-container>\n      </ng-container>\n    </div>\n  </svg:foreignObject>\n</ng-container>\n<ng-template #default>\n  {{ annotation.note?.label}}\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: ScaleService }, { type: i0.ChangeDetectorRef }, { type: ChartService }]; }, propDecorators: { annotation: [{
@@ -2363,9 +2414,9 @@ class CrosshairComponent {
         }));
     }
 }
-CrosshairComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: CrosshairComponent, deps: [{ token: ScaleService }, { token: ChartService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CrosshairComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: CrosshairComponent, selector: "[teta-crosshair]", inputs: { size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"transform | async as t\">\n  <svg:line [attr.x1]=\"t.x\" y1=\"0\" [attr.x2]=\"t.x\" [attr.y2]=\"size.height\" stroke=\"var(--color-text-90)\" stroke-width=\"0.5\"></svg:line>\n  <svg:line x1=\"0\" [attr.y1]=\"t.y\" [attr.x2]=\"size.width\" [attr.y2]=\"t.y\" stroke=\"var(--color-text-90)\" stroke-width=\"0.5\"></svg:line>\n</ng-container>\n", styles: [":host{shape-rendering:crispEdges}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: CrosshairComponent, decorators: [{
+CrosshairComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: CrosshairComponent, deps: [{ token: ScaleService }, { token: ChartService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+CrosshairComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: CrosshairComponent, selector: "[teta-crosshair]", inputs: { size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"transform | async as t\">\n  <svg:line [attr.x1]=\"t.x\" y1=\"0\" [attr.x2]=\"t.x\" [attr.y2]=\"size.height\" stroke=\"var(--color-text-90)\" stroke-width=\"0.5\"></svg:line>\n  <svg:line x1=\"0\" [attr.y1]=\"t.y\" [attr.x2]=\"size.width\" [attr.y2]=\"t.y\" stroke=\"var(--color-text-90)\" stroke-width=\"0.5\"></svg:line>\n</ng-container>\n", styles: [":host{shape-rendering:crispEdges}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: CrosshairComponent, decorators: [{
             type: Component,
             args: [{ selector: '[teta-crosshair]', template: "<ng-container *ngIf=\"transform | async as t\">\n  <svg:line [attr.x1]=\"t.x\" y1=\"0\" [attr.x2]=\"t.x\" [attr.y2]=\"size.height\" stroke=\"var(--color-text-90)\" stroke-width=\"0.5\"></svg:line>\n  <svg:line x1=\"0\" [attr.y1]=\"t.y\" [attr.x2]=\"size.width\" [attr.y2]=\"t.y\" stroke=\"var(--color-text-90)\" stroke-width=\"0.5\"></svg:line>\n</ng-container>\n", styles: [":host{shape-rendering:crispEdges}\n"] }]
         }], ctorParameters: function () { return [{ type: ScaleService }, { type: ChartService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { size: [{
@@ -2391,17 +2442,11 @@ class ChartContainerComponent {
         this.size = this._svc.size;
         this.yAxisMap = this._scaleService.yAxisMap;
         this.xAxisMap = this._scaleService.xAxisMap;
-        this.yScaleMap = this._scaleService.yScaleMap.pipe(throttleTime(0, animationFrameScheduler, { trailing: true }), tap(() => {
-            setTimeout(() => {
-                this._cdr.detectChanges();
-            });
-        }), shareReplay({
+        this.yScaleMap = this._scaleService.yScaleMap.pipe(observeOn(animationFrameScheduler, 10), tetaZoneFull(this._zone), shareReplay({
             bufferSize: 1,
             refCount: true,
         }));
-        this.xScaleMap = this._scaleService.xScaleMap.pipe(throttleTime(0, animationFrameScheduler, { trailing: true }), tap(() => setTimeout(() => {
-            this._cdr.detectChanges();
-        })), shareReplay({
+        this.xScaleMap = this._scaleService.xScaleMap.pipe(observeOn(animationFrameScheduler, 10), tetaZoneFull(this._zone), shareReplay({
             bufferSize: 1,
             refCount: true,
         }));
@@ -2416,11 +2461,7 @@ class ChartContainerComponent {
             bufferSize: 1,
             refCount: true,
         }));
-        this.visibleRect = combineLatest([
-            this.size,
-            this.xAxisMap,
-            this.yAxisMap,
-        ]).pipe(throttleTime(0, animationFrameScheduler, { trailing: true }), withLatestFrom(this.config), map((data) => {
+        this.visibleRect = this.size.pipe(combineLatestWith(this.xAxisMap, this.yAxisMap)).pipe(withLatestFrom(this.config), map((data) => {
             var _a, _b, _c, _d, _e, _f;
             const [[size, x, y], config] = data;
             const yAxesArray = [...y.values()];
@@ -2451,11 +2492,14 @@ class ChartContainerComponent {
                     ((_e = config.bounds) === null || _e === void 0 ? void 0 : _e.top) -
                     ((_f = config.bounds) === null || _f === void 0 ? void 0 : _f.bottom),
             };
-        }), tap(() => setTimeout(() => {
-            this._cdr.detectChanges();
-        })));
+        }), tetaZoneFull(this._zone), shareReplay({
+            bufferSize: 1,
+            refCount: true,
+        }));
     }
     ngOnInit() {
+    }
+    ngAfterViewInit() {
         this._observer = new ResizeObserver((entries) => {
             requestAnimationFrame(() => {
                 if (!Array.isArray(entries) ||
@@ -2539,9 +2583,9 @@ class ChartContainerComponent {
         this._svc.setPointerMove(event);
     }
 }
-ChartContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", 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.0", 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; 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.yScaleMap.get(item.key)\"\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.xAxisMap | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.xScaleMap && data.yScaleMap\">\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.xScaleMap.get(item.key)\"\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.visibleRect?.width > 0 && data.visibleRect?.height > 0 && data.xScaleMap && data.yScaleMap\">\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.xAxisMap.get(0) : data.yAxisMap.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.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\"></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        <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.0", ngImport: i0, type: ChartContainerComponent, decorators: [{
+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  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; 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.yScaleMap.get(item.key)\"\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.xAxisMap | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.xScaleMap && data.yScaleMap\">\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.xScaleMap.get(item.key)\"\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.visibleRect?.width > 0 && data.visibleRect?.height > 0 && data.xScaleMap && data.yScaleMap\">\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.xAxisMap.get(0) : data.yAxisMap.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.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\"></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        <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  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; 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.yScaleMap.get(item.key)\"\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.xAxisMap | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.xScaleMap && data.yScaleMap\">\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.xScaleMap.get(item.key)\"\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.visibleRect?.width > 0 && data.visibleRect?.height > 0 && data.xScaleMap && data.yScaleMap\">\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.xAxisMap.get(0) : data.yAxisMap.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.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\"></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        <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 }]; } });
@@ -2566,9 +2610,9 @@ class LegendComponent {
         this.chartService.toggleVisibilitySeries([serie.id]);
     }
 }
-LegendComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LegendComponent, deps: [{ token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
-LegendComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LegendComponent, selector: "teta-legend", inputs: { series: "series" }, host: { properties: { "class.padding-bottom-4": "this.classLegend" } }, ngImport: i0, template: "<ng-container *ngFor=\"let serie of series\" class=\"padding-bottom-4\">\n  <div *ngIf=\"serie?.showInLegend !== false\">\n    <div class=\"legend-item cursor-pointer\" (click)=\"click(serie)\">\n      <div class=\"legend-icon-form\" [style.height.px]=\"getHeight(serie)\" [style.background-color]=\"serie.visible ? serie.color : 'var(--color-text-30)'\"></div>\n      <div class=\"legend-label\" style=\"user-select: none\" [style.text-decoration]=\"serie.visible ? 'none' : 'line-through'\">{{ serie.name }}</div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;grid-gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-evenly}:host .legend-item{display:flex;align-items:center}:host .legend-icon-form{width:12px}:host .legend-label{margin-left:5px}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LegendComponent, decorators: [{
+LegendComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LegendComponent, deps: [{ token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
+LegendComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: LegendComponent, selector: "teta-legend", inputs: { series: "series" }, host: { properties: { "class.padding-bottom-4": "this.classLegend" } }, ngImport: i0, template: "<ng-container *ngFor=\"let serie of series\" class=\"padding-bottom-4\">\n  <div *ngIf=\"serie?.showInLegend !== false\">\n    <div class=\"legend-item cursor-pointer\" (click)=\"click(serie)\">\n      <div class=\"legend-icon-form\" [style.height.px]=\"getHeight(serie)\" [style.background-color]=\"serie.visible ? serie.color : 'var(--color-text-30)'\"></div>\n      <div class=\"legend-label\" style=\"user-select: none\" [style.text-decoration]=\"serie.visible ? 'none' : 'line-through'\">{{ serie.name }}</div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;grid-gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-evenly}:host .legend-item{display:flex;align-items:center}:host .legend-icon-form{width:12px}:host .legend-label{margin-left:5px}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LegendComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let serie of series\" class=\"padding-bottom-4\">\n  <div *ngIf=\"serie?.showInLegend !== false\">\n    <div class=\"legend-item cursor-pointer\" (click)=\"click(serie)\">\n      <div class=\"legend-icon-form\" [style.height.px]=\"getHeight(serie)\" [style.background-color]=\"serie.visible ? serie.color : 'var(--color-text-30)'\"></div>\n      <div class=\"legend-label\" style=\"user-select: none\" [style.text-decoration]=\"serie.visible ? 'none' : 'line-through'\">{{ serie.name }}</div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;grid-gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-evenly}:host .legend-item{display:flex;align-items:center}:host .legend-icon-form{width:12px}:host .legend-label{margin-left:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: ChartService }]; }, propDecorators: { series: [{
@@ -2686,9 +2730,9 @@ class ChartComponent {
         });
     }
 }
-ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ChartComponent, deps: [{ token: ChartService }, { token: ZoomService }, { token: ScaleService }], target: i0.ɵɵFactoryTarget.Component });
-ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ChartComponent, selector: "teta-svg-chart", inputs: { config: "config" }, outputs: { pointerMove: "pointerMove", plotBandsMove: "plotBandsMove", plotBandClick: "plotBandClick", plotBandContextMenu: "plotBandContextMenu", plotLinesMove: "plotLinesMove", pointMove: "pointMove", chartClick: "chartClick", chartContextMenu: "chartContextMenu", annotationContextMenu: "annotationContextMenu", annotationClick: "annotationClick", annotationMove: "annotationMove" }, providers: [ChartService, ZoomService, ScaleService, BrushService], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  hasSeriesData: hasSeriesData | async,\n  svcConfig: svcConfig | async\n} as data\">\n  <ng-container *ngIf=\"data.hasSeriesData === true else noData\">\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container position-relative\"></teta-chart-container>\n    </div>\n    <teta-legend *ngIf=\"data.svcConfig.legend?.enable === true\" [series]=\"data.svcConfig.series\"></teta-legend>\n  </ng-container>\n</ng-container>\n<ng-template #noData>\n  <div class=\"column column_auto align-center justify-content-center\">\n    <span class=\"font-body-3 color-text-40\">\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044E\u0442</span>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChartContainerComponent, selector: "teta-chart-container" }, { kind: "component", type: LegendComponent, selector: "teta-legend", inputs: ["series"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ChartComponent, decorators: [{
+ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartComponent, deps: [{ token: ChartService }, { token: ZoomService }, { token: ScaleService }], target: i0.ɵɵFactoryTarget.Component });
+ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ChartComponent, selector: "teta-svg-chart", inputs: { config: "config" }, outputs: { pointerMove: "pointerMove", plotBandsMove: "plotBandsMove", plotBandClick: "plotBandClick", plotBandContextMenu: "plotBandContextMenu", plotLinesMove: "plotLinesMove", pointMove: "pointMove", chartClick: "chartClick", chartContextMenu: "chartContextMenu", annotationContextMenu: "annotationContextMenu", annotationClick: "annotationClick", annotationMove: "annotationMove" }, providers: [ChartService, ZoomService, ScaleService, BrushService], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  hasSeriesData: hasSeriesData | async,\n  svcConfig: svcConfig | async\n} as data\">\n  <ng-container *ngIf=\"data.hasSeriesData === true else noData\">\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container position-relative\"></teta-chart-container>\n    </div>\n    <teta-legend *ngIf=\"data.svcConfig.legend?.enable === true\" [series]=\"data.svcConfig.series\"></teta-legend>\n  </ng-container>\n</ng-container>\n<ng-template #noData>\n  <div class=\"column column_auto align-center justify-content-center\">\n    <span class=\"font-body-3 color-text-40\">\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044E\u0442</span>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChartContainerComponent, selector: "teta-chart-container" }, { kind: "component", type: LegendComponent, selector: "teta-legend", inputs: ["series"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-svg-chart', providers: [ChartService, ZoomService, ScaleService, BrushService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  hasSeriesData: hasSeriesData | async,\n  svcConfig: svcConfig | async\n} as data\">\n  <ng-container *ngIf=\"data.hasSeriesData === true else noData\">\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container position-relative\"></teta-chart-container>\n    </div>\n    <teta-legend *ngIf=\"data.svcConfig.legend?.enable === true\" [series]=\"data.svcConfig.series\"></teta-legend>\n  </ng-container>\n</ng-container>\n<ng-template #noData>\n  <div class=\"column column_auto align-center justify-content-center\">\n    <span class=\"font-body-3 color-text-40\">\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044E\u0442</span>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: ZoomService }, { type: ScaleService }]; }, propDecorators: { pointerMove: [{
@@ -2719,8 +2763,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
 
 class ChartModule {
 }
-ChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: ChartModule, declarations: [ChartComponent,
+ChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: ChartModule, declarations: [ChartComponent,
         SeriesHostComponent,
         ChartContainerComponent,
         LegendComponent,
@@ -2750,8 +2794,8 @@ ChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "1
         AreaSeriesComponent,
         BlockSeriesComponent,
         BlockAreaSeriesComponent] });
-ChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ChartModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ChartModule, decorators: [{
+ChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [