@wcardinal/wcardinal-ui 0.417.0 → 0.419.0

package/dist/wcardinal-ui.cjs.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
 
@@ -21224,6 +21224,34 @@ var DynamicFontAtlasCharacterType = {
     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
@@ -21512,6 +21540,69 @@ var DynamicSDFFontGenerator = /** @class */ (function () {
     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
@@ -21521,11 +21612,7 @@ var DynamicSDFFontAtlas = /** @class */ (function () {
         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;
@@ -21544,7 +21631,7 @@ var DynamicSDFFontAtlas = /** @class */ (function () {
             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;
         },
@@ -21669,19 +21756,20 @@ var DynamicSDFFontAtlas = /** @class */ (function () {
                     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) {
@@ -21710,11 +21798,11 @@ var DynamicSDFFontAtlas = /** @class */ (function () {
                     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) {
@@ -21763,25 +21851,13 @@ var DynamicSDFFontAtlas = /** @class */ (function () {
             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;
 }());
 
@@ -29126,77 +29202,6 @@ var DDynamicTextGeometry = /** @class */ (function (_super) {
     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
@@ -48452,7 +48457,7 @@ var DThemeWhiteFont = /** @class */ (function () {
     function DThemeWhiteFont() {
     }
     DThemeWhiteFont.prototype.getFontFamilly = function () {
-        return "\"Helvetica Neue\",\"Helvetica\",\"Hiragino Sans\",\"Hiragino Kaku Gothic ProN\",\"BIZ UDPGothic\",\"Arial\",\"Yu Gothic\",\"Meiryo\",sans-serif";
+        return "\"Helvetica Neue\",\"Helvetica\",\"Hiragino Sans\",\"Hiragino Kaku Gothic ProN\",\"BIZ UDPGothic\",\"Arial\",\"Yu Gothic UI\",\"Meiryo UI\",sans-serif";
     };
     DThemeWhiteFont.prototype.getFontSize = function () {
         return 14;
@@ -50094,6 +50099,9 @@ var DThemeWhiteChartPlotArea = /** @class */ (function (_super) {
     DThemeWhiteChartPlotArea.prototype.isOverflowMaskEnabled = function () {
         return true;
     };
+    DThemeWhiteChartPlotArea.prototype.getMargin = function () {
+        return 20;
+    };
     return DThemeWhiteChartPlotArea;
 }(DThemeWhiteBase));
 
@@ -59601,7 +59609,7 @@ var DThemeDarkFont = /** @class */ (function () {
     function DThemeDarkFont() {
     }
     DThemeDarkFont.prototype.getFontFamilly = function () {
-        return "\"Helvetica Neue\",\"Helvetica\",\"Hiragino Sans\",\"Hiragino Kaku Gothic ProN\",\"BIZ UDPGothic\",\"Arial\",\"Yu Gothic\",\"Meiryo\",sans-serif";
+        return "\"Helvetica Neue\",\"Helvetica\",\"Hiragino Sans\",\"Hiragino Kaku Gothic ProN\",\"BIZ UDPGothic\",\"Arial\",\"Yu Gothic UI\",\"Meiryo UI\",sans-serif";
     };
     DThemeDarkFont.prototype.getFontSize = function () {
         return 14;
@@ -61214,6 +61222,9 @@ var DThemeDarkChartPlotArea = /** @class */ (function (_super) {
     DThemeDarkChartPlotArea.prototype.isOverflowMaskEnabled = function () {
         return true;
     };
+    DThemeDarkChartPlotArea.prototype.getMargin = function () {
+        return 20;
+    };
     return DThemeDarkChartPlotArea;
 }(DThemeDarkBase));
 
@@ -70060,9 +70071,9 @@ var DynamicFontAtlasFont = /** @class */ (function () {
         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;
 }());
@@ -70263,7 +70274,7 @@ var DynamicFontAtlas = /** @class */ (function () {
             context.lineWidth = 0;
             context.lineCap = "round";
             context.lineJoin = "miter";
-            context.miterLimit = 0;
+            context.miterLimit = 10;
             context.fillStyle = font.color;
             context.strokeStyle = "#0000ff";
         }
@@ -70280,7 +70291,6 @@ var DynamicFontAtlas = /** @class */ (function () {
                 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) {
@@ -70292,7 +70302,6 @@ var DynamicFontAtlas = /** @class */ (function () {
                     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);
@@ -70307,11 +70316,14 @@ var DynamicFontAtlas = /** @class */ (function () {
                 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();
@@ -78820,28 +78832,32 @@ var DChartAxisBaseBar = /** @class */ (function () {
         var index = this._index;
         var shape = this._shape;
         if (shape != null && container != null) {
+            var parser = this._parser;
             var plotArea = container.plotArea;
-            var plotAreaWidth = plotArea.width;
-            var plotAreaHeight = plotArea.height;
-            var offset = this._parser.padding * index;
+            var plotAreaBounds = plotArea.getAxisBounds(parser.position);
+            var plotAreaX = plotAreaBounds.x;
+            var plotAreaY = plotAreaBounds.y;
+            var plotAreaWidth = plotAreaBounds.width;
+            var plotAreaHeight = plotAreaBounds.height;
+            var offset = parser.padding * index;
             shape.lock(EShapeLockPart.UPLOADED);
             var position = shape.transform.position;
             var size = shape.size;
-            switch (this._parser.position) {
+            switch (parser.position) {
                 case DChartAxisPosition.TOP:
-                    position.set(plotAreaWidth * 0.5, 0 - offset);
+                    position.set(plotAreaX + plotAreaWidth * 0.5, plotAreaY - offset);
                     size.set(plotAreaWidth, 0);
                     break;
                 case DChartAxisPosition.BOTTOM:
-                    position.set(plotAreaWidth * 0.5, plotAreaHeight + offset);
+                    position.set(plotAreaX + plotAreaWidth * 0.5, plotAreaY + plotAreaHeight + offset);
                     size.set(plotAreaWidth, 0);
                     break;
                 case DChartAxisPosition.LEFT:
-                    position.set(0 - offset, plotAreaHeight * 0.5);
+                    position.set(plotAreaX - offset, plotAreaY + plotAreaHeight * 0.5);
                     size.set(0, plotAreaHeight);
                     break;
                 case DChartAxisPosition.RIGHT:
-                    position.set(plotAreaWidth + offset, plotAreaHeight * 0.5);
+                    position.set(plotAreaX + plotAreaWidth + offset, plotAreaY + plotAreaHeight * 0.5);
                     size.set(0, plotAreaHeight);
                     break;
             }
@@ -78853,6 +78869,7 @@ var DChartAxisBaseBar = /** @class */ (function () {
     DChartAxisBaseBar.prototype.destroy = function () {
         var shape = this._shape;
         if (shape != null) {
+            this._shape = undefined;
             shape.destroy();
         }
         this._index = 0;
@@ -78929,6 +78946,7 @@ var DChartAxisBaseGuideContainer = /** @class */ (function () {
         for (var i = 0, imax = list.length; i < imax; ++i) {
             list[i].destroy();
         }
+        list.length = 0;
         this._index = 0;
         this._container = undefined;
     };
@@ -79395,12 +79413,8 @@ var DChartAxisBaseTickMajorGridline = /** @class */ (function () {
     }
     Object.defineProperty(DChartAxisBaseTickMajorGridline.prototype, "shapes", {
         get: function () {
-            var result = this._shapes;
-            if (result == null) {
-                result = this.newShapes();
-                this._shapes = result;
-            }
-            return result;
+            var _a;
+            return ((_a = this._shapes) !== null && _a !== void 0 ? _a : (this._shapes = this.newShapes()));
         },
         enumerable: false,
         configurable: true
@@ -79459,6 +79473,8 @@ var DChartAxisBaseTickMajorGridline = /** @class */ (function () {
             for (var i = 0, imax = shapes.length; i < imax; ++i) {
                 shapes[i].destroy();
             }
+            shapes.length = 0;
+            this._shapes = undefined;
         }
         this._index = 0;
         this._container = undefined;
@@ -79474,12 +79490,8 @@ var DChartAxisBaseTickMajor = /** @class */ (function () {
     }
     Object.defineProperty(DChartAxisBaseTickMajor.prototype, "shapes", {
         get: function () {
-            var result = this._shapes;
-            if (result == null) {
-                result = this.newShapes();
-                this._shapes = result;
-            }
-            return result;
+            var _a;
+            return ((_a = this._shapes) !== null && _a !== void 0 ? _a : (this._shapes = this.newShapes()));
         },
         enumerable: false,
         configurable: true
@@ -79543,6 +79555,8 @@ var DChartAxisBaseTickMajor = /** @class */ (function () {
             for (var i = 0, imax = shapes.length; i < imax; ++i) {
                 shapes[i].destroy();
             }
+            shapes.length = 0;
+            this._shapes = undefined;
         }
         this._gridline.destroy();
         this._index = 0;
@@ -79558,12 +79572,8 @@ var DChartAxisBaseTickMinor = /** @class */ (function () {
     }
     Object.defineProperty(DChartAxisBaseTickMinor.prototype, "shapes", {
         get: function () {
-            var result = this._shapes;
-            if (result == null) {
-                result = this.newShapes();
-                this._shapes = result;
-            }
-            return result;
+            var _a;
+            return ((_a = this._shapes) !== null && _a !== void 0 ? _a : (this._shapes = this.newShapes()));
         },
         enumerable: false,
         configurable: true
@@ -79617,6 +79627,8 @@ var DChartAxisBaseTickMinor = /** @class */ (function () {
             for (var i = 0, imax = shapes.length; i < imax; ++i) {
                 shapes[i].destroy();
             }
+            shapes.length = 0;
+            this._shapes = undefined;
         }
         this._index = 0;
         this._container = undefined;
@@ -79708,6 +79720,11 @@ var DChartAxisBaseTickContainer = /** @class */ (function () {
         var minorShapes = this._minor.shapes;
         if (parser.tick.enable && container != null && majorShapes && minorShapes) {
             var plotArea = container.plotArea;
+            var plotAreaBounds = plotArea.getAxisBounds(parser.position);
+            var plotAreaX = plotAreaBounds.x;
+            var plotAreaY = plotAreaBounds.y;
+            var plotAreaWidth = plotAreaBounds.width;
+            var plotAreaHeight = plotAreaBounds.height;
             var transform = plotArea.container.transform.localTransform;
             var gridlineShapes = this._major.gridline.shapes;
             var offset = parser.padding * this._index;
@@ -79723,8 +79740,7 @@ var DChartAxisBaseTickContainer = /** @class */ (function () {
                         var domainVisible = this.getDomainVisible(plotArea, coordinate, work);
                         var domainVisibleFrom = domainVisible.from;
                         var domainVisibleTo = domainVisible.to;
-                        var plotAreaHeight = plotArea.height;
-                        return this.updateX(domainFrom, domainTo, domainVisibleFrom, domainVisibleTo, coordinate, majorShapes, minorShapes, gridlineShapes, 0 - offset, transform, plotAreaHeight);
+                        return this.updateX(domainFrom, domainTo, domainVisibleFrom, domainVisibleTo, coordinate, majorShapes, minorShapes, gridlineShapes, plotAreaY - offset, transform, plotAreaY, plotAreaHeight);
                     }
                     break;
                 case DChartAxisPosition.BOTTOM:
@@ -79736,8 +79752,7 @@ var DChartAxisBaseTickContainer = /** @class */ (function () {
                         var domainVisible = this.getDomainVisible(plotArea, coordinate, work);
                         var domainVisibleFrom = domainVisible.from;
                         var domainVisibleTo = domainVisible.to;
-                        var plotAreaHeight = plotArea.height;
-                        return this.updateX(domainFrom, domainTo, domainVisibleFrom, domainVisibleTo, coordinate, majorShapes, minorShapes, gridlineShapes, plotAreaHeight + offset, transform, plotAreaHeight);
+                        return this.updateX(domainFrom, domainTo, domainVisibleFrom, domainVisibleTo, coordinate, majorShapes, minorShapes, gridlineShapes, plotAreaY + plotAreaHeight + offset, transform, plotAreaY, plotAreaHeight);
                     }
                     break;
                 case DChartAxisPosition.LEFT:
@@ -79749,8 +79764,7 @@ var DChartAxisBaseTickContainer = /** @class */ (function () {
                         var rangeVisible = this.getRangeVisible(plotArea, coordinate, work);
                         var rangeVisibleFrom = rangeVisible.from;
                         var rangeVisibleTo = rangeVisible.to;
-                        var plotAreaWidth = plotArea.width;
-                        return this.updateY(rangeFrom, rangeTo, rangeVisibleFrom, rangeVisibleTo, coordinate, majorShapes, minorShapes, gridlineShapes, 0 - offset, transform, plotAreaWidth);
+                        return this.updateY(rangeFrom, rangeTo, rangeVisibleFrom, rangeVisibleTo, coordinate, majorShapes, minorShapes, gridlineShapes, plotAreaX - offset, transform, plotAreaX, plotAreaWidth);
                     }
                     break;
                 case DChartAxisPosition.RIGHT:
@@ -79762,8 +79776,7 @@ var DChartAxisBaseTickContainer = /** @class */ (function () {
                         var rangeVisible = this.getRangeVisible(plotArea, coordinate, work);
                         var rangeVisibleFrom = rangeVisible.from;
                         var rangeVisibleTo = rangeVisible.to;
-                        var plotAreaWidth = plotArea.width;
-                        return this.updateY(rangeFrom, rangeTo, rangeVisibleFrom, rangeVisibleTo, coordinate, majorShapes, minorShapes, gridlineShapes, plotAreaWidth + offset, transform, plotAreaWidth);
+                        return this.updateY(rangeFrom, rangeTo, rangeVisibleFrom, rangeVisibleTo, coordinate, majorShapes, minorShapes, gridlineShapes, plotAreaX + plotAreaWidth + offset, transform, plotAreaX, plotAreaWidth);
                     }
                     break;
             }
@@ -79771,7 +79784,7 @@ var DChartAxisBaseTickContainer = /** @class */ (function () {
         return false;
     };
     DChartAxisBaseTickContainer.prototype.getDomain = function (plotArea, coordinate, result) {
-        var bounds = plotArea.getBoundsInContainer();
+        var bounds = plotArea.getContainerBounds();
         var transform = coordinate.transform;
         return result.set(coordinate.unmap(transform.unmap(bounds.x)), coordinate.unmap(transform.unmap(bounds.x + bounds.width)));
     };
@@ -79779,14 +79792,14 @@ var DChartAxisBaseTickContainer = /** @class */ (function () {
         return result;
     };
     DChartAxisBaseTickContainer.prototype.getRange = function (plotArea, coordinate, result) {
-        var bounds = plotArea.getBoundsInContainer();
+        var bounds = plotArea.getContainerBounds();
         var transform = coordinate.transform;
         return result.set(coordinate.unmap(transform.unmap(bounds.y)), coordinate.unmap(transform.unmap(bounds.y + bounds.height)));
     };
     DChartAxisBaseTickContainer.prototype.getRangeVisible = function (plotArea, coordinate, result) {
         return result;
     };
-    DChartAxisBaseTickContainer.prototype.updateX = function (domainFrom, domainTo, domainVisibleFrom, domainVisibleTo, coordinate, majorShapes, minorShapes, gridlineShapes, shapePositionY, transform, plotAreaHeight) {
+    DChartAxisBaseTickContainer.prototype.updateX = function (domainFrom, domainTo, domainVisibleFrom, domainVisibleTo, coordinate, majorShapes, minorShapes, gridlineShapes, shapePositionY, transform, plotAreaY, plotAreaHeight) {
         var tick = this._parser.tick;
         var majorTick = tick.major;
         var majorCount = majorTick.count;
@@ -79813,7 +79826,7 @@ var DChartAxisBaseTickContainer = /** @class */ (function () {
                 var majorTickStep = majorTicks[imajorTick + 2];
                 this.showMajor(majorShape, majotTickPositionX, shapePositionY, majorFormatter === null || majorFormatter === void 0 ? void 0 : majorFormatter.format(majorTickPosition, majorTickStep));
                 if (i < gridlineShapes.length) {
-                    this.showMajorGridline(gridlineShapes[i], majorTickPosition, majotTickPositionX, plotAreaHeight * 0.5, 0, plotAreaHeight);
+                    this.showMajorGridline(gridlineShapes[i], majorTickPosition, majotTickPositionX, plotAreaY + plotAreaHeight * 0.5, 0, plotAreaHeight);
                 }
             }
             else {
@@ -79839,7 +79852,7 @@ var DChartAxisBaseTickContainer = /** @class */ (function () {
         }
         return true;
     };
-    DChartAxisBaseTickContainer.prototype.updateY = function (rangeFrom, rangeTo, rangeVisibleFrom, rangeVisibleTo, coordinate, majorShapes, minorShapes, gridlineShapes, shapePositionX, transform, plotAreaWidth) {
+    DChartAxisBaseTickContainer.prototype.updateY = function (rangeFrom, rangeTo, rangeVisibleFrom, rangeVisibleTo, coordinate, majorShapes, minorShapes, gridlineShapes, shapePositionX, transform, plotAreaX, plotAreaWidth) {
         var tick = this._parser.tick;
         var majorTick = tick.major;
         var majorCount = majorTick.count;
@@ -79866,7 +79879,7 @@ var DChartAxisBaseTickContainer = /** @class */ (function () {
                 var majorTickStep = majorTicks[imajorTick + 2];
                 this.showMajor(majorShape, shapePositionX, majotTickPositionY, majorFormatter === null || majorFormatter === void 0 ? void 0 : majorFormatter.format(majorTickPosition, majorTickStep));
                 if (i < gridlineShapes.length) {
-                    this.showMajorGridline(gridlineShapes[i], majorTickPosition, plotAreaWidth * 0.5, majotTickPositionY, plotAreaWidth, 0);
+                    this.showMajorGridline(gridlineShapes[i], majorTickPosition, plotAreaX + plotAreaWidth * 0.5, majotTickPositionY, plotAreaWidth, 0);
                 }
             }
             else {
@@ -80071,9 +80084,9 @@ var DChartAxisBase = /** @class */ (function () {
  * SPDX-License-Identifier: Apache-2.0
  */
 var DChartAxisContainerImpl = /** @class */ (function () {
-    function DChartAxisContainerImpl(plotArea, options) {
+    function DChartAxisContainerImpl(plotArea, container, options) {
         this._plotArea = plotArea;
-        this._container = new EShapeContainer();
+        this._container = container;
         this._list = new Map();
     }
     Object.defineProperty(DChartAxisContainerImpl.prototype, "container", {
@@ -80548,9 +80561,12 @@ var DChartAxisGuideSimple = /** @class */ (function () {
         var axis = this._axis;
         if (shape != null && container != null && axis != null) {
             var plotArea = container.plotArea;
+            var plotAreaBounds = plotArea.getAxisBounds(axis.position);
+            var plotAreaX = plotAreaBounds.x;
+            var plotAreaY = plotAreaBounds.y;
+            var plotAreaWidth = plotAreaBounds.width;
+            var plotAreaHeight = plotAreaBounds.height;
             var transform = plotArea.container.transform.localTransform;
-            var plotAreaWidth = plotArea.width;
-            var plotAreaHeight = plotArea.height;
             var offset = axis.padding * index;
             switch (axis.position) {
                 case DChartAxisPosition.TOP:
@@ -80561,10 +80577,10 @@ var DChartAxisGuideSimple = /** @class */ (function () {
                         work.set(coordinateX.transform.map(coordinateX.map(this._position)), 0);
                         transform.apply(work, work);
                         var x = work.x;
-                        shape.update(axis.position, x, plotAreaHeight * 0.5, this._isShown && 0 <= x && x <= plotAreaWidth, plotAreaWidth, plotAreaHeight, offset);
+                        shape.update(axis.position, x, plotAreaY + plotAreaHeight * 0.5, this._isShown && plotAreaX <= x && x <= plotAreaX + plotAreaWidth, plotAreaWidth, plotAreaHeight, offset);
                     }
                     else {
-                        shape.update(axis.position, 0, plotAreaHeight * 0.5, false, plotAreaWidth, plotAreaHeight, offset);
+                        shape.update(axis.position, plotAreaX, plotAreaY + plotAreaHeight * 0.5, false, plotAreaWidth, plotAreaHeight, offset);
                     }
                     break;
                 case DChartAxisPosition.LEFT:
@@ -80575,10 +80591,10 @@ var DChartAxisGuideSimple = /** @class */ (function () {
                         work.set(0, coordinateY.transform.map(coordinateY.map(this._position)));
                         transform.apply(work, work);
                         var y = work.y;
-                        shape.update(axis.position, plotAreaWidth * 0.5, y, this._isShown && 0 <= y && y <= plotAreaHeight, plotAreaWidth, plotAreaHeight, offset);
+                        shape.update(axis.position, plotAreaX + plotAreaWidth * 0.5, y, this._isShown && plotAreaY <= y && y <= plotAreaY + plotAreaHeight, plotAreaWidth, plotAreaHeight, offset);
                     }
                     else {
-                        shape.update(axis.position, plotAreaWidth * 0.5, 0, false, plotAreaWidth, plotAreaHeight, offset);
+                        shape.update(axis.position, plotAreaX + plotAreaWidth * 0.5, plotAreaY, false, plotAreaWidth, plotAreaHeight, offset);
                     }
                     break;
             }
@@ -80878,24 +80894,16 @@ var DChartCoordinateBase = /** @class */ (function () {
             var work = this._work;
             switch (this._direction) {
                 case DChartCoordinateDirection.X:
-                    this.getPixelDomain(plotArea, work);
+                    plotArea.getPixelDomain(work);
                     this.doFit_(work.from, work.to, this.toFitDomain(from, to, plotArea, work), result);
                     break;
                 case DChartCoordinateDirection.Y:
-                    this.getPixelRange(plotArea, work);
+                    plotArea.getPixelRange(work);
                     this.doFit_(work.from, work.to, this.toFitRange(from, to, plotArea, work), result);
                     break;
             }
         }
     };
-    DChartCoordinateBase.prototype.getPixelDomain = function (plotArea, result) {
-        var padding = plotArea.padding;
-        return result.set(padding.getLeft(), plotArea.width - padding.getRight());
-    };
-    DChartCoordinateBase.prototype.getPixelRange = function (plotArea, result) {
-        var padding = plotArea.padding;
-        return result.set(plotArea.height - padding.getBottom(), padding.getTop());
-    };
     DChartCoordinateBase.prototype.toFitDomain = function (from, to, plotArea, result) {
         if (from == null) {
             from = this._from;
@@ -81528,6 +81536,119 @@ var DChartOverview = /** @class */ (function (_super) {
     return DChartOverview;
 }(DBase));
 
+/*
+ * Copyright (C) 2019 Toshiba Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var DChartPlotAreaBase = /** @class */ (function (_super) {
+    __extends(DChartPlotAreaBase, _super);
+    function DChartPlotAreaBase(chart, options) {
+        var _this = _super.call(this, options) || this;
+        _this._isContainerBoundsDirty = true;
+        _this._containerBounds = new pixi_js.Rectangle();
+        _this._workPoint = new pixi_js.Point();
+        _this._pixelBounds = new pixi_js.Rectangle();
+        _this._chart = chart;
+        _this._blendStartTime = 0;
+        _this._blendDuration = 1000;
+        _this._blendTimeout = null;
+        _this._onBlendBound = function () {
+            _this.onBlend();
+        };
+        _this._isViewDirty = true;
+        _this._view = _this.newView(options);
+        return _this;
+    }
+    DChartPlotAreaBase.prototype.onResize = function (newWidth, newHeight, oldWidth, oldHeight) {
+        this._isViewDirty = true;
+        this._isContainerBoundsDirty = true;
+        _super.prototype.onResize.call(this, newWidth, newHeight, oldWidth, oldHeight);
+    };
+    Object.defineProperty(DChartPlotAreaBase.prototype, "chart", {
+        get: function () {
+            return this._chart;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DChartPlotAreaBase.prototype, "view", {
+        get: function () {
+            return this._view;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DChartPlotAreaBase.prototype.onWheel = function (e, deltas, global) {
+        var vresult = this._view.onWheel(e, deltas, global);
+        var sresult = _super.prototype.onWheel.call(this, e, deltas, global);
+        return vresult || sresult;
+    };
+    DChartPlotAreaBase.prototype.onDblClick = function (e, interactionManager) {
+        var vresult = this._view.onDblClick(e, interactionManager);
+        var sresult = _super.prototype.onDblClick.call(this, e, interactionManager);
+        return vresult || sresult;
+    };
+    DChartPlotAreaBase.prototype.onDown = function (e) {
+        this._view.onDown(e);
+        _super.prototype.onDown.call(this, e);
+    };
+    DChartPlotAreaBase.prototype.render = function (renderer) {
+        if (this._isViewDirty) {
+            this._isViewDirty = false;
+            this.onViewDirty();
+        }
+        _super.prototype.render.call(this, renderer);
+    };
+    DChartPlotAreaBase.prototype.getPixelDomain = function (result) {
+        var padding = this.padding;
+        return result.set(padding.getLeft(), this.width - padding.getRight());
+    };
+    DChartPlotAreaBase.prototype.getPixelRange = function (result) {
+        var padding = this.padding;
+        return result.set(this.height - padding.getBottom(), padding.getTop());
+    };
+    DChartPlotAreaBase.prototype.getPixelBounds = function () {
+        var result = this._pixelBounds;
+        result.x = 0;
+        result.y = 0;
+        result.width = this.width;
+        result.height = this.height;
+        return result;
+    };
+    DChartPlotAreaBase.prototype.getAxisBounds = function (position) {
+        return this.getPixelBounds();
+    };
+    DChartPlotAreaBase.prototype.getSelectionBoundsX = function () {
+        return this.getPixelBounds();
+    };
+    DChartPlotAreaBase.prototype.getSelectionBoundsY = function () {
+        return this.getPixelBounds();
+    };
+    DChartPlotAreaBase.prototype.getContainerBounds = function () {
+        var result = this._containerBounds;
+        if (this._isContainerBoundsDirty) {
+            this._isContainerBoundsDirty = false;
+            var container = this.container;
+            container.updateTransform();
+            var transform = container.transform.localTransform;
+            var work = this._workPoint;
+            work.set(0, 0);
+            transform.applyInverse(work, work);
+            result.x = work.x;
+            result.y = work.y;
+            work.set(this.width, this.height);
+            transform.applyInverse(work, work);
+            result.width = work.x - result.x;
+            result.height = work.y - result.y;
+        }
+        return result;
+    };
+    DChartPlotAreaBase.prototype.getType = function () {
+        return "DChartPlotArea";
+    };
+    return DChartPlotAreaBase;
+}(DBase));
+
 /*
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
@@ -81804,11 +81925,10 @@ var DChartSeriesStrokeImpl = /** @class */ (function () {
  */
 var DChartSeriesContainerImpl = /** @class */ (function () {
     function DChartSeriesContainerImpl(plotArea, options) {
-        var _a;
         this._plotArea = plotArea;
         this._domain = new DChartRegionImpl(NaN, NaN);
         this._range = new DChartRegionImpl(NaN, NaN);
-        this._selection = (_a = options === null || options === void 0 ? void 0 : options.selection) !== null && _a !== void 0 ? _a : null;
+        this._selection = null;
         this._fill = new DChartSeriesFillImpl(options === null || options === void 0 ? void 0 : options.fill);
         this._stroke = new DChartSeriesStrokeImpl(options === null || options === void 0 ? void 0 : options.stroke);
         this._size = new DChartSeriesPointImpl(options === null || options === void 0 ? void 0 : options.size);
@@ -81842,6 +81962,9 @@ var DChartSeriesContainerImpl = /** @class */ (function () {
         get: function () {
             return this._selection;
         },
+        set: function (selection) {
+            this._selection = selection;
+        },
         enumerable: false,
         configurable: true
     });
@@ -81990,90 +82113,51 @@ var DChartSeriesContainerImpl = /** @class */ (function () {
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
  */
-var DChartPlotAreaImpl = /** @class */ (function (_super) {
-    __extends(DChartPlotAreaImpl, _super);
-    function DChartPlotAreaImpl(chart, options) {
-        var _this = _super.call(this, options) || this;
-        _this._chart = chart;
-        _this._blendStartTime = 0;
-        _this._blendDuration = 1000;
-        _this._blendTimeout = null;
-        _this._onBlendBound = function () {
-            _this.onBlend();
-        };
-        return _this;
-    }
-    DChartPlotAreaImpl.prototype.init = function (options) {
-        var _this = this;
+var DChartPlotAreaOnefold = /** @class */ (function (_super) {
+    __extends(DChartPlotAreaOnefold, _super);
+    function DChartPlotAreaOnefold(chart, options) {
         var _a;
-        _super.prototype.init.call(this, options);
-        this._isBoundsInContainerDirty = true;
-        this._boundsInContainer = new pixi_js.Rectangle();
-        this._workPoint = new pixi_js.Point();
+        var _this = _super.call(this, chart, options) || this;
         // Container
         var container = new DChartPlotAreaContainer(function () {
             _this._isViewDirty = true;
-            _this._isBoundsInContainerDirty = true;
+            _this._isContainerBoundsDirty = true;
             DApplications.update(_this);
         });
-        this._container = container;
-        this.addChild(container);
-        // 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);
@@ -82081,111 +82165,1056 @@ var DChartPlotAreaImpl = /** @class */ (function (_super) {
         }
         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);
@@ -82194,7 +83223,7 @@ var DChartPlotAreaImpl = /** @class */ (function (_super) {
         }
         return this;
     };
-    DChartPlotAreaImpl.prototype.onBlend = function () {
+    DChartPlotAreaTwofold.prototype.onBlend = function () {
         var now = Date.now();
         var ratio = (now - this._blendStartTime) / this._blendDuration;
         if (ratio < 1) {
@@ -82204,12 +83233,24 @@ var DChartPlotAreaImpl = /** @class */ (function (_super) {
             this._blendTimeout = null;
             ratio = 1;
         }
-        this._coordinate.blend(DAnimationTimings.ELASTIC(ratio));
-        this._axis.update();
-        this._series.update();
+        var t = DAnimationTimings.ELASTIC(ratio);
+        var primary = this.primary;
+        primary.coordinate.blend(t);
+        primary.axis.update();
+        primary.series.update();
+        var secondary = this.secondary;
+        secondary.coordinate.blend(t);
+        secondary.axis.update();
+        secondary.series.update();
+    };
+    DChartPlotAreaTwofold.prototype.destroy = function () {
+        var _a, _b;
+        (_a = this._primary) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_b = this._secondary) === null || _b === void 0 ? void 0 : _b.destroy();
+        this._axis.destroy();
     };
-    return DChartPlotAreaImpl;
-}(DBase));
+    return DChartPlotAreaTwofold;
+}(DChartPlotAreaBase));
 
 /*
  * Copyright (C) 2019 Toshiba Corporation
@@ -82423,18 +83464,14 @@ var DChartSelectionGridlineX = /** @class */ (function (_super) {
         var shape = this._shape;
         if (shape) {
             var mappedX = mappedPosition.x;
-            var height = container.plotArea.height;
-            shape.transform.position.set(mappedX, height * 0.5);
-            shape.size.set(0, height);
-            shape.visible = this.isVisible(container, position, mappedPosition);
+            var bounds = container.plotArea.getSelectionBoundsX();
+            shape.transform.position.set(mappedX, bounds.y + bounds.height * 0.5);
+            shape.size.set(0, bounds.height);
+            shape.visible = bounds.x <= mappedX && mappedX <= bounds.x + bounds.width;
             return true;
         }
         return false;
     };
-    DChartSelectionGridlineX.prototype.isVisible = function (container, position, mappedPosition) {
-        var x = mappedPosition.x;
-        return 0 <= x && x <= container.plotArea.width;
-    };
     DChartSelectionGridlineX.prototype.getType = function () {
         return "DChartSelectionGridlineX";
     };
@@ -82454,18 +83491,14 @@ var DChartSelectionGridlineY = /** @class */ (function (_super) {
         var shape = this._shape;
         if (shape) {
             var mappedY = mappedPosition.y;
-            var width = container.plotArea.width;
-            shape.transform.position.set(width * 0.5, mappedY);
-            shape.size.set(width, 0);
-            shape.visible = this.isVisible(container, position, mappedPosition);
+            var bounds = container.plotArea.getSelectionBoundsY();
+            shape.transform.position.set(bounds.x + bounds.width * 0.5, mappedY);
+            shape.size.set(bounds.width, 0);
+            shape.visible = bounds.y <= mappedY && mappedY <= bounds.y + bounds.height;
             return true;
         }
         return false;
     };
-    DChartSelectionGridlineY.prototype.isVisible = function (container, position, mappedPosition) {
-        var y = mappedPosition.y;
-        return 0 <= y && y <= container.plotArea.height;
-    };
     DChartSelectionGridlineY.prototype.getType = function () {
         return "DChartSelectionGridlineY";
     };
@@ -82493,8 +83526,11 @@ var DChartSelectionMarker = /** @class */ (function (_super) {
     DChartSelectionMarker.prototype.isVisible = function (container, position, mappedPosition) {
         var x = mappedPosition.x;
         var y = mappedPosition.y;
-        var plotArea = container.plotArea;
-        return 0 <= x && x <= plotArea.width && 0 <= y && y <= plotArea.height;
+        var bounds = container.plotArea.getPixelBounds();
+        return (bounds.x <= x &&
+            x <= bounds.x + bounds.width &&
+            bounds.y <= y &&
+            y <= bounds.y + bounds.height);
     };
     DChartSelectionMarker.prototype.getType = function () {
         return "DChartSelectionMarker";
@@ -84120,7 +85156,7 @@ var DChartSeriesLinear = /** @class */ (function (_super) {
         var p1x = NaN;
         var p1y = NaN;
         var threshold = 0.00001;
-        var bounds = container.plotArea.getBoundsInContainer();
+        var bounds = container.plotArea.getContainerBounds();
         if (babs <= aabs) {
             var xfrom = xcoordinate.unmap(xcoordinate.transform.unmap(bounds.x));
             var xto = xcoordinate.unmap(xcoordinate.transform.unmap(bounds.x + bounds.width));
@@ -84285,10 +85321,8 @@ var DChart = /** @class */ (function (_super) {
     DChart.prototype.init = function (options) {
         var _a;
         _super.prototype.init.call(this, options);
-        // Plot area
-        var plotArea = this.plotArea;
-        this.addChild(plotArea);
         // Overflow mask
+        var plotArea = this.plotArea;
         var mask = (_a = options === null || options === void 0 ? void 0 : options.mask) !== null && _a !== void 0 ? _a : this.theme.isOverflowMaskEnabled();
         if (mask) {
             plotArea.axis.container.mask = this.getOverflowMask();
@@ -84304,22 +85338,25 @@ var DChart = /** @class */ (function (_super) {
     };
     Object.defineProperty(DChart.prototype, "plotArea", {
         get: function () {
-            var result = this._plotArea;
-            if (result == null) {
-                result = this.newPlotArea();
-                this._plotArea = result;
-            }
-            return result;
+            var _a;
+            return ((_a = this._plotArea) !== null && _a !== void 0 ? _a : (this._plotArea = this.newPlotArea()));
         },
         enumerable: false,
         configurable: true
     });
     DChart.prototype.newPlotArea = function () {
         var _a;
-        return new DChartPlotAreaImpl(this, (_a = this._options) === null || _a === void 0 ? void 0 : _a.plotArea);
-    };
-    DChart.prototype.getType = function () {
-        return "DChart";
+        var plotArea = (_a = this._options) === null || _a === void 0 ? void 0 : _a.plotArea;
+        if (plotArea != null && ("primary" in plotArea || "secondary" in plotArea)) {
+            var result = new DChartPlotAreaTwofold(this, plotArea);
+            this.addChild(result);
+            return result;
+        }
+        else {
+            var result = new DChartPlotAreaOnefold(this, plotArea);
+            this.addChild(result);
+            return result;
+        }
     };
     DChart.prototype.destroy = function () {
         var _a;
@@ -84328,6 +85365,9 @@ var DChart = /** @class */ (function (_super) {
             _super.prototype.destroy.call(this);
         }
     };
+    DChart.prototype.getType = function () {
+        return "DChart";
+    };
     return DChart;
 }(DBase));
 
@@ -99725,8 +100765,21 @@ exports.DChartCoordinateTransformMarkImpl = DChartCoordinateTransformMarkImpl;
 exports.DChartLegend = DChartLegend;
 exports.DChartLegendItem = DChartLegendItem;
 exports.DChartOverview = DChartOverview;
+exports.DChartPlotAreaBase = DChartPlotAreaBase;
 exports.DChartPlotAreaContainer = DChartPlotAreaContainer;
-exports.DChartPlotAreaImpl = DChartPlotAreaImpl;
+exports.DChartPlotAreaOnefold = DChartPlotAreaOnefold;
+exports.DChartPlotAreaTwofold = DChartPlotAreaTwofold;
+exports.DChartPlotAreaTwofoldAxisContainer = DChartPlotAreaTwofoldAxisContainer;
+exports.DChartPlotAreaTwofoldCoorinateContainer = DChartPlotAreaTwofoldCoorinateContainer;
+exports.DChartPlotAreaTwofoldCoorinateContainerSub = DChartPlotAreaTwofoldCoorinateContainerSub;
+exports.DChartPlotAreaTwofoldOverflowMaskPrimary = DChartPlotAreaTwofoldOverflowMaskPrimary;
+exports.DChartPlotAreaTwofoldOverflowMaskSecondary = DChartPlotAreaTwofoldOverflowMaskSecondary;
+exports.DChartPlotAreaTwofoldSeriesContainer = DChartPlotAreaTwofoldSeriesContainer;
+exports.DChartPlotAreaTwofoldSubBase = DChartPlotAreaTwofoldSubBase;
+exports.DChartPlotAreaTwofoldSubPrimary = DChartPlotAreaTwofoldSubPrimary;
+exports.DChartPlotAreaTwofoldSubSecondary = DChartPlotAreaTwofoldSubSecondary;
+exports.DChartPlotAreaTwofoldViewTarget = DChartPlotAreaTwofoldViewTarget;
+exports.DChartPlotAreaTwofoldViewTargetPoint = DChartPlotAreaTwofoldViewTargetPoint;
 exports.DChartRegionImpl = DChartRegionImpl;
 exports.DChartRegionImplObservable = DChartRegionImplObservable;
 exports.DChartSelectionContainerImpl = DChartSelectionContainerImpl;
@@ -100681,6 +101734,7 @@ exports.DynamicFontAtlasCharacterType = DynamicFontAtlasCharacterType;
 exports.DynamicFontAtlasFont = DynamicFontAtlasFont;
 exports.DynamicFontAtlases = DynamicFontAtlases;
 exports.DynamicSDFFontAtlas = DynamicSDFFontAtlas;
+exports.DynamicSDFFontAtlasFont = DynamicSDFFontAtlasFont;
 exports.DynamicSDFFontAtlases = DynamicSDFFontAtlases;
 exports.DynamicSDFFontGenerator = DynamicSDFFontGenerator;
 exports.EShapeAcceptorEdgeSide = EShapeAcceptorEdgeSide;