@wcardinal/wcardinal-ui 0.418.0 → 0.419.0

package/dist/wcardinal-ui.cjs.js

@@ -1,5 +1,5 @@
 /*
- Winter Cardinal UI v0.418.0
+ Winter Cardinal UI v0.419.0
  Copyright (C) 2019 Toshiba Corporation
  SPDX-License-Identifier: Apache-2.0
 
@@ -50099,6 +50099,9 @@ var DThemeWhiteChartPlotArea = /** @class */ (function (_super) {
     DThemeWhiteChartPlotArea.prototype.isOverflowMaskEnabled = function () {
         return true;
     };
+    DThemeWhiteChartPlotArea.prototype.getMargin = function () {
+        return 20;
+    };
     return DThemeWhiteChartPlotArea;
 }(DThemeWhiteBase));
 
@@ -61219,6 +61222,9 @@ var DThemeDarkChartPlotArea = /** @class */ (function (_super) {
     DThemeDarkChartPlotArea.prototype.isOverflowMaskEnabled = function () {
         return true;
     };
+    DThemeDarkChartPlotArea.prototype.getMargin = function () {
+        return 20;
+    };
     return DThemeDarkChartPlotArea;
 }(DThemeDarkBase));
 
@@ -78826,28 +78832,32 @@ var DChartAxisBaseBar = /** @class */ (function () {
         var index = this._index;
         var shape = this._shape;
         if (shape != null && container != null) {
+            var parser = this._parser;
             var plotArea = container.plotArea;
-            var plotAreaWidth = plotArea.width;
-            var plotAreaHeight = plotArea.height;
-            var offset = this._parser.padding * index;
+            var plotAreaBounds = plotArea.getAxisBounds(parser.position);
+            var plotAreaX = plotAreaBounds.x;
+            var plotAreaY = plotAreaBounds.y;
+            var plotAreaWidth = plotAreaBounds.width;
+            var plotAreaHeight = plotAreaBounds.height;
+            var offset = parser.padding * index;
             shape.lock(EShapeLockPart.UPLOADED);
             var position = shape.transform.position;
             var size = shape.size;
-            switch (this._parser.position) {
+            switch (parser.position) {
                 case DChartAxisPosition.TOP:
-                    position.set(plotAreaWidth * 0.5, 0 - offset);
+                    position.set(plotAreaX + plotAreaWidth * 0.5, plotAreaY - offset);
                     size.set(plotAreaWidth, 0);
                     break;
                 case DChartAxisPosition.BOTTOM:
-                    position.set(plotAreaWidth * 0.5, plotAreaHeight + offset);
+                    position.set(plotAreaX + plotAreaWidth * 0.5, plotAreaY + plotAreaHeight + offset);
                     size.set(plotAreaWidth, 0);
                     break;
                 case DChartAxisPosition.LEFT:
-                    position.set(0 - offset, plotAreaHeight * 0.5);
+                    position.set(plotAreaX - offset, plotAreaY + plotAreaHeight * 0.5);
                     size.set(0, plotAreaHeight);
                     break;
                 case DChartAxisPosition.RIGHT:
-                    position.set(plotAreaWidth + offset, plotAreaHeight * 0.5);
+                    position.set(plotAreaX + plotAreaWidth + offset, plotAreaY + plotAreaHeight * 0.5);
                     size.set(0, plotAreaHeight);
                     break;
             }
@@ -78859,6 +78869,7 @@ var DChartAxisBaseBar = /** @class */ (function () {
     DChartAxisBaseBar.prototype.destroy = function () {
         var shape = this._shape;
         if (shape != null) {
+            this._shape = undefined;
             shape.destroy();
         }
         this._index = 0;
@@ -78935,6 +78946,7 @@ var DChartAxisBaseGuideContainer = /** @class */ (function () {
         for (var i = 0, imax = list.length; i < imax; ++i) {
             list[i].destroy();
         }
+        list.length = 0;
         this._index = 0;
         this._container = undefined;
     };
@@ -79401,12 +79413,8 @@ var DChartAxisBaseTickMajorGridline = /** @class */ (function () {
     }
     Object.defineProperty(DChartAxisBaseTickMajorGridline.prototype, "shapes", {
         get: function () {
-            var result = this._shapes;
-            if (result == null) {
-                result = this.newShapes();
-                this._shapes = result;
-            }
-            return result;
+            var _a;
+            return ((_a = this._shapes) !== null && _a !== void 0 ? _a : (this._shapes = this.newShapes()));
         },
         enumerable: false,
         configurable: true
@@ -79465,6 +79473,8 @@ var DChartAxisBaseTickMajorGridline = /** @class */ (function () {
             for (var i = 0, imax = shapes.length; i < imax; ++i) {
                 shapes[i].destroy();
             }
+            shapes.length = 0;
+            this._shapes = undefined;
         }
         this._index = 0;
         this._container = undefined;
@@ -79480,12 +79490,8 @@ var DChartAxisBaseTickMajor = /** @class */ (function () {
     }
     Object.defineProperty(DChartAxisBaseTickMajor.prototype, "shapes", {
         get: function () {
-            var result = this._shapes;
-            if (result == null) {
-                result = this.newShapes();
-                this._shapes = result;
-            }
-            return result;
+            var _a;
+            return ((_a = this._shapes) !== null && _a !== void 0 ? _a : (this._shapes = this.newShapes()));
         },
         enumerable: false,
         configurable: true
@@ -79549,6 +79555,8 @@ var DChartAxisBaseTickMajor = /** @class */ (function () {
             for (var i = 0, imax = shapes.length; i < imax; ++i) {
                 shapes[i].destroy();
             }
+            shapes.length = 0;
+            this._shapes = undefined;
         }
         this._gridline.destroy();
         this._index = 0;
@@ -79564,12 +79572,8 @@ var DChartAxisBaseTickMinor = /** @class */ (function () {
     }
     Object.defineProperty(DChartAxisBaseTickMinor.prototype, "shapes", {
         get: function () {
-            var result = this._shapes;
-            if (result == null) {
-                result = this.newShapes();
-                this._shapes = result;
-            }
-            return result;
+            var _a;
+            return ((_a = this._shapes) !== null && _a !== void 0 ? _a : (this._shapes = this.newShapes()));
         },
         enumerable: false,
         configurable: true
@@ -79623,6 +79627,8 @@ var DChartAxisBaseTickMinor = /** @class */ (function () {
             for (var i = 0, imax = shapes.length; i < imax; ++i) {
                 shapes[i].destroy();
             }
+            shapes.length = 0;
+            this._shapes = undefined;
         }
         this._index = 0;
         this._container = undefined;
@@ -79714,6 +79720,11 @@ var DChartAxisBaseTickContainer = /** @class */ (function () {
         var minorShapes = this._minor.shapes;
         if (parser.tick.enable && container != null && majorShapes && minorShapes) {
             var plotArea = container.plotArea;
+            var plotAreaBounds = plotArea.getAxisBounds(parser.position);
+            var plotAreaX = plotAreaBounds.x;
+            var plotAreaY = plotAreaBounds.y;
+            var plotAreaWidth = plotAreaBounds.width;
+            var plotAreaHeight = plotAreaBounds.height;
             var transform = plotArea.container.transform.localTransform;
             var gridlineShapes = this._major.gridline.shapes;
             var offset = parser.padding * this._index;
@@ -79729,8 +79740,7 @@ var DChartAxisBaseTickContainer = /** @class */ (function () {
                         var domainVisible = this.getDomainVisible(plotArea, coordinate, work);
                         var domainVisibleFrom = domainVisible.from;
                         var domainVisibleTo = domainVisible.to;
-                        var plotAreaHeight = plotArea.height;
-                        return this.updateX(domainFrom, domainTo, domainVisibleFrom, domainVisibleTo, coordinate, majorShapes, minorShapes, gridlineShapes, 0 - offset, transform, plotAreaHeight);
+                        return this.updateX(domainFrom, domainTo, domainVisibleFrom, domainVisibleTo, coordinate, majorShapes, minorShapes, gridlineShapes, plotAreaY - offset, transform, plotAreaY, plotAreaHeight);
                     }
                     break;
                 case DChartAxisPosition.BOTTOM:
@@ -79742,8 +79752,7 @@ var DChartAxisBaseTickContainer = /** @class */ (function () {
                         var domainVisible = this.getDomainVisible(plotArea, coordinate, work);
                         var domainVisibleFrom = domainVisible.from;
                         var domainVisibleTo = domainVisible.to;
-                        var plotAreaHeight = plotArea.height;
-                        return this.updateX(domainFrom, domainTo, domainVisibleFrom, domainVisibleTo, coordinate, majorShapes, minorShapes, gridlineShapes, plotAreaHeight + offset, transform, plotAreaHeight);
+                        return this.updateX(domainFrom, domainTo, domainVisibleFrom, domainVisibleTo, coordinate, majorShapes, minorShapes, gridlineShapes, plotAreaY + plotAreaHeight + offset, transform, plotAreaY, plotAreaHeight);
                     }
                     break;
                 case DChartAxisPosition.LEFT:
@@ -79755,8 +79764,7 @@ var DChartAxisBaseTickContainer = /** @class */ (function () {
                         var rangeVisible = this.getRangeVisible(plotArea, coordinate, work);
                         var rangeVisibleFrom = rangeVisible.from;
                         var rangeVisibleTo = rangeVisible.to;
-                        var plotAreaWidth = plotArea.width;
-                        return this.updateY(rangeFrom, rangeTo, rangeVisibleFrom, rangeVisibleTo, coordinate, majorShapes, minorShapes, gridlineShapes, 0 - offset, transform, plotAreaWidth);
+                        return this.updateY(rangeFrom, rangeTo, rangeVisibleFrom, rangeVisibleTo, coordinate, majorShapes, minorShapes, gridlineShapes, plotAreaX - offset, transform, plotAreaX, plotAreaWidth);
                     }
                     break;
                 case DChartAxisPosition.RIGHT:
@@ -79768,8 +79776,7 @@ var DChartAxisBaseTickContainer = /** @class */ (function () {
                         var rangeVisible = this.getRangeVisible(plotArea, coordinate, work);
                         var rangeVisibleFrom = rangeVisible.from;
                         var rangeVisibleTo = rangeVisible.to;
-                        var plotAreaWidth = plotArea.width;
-                        return this.updateY(rangeFrom, rangeTo, rangeVisibleFrom, rangeVisibleTo, coordinate, majorShapes, minorShapes, gridlineShapes, plotAreaWidth + offset, transform, plotAreaWidth);
+                        return this.updateY(rangeFrom, rangeTo, rangeVisibleFrom, rangeVisibleTo, coordinate, majorShapes, minorShapes, gridlineShapes, plotAreaX + plotAreaWidth + offset, transform, plotAreaX, plotAreaWidth);
                     }
                     break;
             }
@@ -79777,7 +79784,7 @@ var DChartAxisBaseTickContainer = /** @class */ (function () {
         return false;
     };
     DChartAxisBaseTickContainer.prototype.getDomain = function (plotArea, coordinate, result) {
-        var bounds = plotArea.getBoundsInContainer();
+        var bounds = plotArea.getContainerBounds();
         var transform = coordinate.transform;
         return result.set(coordinate.unmap(transform.unmap(bounds.x)), coordinate.unmap(transform.unmap(bounds.x + bounds.width)));
     };
@@ -79785,14 +79792,14 @@ var DChartAxisBaseTickContainer = /** @class */ (function () {
         return result;
     };
     DChartAxisBaseTickContainer.prototype.getRange = function (plotArea, coordinate, result) {
-        var bounds = plotArea.getBoundsInContainer();
+        var bounds = plotArea.getContainerBounds();
         var transform = coordinate.transform;
         return result.set(coordinate.unmap(transform.unmap(bounds.y)), coordinate.unmap(transform.unmap(bounds.y + bounds.height)));
     };
     DChartAxisBaseTickContainer.prototype.getRangeVisible = function (plotArea, coordinate, result) {
         return result;
     };
-    DChartAxisBaseTickContainer.prototype.updateX = function (domainFrom, domainTo, domainVisibleFrom, domainVisibleTo, coordinate, majorShapes, minorShapes, gridlineShapes, shapePositionY, transform, plotAreaHeight) {
+    DChartAxisBaseTickContainer.prototype.updateX = function (domainFrom, domainTo, domainVisibleFrom, domainVisibleTo, coordinate, majorShapes, minorShapes, gridlineShapes, shapePositionY, transform, plotAreaY, plotAreaHeight) {
         var tick = this._parser.tick;
         var majorTick = tick.major;
         var majorCount = majorTick.count;
@@ -79819,7 +79826,7 @@ var DChartAxisBaseTickContainer = /** @class */ (function () {
                 var majorTickStep = majorTicks[imajorTick + 2];
                 this.showMajor(majorShape, majotTickPositionX, shapePositionY, majorFormatter === null || majorFormatter === void 0 ? void 0 : majorFormatter.format(majorTickPosition, majorTickStep));
                 if (i < gridlineShapes.length) {
-                    this.showMajorGridline(gridlineShapes[i], majorTickPosition, majotTickPositionX, plotAreaHeight * 0.5, 0, plotAreaHeight);
+                    this.showMajorGridline(gridlineShapes[i], majorTickPosition, majotTickPositionX, plotAreaY + plotAreaHeight * 0.5, 0, plotAreaHeight);
                 }
             }
             else {
@@ -79845,7 +79852,7 @@ var DChartAxisBaseTickContainer = /** @class */ (function () {
         }
         return true;
     };
-    DChartAxisBaseTickContainer.prototype.updateY = function (rangeFrom, rangeTo, rangeVisibleFrom, rangeVisibleTo, coordinate, majorShapes, minorShapes, gridlineShapes, shapePositionX, transform, plotAreaWidth) {
+    DChartAxisBaseTickContainer.prototype.updateY = function (rangeFrom, rangeTo, rangeVisibleFrom, rangeVisibleTo, coordinate, majorShapes, minorShapes, gridlineShapes, shapePositionX, transform, plotAreaX, plotAreaWidth) {
         var tick = this._parser.tick;
         var majorTick = tick.major;
         var majorCount = majorTick.count;
@@ -79872,7 +79879,7 @@ var DChartAxisBaseTickContainer = /** @class */ (function () {
                 var majorTickStep = majorTicks[imajorTick + 2];
                 this.showMajor(majorShape, shapePositionX, majotTickPositionY, majorFormatter === null || majorFormatter === void 0 ? void 0 : majorFormatter.format(majorTickPosition, majorTickStep));
                 if (i < gridlineShapes.length) {
-                    this.showMajorGridline(gridlineShapes[i], majorTickPosition, plotAreaWidth * 0.5, majotTickPositionY, plotAreaWidth, 0);
+                    this.showMajorGridline(gridlineShapes[i], majorTickPosition, plotAreaX + plotAreaWidth * 0.5, majotTickPositionY, plotAreaWidth, 0);
                 }
             }
             else {
@@ -80077,9 +80084,9 @@ var DChartAxisBase = /** @class */ (function () {
  * SPDX-License-Identifier: Apache-2.0
  */
 var DChartAxisContainerImpl = /** @class */ (function () {
-    function DChartAxisContainerImpl(plotArea, options) {
+    function DChartAxisContainerImpl(plotArea, container, options) {
         this._plotArea = plotArea;
-        this._container = new EShapeContainer();
+        this._container = container;
         this._list = new Map();
     }
     Object.defineProperty(DChartAxisContainerImpl.prototype, "container", {
@@ -80554,9 +80561,12 @@ var DChartAxisGuideSimple = /** @class */ (function () {
         var axis = this._axis;
         if (shape != null && container != null && axis != null) {
             var plotArea = container.plotArea;
+            var plotAreaBounds = plotArea.getAxisBounds(axis.position);
+            var plotAreaX = plotAreaBounds.x;
+            var plotAreaY = plotAreaBounds.y;
+            var plotAreaWidth = plotAreaBounds.width;
+            var plotAreaHeight = plotAreaBounds.height;
             var transform = plotArea.container.transform.localTransform;
-            var plotAreaWidth = plotArea.width;
-            var plotAreaHeight = plotArea.height;
             var offset = axis.padding * index;
             switch (axis.position) {
                 case DChartAxisPosition.TOP:
@@ -80567,10 +80577,10 @@ var DChartAxisGuideSimple = /** @class */ (function () {
                         work.set(coordinateX.transform.map(coordinateX.map(this._position)), 0);
                         transform.apply(work, work);
                         var x = work.x;
-                        shape.update(axis.position, x, plotAreaHeight * 0.5, this._isShown && 0 <= x && x <= plotAreaWidth, plotAreaWidth, plotAreaHeight, offset);
+                        shape.update(axis.position, x, plotAreaY + plotAreaHeight * 0.5, this._isShown && plotAreaX <= x && x <= plotAreaX + plotAreaWidth, plotAreaWidth, plotAreaHeight, offset);
                     }
                     else {
-                        shape.update(axis.position, 0, plotAreaHeight * 0.5, false, plotAreaWidth, plotAreaHeight, offset);
+                        shape.update(axis.position, plotAreaX, plotAreaY + plotAreaHeight * 0.5, false, plotAreaWidth, plotAreaHeight, offset);
                     }
                     break;
                 case DChartAxisPosition.LEFT:
@@ -80581,10 +80591,10 @@ var DChartAxisGuideSimple = /** @class */ (function () {
                         work.set(0, coordinateY.transform.map(coordinateY.map(this._position)));
                         transform.apply(work, work);
                         var y = work.y;
-                        shape.update(axis.position, plotAreaWidth * 0.5, y, this._isShown && 0 <= y && y <= plotAreaHeight, plotAreaWidth, plotAreaHeight, offset);
+                        shape.update(axis.position, plotAreaX + plotAreaWidth * 0.5, y, this._isShown && plotAreaY <= y && y <= plotAreaY + plotAreaHeight, plotAreaWidth, plotAreaHeight, offset);
                     }
                     else {
-                        shape.update(axis.position, plotAreaWidth * 0.5, 0, false, plotAreaWidth, plotAreaHeight, offset);
+                        shape.update(axis.position, plotAreaX + plotAreaWidth * 0.5, plotAreaY, false, plotAreaWidth, plotAreaHeight, offset);
                     }
                     break;
             }
@@ -80884,24 +80894,16 @@ var DChartCoordinateBase = /** @class */ (function () {
             var work = this._work;
             switch (this._direction) {
                 case DChartCoordinateDirection.X:
-                    this.getPixelDomain(plotArea, work);
+                    plotArea.getPixelDomain(work);
                     this.doFit_(work.from, work.to, this.toFitDomain(from, to, plotArea, work), result);
                     break;
                 case DChartCoordinateDirection.Y:
-                    this.getPixelRange(plotArea, work);
+                    plotArea.getPixelRange(work);
                     this.doFit_(work.from, work.to, this.toFitRange(from, to, plotArea, work), result);
                     break;
             }
         }
     };
-    DChartCoordinateBase.prototype.getPixelDomain = function (plotArea, result) {
-        var padding = plotArea.padding;
-        return result.set(padding.getLeft(), plotArea.width - padding.getRight());
-    };
-    DChartCoordinateBase.prototype.getPixelRange = function (plotArea, result) {
-        var padding = plotArea.padding;
-        return result.set(plotArea.height - padding.getBottom(), padding.getTop());
-    };
     DChartCoordinateBase.prototype.toFitDomain = function (from, to, plotArea, result) {
         if (from == null) {
             from = this._from;
@@ -81534,6 +81536,119 @@ var DChartOverview = /** @class */ (function (_super) {
     return DChartOverview;
 }(DBase));
 
+/*
+ * Copyright (C) 2019 Toshiba Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var DChartPlotAreaBase = /** @class */ (function (_super) {
+    __extends(DChartPlotAreaBase, _super);
+    function DChartPlotAreaBase(chart, options) {
+        var _this = _super.call(this, options) || this;
+        _this._isContainerBoundsDirty = true;
+        _this._containerBounds = new pixi_js.Rectangle();
+        _this._workPoint = new pixi_js.Point();
+        _this._pixelBounds = new pixi_js.Rectangle();
+        _this._chart = chart;
+        _this._blendStartTime = 0;
+        _this._blendDuration = 1000;
+        _this._blendTimeout = null;
+        _this._onBlendBound = function () {
+            _this.onBlend();
+        };
+        _this._isViewDirty = true;
+        _this._view = _this.newView(options);
+        return _this;
+    }
+    DChartPlotAreaBase.prototype.onResize = function (newWidth, newHeight, oldWidth, oldHeight) {
+        this._isViewDirty = true;
+        this._isContainerBoundsDirty = true;
+        _super.prototype.onResize.call(this, newWidth, newHeight, oldWidth, oldHeight);
+    };
+    Object.defineProperty(DChartPlotAreaBase.prototype, "chart", {
+        get: function () {
+            return this._chart;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DChartPlotAreaBase.prototype, "view", {
+        get: function () {
+            return this._view;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DChartPlotAreaBase.prototype.onWheel = function (e, deltas, global) {
+        var vresult = this._view.onWheel(e, deltas, global);
+        var sresult = _super.prototype.onWheel.call(this, e, deltas, global);
+        return vresult || sresult;
+    };
+    DChartPlotAreaBase.prototype.onDblClick = function (e, interactionManager) {
+        var vresult = this._view.onDblClick(e, interactionManager);
+        var sresult = _super.prototype.onDblClick.call(this, e, interactionManager);
+        return vresult || sresult;
+    };
+    DChartPlotAreaBase.prototype.onDown = function (e) {
+        this._view.onDown(e);
+        _super.prototype.onDown.call(this, e);
+    };
+    DChartPlotAreaBase.prototype.render = function (renderer) {
+        if (this._isViewDirty) {
+            this._isViewDirty = false;
+            this.onViewDirty();
+        }
+        _super.prototype.render.call(this, renderer);
+    };
+    DChartPlotAreaBase.prototype.getPixelDomain = function (result) {
+        var padding = this.padding;
+        return result.set(padding.getLeft(), this.width - padding.getRight());
+    };
+    DChartPlotAreaBase.prototype.getPixelRange = function (result) {
+        var padding = this.padding;
+        return result.set(this.height - padding.getBottom(), padding.getTop());
+    };
+    DChartPlotAreaBase.prototype.getPixelBounds = function () {
+        var result = this._pixelBounds;
+        result.x = 0;
+        result.y = 0;
+        result.width = this.width;
+        result.height = this.height;
+        return result;
+    };
+    DChartPlotAreaBase.prototype.getAxisBounds = function (position) {
+        return this.getPixelBounds();
+    };
+    DChartPlotAreaBase.prototype.getSelectionBoundsX = function () {
+        return this.getPixelBounds();
+    };
+    DChartPlotAreaBase.prototype.getSelectionBoundsY = function () {
+        return this.getPixelBounds();
+    };
+    DChartPlotAreaBase.prototype.getContainerBounds = function () {
+        var result = this._containerBounds;
+        if (this._isContainerBoundsDirty) {
+            this._isContainerBoundsDirty = false;
+            var container = this.container;
+            container.updateTransform();
+            var transform = container.transform.localTransform;
+            var work = this._workPoint;
+            work.set(0, 0);
+            transform.applyInverse(work, work);
+            result.x = work.x;
+            result.y = work.y;
+            work.set(this.width, this.height);
+            transform.applyInverse(work, work);
+            result.width = work.x - result.x;
+            result.height = work.y - result.y;
+        }
+        return result;
+    };
+    DChartPlotAreaBase.prototype.getType = function () {
+        return "DChartPlotArea";
+    };
+    return DChartPlotAreaBase;
+}(DBase));
+
 /*
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
@@ -81810,11 +81925,10 @@ var DChartSeriesStrokeImpl = /** @class */ (function () {
  */
 var DChartSeriesContainerImpl = /** @class */ (function () {
     function DChartSeriesContainerImpl(plotArea, options) {
-        var _a;
         this._plotArea = plotArea;
         this._domain = new DChartRegionImpl(NaN, NaN);
         this._range = new DChartRegionImpl(NaN, NaN);
-        this._selection = (_a = options === null || options === void 0 ? void 0 : options.selection) !== null && _a !== void 0 ? _a : null;
+        this._selection = null;
         this._fill = new DChartSeriesFillImpl(options === null || options === void 0 ? void 0 : options.fill);
         this._stroke = new DChartSeriesStrokeImpl(options === null || options === void 0 ? void 0 : options.stroke);
         this._size = new DChartSeriesPointImpl(options === null || options === void 0 ? void 0 : options.size);
@@ -81848,6 +81962,9 @@ var DChartSeriesContainerImpl = /** @class */ (function () {
         get: function () {
             return this._selection;
         },
+        set: function (selection) {
+            this._selection = selection;
+        },
         enumerable: false,
         configurable: true
     });
@@ -81996,202 +82113,1108 @@ var DChartSeriesContainerImpl = /** @class */ (function () {
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
  */
-var DChartPlotAreaImpl = /** @class */ (function (_super) {
-    __extends(DChartPlotAreaImpl, _super);
-    function DChartPlotAreaImpl(chart, options) {
-        var _this = _super.call(this, options) || this;
-        _this._chart = chart;
-        _this._blendStartTime = 0;
-        _this._blendDuration = 1000;
-        _this._blendTimeout = null;
-        _this._onBlendBound = function () {
-            _this.onBlend();
-        };
-        return _this;
-    }
-    DChartPlotAreaImpl.prototype.init = function (options) {
-        var _this = this;
+var DChartPlotAreaOnefold = /** @class */ (function (_super) {
+    __extends(DChartPlotAreaOnefold, _super);
+    function DChartPlotAreaOnefold(chart, options) {
         var _a;
-        _super.prototype.init.call(this, options);
-        this._isBoundsInContainerDirty = true;
-        this._boundsInContainer = new pixi_js.Rectangle();
-        this._workPoint = new pixi_js.Point();
+        var _this = _super.call(this, chart, options) || this;
         // Container
         var container = new DChartPlotAreaContainer(function () {
             _this._isViewDirty = true;
-            _this._isBoundsInContainerDirty = true;
+            _this._isContainerBoundsDirty = true;
             DApplications.update(_this);
         });
-        this._container = container;
-        this.addChild(container);
+        _this._container = container;
+        _this.addChild(container);
+        // Overflow mask
+        var mask = (_a = options === null || options === void 0 ? void 0 : options.mask) !== null && _a !== void 0 ? _a : _this.theme.isOverflowMaskEnabled();
+        if (mask) {
+            container.mask = _this.getOverflowMask();
+        }
         // View
-        this._isViewDirty = true;
-        this._view = new DViewImpl(this, function () { return container; }, options === null || options === void 0 ? void 0 : options.view);
-        // Coordinate container
-        this._coordinate = new DChartCoordinateContainerImpl(this, options === null || options === void 0 ? void 0 : options.coordinate);
-        // Series container
-        var series = new DChartSeriesContainerImpl(this, options === null || options === void 0 ? void 0 : options.series);
-        this._series = series;
-        // Axis container
-        var axis = new DChartAxisContainerImpl(this, options === null || options === void 0 ? void 0 : options.axis);
-        this._axis = axis;
-        this.addChild(axis.container);
+        _this._isViewDirty = true;
+        _this._view = new DViewImpl(_this, function () { return container; }, options === null || options === void 0 ? void 0 : options.view);
+        // Coordinate
+        _this._coordinate = new DChartCoordinateContainerImpl(_this, options === null || options === void 0 ? void 0 : options.coordinate);
+        // Series
+        var seriesOptions = options === null || options === void 0 ? void 0 : options.series;
+        var series = new DChartSeriesContainerImpl(_this, seriesOptions);
+        _this._series = series;
+        // Axis
+        var axisOptions = options === null || options === void 0 ? void 0 : options.axis;
+        var axis = new DChartAxisContainerImpl(_this, new EShapeContainer(), axisOptions);
+        _this._axis = axis;
+        _this.addChild(axis.container);
+        // Add series
+        _this.addSeries(series, seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions.list);
+        // Add axes
+        _this.addAxes(axis, axisOptions === null || axisOptions === void 0 ? void 0 : axisOptions.list);
         // Selection
-        var selection = series.selection;
-        if (selection) {
+        var selection = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions.selection;
+        if (selection != null) {
+            series.selection = selection;
             selection.bind(series);
         }
-        // Overflow mask
-        var mask = (_a = options === null || options === void 0 ? void 0 : options.mask) !== null && _a !== void 0 ? _a : this.theme.isOverflowMaskEnabled();
-        if (mask) {
-            container.mask = this.getOverflowMask();
+        return _this;
+    }
+    DChartPlotAreaOnefold.prototype.getOverflowMask = function () {
+        if (this._overflowMask == null) {
+            this._overflowMask = new DBaseOverflowMask(this);
+            this.reflowable.add(this._overflowMask);
+            this.toDirty();
         }
-        // Add series and axes
-        if (options != null) {
-            // Series
-            var s = options.series;
-            if (s != null) {
-                var list = s.list;
-                if (list) {
-                    var listLength = list.length;
-                    if (0 < listLength) {
-                        for (var i = 0; i < listLength; ++i) {
-                            series.add(list[i]);
-                        }
-                        series.update();
-                    }
+        return this._overflowMask;
+    };
+    DChartPlotAreaOnefold.prototype.addSeries = function (series, list) {
+        if (list != null) {
+            var listLength = list.length;
+            if (0 < listLength) {
+                for (var i = 0; i < listLength; ++i) {
+                    series.add(list[i]);
                 }
+                series.update();
             }
-            // Axes
-            var a = options.axis;
-            if (a != null) {
-                var list = a.list;
-                if (list) {
-                    for (var i = 0, imax = list.length; i < imax; ++i) {
-                        axis.add(list[i]);
-                    }
+        }
+    };
+    DChartPlotAreaOnefold.prototype.addAxes = function (axis, list) {
+        if (list != null) {
+            for (var i = 0, imax = list.length; i < imax; ++i) {
+                axis.add(list[i]);
+            }
+        }
+    };
+    Object.defineProperty(DChartPlotAreaOnefold.prototype, "coordinate", {
+        get: function () {
+            return this._coordinate;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DChartPlotAreaOnefold.prototype, "series", {
+        get: function () {
+            return this._series;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DChartPlotAreaOnefold.prototype, "container", {
+        get: function () {
+            return this._container;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DChartPlotAreaOnefold.prototype, "axis", {
+        get: function () {
+            return this._axis;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DChartPlotAreaOnefold.prototype.newView = function (options) {
+        var _this = this;
+        return new DViewImpl(this, function () { return _this._container; }, options === null || options === void 0 ? void 0 : options.view);
+    };
+    DChartPlotAreaOnefold.prototype.onViewDirty = function () {
+        this._coordinate.fit();
+        this._axis.onRender();
+        this._series.onRender();
+    };
+    DChartPlotAreaOnefold.prototype.fit = function (duration, domainFrom, domainTo, rangeFrom, rangeTo) {
+        var coordinate = this._coordinate;
+        var axis = this._axis;
+        var series = this._series;
+        if (duration != null && duration <= 0) {
+            coordinate.fit(domainFrom, domainTo, rangeFrom, rangeTo);
+            axis.update();
+            series.update();
+        }
+        else {
+            this._blendDuration = duration != null ? duration : 200;
+            this._blendStartTime = Date.now();
+            coordinate.mark(domainFrom, domainTo, rangeFrom, rangeTo);
+            var blendTimeout = this._blendTimeout;
+            if (blendTimeout != null) {
+                window.clearTimeout(blendTimeout);
+            }
+            this._blendTimeout = window.setTimeout(this._onBlendBound, 0);
+        }
+        return this;
+    };
+    DChartPlotAreaOnefold.prototype.onBlend = function () {
+        var now = Date.now();
+        var ratio = (now - this._blendStartTime) / this._blendDuration;
+        if (ratio < 1) {
+            this._blendTimeout = window.setTimeout(this._onBlendBound, 0);
+        }
+        else {
+            this._blendTimeout = null;
+            ratio = 1;
+        }
+        this._coordinate.blend(DAnimationTimings.ELASTIC(ratio));
+        this._axis.update();
+        this._series.update();
+    };
+    DChartPlotAreaOnefold.prototype.destroy = function () {
+        this._container.destroy();
+        this._series.destroy();
+        this._axis.destroy();
+    };
+    return DChartPlotAreaOnefold;
+}(DChartPlotAreaBase));
+
+/*
+ * Copyright (C) 2019 Toshiba Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var DChartPlotAreaTwofoldAxisContainer = /** @class */ (function () {
+    function DChartPlotAreaTwofoldAxisContainer(plotArea, container, primary, secondary) {
+        this._plotArea = plotArea;
+        this._container = container;
+        this._list = new Map();
+        this._primary = primary;
+        this._secondary = secondary;
+    }
+    Object.defineProperty(DChartPlotAreaTwofoldAxisContainer.prototype, "container", {
+        get: function () {
+            return this._container;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DChartPlotAreaTwofoldAxisContainer.prototype, "plotArea", {
+        get: function () {
+            return this._plotArea;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DChartPlotAreaTwofoldAxisContainer.prototype.add = function (axis) {
+        var list = this._list;
+        var axes = list.get(axis.position);
+        if (axes == null) {
+            axes = [];
+            list.set(axis.position, axes);
+        }
+        axes.push(axis);
+        axis.bind(this, axes.length - 1);
+    };
+    DChartPlotAreaTwofoldAxisContainer.prototype.get = function (position, index) {
+        var primary = this._primary;
+        var primarySize = primary.size(position);
+        if (0 <= index && index < primarySize) {
+            return primary.get(position, index);
+        }
+        var secondary = this._secondary;
+        var secondarySize = secondary.size(position);
+        if (primarySize <= index && index < primarySize + secondarySize) {
+            return secondary.get(position, index);
+        }
+        var list = this._list;
+        var axes = list.get(toEnum(position, DChartAxisPosition));
+        if (axes) {
+            if (primarySize + secondarySize <= index &&
+                index < primarySize + secondarySize + axes.length) {
+                return axes[index - primarySize - secondarySize];
+            }
+        }
+        return null;
+    };
+    DChartPlotAreaTwofoldAxisContainer.prototype.indexOf = function (axis) {
+        var primary = this._primary;
+        var result = primary.indexOf(axis);
+        if (0 <= result) {
+            return result;
+        }
+        result = this._secondary.indexOf(axis);
+        if (0 <= result) {
+            return primary.size(axis.position) + result;
+        }
+        var list = this._list;
+        var axes = list.get(axis.position);
+        if (axes) {
+            return axes.indexOf(axis);
+        }
+        return -1;
+    };
+    DChartPlotAreaTwofoldAxisContainer.prototype.clear = function (position) {
+        this._primary.clear(position);
+        this._secondary.clear(position);
+        var list = this._list;
+        var axes = list.get(toEnum(position, DChartAxisPosition));
+        if (axes) {
+            for (var i = 0, imax = axes.length; i < imax; ++i) {
+                axes[i].destroy();
+            }
+            axes.length = 0;
+        }
+        return this;
+    };
+    DChartPlotAreaTwofoldAxisContainer.prototype.size = function (position) {
+        var list = this._list;
+        var axes = list.get(toEnum(position, DChartAxisPosition));
+        return (this._primary.size(position) +
+            this._secondary.size(position) +
+            (axes != null ? axes.length : 0));
+    };
+    DChartPlotAreaTwofoldAxisContainer.prototype.update = function () {
+        this._primary.update();
+        this._secondary.update();
+        this._list.forEach(function (axes) {
+            for (var i = 0, imax = axes.length; i < imax; ++i) {
+                axes[i].update();
+            }
+        });
+    };
+    DChartPlotAreaTwofoldAxisContainer.prototype.onRender = function () {
+        this._primary.onRender();
+        this._secondary.onRender();
+        this._list.forEach(function (axes) {
+            for (var i = 0, imax = axes.length; i < imax; ++i) {
+                axes[i].onRender();
+            }
+        });
+    };
+    DChartPlotAreaTwofoldAxisContainer.prototype.destroy = function () {
+        this._primary.destroy();
+        this._secondary.destroy();
+        this._list.forEach(function (axes) {
+            for (var i = 0, imax = axes.length; i < imax; ++i) {
+                axes[i].destroy();
+            }
+            axes.length = 0;
+        });
+    };
+    return DChartPlotAreaTwofoldAxisContainer;
+}());
+
+/*
+ * Copyright (C) 2019 Toshiba Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var DChartPlotAreaTwofoldCoorinateContainerSub = /** @class */ (function () {
+    function DChartPlotAreaTwofoldCoorinateContainerSub(container, primary, secondary) {
+        this._container = container;
+        this._primary = primary;
+        this._secondary = secondary;
+    }
+    Object.defineProperty(DChartPlotAreaTwofoldCoorinateContainerSub.prototype, "container", {
+        get: function () {
+            return this._container;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DChartPlotAreaTwofoldCoorinateContainerSub.prototype.add = function (coordinate, index) {
+        if (index != null) {
+            var primary = this._primary;
+            var primarySize = primary.size();
+            if (index < primarySize) {
+                if (0 <= index) {
+                    primary.add(coordinate, index);
                 }
             }
+            else {
+                this._secondary.add(coordinate, index - primarySize);
+            }
+            return this;
         }
+        else {
+            this._secondary.add(coordinate);
+        }
+        return this;
     };
-    DChartPlotAreaImpl.prototype.onResize = function (newWidth, newHeight, oldWidth, oldHeight) {
-        this._isViewDirty = true;
-        this._isBoundsInContainerDirty = true;
-        _super.prototype.onResize.call(this, newWidth, newHeight, oldWidth, oldHeight);
+    DChartPlotAreaTwofoldCoorinateContainerSub.prototype.get = function (index) {
+        var primary = this._primary;
+        var primarySize = primary.size();
+        if (0 <= index && index < primarySize) {
+            return primary.get(index);
+        }
+        var secondary = this._secondary;
+        var secondarySize = secondary.size();
+        if (primarySize <= index && index < primarySize + secondarySize) {
+            secondary.get(index - primarySize);
+        }
+        return null;
     };
-    DChartPlotAreaImpl.prototype.getOverflowMask = function () {
-        if (this._overflowMask == null) {
-            this._overflowMask = new DBaseOverflowMask(this);
-            this.reflowable.add(this._overflowMask);
-            this.toDirty();
+    DChartPlotAreaTwofoldCoorinateContainerSub.prototype.indexOf = function (coordinate) {
+        var result = this._primary.indexOf(coordinate);
+        if (0 <= result) {
+            return result;
         }
-        return this._overflowMask;
+        result = this._secondary.indexOf(coordinate);
+        if (0 <= result) {
+            return this._primary.size() + result;
+        }
+        return -1;
     };
-    Object.defineProperty(DChartPlotAreaImpl.prototype, "chart", {
+    DChartPlotAreaTwofoldCoorinateContainerSub.prototype.remove = function (coordinateOrIndex) {
+        if (isNumber(coordinateOrIndex)) {
+            var index = coordinateOrIndex;
+            var primary = this._primary;
+            var primarySize = primary.size();
+            if (0 <= index && index < primarySize) {
+                return primary.remove(index);
+            }
+            var secondary = this._secondary;
+            var secondarySize = secondary.size();
+            if (primarySize <= index && index < primarySize + secondarySize) {
+                secondary.remove(index - primarySize);
+            }
+        }
+        else {
+            var coordinate = coordinateOrIndex;
+            var result = this._primary.remove(coordinate);
+            if (result != null) {
+                return result;
+            }
+            result = this._secondary.remove(coordinate);
+            if (result != null) {
+                return result;
+            }
+        }
+        return null;
+    };
+    DChartPlotAreaTwofoldCoorinateContainerSub.prototype.clear = function () {
+        this._primary.clear();
+        this._secondary.clear();
+        return this;
+    };
+    DChartPlotAreaTwofoldCoorinateContainerSub.prototype.destroy = function () {
+        return this.clear();
+    };
+    DChartPlotAreaTwofoldCoorinateContainerSub.prototype.size = function () {
+        return this._primary.size() + this._secondary.size();
+    };
+    DChartPlotAreaTwofoldCoorinateContainerSub.prototype.fit = function (from, to) {
+        this._primary.fit(from, to);
+        this._secondary.fit(from, to);
+        return this;
+    };
+    DChartPlotAreaTwofoldCoorinateContainerSub.prototype.mark = function (from, to) {
+        this._primary.mark(from, to);
+        this._secondary.mark(from, to);
+        return this;
+    };
+    DChartPlotAreaTwofoldCoorinateContainerSub.prototype.blend = function (ratio) {
+        this._primary.blend(ratio);
+        this._secondary.blend(ratio);
+        return this;
+    };
+    return DChartPlotAreaTwofoldCoorinateContainerSub;
+}());
+
+/*
+ * Copyright (C) 2019 Toshiba Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var DChartPlotAreaTwofoldCoorinateContainer = /** @class */ (function () {
+    function DChartPlotAreaTwofoldCoorinateContainer(plotArea, primary, secondary) {
+        this._plotArea = plotArea;
+        this._primary = primary;
+        this._secondary = secondary;
+        this._x = new DChartPlotAreaTwofoldCoorinateContainerSub(this, primary.x, secondary.x);
+        this._y = new DChartPlotAreaTwofoldCoorinateContainerSub(this, primary.y, secondary.y);
+    }
+    Object.defineProperty(DChartPlotAreaTwofoldCoorinateContainer.prototype, "x", {
         get: function () {
-            return this._chart;
+            return this._x;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DChartPlotAreaImpl.prototype, "coordinate", {
+    Object.defineProperty(DChartPlotAreaTwofoldCoorinateContainer.prototype, "y", {
         get: function () {
-            return this._coordinate;
+            return this._y;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DChartPlotAreaImpl.prototype, "series", {
+    Object.defineProperty(DChartPlotAreaTwofoldCoorinateContainer.prototype, "plotArea", {
         get: function () {
-            return this._series;
+            return this._plotArea;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DChartPlotAreaImpl.prototype, "container", {
+    DChartPlotAreaTwofoldCoorinateContainer.prototype.fit = function (domainFrom, domainTo, rangeFrom, rangeTo) {
+        this._x.fit(domainFrom, domainTo);
+        this._y.fit(rangeFrom, rangeTo);
+        return this;
+    };
+    DChartPlotAreaTwofoldCoorinateContainer.prototype.mark = function (domainFrom, domainTo, rangeFrom, rangeTo) {
+        this._x.mark(domainFrom, domainTo);
+        this._y.mark(rangeFrom, rangeTo);
+        return this;
+    };
+    DChartPlotAreaTwofoldCoorinateContainer.prototype.blend = function (ratio) {
+        this._x.blend(ratio);
+        this._y.blend(ratio);
+        return this;
+    };
+    return DChartPlotAreaTwofoldCoorinateContainer;
+}());
+
+/*
+ * Copyright (C) 2019 Toshiba Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var DChartPlotAreaTwofoldOverflowMaskPrimary = /** @class */ (function (_super) {
+    __extends(DChartPlotAreaTwofoldOverflowMaskPrimary, _super);
+    function DChartPlotAreaTwofoldOverflowMaskPrimary() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DChartPlotAreaTwofoldOverflowMaskPrimary.prototype.onReflow = function (base, width, height) {
+        if (this._isInitialized && this._width === width && this._height === height) {
+            return;
+        }
+        this._isInitialized = true;
+        this._width = width;
+        this._height = height;
+        var hh = height * 0.5;
+        this.clear();
+        this.beginFill(0xffffff, 1);
+        this.drawRect(0, 0, width, hh);
+        this.endFill();
+    };
+    return DChartPlotAreaTwofoldOverflowMaskPrimary;
+}(DBaseOverflowMaskSimple));
+
+/*
+ * Copyright (C) 2019 Toshiba Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var DChartPlotAreaTwofoldOverflowMaskSecondary = /** @class */ (function (_super) {
+    __extends(DChartPlotAreaTwofoldOverflowMaskSecondary, _super);
+    function DChartPlotAreaTwofoldOverflowMaskSecondary() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DChartPlotAreaTwofoldOverflowMaskSecondary.prototype.onReflow = function (base, width, height) {
+        if (this._isInitialized && this._width === width && this._height === height) {
+            return;
+        }
+        this._isInitialized = true;
+        this._width = width;
+        this._height = height;
+        var hh = height * 0.5;
+        this.clear();
+        this.beginFill(0xffffff, 1);
+        this.drawRect(0, hh, width, hh);
+        this.endFill();
+    };
+    return DChartPlotAreaTwofoldOverflowMaskSecondary;
+}(DBaseOverflowMaskSimple));
+
+/*
+ * Copyright (C) 2019 Toshiba Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var DChartPlotAreaTwofoldSeriesContainer = /** @class */ (function () {
+    function DChartPlotAreaTwofoldSeriesContainer(plotArea, primary, secondary) {
+        this._plotArea = plotArea;
+        this._primary = primary;
+        this._secondary = secondary;
+        this._domain = new DChartRegionImpl(NaN, NaN);
+        this._range = new DChartRegionImpl(NaN, NaN);
+    }
+    DChartPlotAreaTwofoldSeriesContainer.prototype.newFill = function (index, options) {
+        return this._secondary.newFill(index, options);
+    };
+    DChartPlotAreaTwofoldSeriesContainer.prototype.newStroke = function (index, options) {
+        return this._secondary.newStroke(index, options);
+    };
+    DChartPlotAreaTwofoldSeriesContainer.prototype.newSize = function (index, options, x, y) {
+        return this._secondary.newSize(index, options, x, y);
+    };
+    DChartPlotAreaTwofoldSeriesContainer.prototype.newOffset = function (index, options, x, y) {
+        return this._secondary.newOffset(index, options, x, y);
+    };
+    DChartPlotAreaTwofoldSeriesContainer.prototype.newPadding = function (index, options) {
+        return this._secondary.newPadding(index, options);
+    };
+    Object.defineProperty(DChartPlotAreaTwofoldSeriesContainer.prototype, "plotArea", {
+        get: function () {
+            return this._plotArea;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DChartPlotAreaTwofoldSeriesContainer.prototype, "selection", {
+        get: function () {
+            return this._secondary.selection;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DChartPlotAreaTwofoldSeriesContainer.prototype.update = function () {
+        this._primary.update();
+        this._secondary.update();
+        var selection = this._secondary.selection;
+        if (selection) {
+            selection.update();
+        }
+    };
+    DChartPlotAreaTwofoldSeriesContainer.prototype.onRender = function () {
+        this._primary.onRender();
+        this._secondary.onRender();
+        var selection = this._secondary.selection;
+        if (selection) {
+            selection.onRender();
+        }
+    };
+    DChartPlotAreaTwofoldSeriesContainer.prototype.add = function (series) {
+        this._secondary.add(series);
+    };
+    DChartPlotAreaTwofoldSeriesContainer.prototype.get = function (index) {
+        var primary = this._primary;
+        var primarySize = primary.size();
+        if (0 <= index && index < primarySize) {
+            return primary.get(index);
+        }
+        var secondary = this._secondary;
+        var secondarySize = secondary.size();
+        if (primarySize <= index && index < primarySize + secondarySize) {
+            return secondary.get(index - primarySize);
+        }
+        return null;
+    };
+    DChartPlotAreaTwofoldSeriesContainer.prototype.indexOf = function (series) {
+        var primary = this._primary;
+        var result = primary.indexOf(series);
+        if (0 <= result) {
+            return result;
+        }
+        result = this._secondary.indexOf(series);
+        if (0 <= result) {
+            return primary.size() + result;
+        }
+        return -1;
+    };
+    DChartPlotAreaTwofoldSeriesContainer.prototype.clear = function () {
+        this._primary.clear();
+        this._secondary.clear();
+        return this;
+    };
+    DChartPlotAreaTwofoldSeriesContainer.prototype.size = function () {
+        return this._primary.size() + this._secondary.size();
+    };
+    DChartPlotAreaTwofoldSeriesContainer.prototype.destroy = function () {
+        this.clear();
+        var selection = this._secondary.selection;
+        if (selection) {
+            selection.unbind();
+        }
+    };
+    DChartPlotAreaTwofoldSeriesContainer.prototype.getDomain = function (coordinate, result) {
+        this._primary.getDomain(coordinate, result);
+        var from = result.from;
+        var to = result.to;
+        this._secondary.getDomain(coordinate, result);
+        result.add(from, to);
+        return result;
+    };
+    DChartPlotAreaTwofoldSeriesContainer.prototype.getRange = function (coordinate, result) {
+        result.clear();
+        this._primary.getRange(coordinate, result);
+        var from = result.from;
+        var to = result.to;
+        this._secondary.getRange(coordinate, result);
+        result.add(from, to);
+        return result;
+    };
+    Object.defineProperty(DChartPlotAreaTwofoldSeriesContainer.prototype, "domain", {
+        get: function () {
+            var result = this._domain;
+            result.clear();
+            var pdomain = this._primary.domain;
+            result.add(pdomain.from, pdomain.to);
+            var sdomain = this._secondary.domain;
+            result.add(sdomain.from, sdomain.to);
+            return result;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DChartPlotAreaTwofoldSeriesContainer.prototype, "range", {
+        get: function () {
+            var result = this._domain;
+            result.clear();
+            var prange = this._primary.range;
+            result.add(prange.from, prange.to);
+            var srange = this._secondary.range;
+            result.add(srange.from, srange.to);
+            return result;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DChartPlotAreaTwofoldSeriesContainer.prototype.hitTest = function (x, y) {
+        var result = this._secondary.hitTest(x, y);
+        if (result != null) {
+            return result;
+        }
+        return this._primary.hitTest(x, y);
+    };
+    DChartPlotAreaTwofoldSeriesContainer.prototype.calcHitPoint = function (x, y, result) {
+        var _a;
+        var result1 = result;
+        var result2 = ((_a = DChartPlotAreaTwofoldSeriesContainer.WORK_CALCHITPOINT) !== null && _a !== void 0 ? _a : (DChartPlotAreaTwofoldSeriesContainer.WORK_CALCHITPOINT = new DChartSeriesHitResult()));
+        var series2 = this._secondary.calcHitPoint(x, y, result2);
+        var series1 = this._primary.calcHitPoint(x, y, result1);
+        if (series1 != null) {
+            if (series2 != null) {
+                if (result1.distance <= result2.distance) {
+                    return series1;
+                }
+                else {
+                    result1.copyFrom(result2);
+                    return series2;
+                }
+            }
+            else {
+                return series1;
+            }
+        }
+        else {
+            if (series2 != null) {
+                result1.copyFrom(result2);
+                return series2;
+            }
+            else {
+                return null;
+            }
+        }
+    };
+    return DChartPlotAreaTwofoldSeriesContainer;
+}());
+
+/*
+ * Copyright (C) 2019 Toshiba Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var DChartPlotAreaTwofoldSubBase = /** @class */ (function () {
+    function DChartPlotAreaTwofoldSubBase(plotArea, onContainerChange, mask, margin, axisShapeContainer, options) {
+        this._isContainerBoundsDirty = true;
+        this._containerBounds = new pixi_js.Rectangle();
+        this._workPoint = new pixi_js.Point();
+        this._margin = margin;
+        this._plotArea = plotArea;
+        // Container
+        var container = new DChartPlotAreaContainer(onContainerChange);
+        this._container = container;
+        // Coordinate
+        this._coordinate = new DChartCoordinateContainerImpl(this, options === null || options === void 0 ? void 0 : options.coordinate);
+        // Overflow mask
+        if (mask) {
+            container.mask = this.getOverflowMask();
+        }
+        // Series
+        this._series = new DChartSeriesContainerImpl(this, options === null || options === void 0 ? void 0 : options.series);
+        // Axis
+        this._axis = new DChartAxisContainerImpl(this, axisShapeContainer, options === null || options === void 0 ? void 0 : options.axis);
+    }
+    Object.defineProperty(DChartPlotAreaTwofoldSubBase.prototype, "plotArea", {
+        get: function () {
+            return this._plotArea;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DChartPlotAreaTwofoldSubBase.prototype, "chart", {
+        get: function () {
+            return this._plotArea.chart;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DChartPlotAreaTwofoldSubBase.prototype, "container", {
         get: function () {
             return this._container;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DChartPlotAreaImpl.prototype, "axis", {
+    Object.defineProperty(DChartPlotAreaTwofoldSubBase.prototype, "series", {
         get: function () {
-            return this._axis;
+            return this._series;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DChartPlotAreaImpl.prototype, "view", {
+    Object.defineProperty(DChartPlotAreaTwofoldSubBase.prototype, "coordinate", {
         get: function () {
-            return this._view;
+            return this._coordinate;
         },
         enumerable: false,
         configurable: true
     });
-    DChartPlotAreaImpl.prototype.onWheel = function (e, deltas, global) {
-        var vresult = this._view.onWheel(e, deltas, global);
-        var sresult = _super.prototype.onWheel.call(this, e, deltas, global);
-        return vresult || sresult;
+    Object.defineProperty(DChartPlotAreaTwofoldSubBase.prototype, "axis", {
+        get: function () {
+            return this._axis;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    DChartPlotAreaTwofoldSubBase.prototype.on = function (name, callback, context) {
+        this._plotArea.on(name, callback, context);
+        return this;
     };
-    DChartPlotAreaImpl.prototype.onDblClick = function (e, interactionManager) {
-        var vresult = this._view.onDblClick(e, interactionManager);
-        var sresult = _super.prototype.onDblClick.call(this, e, interactionManager);
-        return vresult || sresult;
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    DChartPlotAreaTwofoldSubBase.prototype.off = function (name, callback, context) {
+        this._plotArea.off(name, callback, context);
+        return this;
     };
-    DChartPlotAreaImpl.prototype.onDown = function (e) {
-        this._view.onDown(e);
-        _super.prototype.onDown.call(this, e);
+    DChartPlotAreaTwofoldSubBase.prototype.getPixelDomain = function (result) {
+        var plotArea = this._plotArea;
+        var padding = plotArea.padding;
+        var width = plotArea.width;
+        return result.set(padding.getLeft(), width - padding.getRight());
     };
-    DChartPlotAreaImpl.prototype.render = function (renderer) {
-        if (this._isViewDirty) {
-            this._isViewDirty = false;
-            this._coordinate.fit();
-            this._axis.onRender();
-            this._series.onRender();
-        }
-        _super.prototype.render.call(this, renderer);
+    DChartPlotAreaTwofoldSubBase.prototype.getAxisBounds = function (position) {
+        return this.getPixelBounds();
+    };
+    DChartPlotAreaTwofoldSubBase.prototype.getSelectionBoundsX = function () {
+        return this.getPixelBounds();
     };
-    DChartPlotAreaImpl.prototype.destroy = function () {
+    DChartPlotAreaTwofoldSubBase.prototype.getSelectionBoundsY = function () {
+        return this.getPixelBounds();
+    };
+    DChartPlotAreaTwofoldSubBase.prototype.toBoundsDirty = function () {
+        this._isContainerBoundsDirty = true;
+    };
+    DChartPlotAreaTwofoldSubBase.prototype.destroy = function () {
         this._container.destroy();
         this._series.destroy();
         this._axis.destroy();
     };
-    DChartPlotAreaImpl.prototype.getType = function () {
-        return "DChartPlotArea";
+    return DChartPlotAreaTwofoldSubBase;
+}());
+
+/*
+ * Copyright (C) 2019 Toshiba Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var DChartPlotAreaTwofoldSubPrimary = /** @class */ (function (_super) {
+    __extends(DChartPlotAreaTwofoldSubPrimary, _super);
+    function DChartPlotAreaTwofoldSubPrimary() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DChartPlotAreaTwofoldSubPrimary.prototype.getOverflowMask = function () {
+        if (this._overflowMask == null) {
+            var plotArea = this._plotArea;
+            this._overflowMask = new DChartPlotAreaTwofoldOverflowMaskPrimary(plotArea);
+            plotArea.reflowable.add(this._overflowMask);
+            plotArea.toDirty();
+        }
+        return this._overflowMask;
     };
-    DChartPlotAreaImpl.prototype.getBoundsInContainer = function () {
-        var result = this._boundsInContainer;
-        if (this._isBoundsInContainerDirty) {
-            this._isBoundsInContainerDirty = false;
-            var container = this.container;
-            container.updateTransform();
-            var transform = container.transform.localTransform;
-            var work = this._workPoint;
-            work.set(0, 0);
-            transform.applyInverse(work, work);
-            result.x = work.x;
-            result.y = work.y;
-            work.set(this.width, this.height);
-            transform.applyInverse(work, work);
-            result.width = work.x - result.x;
-            result.height = work.y - result.y;
+    DChartPlotAreaTwofoldSubPrimary.prototype.getPixelRange = function (result) {
+        var plotArea = this._plotArea;
+        var padding = plotArea.padding;
+        var paddingTop = padding.getTop();
+        var height = plotArea.height;
+        return result.set((height - this._margin) * 0.5, paddingTop);
+    };
+    DChartPlotAreaTwofoldSubPrimary.prototype.getPixelBounds = function () {
+        var result = this._plotArea.getPixelBounds();
+        result.height *= 0.5;
+        return result;
+    };
+    DChartPlotAreaTwofoldSubPrimary.prototype.getContainerBounds = function () {
+        var result = this._containerBounds;
+        if (this._isContainerBoundsDirty) {
+            this._isContainerBoundsDirty = false;
+            var bounds = this._plotArea.getContainerBounds();
+            result.width = bounds.width;
+            result.height = bounds.height * 0.5;
+            result.x = bounds.x;
+            result.y = bounds.y;
         }
         return result;
     };
-    DChartPlotAreaImpl.prototype.fit = function (duration, domainFrom, domainTo, rangeFrom, rangeTo) {
-        var coordinate = this._coordinate;
-        var axis = this._axis;
-        var series = this._series;
+    return DChartPlotAreaTwofoldSubPrimary;
+}(DChartPlotAreaTwofoldSubBase));
+
+/*
+ * Copyright (C) 2019 Toshiba Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var DChartPlotAreaTwofoldSubSecondary = /** @class */ (function (_super) {
+    __extends(DChartPlotAreaTwofoldSubSecondary, _super);
+    function DChartPlotAreaTwofoldSubSecondary() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DChartPlotAreaTwofoldSubSecondary.prototype.getOverflowMask = function () {
+        if (this._overflowMask == null) {
+            var plotArea = this._plotArea;
+            this._overflowMask = new DChartPlotAreaTwofoldOverflowMaskSecondary(plotArea);
+            plotArea.reflowable.add(this._overflowMask);
+            plotArea.toDirty();
+        }
+        return this._overflowMask;
+    };
+    DChartPlotAreaTwofoldSubSecondary.prototype.getPixelRange = function (result) {
+        var plotArea = this._plotArea;
+        var padding = plotArea.padding;
+        var paddingBottom = padding.getBottom();
+        var height = plotArea.height;
+        return result.set(height - paddingBottom, (height + this._margin) * 0.5);
+    };
+    DChartPlotAreaTwofoldSubSecondary.prototype.getPixelBounds = function () {
+        var result = this._plotArea.getPixelBounds();
+        result.height *= 0.5;
+        result.y = result.height;
+        return result;
+    };
+    DChartPlotAreaTwofoldSubSecondary.prototype.getContainerBounds = function () {
+        var result = this._containerBounds;
+        if (this._isContainerBoundsDirty) {
+            this._isContainerBoundsDirty = false;
+            var bounds = this._plotArea.getContainerBounds();
+            result.width = bounds.width;
+            result.height = bounds.height * 0.5;
+            result.x = bounds.x;
+            result.y = bounds.y + result.height;
+        }
+        return result;
+    };
+    return DChartPlotAreaTwofoldSubSecondary;
+}(DChartPlotAreaTwofoldSubBase));
+
+var DChartPlotAreaTwofoldViewTargetPoint = /** @class */ (function () {
+    function DChartPlotAreaTwofoldViewTargetPoint(primary, secondary) {
+        this._primary = primary;
+        this._secondary = secondary;
+    }
+    Object.defineProperty(DChartPlotAreaTwofoldViewTargetPoint.prototype, "x", {
+        get: function () {
+            return this._secondary.x;
+        },
+        set: function (x) {
+            this._primary.x = x;
+            this._secondary.x = x;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DChartPlotAreaTwofoldViewTargetPoint.prototype, "y", {
+        get: function () {
+            return this._secondary.y;
+        },
+        set: function (y) {
+            this._primary.y = y;
+            this._secondary.y = y;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DChartPlotAreaTwofoldViewTargetPoint.prototype.set = function (x, y) {
+        this._primary.set(x, y);
+        this._secondary.set(x, y);
+        return this;
+    };
+    return DChartPlotAreaTwofoldViewTargetPoint;
+}());
+var DChartPlotAreaTwofoldViewTarget = /** @class */ (function () {
+    function DChartPlotAreaTwofoldViewTarget(primary, secondary) {
+        this._primary = primary;
+        this._secondary = secondary;
+        this._scale = new DChartPlotAreaTwofoldViewTargetPoint(primary.scale, secondary.scale);
+        this._position = new DChartPlotAreaTwofoldViewTargetPoint(primary.position, secondary.position);
+    }
+    Object.defineProperty(DChartPlotAreaTwofoldViewTarget.prototype, "scale", {
+        get: function () {
+            return this._scale;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DChartPlotAreaTwofoldViewTarget.prototype, "position", {
+        get: function () {
+            return this._position;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DChartPlotAreaTwofoldViewTarget.prototype.getLocalBounds = function (rect) {
+        this._primary.getLocalBounds(rect);
+        var x1 = rect.x;
+        var y1 = rect.y;
+        var w1 = rect.width;
+        var h1 = rect.height;
+        this._secondary.getLocalBounds(rect);
+        var x2 = rect.x;
+        var y2 = rect.y;
+        var w2 = rect.width;
+        var h2 = rect.height;
+        var x3 = Math.min(x1, x2);
+        var y3 = Math.min(y1, y2);
+        var x4 = Math.max(x1 + w1, x2 + w2);
+        var y4 = Math.max(y1 + h1, y2 + h2);
+        rect.x = x3;
+        rect.y = y3;
+        rect.width = x4 - x3;
+        rect.height = y4 - y3;
+        return rect;
+    };
+    return DChartPlotAreaTwofoldViewTarget;
+}());
+
+/*
+ * Copyright (C) 2019 Toshiba Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var DChartPlotAreaTwofold = /** @class */ (function (_super) {
+    __extends(DChartPlotAreaTwofold, _super);
+    function DChartPlotAreaTwofold(chart, options) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        var _this = _super.call(this, chart, options) || this;
+        // Margin
+        var theme = _this.theme;
+        var margin = (_a = options === null || options === void 0 ? void 0 : options.margin) !== null && _a !== void 0 ? _a : theme.getMargin();
+        _this._margin = margin;
+        // Primary
+        var axisShapeContainer = new EShapeContainer();
+        var onContainerChangeBound = function () {
+            _this.onContainerChange();
+        };
+        var mask = (_b = options === null || options === void 0 ? void 0 : options.mask) !== null && _b !== void 0 ? _b : theme.isOverflowMaskEnabled();
+        var primaryOptions = options === null || options === void 0 ? void 0 : options.primary;
+        var primary = new DChartPlotAreaTwofoldSubPrimary(_this, onContainerChangeBound, mask, margin, axisShapeContainer, primaryOptions);
+        _this._primary = primary;
+        // Secondary
+        var secondaryOptions = options === null || options === void 0 ? void 0 : options.secondary;
+        var secondary = new DChartPlotAreaTwofoldSubSecondary(_this, onContainerChangeBound, mask, margin, axisShapeContainer, secondaryOptions);
+        _this._secondary = secondary;
+        // Container
+        _this.addChild(primary.container);
+        _this.addChild(secondary.container);
+        // Coordinate
+        _this._coordinate = new DChartPlotAreaTwofoldCoorinateContainer(_this, primary.coordinate, secondary.coordinate);
+        // Series
+        var primarySeries = primary.series;
+        var secondarySeries = secondary.series;
+        var series = new DChartPlotAreaTwofoldSeriesContainer(_this, primarySeries, secondarySeries);
+        _this._series = series;
+        // Axis
+        var primaryAxis = primary.axis;
+        var secondaryAxis = secondary.axis;
+        _this.addChild(axisShapeContainer);
+        var axis = new DChartPlotAreaTwofoldAxisContainer(_this, axisShapeContainer, primaryAxis, secondaryAxis);
+        _this._axis = axis;
+        // Add Series
+        _this.addSeries(primarySeries, (_c = primaryOptions === null || primaryOptions === void 0 ? void 0 : primaryOptions.series) === null || _c === void 0 ? void 0 : _c.list);
+        _this.addSeries(secondarySeries, (_d = secondaryOptions === null || secondaryOptions === void 0 ? void 0 : secondaryOptions.series) === null || _d === void 0 ? void 0 : _d.list);
+        // Add Axes
+        _this.addAxes(primaryAxis, (_e = primaryOptions === null || primaryOptions === void 0 ? void 0 : primaryOptions.axis) === null || _e === void 0 ? void 0 : _e.list);
+        _this.addAxes(secondaryAxis, (_f = secondaryOptions === null || secondaryOptions === void 0 ? void 0 : secondaryOptions.axis) === null || _f === void 0 ? void 0 : _f.list);
+        _this.addAxes(axis, (_g = options === null || options === void 0 ? void 0 : options.axis) === null || _g === void 0 ? void 0 : _g.list);
+        // Selection
+        var selection = options === null || options === void 0 ? void 0 : options.selection;
+        if (selection != null) {
+            primarySeries.selection = selection;
+            secondarySeries.selection = selection;
+            selection.bind(series);
+        }
+        return _this;
+    }
+    DChartPlotAreaTwofold.prototype.addSeries = function (series, list) {
+        if (list != null) {
+            var listLength = list.length;
+            if (0 < listLength) {
+                for (var i = 0; i < listLength; ++i) {
+                    series.add(list[i]);
+                }
+                series.update();
+            }
+        }
+    };
+    DChartPlotAreaTwofold.prototype.addAxes = function (axis, list) {
+        if (list != null) {
+            for (var i = 0, imax = list.length; i < imax; ++i) {
+                axis.add(list[i]);
+            }
+        }
+    };
+    Object.defineProperty(DChartPlotAreaTwofold.prototype, "primary", {
+        get: function () {
+            return this._primary;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DChartPlotAreaTwofold.prototype, "secondary", {
+        get: function () {
+            return this._secondary;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DChartPlotAreaTwofold.prototype, "container", {
+        get: function () {
+            return this.secondary.container;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DChartPlotAreaTwofold.prototype.onContainerChange = function () {
+        this._isViewDirty = true;
+        this._isContainerBoundsDirty = true;
+        this._primary.toBoundsDirty();
+        this._secondary.toBoundsDirty();
+        DApplications.update(this);
+    };
+    Object.defineProperty(DChartPlotAreaTwofold.prototype, "coordinate", {
+        get: function () {
+            return this._coordinate;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DChartPlotAreaTwofold.prototype, "series", {
+        get: function () {
+            return this._series;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DChartPlotAreaTwofold.prototype, "axis", {
+        get: function () {
+            return this._axis;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DChartPlotAreaTwofold.prototype.newView = function (options) {
+        var _this = this;
+        var viewTarget;
+        var toViewTarget = function () {
+            return (viewTarget !== null && viewTarget !== void 0 ? viewTarget : (viewTarget = new DChartPlotAreaTwofoldViewTarget(_this._primary.container, _this._secondary.container)));
+        };
+        return new DViewImpl(this, toViewTarget, options === null || options === void 0 ? void 0 : options.view);
+    };
+    DChartPlotAreaTwofold.prototype.onViewDirty = function () {
+        this._coordinate.fit();
+        this._axis.onRender();
+        this._series.onRender();
+    };
+    DChartPlotAreaTwofold.prototype.fit = function (duration, domainFrom, domainTo, rangeFrom, rangeTo) {
         if (duration != null && duration <= 0) {
-            coordinate.fit(domainFrom, domainTo, rangeFrom, rangeTo);
-            axis.update();
-            series.update();
+            var primary = this.primary;
+            primary.coordinate.fit(domainFrom, domainTo, rangeFrom, rangeTo);
+            primary.axis.update();
+            primary.series.update();
+            var secondary = this.secondary;
+            secondary.coordinate.fit(domainFrom, domainTo, rangeFrom, rangeTo);
+            secondary.axis.update();
+            secondary.series.update();
         }
         else {
             this._blendDuration = duration != null ? duration : 200;
             this._blendStartTime = Date.now();
-            coordinate.mark(domainFrom, domainTo, rangeFrom, rangeTo);
+            this.primary.coordinate.mark(domainFrom, domainTo, rangeFrom, rangeTo);
+            this.secondary.coordinate.mark(domainFrom, domainTo, rangeFrom, rangeTo);
             var blendTimeout = this._blendTimeout;
             if (blendTimeout != null) {
                 window.clearTimeout(blendTimeout);
@@ -82200,7 +83223,7 @@ var DChartPlotAreaImpl = /** @class */ (function (_super) {
         }
         return this;
     };
-    DChartPlotAreaImpl.prototype.onBlend = function () {
+    DChartPlotAreaTwofold.prototype.onBlend = function () {
         var now = Date.now();
         var ratio = (now - this._blendStartTime) / this._blendDuration;
         if (ratio < 1) {
@@ -82210,12 +83233,24 @@ var DChartPlotAreaImpl = /** @class */ (function (_super) {
             this._blendTimeout = null;
             ratio = 1;
         }
-        this._coordinate.blend(DAnimationTimings.ELASTIC(ratio));
-        this._axis.update();
-        this._series.update();
+        var t = DAnimationTimings.ELASTIC(ratio);
+        var primary = this.primary;
+        primary.coordinate.blend(t);
+        primary.axis.update();
+        primary.series.update();
+        var secondary = this.secondary;
+        secondary.coordinate.blend(t);
+        secondary.axis.update();
+        secondary.series.update();
+    };
+    DChartPlotAreaTwofold.prototype.destroy = function () {
+        var _a, _b;
+        (_a = this._primary) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_b = this._secondary) === null || _b === void 0 ? void 0 : _b.destroy();
+        this._axis.destroy();
     };
-    return DChartPlotAreaImpl;
-}(DBase));
+    return DChartPlotAreaTwofold;
+}(DChartPlotAreaBase));
 
 /*
  * Copyright (C) 2019 Toshiba Corporation
@@ -82429,18 +83464,14 @@ var DChartSelectionGridlineX = /** @class */ (function (_super) {
         var shape = this._shape;
         if (shape) {
             var mappedX = mappedPosition.x;
-            var height = container.plotArea.height;
-            shape.transform.position.set(mappedX, height * 0.5);
-            shape.size.set(0, height);
-            shape.visible = this.isVisible(container, position, mappedPosition);
+            var bounds = container.plotArea.getSelectionBoundsX();
+            shape.transform.position.set(mappedX, bounds.y + bounds.height * 0.5);
+            shape.size.set(0, bounds.height);
+            shape.visible = bounds.x <= mappedX && mappedX <= bounds.x + bounds.width;
             return true;
         }
         return false;
     };
-    DChartSelectionGridlineX.prototype.isVisible = function (container, position, mappedPosition) {
-        var x = mappedPosition.x;
-        return 0 <= x && x <= container.plotArea.width;
-    };
     DChartSelectionGridlineX.prototype.getType = function () {
         return "DChartSelectionGridlineX";
     };
@@ -82460,18 +83491,14 @@ var DChartSelectionGridlineY = /** @class */ (function (_super) {
         var shape = this._shape;
         if (shape) {
             var mappedY = mappedPosition.y;
-            var width = container.plotArea.width;
-            shape.transform.position.set(width * 0.5, mappedY);
-            shape.size.set(width, 0);
-            shape.visible = this.isVisible(container, position, mappedPosition);
+            var bounds = container.plotArea.getSelectionBoundsY();
+            shape.transform.position.set(bounds.x + bounds.width * 0.5, mappedY);
+            shape.size.set(bounds.width, 0);
+            shape.visible = bounds.y <= mappedY && mappedY <= bounds.y + bounds.height;
             return true;
         }
         return false;
     };
-    DChartSelectionGridlineY.prototype.isVisible = function (container, position, mappedPosition) {
-        var y = mappedPosition.y;
-        return 0 <= y && y <= container.plotArea.height;
-    };
     DChartSelectionGridlineY.prototype.getType = function () {
         return "DChartSelectionGridlineY";
     };
@@ -82499,8 +83526,11 @@ var DChartSelectionMarker = /** @class */ (function (_super) {
     DChartSelectionMarker.prototype.isVisible = function (container, position, mappedPosition) {
         var x = mappedPosition.x;
         var y = mappedPosition.y;
-        var plotArea = container.plotArea;
-        return 0 <= x && x <= plotArea.width && 0 <= y && y <= plotArea.height;
+        var bounds = container.plotArea.getPixelBounds();
+        return (bounds.x <= x &&
+            x <= bounds.x + bounds.width &&
+            bounds.y <= y &&
+            y <= bounds.y + bounds.height);
     };
     DChartSelectionMarker.prototype.getType = function () {
         return "DChartSelectionMarker";
@@ -84126,7 +85156,7 @@ var DChartSeriesLinear = /** @class */ (function (_super) {
         var p1x = NaN;
         var p1y = NaN;
         var threshold = 0.00001;
-        var bounds = container.plotArea.getBoundsInContainer();
+        var bounds = container.plotArea.getContainerBounds();
         if (babs <= aabs) {
             var xfrom = xcoordinate.unmap(xcoordinate.transform.unmap(bounds.x));
             var xto = xcoordinate.unmap(xcoordinate.transform.unmap(bounds.x + bounds.width));
@@ -84291,10 +85321,8 @@ var DChart = /** @class */ (function (_super) {
     DChart.prototype.init = function (options) {
         var _a;
         _super.prototype.init.call(this, options);
-        // Plot area
-        var plotArea = this.plotArea;
-        this.addChild(plotArea);
         // Overflow mask
+        var plotArea = this.plotArea;
         var mask = (_a = options === null || options === void 0 ? void 0 : options.mask) !== null && _a !== void 0 ? _a : this.theme.isOverflowMaskEnabled();
         if (mask) {
             plotArea.axis.container.mask = this.getOverflowMask();
@@ -84310,22 +85338,25 @@ var DChart = /** @class */ (function (_super) {
     };
     Object.defineProperty(DChart.prototype, "plotArea", {
         get: function () {
-            var result = this._plotArea;
-            if (result == null) {
-                result = this.newPlotArea();
-                this._plotArea = result;
-            }
-            return result;
+            var _a;
+            return ((_a = this._plotArea) !== null && _a !== void 0 ? _a : (this._plotArea = this.newPlotArea()));
         },
         enumerable: false,
         configurable: true
     });
     DChart.prototype.newPlotArea = function () {
         var _a;
-        return new DChartPlotAreaImpl(this, (_a = this._options) === null || _a === void 0 ? void 0 : _a.plotArea);
-    };
-    DChart.prototype.getType = function () {
-        return "DChart";
+        var plotArea = (_a = this._options) === null || _a === void 0 ? void 0 : _a.plotArea;
+        if (plotArea != null && ("primary" in plotArea || "secondary" in plotArea)) {
+            var result = new DChartPlotAreaTwofold(this, plotArea);
+            this.addChild(result);
+            return result;
+        }
+        else {
+            var result = new DChartPlotAreaOnefold(this, plotArea);
+            this.addChild(result);
+            return result;
+        }
     };
     DChart.prototype.destroy = function () {
         var _a;
@@ -84334,6 +85365,9 @@ var DChart = /** @class */ (function (_super) {
             _super.prototype.destroy.call(this);
         }
     };
+    DChart.prototype.getType = function () {
+        return "DChart";
+    };
     return DChart;
 }(DBase));
 
@@ -99731,8 +100765,21 @@ exports.DChartCoordinateTransformMarkImpl = DChartCoordinateTransformMarkImpl;
 exports.DChartLegend = DChartLegend;
 exports.DChartLegendItem = DChartLegendItem;
 exports.DChartOverview = DChartOverview;
+exports.DChartPlotAreaBase = DChartPlotAreaBase;
 exports.DChartPlotAreaContainer = DChartPlotAreaContainer;
-exports.DChartPlotAreaImpl = DChartPlotAreaImpl;
+exports.DChartPlotAreaOnefold = DChartPlotAreaOnefold;
+exports.DChartPlotAreaTwofold = DChartPlotAreaTwofold;
+exports.DChartPlotAreaTwofoldAxisContainer = DChartPlotAreaTwofoldAxisContainer;
+exports.DChartPlotAreaTwofoldCoorinateContainer = DChartPlotAreaTwofoldCoorinateContainer;
+exports.DChartPlotAreaTwofoldCoorinateContainerSub = DChartPlotAreaTwofoldCoorinateContainerSub;
+exports.DChartPlotAreaTwofoldOverflowMaskPrimary = DChartPlotAreaTwofoldOverflowMaskPrimary;
+exports.DChartPlotAreaTwofoldOverflowMaskSecondary = DChartPlotAreaTwofoldOverflowMaskSecondary;
+exports.DChartPlotAreaTwofoldSeriesContainer = DChartPlotAreaTwofoldSeriesContainer;
+exports.DChartPlotAreaTwofoldSubBase = DChartPlotAreaTwofoldSubBase;
+exports.DChartPlotAreaTwofoldSubPrimary = DChartPlotAreaTwofoldSubPrimary;
+exports.DChartPlotAreaTwofoldSubSecondary = DChartPlotAreaTwofoldSubSecondary;
+exports.DChartPlotAreaTwofoldViewTarget = DChartPlotAreaTwofoldViewTarget;
+exports.DChartPlotAreaTwofoldViewTargetPoint = DChartPlotAreaTwofoldViewTargetPoint;
 exports.DChartRegionImpl = DChartRegionImpl;
 exports.DChartRegionImplObservable = DChartRegionImplObservable;
 exports.DChartSelectionContainerImpl = DChartSelectionContainerImpl;