@wcardinal/wcardinal-ui 0.417.0 → 0.419.0

package/dist/wcardinal-ui.js

@@ -1,5 +1,5 @@
 /*
- Winter Cardinal UI v0.417.0
+ Winter Cardinal UI v0.419.0
  Copyright (C) 2019 Toshiba Corporation
  SPDX-License-Identifier: Apache-2.0
 
@@ -21221,6 +21221,34 @@
         LETTER_RNB: LETTER_RNB
     };
 
+    /*
+     * Copyright (C) 2019 Toshiba Corporation
+     * SPDX-License-Identifier: Apache-2.0
+     */
+    var DynamicSDFFontAtlasFont = /** @class */ (function () {
+        function DynamicSDFFontAtlasFont(fontFamily) {
+            this.id = DynamicSDFFontAtlasFont.toFontFamily(fontFamily);
+            this.size = 32;
+            this.italic = false;
+            this.measured = false;
+            this.ascent = 0;
+            this.descent = 0;
+        }
+        DynamicSDFFontAtlasFont.toFontFamily = function (fontFamily) {
+            return fontFamily === "auto" ? DynamicSDFFontAtlasFont.getAutoFontFamily() : fontFamily;
+        };
+        DynamicSDFFontAtlasFont.getAutoFontFamily = function () {
+            if (DynamicSDFFontAtlasFont.FONT_FAMILY_AUTO == null) {
+                DynamicSDFFontAtlasFont.FONT_FAMILY_AUTO = DThemes.getInstance()
+                    .get("DBase")
+                    .getFontFamilly();
+            }
+            return DynamicSDFFontAtlasFont.FONT_FAMILY_AUTO;
+        };
+        DynamicSDFFontAtlasFont.FONT_FAMILY_AUTO = null;
+        return DynamicSDFFontAtlasFont;
+    }());
+
     /*
      * Copyright (C) 2019 Toshiba Corporation
      * SPDX-License-Identifier: Apache-2.0
@@ -21509,6 +21537,69 @@
         return DynamicSDFFontGenerator;
     }());
 
+    /*
+     * Copyright (C) 2019 Toshiba Corporation
+     * SPDX-License-Identifier: Apache-2.0
+     */
+    var UtilFont = /** @class */ (function () {
+        function UtilFont() {
+        }
+        UtilFont.measure = function (context, font) {
+            if (!font.measured) {
+                if ("fontBoundingBoxAscent" in window.TextMetrics.prototype) {
+                    var metrics = context.measureText(pixi_js.TextMetrics.METRICS_STRING);
+                    font.ascent = metrics.fontBoundingBoxAscent;
+                    font.descent = metrics.fontBoundingBoxDescent;
+                }
+                else {
+                    var measured = pixi_js.TextMetrics.measureFont(font.id);
+                    font.ascent = measured.ascent;
+                    font.descent = measured.descent;
+                }
+                font.measured = true;
+            }
+        };
+        UtilFont.toSize = function (font) {
+            this.setup(font);
+            return parseFloat(window.getComputedStyle(this._span).fontSize);
+        };
+        UtilFont.setup = function (font) {
+            var span = this._span;
+            if (span == null) {
+                span = document.createElement("span");
+                span.innerText = "|ÉqÅ";
+                span.style.border = "none";
+                span.style.margin = "0px";
+                this._span = span;
+            }
+            var block = this._block;
+            if (block == null) {
+                block = document.createElement("div");
+                block.style.display = "inline-block";
+                block.style.width = "0px";
+                block.style.height = "0px";
+                block.style.border = "none";
+                block.style.margin = "0px";
+                block.style.verticalAlign = "baseline";
+                this._block = block;
+            }
+            var div = this._div;
+            if (div == null) {
+                div = document.createElement("div");
+                div.style.position = "absolute";
+                div.style.padding = "0px";
+                div.style.margin = "0px";
+                div.style.visibility = "hidden";
+                div.appendChild(span);
+                div.appendChild(block);
+                document.body.appendChild(div);
+                this._div = div;
+            }
+            span.style.font = font;
+        };
+        return UtilFont;
+    }());
+
     /*
      * Copyright (C) 2019 Toshiba Corporation
      * SPDX-License-Identifier: Apache-2.0
@@ -21518,11 +21609,7 @@
             this._id = "font-atlas:".concat(fontFamily);
             this._generator = DynamicSDFFontGenerator.getInstance().init();
             this._canvas = document.createElement("canvas");
-            this._font = {
-                family: DynamicSDFFontAtlas.toFontFamily(fontFamily),
-                size: 32,
-                italic: false
-            };
+            this._font = new DynamicSDFFontAtlasFont(fontFamily);
             this._characters = {};
             this._length = 0;
             this._width = 1;
@@ -21541,7 +21628,7 @@
                 return this._font;
             },
             set: function (font) {
-                this._font.family = font.family;
+                this._font.id = font.id;
                 this._font.size = font.size;
                 this._font.italic = font.italic;
             },
@@ -21666,19 +21753,20 @@
                         var font = this._font;
                         var characters = this._characters;
                         var characterSize = font.size + 14;
-                        var width = DynamicSDFFontAtlas.toPowerOf2(Math.ceil(Math.sqrt(this._length)) * characterSize);
+                        var width = this.toPowerOf2(Math.ceil(Math.sqrt(this._length)) * characterSize);
                         this._width = width;
-                        var fontStyle = (font.italic ? "italic " : "") + (font.size + "px ") + font.family;
+                        var fontStyle = (font.italic ? "italic " : "") + (font.size + "px ") + font.id;
                         context.font = fontStyle;
                         context.textAlign = "left";
-                        context.textBaseline = "middle";
+                        context.textBaseline = "alphabetic";
                         context.lineWidth = 0;
                         context.lineCap = "round";
                         context.lineJoin = "miter";
-                        context.miterLimit = 0;
+                        context.miterLimit = 10;
                         context.fillStyle = "#FFFFFF";
+                        UtilFont.measure(context, font);
                         var offsetX = 7;
-                        var offsetY = characterSize >> 1;
+                        var offsetY = Math.round((characterSize - (font.ascent + font.descent)) * 0.5 + font.ascent);
                         var x = 0;
                         var y = 0;
                         for (var id in characters) {
@@ -21707,11 +21795,11 @@
                         canvas.height = height;
                         context.font = fontStyle;
                         context.textAlign = "left";
-                        context.textBaseline = "middle";
+                        context.textBaseline = "alphabetic";
                         context.lineWidth = 0;
                         context.lineCap = "round";
                         context.lineJoin = "miter";
-                        context.miterLimit = 4;
+                        context.miterLimit = 10;
                         context.fillStyle = "#FFFFFF";
                         context.clearRect(0, 0, width, height);
                         for (var id in characters) {
@@ -21760,25 +21848,13 @@
                 delete characters[id];
             }
         };
-        DynamicSDFFontAtlas.toFontFamily = function (fontFamily) {
-            return fontFamily === "auto" ? DynamicSDFFontAtlas.getAutoFontFamily() : fontFamily;
-        };
-        DynamicSDFFontAtlas.toPowerOf2 = function (size) {
+        DynamicSDFFontAtlas.prototype.toPowerOf2 = function (size) {
             var result = 32;
             while (result < size) {
                 result <<= 1;
             }
             return result;
         };
-        DynamicSDFFontAtlas.getAutoFontFamily = function () {
-            if (DynamicSDFFontAtlas.FONT_FAMILY_AUTO == null) {
-                DynamicSDFFontAtlas.FONT_FAMILY_AUTO = DThemes.getInstance()
-                    .get("DBase")
-                    .getFontFamilly();
-            }
-            return DynamicSDFFontAtlas.FONT_FAMILY_AUTO;
-        };
-        DynamicSDFFontAtlas.FONT_FAMILY_AUTO = null;
         return DynamicSDFFontAtlas;
     }());
 
@@ -29123,77 +29199,6 @@
         return DDynamicTextGeometry;
     }(pixi_js.MeshGeometry));
 
-    /*
-     * Copyright (C) 2019 Toshiba Corporation
-     * SPDX-License-Identifier: Apache-2.0
-     */
-    var UtilFont = /** @class */ (function () {
-        function UtilFont() {
-        }
-        UtilFont.measure = function (font) {
-            var results = this._results;
-            if (results == null) {
-                results = new Map();
-                this._results = results;
-            }
-            var result = results.get(font);
-            if (result != null) {
-                return result;
-            }
-            this.setup(font);
-            var blockRect = this._block.getBoundingClientRect();
-            var blockRectTop = blockRect.top;
-            var spanRect = this._span.getBoundingClientRect();
-            var ascent = blockRectTop - spanRect.top;
-            var descent = spanRect.bottom - blockRectTop;
-            result = {
-                ascent: ascent,
-                descent: descent
-            };
-            results.set(font, result);
-            return result;
-        };
-        UtilFont.toSize = function (font) {
-            this.setup(font);
-            return parseFloat(window.getComputedStyle(this._span).fontSize);
-        };
-        UtilFont.setup = function (font) {
-            var span = this._span;
-            if (span == null) {
-                span = document.createElement("span");
-                span.innerText = "|ÉqÅ";
-                span.style.border = "none";
-                span.style.margin = "0px";
-                this._span = span;
-            }
-            var block = this._block;
-            if (block == null) {
-                block = document.createElement("div");
-                block.style.display = "inline-block";
-                block.style.width = "0px";
-                block.style.height = "0px";
-                block.style.border = "none";
-                block.style.margin = "0px";
-                block.style.verticalAlign = "baseline";
-                this._block = block;
-            }
-            var div = this._div;
-            if (div == null) {
-                div = document.createElement("div");
-                div.style.position = "absolute";
-                div.style.padding = "0px";
-                div.style.margin = "0px";
-                div.style.visibility = "hidden";
-                div.appendChild(span);
-                div.appendChild(block);
-                document.body.appendChild(div);
-                this._div = div;
-            }
-            span.style.font = font;
-        };
-        return UtilFont;
-    }());
-
     /*
      * Copyright (C) 2019 Toshiba Corporation
      * SPDX-License-Identifier: Apache-2.0
@@ -48225,9 +48230,9 @@
             this.size = size;
             this.color = pixi_js.utils.hex2string(color);
             this.height = size + padding * 2;
-            var metrics = UtilFont.measure(fontId);
-            this.ascent = metrics.ascent;
-            this.descent = metrics.descent;
+            this.measured = false;
+            this.ascent = 0;
+            this.descent = 0;
         }
         return DynamicFontAtlasFont;
     }());
@@ -48428,7 +48433,7 @@
                 context.lineWidth = 0;
                 context.lineCap = "round";
                 context.lineJoin = "miter";
-                context.miterLimit = 0;
+                context.miterLimit = 10;
                 context.fillStyle = font.color;
                 context.strokeStyle = "#0000ff";
             }
@@ -48445,7 +48450,6 @@
                     var characters = this._characters;
                     var width = (this._width = this.toPowerOf2(Math.ceil(Math.sqrt(this._length)) * fontHeight));
                     var offsetX = this._padding;
-                    var offsetY = Math.round((fontHeight - (font.ascent + font.descent)) * 0.5 + font.ascent);
                     var x = 0;
                     var y = 0;
                     for (var key in characters) {
@@ -48457,7 +48461,6 @@
                         character.x = x;
                         character.y = y;
                         character.origin.x = x + offsetX;
-                        character.origin.y = y + offsetY;
                         x += character.width;
                     }
                     var height = (this._height = y + fontHeight);
@@ -48472,11 +48475,14 @@
                     canvas.height = realHeight;
                     var context = this.getContext();
                     if (context != null) {
+                        UtilFont.measure(context, font);
+                        var offsetY = Math.round((fontHeight - (font.ascent + font.descent)) * 0.5 + font.ascent);
                         context.save();
                         context.scale(resolution, resolution);
                         context.clearRect(0, 0, width, height);
                         for (var key in characters) {
                             var character = characters[key];
+                            character.origin.y = character.y + offsetY;
                             context.fillText(key, character.origin.x, character.origin.y);
                         }
                         context.restore();
@@ -57656,28 +57662,32 @@
             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;
                 }
@@ -57689,6 +57699,7 @@
         DChartAxisBaseBar.prototype.destroy = function () {
             var shape = this._shape;
             if (shape != null) {
+                this._shape = undefined;
                 shape.destroy();
             }
             this._index = 0;
@@ -57765,6 +57776,7 @@
             for (var i = 0, imax = list.length; i < imax; ++i) {
                 list[i].destroy();
             }
+            list.length = 0;
             this._index = 0;
             this._container = undefined;
         };
@@ -58240,12 +58252,8 @@
         }
         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
@@ -58304,6 +58312,8 @@
                 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;
@@ -58319,12 +58329,8 @@
         }
         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
@@ -58388,6 +58394,8 @@
                 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;
@@ -58403,12 +58411,8 @@
         }
         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
@@ -58462,6 +58466,8 @@
                 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;
@@ -58553,6 +58559,11 @@
             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;
@@ -58568,8 +58579,7 @@
                             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:
@@ -58581,8 +58591,7 @@
                             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:
@@ -58594,8 +58603,7 @@
                             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:
@@ -58607,8 +58615,7 @@
                             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;
                 }
@@ -58616,7 +58623,7 @@
             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)));
         };
@@ -58624,14 +58631,14 @@
             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;
@@ -58658,7 +58665,7 @@
                     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 {
@@ -58684,7 +58691,7 @@
             }
             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;
@@ -58711,7 +58718,7 @@
                     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 {
@@ -58916,9 +58923,9 @@
      * 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", {
@@ -59393,9 +59400,12 @@
             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:
@@ -59406,10 +59416,10 @@
                             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:
@@ -59420,10 +59430,10 @@
                             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;
                 }
@@ -59723,24 +59733,16 @@
                 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;
@@ -60373,6 +60375,119 @@
         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
@@ -60649,11 +60764,10 @@
      */
     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);
@@ -60687,6 +60801,9 @@
             get: function () {
                 return this._selection;
             },
+            set: function (selection) {
+                this._selection = selection;
+            },
             enumerable: false,
             configurable: true
         });
@@ -60835,90 +60952,51 @@
      * 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);
-            // 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);
-            // Selection
-            var selection = series.selection;
-            if (selection) {
-                selection.bind(series);
-            }
+            _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();
+            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();
+                container.mask = _this.getOverflowMask();
             }
-            // 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();
-                        }
-                    }
-                }
-                // 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]);
-                        }
-                    }
-                }
+            // View
+            _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 = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions.selection;
+            if (selection != null) {
+                series.selection = selection;
+                selection.bind(series);
             }
-        };
-        DChartPlotAreaImpl.prototype.onResize = function (newWidth, newHeight, oldWidth, oldHeight) {
-            this._isViewDirty = true;
-            this._isBoundsInContainerDirty = true;
-            _super.prototype.onResize.call(this, newWidth, newHeight, oldWidth, oldHeight);
-        };
-        DChartPlotAreaImpl.prototype.getOverflowMask = function () {
+            return _this;
+        }
+        DChartPlotAreaOnefold.prototype.getOverflowMask = function () {
             if (this._overflowMask == null) {
                 this._overflowMask = new DBaseOverflowMask(this);
                 this.reflowable.add(this._overflowMask);
@@ -60926,111 +61004,1056 @@
             }
             return this._overflowMask;
         };
-        Object.defineProperty(DChartPlotAreaImpl.prototype, "chart", {
-            get: function () {
-                return this._chart;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DChartPlotAreaImpl.prototype, "coordinate", {
+        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();
+                }
+            }
+        };
+        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(DChartPlotAreaImpl.prototype, "series", {
+        Object.defineProperty(DChartPlotAreaOnefold.prototype, "series", {
             get: function () {
                 return this._series;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DChartPlotAreaImpl.prototype, "container", {
+        Object.defineProperty(DChartPlotAreaOnefold.prototype, "container", {
             get: function () {
                 return this._container;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DChartPlotAreaImpl.prototype, "axis", {
+        Object.defineProperty(DChartPlotAreaOnefold.prototype, "axis", {
             get: function () {
                 return this._axis;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DChartPlotAreaImpl.prototype, "view", {
+        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._view;
+                return this._container;
             },
             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(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);
         };
-        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;
+        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;
         };
-        DChartPlotAreaImpl.prototype.onDown = function (e) {
-            this._view.onDown(e);
-            _super.prototype.onDown.call(this, e);
+        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;
         };
-        DChartPlotAreaImpl.prototype.render = function (renderer) {
-            if (this._isViewDirty) {
-                this._isViewDirty = false;
-                this._coordinate.fit();
-                this._axis.onRender();
-                this._series.onRender();
+        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;
             }
-            _super.prototype.render.call(this, renderer);
+            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;
+        };
+        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;
+        };
+        DChartPlotAreaTwofoldCoorinateContainerSub.prototype.indexOf = function (coordinate) {
+            var result = this._primary.indexOf(coordinate);
+            if (0 <= result) {
+                return result;
+            }
+            result = this._secondary.indexOf(coordinate);
+            if (0 <= result) {
+                return this._primary.size() + result;
+            }
+            return -1;
+        };
+        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._x;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DChartPlotAreaTwofoldCoorinateContainer.prototype, "y", {
+            get: function () {
+                return this._y;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DChartPlotAreaTwofoldCoorinateContainer.prototype, "plotArea", {
+            get: function () {
+                return this._plotArea;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        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);
         };
-        DChartPlotAreaImpl.prototype.destroy = function () {
+        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(DChartPlotAreaTwofoldSubBase.prototype, "series", {
+            get: function () {
+                return this._series;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DChartPlotAreaTwofoldSubBase.prototype, "coordinate", {
+            get: function () {
+                return this._coordinate;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        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;
+        };
+        // eslint-disable-next-line @typescript-eslint/ban-types
+        DChartPlotAreaTwofoldSubBase.prototype.off = function (name, callback, context) {
+            this._plotArea.off(name, callback, context);
+            return this;
+        };
+        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());
+        };
+        DChartPlotAreaTwofoldSubBase.prototype.getAxisBounds = function (position) {
+            return this.getPixelBounds();
+        };
+        DChartPlotAreaTwofoldSubBase.prototype.getSelectionBoundsX = function () {
+            return this.getPixelBounds();
+        };
+        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);
@@ -61039,7 +62062,7 @@
             }
             return this;
         };
-        DChartPlotAreaImpl.prototype.onBlend = function () {
+        DChartPlotAreaTwofold.prototype.onBlend = function () {
             var now = Date.now();
             var ratio = (now - this._blendStartTime) / this._blendDuration;
             if (ratio < 1) {
@@ -61049,12 +62072,24 @@
                 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
@@ -61268,18 +62303,14 @@
             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";
         };
@@ -61299,18 +62330,14 @@
             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";
         };
@@ -61338,8 +62365,11 @@
         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";
@@ -62965,7 +63995,7 @@
             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));
@@ -63130,10 +64160,8 @@
         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();
@@ -63149,22 +64177,25 @@
         };
         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;
@@ -63173,6 +64204,9 @@
                 _super.prototype.destroy.call(this);
             }
         };
+        DChart.prototype.getType = function () {
+            return "DChart";
+        };
         return DChart;
     }(DBase));
 
@@ -79071,6 +80105,7 @@
         DynamicFontAtlasFont: DynamicFontAtlasFont,
         DynamicFontAtlas: DynamicFontAtlas,
         DynamicFontAtlases: DynamicFontAtlases,
+        DynamicSDFFontAtlasFont: DynamicSDFFontAtlasFont,
         DynamicSDFFontAtlas: DynamicSDFFontAtlas,
         DynamicSDFFontAtlases: DynamicSDFFontAtlases,
         DynamicSDFFontGenerator: DynamicSDFFontGenerator,
@@ -79236,8 +80271,21 @@
         DChartLegendItem: DChartLegendItem,
         DChartLegend: DChartLegend,
         DChartOverview: DChartOverview,
+        DChartPlotAreaBase: DChartPlotAreaBase,
         DChartPlotAreaContainer: DChartPlotAreaContainer,
-        DChartPlotAreaImpl: DChartPlotAreaImpl,
+        DChartPlotAreaOnefold: DChartPlotAreaOnefold,
+        DChartPlotAreaTwofoldAxisContainer: DChartPlotAreaTwofoldAxisContainer,
+        DChartPlotAreaTwofoldCoorinateContainerSub: DChartPlotAreaTwofoldCoorinateContainerSub,
+        DChartPlotAreaTwofoldCoorinateContainer: DChartPlotAreaTwofoldCoorinateContainer,
+        DChartPlotAreaTwofoldOverflowMaskPrimary: DChartPlotAreaTwofoldOverflowMaskPrimary,
+        DChartPlotAreaTwofoldOverflowMaskSecondary: DChartPlotAreaTwofoldOverflowMaskSecondary,
+        DChartPlotAreaTwofoldSeriesContainer: DChartPlotAreaTwofoldSeriesContainer,
+        DChartPlotAreaTwofoldSubBase: DChartPlotAreaTwofoldSubBase,
+        DChartPlotAreaTwofoldSubPrimary: DChartPlotAreaTwofoldSubPrimary,
+        DChartPlotAreaTwofoldSubSecondary: DChartPlotAreaTwofoldSubSecondary,
+        DChartPlotAreaTwofoldViewTargetPoint: DChartPlotAreaTwofoldViewTargetPoint,
+        DChartPlotAreaTwofoldViewTarget: DChartPlotAreaTwofoldViewTarget,
+        DChartPlotAreaTwofold: DChartPlotAreaTwofold,
         DChartRegionImplObservable: DChartRegionImplObservable,
         DChartRegionImpl: DChartRegionImpl,
         DChartSelectionContainerImpl: DChartSelectionContainerImpl,