@tetacom/svg-charts 1.2.4 → 1.2.7

package/fesm2020/tetacom-svg-charts.mjs

@@ -633,91 +633,7 @@ 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.chartService.size,
-            this.chartService.config,
-        ]).pipe(map((data) => {
-            const [, config] = data;
-            const map = new Map();
-            config.yAxis.map((_, index) => {
-                map.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) => {
-            const [[size, config, zoom], yAxes, xAxes] = data;
-            const map = new Map();
-            const left = [...yAxes.values()]
-                .filter((_) => _.options?.visible && _.options?.opposite)
-                .reduce((acc, cur) => acc + cur.selfSize, 0);
-            const right = [...yAxes.values()]
-                .filter((_) => _.options?.visible && _.options?.opposite !== true)
-                .reduce((acc, cur) => acc + cur.selfSize, 0);
-            const finalWidth = (size.width || 0) - left - right;
-            xAxes.forEach((axis) => {
-                let domain = axis.extremes;
-                if (axis?.options.inverted) {
-                    domain = [...axis.extremes].reverse();
-                }
-                let scale = this.scaleMapping
-                    .get(axis.options.scaleType.type)()
-                    .domain(domain)
-                    .range([0, finalWidth - config.bounds.right]);
-                if (axis.options.niceTicks) {
-                    scale.nice();
-                }
-                if (axis.options.scaleType.type === ScaleType.log) {
-                    scale.base(axis.options.scaleType.base);
-                }
-                map.set(axis.index, scale);
-                axis.setOriginDomain(scale.domain());
-                const hasCache = this.transformCacheX.has(axis.index);
-                const shouldRestore = zoom?.target?.orientation !== AxisOrientation.x ||
-                    zoom.target?.index !== axis.index;
-                if (hasCache && shouldRestore) {
-                    const restoredTransform = this.transformCacheX.get(axis.index);
-                    map.set(axis.index, restoredTransform.rescaleX(scale));
-                }
-            });
-            if (zoom) {
-                const event = zoom.event;
-                if (zoom.target?.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);
-                        this.transformCacheX.set(axis.index, event.transform);
-                    }
-                }
-            }
-            return map;
-        }), shareReplay({
-            bufferSize: 1,
-            refCount: true,
-        }));
-        this.xMap = combineLatest([
+        this.scales = combineLatest([
             this.chartService.size,
             this.chartService.config,
             this.zoomService.zoomed,
@@ -731,6 +647,7 @@ class ScaleService {
             config.xAxis.map((_, index) => {
                 xAxisMap.set(index, Axis.createAxis(AxisOrientation.x, config, index));
             });
+            // Generate x scales
             const left = Array.from(yAxisMap.values())
                 .filter((_) => _.options?.visible && _.options?.opposite)
                 .reduce((acc, cur) => acc + cur.selfSize, 0);
@@ -775,25 +692,7 @@ class ScaleService {
                     }
                 }
             }
-            return xAxisMap;
-        }), shareReplay({
-            bufferSize: 1,
-            refCount: true,
-        }));
-        this.yMap = combineLatest([
-            this.chartService.size,
-            this.chartService.config,
-            this.zoomService.zoomed,
-        ]).pipe(map((data) => {
-            const [size, config, zoom] = data;
-            const xAxisMap = new Map();
-            const yAxisMap = new Map();
-            config.yAxis.map((_, index) => {
-                yAxisMap.set(index, Axis.createAxis(AxisOrientation.y, config, index));
-            });
-            config.xAxis.map((_, index) => {
-                xAxisMap.set(index, Axis.createAxis(AxisOrientation.x, config, index));
-            });
+            // Generate y axis
             const top = Array.from(xAxisMap.values())
                 .filter((_) => _.options?.visible && _.options?.opposite)
                 .reduce((acc, cur) => acc + cur.selfSize, 0);
@@ -845,70 +744,10 @@ class ScaleService {
                     }
                 }
             }
-            return yAxisMap;
-        }), 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) => {
-            const [[size, config, zoom], yAxes, xAxes] = data;
-            const map = new Map();
-            const top = [...xAxes.values()]
-                .filter((_) => _.options?.visible && _.options?.opposite)
-                .reduce((acc, cur) => acc + cur.selfSize, 0);
-            const bottom = [...xAxes.values()]
-                .filter((_) => _.options?.visible && _.options?.opposite !== true)
-                .reduce((acc, cur) => acc + cur.selfSize, 0);
-            const finalHeight = (size.height || 0) -
-                top -
-                bottom -
-                config?.bounds?.top -
-                config.bounds?.bottom;
-            yAxes.forEach((axis) => {
-                let domain = axis.extremes;
-                if (axis.orientation === AxisOrientation.y) {
-                    domain = [...axis.extremes].reverse();
-                }
-                if (axis?.options.inverted) {
-                    domain = domain.reverse();
-                }
-                const scale = this.scaleMapping
-                    .get(axis.options.scaleType.type)()
-                    .domain(domain)
-                    .range([config.bounds.top, finalHeight]);
-                if (axis.options.niceTicks) {
-                    scale.nice();
-                }
-                if (axis.options.scaleType.type === ScaleType.log) {
-                    scale.base(axis.options.scaleType.base);
-                }
-                map.set(axis.index, scale);
-                axis.setOriginDomain(scale.domain());
-                const hasCache = this.transformCacheY.has(axis.index);
-                const shouldRestore = zoom?.target?.orientation !== AxisOrientation.y ||
-                    zoom.target?.index !== axis.index;
-                if (hasCache && shouldRestore) {
-                    const restoredTransform = this.transformCacheY.get(axis.index);
-                    map.set(axis.index, restoredTransform.rescaleY(scale));
-                }
-            });
-            if (zoom) {
-                const event = zoom.event;
-                if (zoom.target?.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);
-                        this.transformCacheY.set(axis.index, event.transform);
-                    }
-                }
-            }
-            return map;
+            return {
+                x: xAxisMap,
+                y: yAxisMap
+            };
         }), shareReplay({
             bufferSize: 1,
             refCount: true,
@@ -1213,15 +1052,12 @@ 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.xMap, this.scaleService.yMap), map((data) => {
-            const [event, x, y] = data;
+        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.xMap,
-            this.scaleService.yMap,
-        ]).pipe(map((data) => {
-            const [x, y] = data;
+        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);
@@ -1428,8 +1264,8 @@ class BarSeriesComponent extends SeriesBaseComponent {
             const count = _.series.filter((_) => _.type === SeriesType.bar && _.xAxisIndex === this.series.xAxisIndex);
             return count.length;
         }));
-        this.x1 = this.scaleService.xMap.pipe(map((_) => {
-            const x = _.get(this.series.xAxisIndex).scale;
+        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
@@ -1438,8 +1274,8 @@ class BarSeriesComponent extends SeriesBaseComponent {
                 .domain(domain)
                 .padding(0.1);
         }));
-        this.x = this.scaleService.xMap.pipe(map((_) => _.get(this.series.xAxisIndex).scale));
-        this.y = this.scaleService.yMap.pipe(map((_) => _.get(this.series.yAxisIndex).scale));
+        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({
@@ -1472,8 +1308,8 @@ class ScatterSeriesComponent extends SeriesBaseComponent {
         this.element = element;
     }
     ngOnInit() {
-        this.x = this.scaleService.xMap.pipe(map(_ => _.get(this.series.xAxisIndex).scale));
-        this.y = this.scaleService.yMap.pipe(map(_ => _.get(this.series.yAxisIndex).scale));
+        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() {
     }
@@ -1511,8 +1347,8 @@ class BlockSeriesComponent extends SeriesBaseComponent {
     }
     ngOnInit() {
         const defaultVisiblePixels = 0;
-        this.x = this.scaleService.xMap.pipe(map((_) => _.get(this.series.xAxisIndex).scale));
-        this.y = this.scaleService.yMap.pipe(map((_) => _.get(this.series.yAxisIndex).scale));
+        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) => {
                 const [min, max] = y.domain();
@@ -1563,8 +1399,8 @@ class BlockAreaSeriesComponent extends SeriesBaseComponent {
     }
     ngOnInit() {
         const defaultVisiblePixels = 0;
-        this.x = this.scaleService.xMap.pipe(map((_) => _.get(this.series.xAxisIndex).scale));
-        this.y = this.scaleService.yMap.pipe(map((_) => _.get(this.series.yAxisIndex).scale));
+        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) => {
                 const [min, max] = y.domain();
@@ -1615,11 +1451,8 @@ class AreaSeriesComponent extends LinearSeriesBase {
     }
     ngOnInit() {
         super.ngOnInit();
-        this.areaPath = combineLatest([
-            this.scaleService.xMap,
-            this.scaleService.yMap,
-        ]).pipe(map((data) => {
-            const [x, y] = data;
+        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
@@ -1711,16 +1544,16 @@ class GridlinesComponent {
         this.svc = svc;
         this.chartService = chartService;
         this.config = this.chartService.config;
-        this.tickYValues = this.svc.yMap.pipe(map((_) => {
+        this.tickYValues = this.svc.scales.pipe(map((_) => {
             const ratio = this.size.height / 40;
-            return _.get(0).scale.ticks(ratio);
+            return _.y.get(0).scale.ticks(ratio);
         }));
-        this.tickXValues = this.svc.xMap.pipe(map((_) => {
+        this.tickXValues = this.svc.scales.pipe(map((_) => {
             const ratio = this.size.width / 40;
-            return _.get(0).scale.ticks(ratio);
+            return _.x.get(0).scale.ticks(ratio);
         }));
-        this.y = this.svc.yMap.pipe(map((_) => _.get(0).scale));
-        this.x = this.svc.xMap.pipe(map((_) => _.get(0).scale));
+        this.y = this.svc.scales.pipe(map((_) => _.y.get(0).scale));
+        this.x = this.svc.scales.pipe(map((_) => _.x.get(0).scale));
     }
     ngAfterViewInit() {
     }
@@ -1738,8 +1571,8 @@ class XAxisComponent {
     constructor(scaleService) {
         this.scaleService = scaleService;
         this._alive = true;
-        this.x = this.scaleService.xMap.pipe(map((_) => {
-            return _.get(this.axis.index)?.scale;
+        this.x = this.scaleService.scales.pipe(map((_) => {
+            return _.x.get(this.axis.index)?.scale;
         }));
     }
     getLabelTransform() {
@@ -1765,8 +1598,8 @@ class YAxisComponent {
     constructor(scaleService) {
         this.scaleService = scaleService;
         this._alive = true;
-        this.y = this.scaleService.yMap.pipe(map((_) => {
-            return _.get(this.axis.index)?.scale;
+        this.y = this.scaleService.scales.pipe(map((_) => {
+            return _.y.get(this.axis.index)?.scale;
         }));
     }
     ngOnInit() { }
@@ -1992,10 +1825,10 @@ class PlotBandComponent {
     }
 }
 PlotBandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PlotBandComponent, deps: [{ token: ScaleService }, { token: ZoomService }, { token: ChartService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PlotBandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: { plotBand: "plotBand", axis: "axis", scale: "scale", size: "size" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, ngImport: i0, template: "<svg:rect\n  class=\"plotband\" xmlns:svg=\"http://www.w3.org/1999/html\"\n  [class.draggable]=\"plotBand?.draggable === true\"\n  [attr.fill]=\"getFill(plotBand)\"\n  [attr.opacity]=\"plotBand.style?.plotBand?.opacity\"\n  [attr.height]=\"axis.orientation === orientation.x ? height : bandSize\"\n  [attr.width]=\"axis.orientation === orientation.x ? bandSize : width\"\n  [attr.y]=\"axis.orientation === orientation.y ? from : null\"\n  [attr.x]=\"axis.orientation === orientation.x ? from : null\">\n</svg:rect>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.x\"\n  text-anchor=\"middle\"\n  dominant-baseline=\"central\"\n  class=\"label font-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 });
+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-body-3 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-body-3 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 || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n          [attr.data-grabber]=\"'from'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n\n<svg:line class=\"display-grabber\"\n          *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n          [attr.data-grabber]=\"'to'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n<svg:line class=\"grabber\"\n          *ngIf=\"plotBand.resizable\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"8\"\n          [style.transform]=\"axis.orientation === orientation.x ? 'translateX(2px)' : 'translateY(2px)'\"\n          [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n          [attr.data-grabber]=\"'from'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n<svg:line class=\"grabber\"\n          *ngIf=\"plotBand.resizable\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"8\"\n          [style.transform]=\"axis.orientation === orientation.x ? 'translateX(-2px)' : 'translateY(-2px)'\"\n          [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n          [attr.data-grabber]=\"'to'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n\n", styles: [":host .draggable rect:hover{cursor:grab}:host .draggable rect:active{cursor:grabbing}:host .x-grabber.resizeable{cursor:col-resize}:host .y-grabber.resizeable{cursor:row-resize}:host:hover .grabber{opacity:.1}.grabber{opacity:0}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PlotBandComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[teta-plot-band]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:rect\n  class=\"plotband\" xmlns:svg=\"http://www.w3.org/1999/html\"\n  [class.draggable]=\"plotBand?.draggable === true\"\n  [attr.fill]=\"getFill(plotBand)\"\n  [attr.opacity]=\"plotBand.style?.plotBand?.opacity\"\n  [attr.height]=\"axis.orientation === orientation.x ? height : bandSize\"\n  [attr.width]=\"axis.orientation === orientation.x ? bandSize : width\"\n  [attr.y]=\"axis.orientation === orientation.y ? from : null\"\n  [attr.x]=\"axis.orientation === orientation.x ? from : null\">\n</svg:rect>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.x\"\n  text-anchor=\"middle\"\n  dominant-baseline=\"central\"\n  class=\"label font-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"] }]
+            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-body-3 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-body-3 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 || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n          [attr.data-grabber]=\"'from'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n\n<svg:line class=\"display-grabber\"\n          *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n          [attr.data-grabber]=\"'to'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n<svg:line class=\"grabber\"\n          *ngIf=\"plotBand.resizable\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"8\"\n          [style.transform]=\"axis.orientation === orientation.x ? 'translateX(2px)' : 'translateY(2px)'\"\n          [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n          [attr.data-grabber]=\"'from'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n<svg:line class=\"grabber\"\n          *ngIf=\"plotBand.resizable\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"8\"\n          [style.transform]=\"axis.orientation === orientation.x ? 'translateX(-2px)' : 'translateY(-2px)'\"\n          [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n          [attr.data-grabber]=\"'to'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n\n", styles: [":host .draggable rect:hover{cursor:grab}:host .draggable rect:active{cursor:grabbing}:host .x-grabber.resizeable{cursor:col-resize}:host .y-grabber.resizeable{cursor:row-resize}:host:hover .grabber{opacity:.1}.grabber{opacity:0}\n"] }]
         }], ctorParameters: function () { return [{ type: ScaleService }, { type: ZoomService }, { type: ChartService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { plotBand: [{
                 type: Input
             }], axis: [{
@@ -2421,8 +2254,8 @@ class AnnotationComponent {
         this.scaleService = scaleService;
         this.cdr = cdr;
         this.chartService = chartService;
-        this.x = this.scaleService.xMap.pipe(map((_) => _.get(this.annotation.xAxisIndex ?? 0).scale));
-        this.y = this.scaleService.yMap.pipe(map((_) => _.get(this.annotation.yAxisIndex ?? 0).scale));
+        this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.annotation.xAxisIndex ?? 0).scale));
+        this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.annotation.yAxisIndex ?? 0).scale));
         this.drag = d3.drag();
     }
     set annotation(annotation) {
@@ -2536,28 +2369,21 @@ class ChartContainerComponent {
         this.sumSize = (acc, curr) => acc + curr.selfSize;
         this.config = this._svc.config;
         this.size = this._svc.size;
-        this.yMap = this._scaleService.yMap.pipe(observeOn(animationFrameScheduler), tetaZoneFull(this._zone), shareReplay({
-            bufferSize: 1,
-            refCount: true,
-        }));
-        this.xMap = this._scaleService.xMap.pipe(observeOn(animationFrameScheduler), 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.xMap,
-            this._scaleService.yMap,
-        ]).pipe(withLatestFrom(this.config), map((data) => {
-            const [[x, y], config] = data;
+        this.brushScale = this._scaleService.scales.pipe(withLatestFrom(this.config), map((data) => {
+            const [{ x, y }, config] = data;
             return config.brush?.type === BrushType.x || config?.zoom?.type === ZoomType.x ? x.get(0).scale : y.get(0).scale;
         }), shareReplay({
             bufferSize: 1,
             refCount: true,
         }));
-        this.visibleRect = this.size.pipe(combineLatestWith(this.xMap, this.yMap)).pipe(withLatestFrom(this.config), map((data) => {
-            const [[size, x, y], config] = data;
-            const yAxesArray = [...y.values()];
-            const xAxesArray = [...x.values()];
+        this.visibleRect = this.size.pipe(combineLatestWith(this.scales)).pipe(withLatestFrom(this.config), map((data) => {
+            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);
@@ -2609,10 +2435,10 @@ class ChartContainerComponent {
         this._observer.disconnect();
     }
     getTranslate(axis, size) {
-        return combineLatest([this.xMap, this.yMap]).pipe(withLatestFrom(this.config), map((data) => {
-            const [[x, y], config] = data;
-            const xAxesArray = [...x.values()];
-            const yAxesArray = [...y.values()];
+        return this.scales.pipe(withLatestFrom(this.config), map((data) => {
+            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));
@@ -2646,8 +2472,8 @@ class ChartContainerComponent {
         return item.value.index;
     }
     click(event, xScales, yScales) {
-        const x = xScales.get(0);
-        const y = yScales.get(0);
+        const x = xScales.get(0).scale;
+        const y = yScales.get(0).scale;
         this._svc.emitChartClick({
             event: event,
             target: {
@@ -2657,8 +2483,8 @@ class ChartContainerComponent {
         });
     }
     contextMenu(event, xScales, yScales) {
-        const x = xScales.get(0);
-        const y = yScales.get(0);
+        const x = xScales.get(0).scale;
+        const y = yScales.get(0).scale;
         this._svc.emitChartContextMenu({
             event: event,
             target: {
@@ -2675,10 +2501,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  yMap: yMap | async,\n  xMap: xMap | 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.xMap.size === data.config?.xAxis?.length && data.yMap.size === data.config?.yAxis?.length\">\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        <ng-container *ngFor=\"let item of data.yMap | 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.yMap.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.xMap | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.xMap.size === data.config?.xAxis?.length && data.yMap.size === data.config?.yAxis?.length\">\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.xMap.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.xMap.size === data.config?.xAxis?.length && data.yMap.size === data.config?.yAxis?.length\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [brushScale]=\"data.brushScale\"\n      [scale]=\"data.brushScale\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.xMap.get(0) : data.yMap.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.xMap, data.yMap)\"\n      (click)=\"click($event, data.xMap, data.yMap)\"\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.xMap.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.xMap.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.yMap.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.yMap.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.xMap.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.xMap.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.yMap.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.yMap.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  yMap: yMap | async,\n  xMap: xMap | 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.xMap.size === data.config?.xAxis?.length && data.yMap.size === data.config?.yAxis?.length\">\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        <ng-container *ngFor=\"let item of data.yMap | 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.yMap.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.xMap | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.xMap.size === data.config?.xAxis?.length && data.yMap.size === data.config?.yAxis?.length\">\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.xMap.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.xMap.size === data.config?.xAxis?.length && data.yMap.size === data.config?.yAxis?.length\">\n    <svg\n      tetaBrushable\n      tetaZoomable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [brushScale]=\"data.brushScale\"\n      [scale]=\"data.brushScale\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.xMap.get(0) : data.yMap.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.xMap, data.yMap)\"\n      (click)=\"click($event, data.xMap, data.yMap)\"\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.xMap.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.xMap.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.yMap.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.yMap.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.xMap.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.xMap.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.yMap.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.yMap.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 {
@@ -2740,14 +2566,14 @@ 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) => {
-            const [event, x, y, config] = data;
+            const [event, { x, y }, config] = data;
             const tooltipTracking = config?.tooltip?.tracking;
             if (tooltipTracking === TooltipTracking.y) {
                 const result = new Map();
                 y.forEach((value, key) => {
-                    result.set(key, value.invert(event.offsetY));
+                    result.set(key, value.scale.invert(event.offsetY));
                 });
                 this.pointerMove.emit({
                     event: event,
@@ -2757,7 +2583,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,