@tetacom/svg-charts 1.2.2 → 1.2.5

package/fesm2015/tetacom-svg-charts.mjs

@@ -8,9 +8,9 @@ import * as d3 from 'd3';
 import { zoomIdentity } from 'd3';
 import objectHash from 'object-hash';
 import { maxIndex } from 'd3-array';
+import { debounceTime, tap as tap$1 } 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) {
@@ -95,7 +95,7 @@ const defaultAxisConfig = {
     scaleType: {
         type: ScaleType.linear,
     },
-    niceTicks: true,
+    niceTicks: false,
 };
 
 var SeriesType;
@@ -149,6 +149,7 @@ class ChartService {
         this.chartContextMenu$ = new Subject();
         this.annotationEvent$ = new Subject();
         this.annotationMove$ = new Subject();
+        this.zoomInstance$ = new Subject();
         this.id = of((Date.now() + Math.random()).toString(36));
         this.config = this.config$.asObservable().pipe(withLatestFrom(this.id), map(this.setDefaults), map(this.setPreparationData), map(this.restoreLocalStorage), shareReplay({
             bufferSize: 1,
@@ -175,6 +176,7 @@ class ChartService {
         this.plotBandContextMenu = this.plotBandEvent$
             .asObservable()
             .pipe(filter((_) => { var _a; return ((_a = _ === null || _ === void 0 ? void 0 : _.event) === null || _a === void 0 ? void 0 : _a.type) === 'contextmenu'; }));
+        this.zoomInstance = this.zoomInstance$.asObservable();
     }
     setConfig(config) {
         this.clearTooltips();
@@ -243,6 +245,9 @@ class ChartService {
     emitChartContextMenu(event) {
         this.chartContextMenu$.next(event);
     }
+    emitZoomInstance(event) {
+        this.zoomInstance$.next(event);
+    }
     saveCookie(config) {
         var _a;
         if (!config.name)
@@ -355,7 +360,7 @@ class ZoomService {
         this.scaleHashMap = new Map();
         this.elementHashMap = new Map();
         this.zoomHashMap = new Map();
-        this.zoomed$ = new BehaviorSubject(null);
+        this.zoomed$ = new BehaviorSubject({});
         this.zoomed = this.zoomed$.asObservable().pipe(shareReplay({
             bufferSize: 1,
             refCount: true
@@ -562,6 +567,9 @@ class Axis {
     setOriginDomain(domain) {
         this._originDomain = domain;
     }
+    setScale(scale) {
+        this._scale = scale;
+    }
     setSelfSize() {
         this._selfSize = new AxisSizeBuilder().build(this);
     }
@@ -574,6 +582,9 @@ class Axis {
             : this.chartConfig.yAxis[this.index];
         this._options = options;
     }
+    get scale() {
+        return this._scale;
+    }
     get extremes() {
         return this._extremes;
     }
@@ -617,50 +628,30 @@ class ScaleService {
             .set(ScaleType.symlog, d3.scaleSymlog)
             .set(ScaleType.pow, d3.scalePow)
             .set(ScaleType.sqrt, d3.scaleSqrt);
-        this.xAxisMap = combineLatest([
-            this.chartService.size,
-            this.chartService.config,
-        ]).pipe(map((data) => {
-            const [, config] = data;
-            const map = new Map();
-            config.xAxis.map((_, index) => {
-                map.set(index, Axis.createAxis(AxisOrientation.x, config, index));
-            });
-            return map;
-        }), shareReplay({
-            bufferSize: 1,
-            refCount: true,
-        }));
-        this.yAxisMap = combineLatest([
+        this.scales = combineLatest([
             this.chartService.size,
             this.chartService.config,
+            this.zoomService.zoomed,
         ]).pipe(map((data) => {
-            const [, config] = data;
-            const map = new Map();
+            var _a, _b, _c, _d;
+            const [size, config, zoom] = data;
+            const xAxisMap = new Map();
+            const yAxisMap = new Map();
             config.yAxis.map((_, index) => {
-                map.set(index, Axis.createAxis(AxisOrientation.y, config, index));
+                yAxisMap.set(index, Axis.createAxis(AxisOrientation.y, config, index));
             });
-            return map;
-        }), shareReplay({
-            bufferSize: 1,
-            refCount: true,
-        }));
-        this.xScaleMap = combineLatest([
-            this.chartService.size,
-            this.chartService.config,
-            this.zoomService.zoomed,
-        ]).pipe(withLatestFrom(this.yAxisMap, this.xAxisMap), map((data) => {
-            var _a;
-            const [[size, config, zoom], yAxes, xAxes] = data;
-            const map = new Map();
-            const left = [...yAxes.values()]
+            config.xAxis.map((_, index) => {
+                xAxisMap.set(index, Axis.createAxis(AxisOrientation.x, config, index));
+            });
+            // Generate x scales
+            const left = Array.from(yAxisMap.values())
                 .filter((_) => { var _a, _b; return ((_a = _.options) === null || _a === void 0 ? void 0 : _a.visible) && ((_b = _.options) === null || _b === void 0 ? void 0 : _b.opposite); })
                 .reduce((acc, cur) => acc + cur.selfSize, 0);
-            const right = [...yAxes.values()]
+            const right = Array.from(yAxisMap.values())
                 .filter((_) => { var _a, _b; return ((_a = _.options) === null || _a === void 0 ? void 0 : _a.visible) && ((_b = _.options) === null || _b === void 0 ? void 0 : _b.opposite) !== true; })
                 .reduce((acc, cur) => acc + cur.selfSize, 0);
             const finalWidth = (size.width || 0) - left - right;
-            xAxes.forEach((axis) => {
+            xAxisMap.forEach((axis) => {
                 var _a, _b;
                 let domain = axis.extremes;
                 if (axis === null || axis === void 0 ? void 0 : axis.options.inverted) {
@@ -676,53 +667,41 @@ class ScaleService {
                 if (axis.options.scaleType.type === ScaleType.log) {
                     scale.base(axis.options.scaleType.base);
                 }
-                map.set(axis.index, scale);
+                axis.setScale(scale);
                 axis.setOriginDomain(scale.domain());
                 const hasCache = this.transformCacheX.has(axis.index);
                 const shouldRestore = ((_a = zoom === null || zoom === void 0 ? void 0 : zoom.target) === null || _a === void 0 ? void 0 : _a.orientation) !== AxisOrientation.x ||
                     ((_b = zoom.target) === null || _b === void 0 ? void 0 : _b.index) !== axis.index;
                 if (hasCache && shouldRestore) {
                     const restoredTransform = this.transformCacheX.get(axis.index);
-                    map.set(axis.index, restoredTransform.rescaleX(scale));
+                    axis.setScale(restoredTransform.rescaleX(scale));
                 }
             });
             if (zoom) {
                 const event = zoom.event;
                 if (((_a = zoom.target) === null || _a === void 0 ? void 0 : _a.orientation) === AxisOrientation.x) {
-                    if (map.has(zoom.target.index)) {
-                        const currentScale = map.get(zoom.target.index);
-                        const rescaled = event.transform.rescaleX(currentScale);
-                        map.set(zoom.target.index, rescaled);
-                        const axis = xAxes.get(zoom.target.index);
+                    if (xAxisMap.has(zoom.target.index)) {
+                        const x = xAxisMap.get(zoom.target.index);
+                        const rescaled = event.transform.rescaleX(x.scale);
+                        x.setScale(rescaled);
+                        const axis = xAxisMap.get(zoom.target.index);
                         this.transformCacheX.set(axis.index, event.transform);
                     }
                 }
             }
-            return map;
-        }), shareReplay({
-            bufferSize: 1,
-            refCount: true,
-        }));
-        this.yScaleMap = combineLatest([
-            this.chartService.size,
-            this.chartService.config,
-            this.zoomService.zoomed,
-        ]).pipe(withLatestFrom(this.yAxisMap, this.xAxisMap), map((data) => {
-            var _a, _b, _c;
-            const [[size, config, zoom], yAxes, xAxes] = data;
-            const map = new Map();
-            const top = [...xAxes.values()]
+            // Generate y axis
+            const top = Array.from(xAxisMap.values())
                 .filter((_) => { var _a, _b; return ((_a = _.options) === null || _a === void 0 ? void 0 : _a.visible) && ((_b = _.options) === null || _b === void 0 ? void 0 : _b.opposite); })
                 .reduce((acc, cur) => acc + cur.selfSize, 0);
-            const bottom = [...xAxes.values()]
+            const bottom = Array.from(xAxisMap.values())
                 .filter((_) => { var _a, _b; return ((_a = _.options) === null || _a === void 0 ? void 0 : _a.visible) && ((_b = _.options) === null || _b === void 0 ? void 0 : _b.opposite) !== true; })
                 .reduce((acc, cur) => acc + cur.selfSize, 0);
             const finalHeight = (size.height || 0) -
                 top -
                 bottom -
-                ((_a = config === null || config === void 0 ? void 0 : config.bounds) === null || _a === void 0 ? void 0 : _a.top) -
-                ((_b = config.bounds) === null || _b === void 0 ? void 0 : _b.bottom);
-            yAxes.forEach((axis) => {
+                ((_b = config === null || config === void 0 ? void 0 : config.bounds) === null || _b === void 0 ? void 0 : _b.top) -
+                ((_c = config.bounds) === null || _c === void 0 ? void 0 : _c.bottom);
+            yAxisMap.forEach((axis) => {
                 var _a, _b;
                 let domain = axis.extremes;
                 if (axis.orientation === AxisOrientation.y) {
@@ -741,29 +720,32 @@ class ScaleService {
                 if (axis.options.scaleType.type === ScaleType.log) {
                     scale.base(axis.options.scaleType.base);
                 }
-                map.set(axis.index, scale);
+                axis.setScale(scale);
                 axis.setOriginDomain(scale.domain());
                 const hasCache = this.transformCacheY.has(axis.index);
                 const shouldRestore = ((_a = zoom === null || zoom === void 0 ? void 0 : zoom.target) === null || _a === void 0 ? void 0 : _a.orientation) !== AxisOrientation.y ||
                     ((_b = zoom.target) === null || _b === void 0 ? void 0 : _b.index) !== axis.index;
                 if (hasCache && shouldRestore) {
                     const restoredTransform = this.transformCacheY.get(axis.index);
-                    map.set(axis.index, restoredTransform.rescaleY(scale));
+                    axis.setScale(restoredTransform.rescaleY(scale));
                 }
             });
             if (zoom) {
                 const event = zoom.event;
-                if (((_c = zoom.target) === null || _c === void 0 ? void 0 : _c.orientation) === AxisOrientation.y) {
-                    if (map.has(zoom.target.index)) {
-                        const currentScale = map.get(zoom.target.index);
-                        const rescaled = event.transform.rescaleY(currentScale);
-                        map.set(zoom.target.index, rescaled);
-                        const axis = yAxes.get(zoom.target.index);
+                if (((_d = zoom.target) === null || _d === void 0 ? void 0 : _d.orientation) === AxisOrientation.y) {
+                    if (yAxisMap.has(zoom.target.index)) {
+                        const y = yAxisMap.get(zoom.target.index);
+                        const rescaled = event.transform.rescaleY(y.scale);
+                        y.setScale(rescaled);
+                        const axis = yAxisMap.get(zoom.target.index);
                         this.transformCacheY.set(axis.index, event.transform);
                     }
                 }
             }
-            return map;
+            return {
+                x: xAxisMap,
+                y: yAxisMap
+            };
         }), shareReplay({
             bufferSize: 1,
             refCount: true,
@@ -790,7 +772,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;
     }
@@ -947,30 +929,33 @@ class BrushService {
                     (window.TouchEvent &&
                         m.message.event.sourceEvent instanceof TouchEvent));
             }), tap((m) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h;
-                const { message: { brushDomain }, } = m;
+                var _a, _b, _c, _d, _e;
+                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,
-                            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,
-                        });
-                        this.broadcastService.broadcastBrush({
-                            channel: (_h = config === null || config === void 0 ? void 0 : config.zoom) === null || _h === void 0 ? void 0 : _h.syncChannel,
-                            message: brushMessage,
-                        });
-                    }
-                    this.selection = brushDomain;
+                    this.selection = domain;
+                }
+            }), debounceTime(30), tap((m) => {
+                var _a, _b, _c;
+                const { message: { domain }, } = m;
+                if (m.message.event.type === 'zoom') {
+                    const brushMessage = new BrushMessage({
+                        event: null,
+                        selection: domain,
+                        brushType: (_b = (_a = config === null || config === void 0 ? void 0 : config.brush) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : BrushType.x,
+                        brushScale,
+                    });
+                    this.broadcastService.broadcastBrush({
+                        channel: (_c = config === null || config === void 0 ? void 0 : config.zoom) === null || _c === void 0 ? void 0 : _c.syncChannel,
+                        message: brushMessage,
+                    });
                 }
             }))
                 .subscribe();
@@ -1069,17 +1054,14 @@ class LinearSeriesBase extends SeriesBaseComponent {
         };
         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) => {
-            const [event, x, y] = data;
-            return this.getTransform(event, x, y);
+        this.transform = this.svc.pointerMove.pipe(withLatestFrom(this.scaleService.scales), map((data) => {
+            const [event, { x, y }] = data;
+            return this.getTransform(event, x.get(this.series.xAxisIndex).scale, y.get(this.series.yAxisIndex).scale);
         }), tap(() => setTimeout(() => this.cdr.detectChanges())));
-        this.path = combineLatest([
-            this.scaleService.xScaleMap,
-            this.scaleService.yScaleMap,
-        ]).pipe(map((data) => {
-            const [x, y] = data;
-            this.x = x.get(this.series.xAxisIndex);
-            this.y = y.get(this.series.yAxisIndex);
+        this.path = this.scaleService.scales.pipe(map((data) => {
+            const { x, y } = data;
+            this.x = x.get(this.series.xAxisIndex).scale;
+            this.y = y.get(this.series.yAxisIndex).scale;
             const filter = this.defaultClipPointsMapping.get(this.series.clipPointsDirection);
             const line = d3
                 .line()
@@ -1167,8 +1149,6 @@ class LinearSeriesBase extends SeriesBaseComponent {
             return null;
         }
         const mouse = [event === null || event === void 0 ? void 0 : event.offsetX, event === null || event === void 0 ? void 0 : event.offsetY];
-        const foundX = scaleX.get(this.series.xAxisIndex);
-        const foundY = scaleY.get(this.series.yAxisIndex);
         const tooltipTracking = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.tooltip) === null || _b === void 0 ? void 0 : _b.tracking;
         const lineIntersection = (p0_x, p0_y, p1_x, p1_y, p2_x, p2_y, p3_x, p3_y) => {
             const rV = {};
@@ -1194,18 +1174,18 @@ class LinearSeriesBase extends SeriesBaseComponent {
         if (tooltipTracking === TooltipTracking.x) {
             const bisect = d3.bisector((_) => _.x).right;
             const pointer = mouse[0];
-            let x0 = foundX.invert(pointer);
+            let x0 = scaleX.invert(pointer);
             if (x0 instanceof Date) {
                 x0 = x0.getTime();
             }
             const rightId = bisect(this.series.data, x0);
-            const range = foundY.range();
-            const intersect = lineIntersection(pointer, range[0], pointer, range[1], foundX((_c = this.series.data[rightId - 1]) === null || _c === void 0 ? void 0 : _c.x), foundY((_d = this.series.data[rightId - 1]) === null || _d === void 0 ? void 0 : _d.y), foundX((_e = this.series.data[rightId]) === null || _e === void 0 ? void 0 : _e.x), foundY((_f = this.series.data[rightId]) === null || _f === void 0 ? void 0 : _f.y));
-            const x = foundX.invert(intersect.x);
-            const y = foundY.invert(intersect.y);
+            const range = scaleY.range();
+            const intersect = lineIntersection(pointer, range[0], pointer, range[1], scaleX((_c = this.series.data[rightId - 1]) === null || _c === void 0 ? void 0 : _c.x), scaleY((_d = this.series.data[rightId - 1]) === null || _d === void 0 ? void 0 : _d.y), scaleX((_e = this.series.data[rightId]) === null || _e === void 0 ? void 0 : _e.x), scaleY((_f = this.series.data[rightId]) === null || _f === void 0 ? void 0 : _f.y));
+            const x = scaleX.invert(intersect.x);
+            const y = scaleY.invert(intersect.y);
             if (x !== null && x !== undefined && !isNaN(x) && y !== null && y !== undefined && !isNaN(y)) {
                 this.svc.setTooltip({
-                    point: { x: foundX.invert(intersect.x), y: foundY.invert(intersect.y) },
+                    point: { x: scaleX.invert(intersect.x), y: scaleY.invert(intersect.y) },
                     series: this.series,
                 });
             }
@@ -1222,18 +1202,18 @@ class LinearSeriesBase extends SeriesBaseComponent {
         }
         if (tooltipTracking === TooltipTracking.y) {
             const bisect = d3.bisector((_) => _.y).right;
-            let y0 = foundY.invert(mouse[1]);
+            let y0 = scaleY.invert(mouse[1]);
             if (y0 instanceof Date) {
                 y0 = y0.getTime();
             }
             const rightId = bisect(this.series.data, y0);
-            const range = foundX.range();
-            const intersect = lineIntersection(range[0], mouse[1], range[1], mouse[1], foundX((_g = this.series.data[rightId - 1]) === null || _g === void 0 ? void 0 : _g.x), foundY((_h = this.series.data[rightId - 1]) === null || _h === void 0 ? void 0 : _h.y), foundX((_j = this.series.data[rightId]) === null || _j === void 0 ? void 0 : _j.x), foundY((_k = this.series.data[rightId]) === null || _k === void 0 ? void 0 : _k.y));
-            const x = foundX.invert(intersect.x);
-            const y = foundY.invert(intersect.y);
+            const range = scaleX.range();
+            const intersect = lineIntersection(range[0], mouse[1], range[1], mouse[1], scaleX((_g = this.series.data[rightId - 1]) === null || _g === void 0 ? void 0 : _g.x), scaleY((_h = this.series.data[rightId - 1]) === null || _h === void 0 ? void 0 : _h.y), scaleX((_j = this.series.data[rightId]) === null || _j === void 0 ? void 0 : _j.x), scaleY((_k = this.series.data[rightId]) === null || _k === void 0 ? void 0 : _k.y));
+            const x = scaleX.invert(intersect.x);
+            const y = scaleY.invert(intersect.y);
             if (x !== null && x !== undefined && !isNaN(x) && y !== null && y !== undefined && !isNaN(y)) {
                 this.svc.setTooltip({
-                    point: { x: foundX.invert(intersect.x), y: foundY.invert(intersect.y) },
+                    point: { x: scaleX.invert(intersect.x), y: scaleY.invert(intersect.y) },
                     series: this.series,
                 });
             }
@@ -1291,8 +1271,8 @@ class BarSeriesComponent extends SeriesBaseComponent {
             const count = _.series.filter((_) => _.type === SeriesType.bar && _.xAxisIndex === this.series.xAxisIndex);
             return count.length;
         }));
-        this.x1 = this.scaleService.xScaleMap.pipe(map((_) => {
-            const x = _.get(this.series.xAxisIndex);
+        this.x1 = this.scaleService.scales.pipe(map((_) => {
+            const x = _.x.get(this.series.xAxisIndex).scale;
             const range = x.range();
             const domain = this.series.data.map((_) => _.x);
             return d3
@@ -1301,8 +1281,8 @@ class BarSeriesComponent extends SeriesBaseComponent {
                 .domain(domain)
                 .padding(0.1);
         }));
-        this.x = this.scaleService.xScaleMap.pipe(map((_) => _.get(this.series.xAxisIndex)));
-        this.y = this.scaleService.yScaleMap.pipe(map((_) => _.get(this.series.yAxisIndex)));
+        this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.series.xAxisIndex).scale));
+        this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.series.yAxisIndex).scale));
     }
     mouseenter(point) {
         this.svc.setTooltip({
@@ -1335,8 +1315,8 @@ class ScatterSeriesComponent extends SeriesBaseComponent {
         this.element = element;
     }
     ngOnInit() {
-        this.x = this.scaleService.xScaleMap.pipe(map(_ => _.get(this.series.xAxisIndex)));
-        this.y = this.scaleService.yScaleMap.pipe(map(_ => _.get(this.series.yAxisIndex)));
+        this.x = this.scaleService.scales.pipe(map(_ => _.x.get(this.series.xAxisIndex).scale));
+        this.y = this.scaleService.scales.pipe(map(_ => _.y.get(this.series.yAxisIndex).scale));
     }
     ngAfterViewInit() {
     }
@@ -1374,8 +1354,8 @@ class BlockSeriesComponent extends SeriesBaseComponent {
     }
     ngOnInit() {
         const defaultVisiblePixels = 0;
-        this.x = this.scaleService.xScaleMap.pipe(map((_) => _.get(this.series.xAxisIndex)));
-        this.y = this.scaleService.yScaleMap.pipe(map((_) => _.get(this.series.yAxisIndex)));
+        this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.series.xAxisIndex).scale));
+        this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.series.yAxisIndex).scale));
         this.displayPoints = this.y.pipe(map((y) => {
             return this.series.data.filter((point, index, arr) => {
                 var _a, _b, _c, _d;
@@ -1427,8 +1407,8 @@ class BlockAreaSeriesComponent extends SeriesBaseComponent {
     }
     ngOnInit() {
         const defaultVisiblePixels = 0;
-        this.x = this.scaleService.xScaleMap.pipe(map((_) => _.get(this.series.xAxisIndex)));
-        this.y = this.scaleService.yScaleMap.pipe(map((_) => _.get(this.series.yAxisIndex)));
+        this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.series.xAxisIndex).scale));
+        this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.series.yAxisIndex).scale));
         this.displayPoints = this.y.pipe(map((y) => {
             return this.series.data.filter((point, index, arr) => {
                 var _a, _b, _c, _d;
@@ -1480,13 +1460,10 @@ class AreaSeriesComponent extends LinearSeriesBase {
     }
     ngOnInit() {
         super.ngOnInit();
-        this.areaPath = combineLatest([
-            this.scaleService.xScaleMap,
-            this.scaleService.yScaleMap,
-        ]).pipe(map((data) => {
-            const [x, y] = data;
-            this.x = x.get(this.series.xAxisIndex);
-            this.y = y.get(this.series.yAxisIndex);
+        this.areaPath = this.scaleService.scales.pipe(map((data) => {
+            const { x, y } = data;
+            this.x = x.get(this.series.xAxisIndex).scale;
+            this.y = y.get(this.series.yAxisIndex).scale;
             const area = d3
                 .area()
                 .defined((point) => point.x !== null &&
@@ -1576,10 +1553,16 @@ 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.y = this.svc.yScaleMap.pipe(map((_) => _.get(0)));
-        this.x = this.svc.xScaleMap.pipe(map((_) => _.get(0)));
+        this.tickYValues = this.svc.scales.pipe(map((_) => {
+            const ratio = this.size.height / 40;
+            return _.y.get(0).scale.ticks(ratio);
+        }));
+        this.tickXValues = this.svc.scales.pipe(map((_) => {
+            const ratio = this.size.width / 40;
+            return _.x.get(0).scale.ticks(ratio);
+        }));
+        this.y = this.svc.scales.pipe(map((_) => _.y.get(0).scale));
+        this.x = this.svc.scales.pipe(map((_) => _.x.get(0).scale));
     }
     ngAfterViewInit() {
     }
@@ -1597,8 +1580,9 @@ class XAxisComponent {
     constructor(scaleService) {
         this.scaleService = scaleService;
         this._alive = true;
-        this.x = this.scaleService.xScaleMap.pipe(map((_) => {
-            return _.get(this.axis.index);
+        this.x = this.scaleService.scales.pipe(map((_) => {
+            var _a;
+            return (_a = _.x.get(this.axis.index)) === null || _a === void 0 ? void 0 : _a.scale;
         }));
     }
     getLabelTransform() {
@@ -1608,30 +1592,6 @@ class XAxisComponent {
     ngOnDestroy() {
         this._alive = false;
     }
-    ngAfterViewInit() {
-        // this.draw();
-    }
-    draw() {
-        // if (!this.node || !this.axis) {
-        //   return;
-        // }
-        //
-        // const axis = this.axis.options.opposite
-        //   ? d3
-        //       .axisTop(this.scale)
-        //       .tickFormat(
-        //         this.axis.options.tickFormat ?? this.axis.defaultFormatter()
-        //       )
-        //   : d3
-        //       .axisBottom(this.scale)
-        //       .tickFormat(
-        //         this.axis.options.tickFormat ?? this.axis.defaultFormatter()
-        //       );
-        //
-        // d3.select(this.node.nativeElement)
-        //   .call(axis)
-        //   .call((_) => _.select('.domain').remove());
-    }
 }
 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 });
@@ -1648,8 +1608,9 @@ class YAxisComponent {
     constructor(scaleService) {
         this.scaleService = scaleService;
         this._alive = true;
-        this.y = this.scaleService.yScaleMap.pipe(map((_) => {
-            return _.get(this.axis.index);
+        this.y = this.scaleService.scales.pipe(map((_) => {
+            var _a;
+            return (_a = _.y.get(this.axis.index)) === null || _a === void 0 ? void 0 : _a.scale;
         }));
     }
     ngOnInit() { }
@@ -2011,7 +1972,7 @@ class ZoomableDirective {
                     const message = new ZoomMessage({
                         event,
                         axis: this.axis,
-                        brushDomain: domain,
+                        domain,
                         chartId: this.config.id,
                     });
                     this.broadcastService.broadcastZoom({
@@ -2080,6 +2041,7 @@ class ZoomableDirective {
             this.zoom.scaleExtent([maxZoom, minZoom]);
             this.zoom.on('zoom end', this.zoomed);
             this._element.call(this.zoom).on('dblclick.zoom', null); // Disable dbclick zoom
+            this.chartService.emitZoomInstance(this.zoomService);
             if (((_p = (_o = this.config) === null || _o === void 0 ? void 0 : _o.zoom) === null || _p === void 0 ? void 0 : _p.zoomBehavior) === ZoomBehaviorType.wheel) {
                 this.runWheelZoom();
             }
@@ -2101,9 +2063,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();
@@ -2116,7 +2097,7 @@ class ZoomableDirective {
                 .pipe(combineLatestWith(this.chartService.size), takeWhile((_) => this.alive), filter((data) => {
                 const [m] = data;
                 return Boolean(m.message.selection);
-            }), debounceTime(150), tap$1((data) => {
+            }), tap$1((data) => {
                 var _a, _b, _c, _d, _e, _f;
                 const [m] = data;
                 const currentTransform = d3.zoomTransform(this._element.node());
@@ -2204,7 +2185,7 @@ class ZoomableDirective {
                     type,
                 },
                 axis: this.axis,
-                brushDomain: domain,
+                domain,
                 chartId: this.config.id,
             });
             this.zoomService.fireZoom({
@@ -2300,8 +2281,8 @@ class AnnotationComponent {
         this.scaleService = scaleService;
         this.cdr = cdr;
         this.chartService = chartService;
-        this.x = this.scaleService.xScaleMap.pipe(map((_) => { var _a; return _.get((_a = this.annotation.xAxisIndex) !== null && _a !== void 0 ? _a : 0); }));
-        this.y = this.scaleService.yScaleMap.pipe(map((_) => { var _a; return _.get((_a = this.annotation.yAxisIndex) !== null && _a !== void 0 ? _a : 0); }));
+        this.x = this.scaleService.scales.pipe(map((_) => { var _a; return _.x.get((_a = this.annotation.xAxisIndex) !== null && _a !== void 0 ? _a : 0).scale; }));
+        this.y = this.scaleService.scales.pipe(map((_) => { var _a; return _.y.get((_a = this.annotation.yAxisIndex) !== null && _a !== void 0 ? _a : 0).scale; }));
         this.drag = d3.drag();
     }
     set annotation(annotation) {
@@ -2415,32 +2396,23 @@ class ChartContainerComponent {
         this.sumSize = (acc, curr) => acc + curr.selfSize;
         this.config = this._svc.config;
         this.size = this._svc.size;
-        this.yAxisMap = this._scaleService.yAxisMap;
-        this.xAxisMap = this._scaleService.xAxisMap;
-        this.yScaleMap = this._scaleService.yScaleMap.pipe(observeOn(animationFrameScheduler, 10), tetaZoneFull(this._zone), shareReplay({
-            bufferSize: 1,
-            refCount: true,
-        }));
-        this.xScaleMap = this._scaleService.xScaleMap.pipe(observeOn(animationFrameScheduler, 10), tetaZoneFull(this._zone), shareReplay({
+        this.scales = this._scaleService.scales.pipe(observeOn(animationFrameScheduler), tetaZoneFull(this._zone), shareReplay({
             bufferSize: 1,
             refCount: true,
         }));
-        this.brushScale = combineLatest([
-            this._scaleService.xScaleMap,
-            this._scaleService.yScaleMap,
-        ]).pipe(withLatestFrom(this.config), map((data) => {
+        this.brushScale = this._scaleService.scales.pipe(withLatestFrom(this.config), map((data) => {
             var _a, _b;
-            const [[x, y], config] = data;
-            return ((_a = config.brush) === null || _a === void 0 ? void 0 : _a.type) === BrushType.x || ((_b = config === null || config === void 0 ? void 0 : config.zoom) === null || _b === void 0 ? void 0 : _b.type) === ZoomType.x ? x.get(0) : y.get(0);
+            const [{ x, y }, config] = data;
+            return ((_a = config.brush) === null || _a === void 0 ? void 0 : _a.type) === BrushType.x || ((_b = config === null || config === void 0 ? void 0 : config.zoom) === null || _b === void 0 ? void 0 : _b.type) === ZoomType.x ? x.get(0).scale : y.get(0).scale;
         }), shareReplay({
             bufferSize: 1,
             refCount: true,
         }));
-        this.visibleRect = this.size.pipe(combineLatestWith(this.xAxisMap, this.yAxisMap)).pipe(withLatestFrom(this.config), map((data) => {
+        this.visibleRect = this.size.pipe(combineLatestWith(this.scales)).pipe(withLatestFrom(this.config), map((data) => {
             var _a, _b, _c, _d, _e, _f;
-            const [[size, x, y], config] = data;
-            const yAxesArray = [...y.values()];
-            const xAxesArray = [...x.values()];
+            const [[size, { x, y }], config] = data;
+            const yAxesArray = Array.from(y.values());
+            const xAxesArray = Array.from(x.values());
             const left = yAxesArray
                 .filter((_) => _.options.opposite !== true && _.options.visible)
                 .reduce(this.sumSize, 0);
@@ -2492,11 +2464,11 @@ class ChartContainerComponent {
         this._observer.disconnect();
     }
     getTranslate(axis, size) {
-        return combineLatest([this.xAxisMap, this.yAxisMap]).pipe(withLatestFrom(this.config), map((data) => {
+        return this.scales.pipe(withLatestFrom(this.config), map((data) => {
             var _a, _b;
-            const [[x, y], config] = data;
-            const xAxesArray = [...x.values()];
-            const yAxesArray = [...y.values()];
+            const [{ x, y }, config] = data;
+            const xAxesArray = Array.from(x.values());
+            const yAxesArray = Array.from(y.values());
             const oppositeFilter = this.filterPositionMap.get(true);
             const nonOppositeFilter = this.filterPositionMap.get(false);
             const oppositeOffsetY = yAxesArray.filter(oppositeFilter(axis));
@@ -2559,10 +2531,10 @@ class ChartContainerComponent {
     }
 }
 ChartContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartContainerComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ChartContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ChartContainerComponent, selector: "teta-chart-container", ngImport: i0, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  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 });
+ChartContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ChartContainerComponent, selector: "teta-chart-container", ngImport: i0, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  scales: scales | async,\n  visibleRect: visibleRect | async,\n  brushScale: brushScale | async\n} as data\" xmlns:svg=\"http://www.w3.org/1999/html\">\n  <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\"\n                [size]=\"data.size\"\n                [config]=\"data.config\"></teta-tooltip>\n  <ng-container *ngIf=\"data.visibleRect?.width > 0 && data.visibleRect?.height > 0 && data.scales.x && data.scales.y\">\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.y | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible\">\n            <g\n              teta-y-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [brushScale]=\"data.brushScale\"\n              [scale]=\"data.scales.y.get(item.key).scale\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n              [attr.y]=\"0\"\n              [attr.height]=\"data.visibleRect.height\"\n              [attr.width]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          </ng-container>\n\n        </ng-container>\n      </g>\n      <g class=\"x-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.x | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.scales.x && data.scales.y\">\n            <g\n              teta-x-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [brushScale]=\"data.brushScale\"\n              [scale]=\"data.scales.x.get(item.key).scale\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"0\"\n              [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n              [attr.width]=\"data.visibleRect.width\"\n              [attr.height]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          </ng-container>\n        </ng-container>\n      </g>\n    </svg>\n  </ng-container>\n  <ng-container *ngIf=\"data.visibleRect?.width > 0 && data.visibleRect?.height > 0 && data.scales.x && data.scales.y\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [brushScale]=\"data.brushScale\"\n      [scale]=\"data.brushScale\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate('+ data.visibleRect.x +'px, '+ data.visibleRect.y +'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines?.enable !== false\"\n         [size]=\"data.size\"></g>\n\n      <g class=\"x-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.scales.x.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.scales.y.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.y.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.scales.x.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.scales.y.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"series-container\">\n        <ng-container *ngFor=\"let series of data.config.series\">\n          <g teta-series-host\n             *ngIf=\"series.visible\"\n             [config]=\"data.config\"\n             [series]=\"series\"></g>\n        </ng-container>\n      </g>\n      <g class=\"annotations\">\n        <g teta-annotation\n           *ngFor=\"let annotation of data.config.annotations\"\n           [annotation]=\"annotation\"></g>\n      </g>\n      <g class=\"crosshair\" *ngIf=\"data.config.tooltip?.showCrosshair\">\n        <g teta-crosshair [size]=\"data.visibleRect\"></g>\n      </g>\n    </svg>\n\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["config", "series"] }, { kind: "component", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size"] }, { kind: "component", type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "size"] }, { kind: "component", type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "size"] }, { kind: "component", type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotLine", "size", "axis", "scale"] }, { kind: "component", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: ["plotBand", "axis", "scale", "size"] }, { kind: "component", type: TooltipComponent, selector: "teta-tooltip", inputs: ["size", "config"] }, { kind: "directive", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size", "brushScale", "scale"] }, { kind: "directive", type: BrushableDirective, selector: "[tetaBrushable]", inputs: ["config", "brushScale"] }, { kind: "component", type: AnnotationComponent, selector: "[teta-annotation]", inputs: ["annotation"] }, { kind: "component", type: CrosshairComponent, selector: "[teta-crosshair]", inputs: ["size"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 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"] }]
+            args: [{ selector: 'teta-chart-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  scales: scales | async,\n  visibleRect: visibleRect | async,\n  brushScale: brushScale | async\n} as data\" xmlns:svg=\"http://www.w3.org/1999/html\">\n  <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\"\n                [size]=\"data.size\"\n                [config]=\"data.config\"></teta-tooltip>\n  <ng-container *ngIf=\"data.visibleRect?.width > 0 && data.visibleRect?.height > 0 && data.scales.x && data.scales.y\">\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.y | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible\">\n            <g\n              teta-y-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [brushScale]=\"data.brushScale\"\n              [scale]=\"data.scales.y.get(item.key).scale\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n              [attr.y]=\"0\"\n              [attr.height]=\"data.visibleRect.height\"\n              [attr.width]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          </ng-container>\n\n        </ng-container>\n      </g>\n      <g class=\"x-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.x | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.scales.x && data.scales.y\">\n            <g\n              teta-x-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [brushScale]=\"data.brushScale\"\n              [scale]=\"data.scales.x.get(item.key).scale\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"0\"\n              [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n              [attr.width]=\"data.visibleRect.width\"\n              [attr.height]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          </ng-container>\n        </ng-container>\n      </g>\n    </svg>\n  </ng-container>\n  <ng-container *ngIf=\"data.visibleRect?.width > 0 && data.visibleRect?.height > 0 && data.scales.x && data.scales.y\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [brushScale]=\"data.brushScale\"\n      [scale]=\"data.brushScale\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate('+ data.visibleRect.x +'px, '+ data.visibleRect.y +'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines?.enable !== false\"\n         [size]=\"data.size\"></g>\n\n      <g class=\"x-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.scales.x.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.scales.y.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.y.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.scales.x.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.scales.y.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"series-container\">\n        <ng-container *ngFor=\"let series of data.config.series\">\n          <g teta-series-host\n             *ngIf=\"series.visible\"\n             [config]=\"data.config\"\n             [series]=\"series\"></g>\n        </ng-container>\n      </g>\n      <g class=\"annotations\">\n        <g teta-annotation\n           *ngFor=\"let annotation of data.config.annotations\"\n           [annotation]=\"annotation\"></g>\n      </g>\n      <g class=\"crosshair\" *ngIf=\"data.config.tooltip?.showCrosshair\">\n        <g teta-crosshair [size]=\"data.visibleRect\"></g>\n      </g>\n    </svg>\n\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 
 class LegendComponent {
@@ -2613,6 +2585,7 @@ class ChartComponent {
         this.annotationContextMenu = new EventEmitter();
         this.annotationClick = new EventEmitter();
         this.annotationMove = new EventEmitter();
+        this.zoomServiceInstance = new EventEmitter();
         this._alive = true;
         this.svcConfig = this.chartService.config;
         this.hasSeriesData = this.svcConfig.pipe(map((_) => { var _a, _b; return ((_a = _.series) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = _.series) === null || _b === void 0 ? void 0 : _b.some((_) => { var _a; return ((_a = _.data) === null || _a === void 0 ? void 0 : _a.length) > 0; })); }));
@@ -2624,15 +2597,15 @@ class ChartComponent {
     }
     ngOnInit() {
         this.chartService.pointerMove
-            .pipe(takeWhile(() => this._alive), withLatestFrom(this.scaleService.xScaleMap, this.scaleService.yScaleMap, this.chartService.config))
+            .pipe(takeWhile(() => this._alive), withLatestFrom(this.scaleService.scales, this.chartService.config))
             .subscribe((data) => {
             var _a;
-            const [event, x, y, config] = data;
+            const [event, { x, y }, config] = data;
             const tooltipTracking = (_a = config === null || config === void 0 ? void 0 : config.tooltip) === null || _a === void 0 ? void 0 : _a.tracking;
             if (tooltipTracking === TooltipTracking.y) {
                 const result = new Map();
                 y.forEach((value, key) => {
-                    result.set(key, value.invert(event.offsetY));
+                    result.set(key, value.scale.invert(event.offsetY));
                 });
                 this.pointerMove.emit({
                     event: event,
@@ -2642,7 +2615,7 @@ class ChartComponent {
             else {
                 const result = new Map();
                 x.forEach((value, key) => {
-                    result.set(key, value.invert(event.offsetX));
+                    result.set(key, value.scale.invert(event.offsetX));
                 });
                 this.pointerMove.emit({
                     event: event,
@@ -2694,6 +2667,11 @@ class ChartComponent {
             .subscribe((_) => {
             this.annotationMove.emit(_);
         });
+        this.chartService.zoomInstance
+            .pipe(takeWhile(() => this._alive))
+            .subscribe((_) => {
+            this.zoomServiceInstance.emit(_);
+        });
     }
     ngAfterViewInit() {
     }
@@ -2706,7 +2684,7 @@ class ChartComponent {
     }
 }
 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 });
+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", zoomServiceInstance: "zoomServiceInstance" }, 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"] }]
@@ -2732,6 +2710,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Output
             }], annotationMove: [{
                 type: Output
+            }], zoomServiceInstance: [{
+                type: Output
             }], config: [{
                 type: Input
             }] } });