diff --git a/common/Charts/ChartsDrawer.js b/common/Charts/ChartsDrawer.js
index a3b387aae1..74913c7411 100644
--- a/common/Charts/ChartsDrawer.js
+++ b/common/Charts/ChartsDrawer.js
@@ -189,7 +189,9 @@ CChartsDrawer.prototype =
 		//CHARTS
 		if (!chartSpace.bEmptySeries) {
 			for(var i in this.charts) {
-				this.charts[i].recalculate();
+				if (this.charts.hasOwnProperty(i) && this.charts[i]) {
+					this.charts[i].recalculate();
+				}
 			}
 		}
 
@@ -318,7 +320,9 @@ CChartsDrawer.prototype =
 
 			if (chartSpace.chart.plotArea.isForChartEx) {
 				for (i in t.charts) {
-					t.charts[i].draw();
+					if (t.charts.hasOwnProperty(i) && t.charts[i]) {
+						t.charts[i].draw();
+					}
 				}
 			} else {
 				//для начала нужно отсортировать
@@ -616,6 +620,7 @@ CChartsDrawer.prototype =
 
 		if (!this.cChartSpace.bEmptySeries) {
 			var type = obj.getObjectType();
+			console.log(type);
 			switch (type) {
 				case AscDFH.historyitem_type_DLbl: {
 					pos = this._calculatePositionDlbl(obj);
@@ -625,7 +630,7 @@ CChartsDrawer.prototype =
 					var parentType = obj.parent ? obj.parent.getObjectType() : null;
 					if (parentType === AscDFH.historyitem_type_Chart) {
 						pos = this._calculatePositionTitle(obj);
-					} else if (parentType === AscDFH.historyitem_type_ValAx || parentType === AscDFH.historyitem_type_CatAx || parentType === AscDFH.historyitem_type_DateAx) {
+					} else if (parentType === AscDFH.historyitem_type_ValAx || parentType === AscDFH.historyitem_type_CatAx || parentType === AscDFH.historyitem_type_DateAx || parentType === AscDFH.historyitem_type_Axis) {
 						pos = this._calculatePositionAxisTitle(obj.parent);
 					}
 					break;
@@ -2491,13 +2496,6 @@ CChartsDrawer.prototype =
 		valAxis.max = axisProperties.val.max;
 		valAxis.scale = axisProperties.val.scale.length > 0 ? axisProperties.val.scale : this._roundValues(this._getAxisValues2(valAxis, this.cChartSpace, false, false));
 
-		// Exchange cross axes 
-		catAxis.crossAx = valAxis;
-		valAxis.crossAx = catAxis;
-
-		// Differentiate between axes 
-		catAxis.axPos = window['AscFormat'].AX_POS_B;
-		valAxis.axPos = window['AscFormat'].AX_POS_L;
 	},
 
 	_chartExSetAxisMinAndMax: function (axis, num) {
@@ -4615,11 +4613,11 @@ CChartsDrawer.prototype =
 		if (!this.cChartSpace || !this.calcProp) {
 			return null;
 		}
-		var pathId = this.cChartSpace.AllocPath();
-		var path = this.cChartSpace.GetPath(pathId);
+		const pathId = this.cChartSpace.AllocPath();
+		const path = this.cChartSpace.GetPath(pathId);
 
-		var pathH = this.calcProp.pathH;
-		var pathW = this.calcProp.pathW;
+		const pathH = this.calcProp.pathH;
+		const pathW = this.calcProp.pathW;
 
 		if (!isPxToMmConverted) {
 			const pxToMm = this.calcProp.pxToMM;
@@ -5049,9 +5047,10 @@ CChartsDrawer.prototype =
 
 	getVerticalGridLines: function (axis, isCatAxis) {
 		var gridLines, minorGridLines;
+		const isForChartEx = this.cChartSpace && this.cChartSpace.chart && this.cChartSpace.chart.plotArea && this.cChartSpace.chart.plotArea.isForChartEx ? true : false;
 
 		var crossBetween = this.cChartSpace.getValAxisCrossType();
-		if(null === crossBetween && isCatAxis) {
+		if(null === crossBetween && (isCatAxis || isForChartEx)) {
 			crossBetween = axis.crossAx ? axis.crossAx.crossBetween : null;
 		}
 
@@ -5067,15 +5066,14 @@ CChartsDrawer.prototype =
 		if(!axis.majorGridlines && !axis.minorGridlines) {
 			return;
 		}
-
-		var minorLinesCount = isCatAxis ? 2 : 5;
+		var minorLinesCount = isCatAxis || isForChartEx ? 2 : 5;
 
 		var posAxis = this.calcProp.chartGutter._left / this.calcProp.pxToMM;
 		var stepX = points[1] ? Math.abs((points[1].pos - points[0].pos)) : (Math.abs(points[0].pos - posAxis) * 2);
 		var minorStep = (stepX * this.calcProp.pxToMM) / minorLinesCount;
 		var posX, crossDiff;
 
-		if (crossBetween === AscFormat.CROSS_BETWEEN_BETWEEN && isCatAxis) {
+		if (crossBetween === AscFormat.CROSS_BETWEEN_BETWEEN && (isCatAxis || isForChartEx)) {
 			crossDiff = points[1] ? Math.abs((points[1].pos - points[0].pos) / 2) : Math.abs(points[0].pos - posAxis);
 		}
 
@@ -5083,7 +5081,7 @@ CChartsDrawer.prototype =
 		var path = this.cChartSpace.GetPath(pathId);
 		var i;
 		for (i = 0; i < points.length; i++) {
-			if(isCatAxis && points[i].val < 0) {
+			if((isCatAxis && points[i].val < 0) && !isForChartEx) {
 				continue;
 			}
 
@@ -5114,7 +5112,7 @@ CChartsDrawer.prototype =
 		var pathIdMinor = this.cChartSpace.AllocPath();
 		var pathMinor = this.cChartSpace.GetPath(pathIdMinor);
 		for (i = 0; i < points.length; i++) {
-			if(isCatAxis && points[i].val < 0) {
+			if((isCatAxis && points[i].val < 0) && !isForChartEx) {
 				continue;
 			}
 
@@ -7633,7 +7631,10 @@ drawHistogramChart.prototype = {
 			// two different ways of storing information, object and array, therefore convert object into array
 			const sections = isAggregation ? Object.values(cachedData.aggregation) : cachedData.results; 
 			if (sections) {
-				const initialBarWidth = (this.chartProp.trueWidth)/ sections.length;
+				// 1 px gap for each section length
+				const gapWidth = 1;
+				// const gapNumbers = sections.length - 1;
+				const initialBarWidth = (this.chartProp.trueWidth) / sections.length;
 				const barWidth = (initialBarWidth / (1 + coeff));
 				const margin = (initialBarWidth - barWidth) / 2;
 
@@ -7642,11 +7643,12 @@ drawHistogramChart.prototype = {
 					// aggregation object does not have field occurrence;
 					const val = isAggregation ? sections[i] : sections[i].occurrence;
 					const startY = this.cChartDrawer.getYPosition(val, valAxis, true);
+					const bW = i === 0 ? barWidth : barWidth - gapWidth;
 					if (this.chartProp && this.chartProp.pxToMM ) {
 						const height = valStart - (startY * this.chartProp.pxToMM);
-						this.paths[i] = this.cChartDrawer._calculateRect(start, valStart, barWidth, height);
+						this.paths[i] = this.cChartDrawer._calculateRect(start, valStart, bW, height);
 					}		
-					start += (barWidth + margin + margin);
+					start += (bW + margin + margin + gapWidth);
 				}
 			}
 
@@ -7817,25 +7819,52 @@ drawWaterfallChart.prototype = {
 			let valStart = this.cChartSpace.chart.plotArea.axId ? this.cChartSpace.chart.plotArea.axId[0].posY * this.chartProp.pxToMM : this.chartProp.trueHeight + this.chartProp.chartGutter._top;
 			if (AscFormat.isRealNumber(valStart)) {
 				const coeff = catAxis.scaling.gapWidth;
-				const initialBarWidth = (this.chartProp.trueWidth)/ data.length;
+				// 1 px gap for each section length
+				const gapWidth = 1;
+				const gapNumbers = data.length - 1;
+				const initialBarWidth = (this.chartProp.trueWidth - (gapWidth * gapNumbers))/ data.length;
 				const barWidth = (initialBarWidth / (1 + coeff));
 				const margin = (initialBarWidth - barWidth) / 2;
+
 				let sum = 0;
-				let start = (catStart + margin);
+				let start = (catStart + margin); 
 				for (let i = 0; i < data.length; i++) {
 					sum += data[i].val;
-					const startY = this.cChartDrawer.getYPosition(sum, valAxis, true) * this.chartProp.pxToMM;
+					const valPos = this.cChartDrawer.getYPosition(sum, valAxis, true) * this.chartProp.pxToMM; // calc roof of the current bar
+					const next = start + (barWidth + margin + gapWidth + margin); // calc end of the current barr
 					if (this.chartProp && this.chartProp.pxToMM ) {
-						const height = valStart - startY;
-						this.paths[i] = this.cChartDrawer._calculateRect(start, valStart, barWidth, height);
+						const height = valStart - valPos;
+						this.paths[i] = [];
+						this.paths[i].push(this.cChartDrawer._calculateRect(start, valStart, barWidth, height));
+						//dont need last connectorLine
+						if (i !== data.length - 1 && margin !== 0) {
+							this.paths[i].push(this._calculateConnectorLine(valPos, start + barWidth, next))
+						}
 					}
-					valStart = startY;		
-					start += (barWidth + margin + margin);
+					valStart = valPos;	// go up in y direction
+					start = next;	// go right in x direction
 				}
 			}
 		}
 	},
 
+	_calculateConnectorLine: function (y, x1, x2) {
+		if (!this.cChartSpace || !this.chartProp) {
+			return null;
+		}
+		const pathId = this.cChartSpace.AllocPath();
+		const path = this.cChartSpace.GetPath(pathId);
+
+		const pathH = this.chartProp.pathH;
+		const pathW = this.chartProp.pathW;
+		const pxToMm = this.chartProp.pxToMM;
+
+		path.moveTo((x1 / pxToMm) * pathW, (y / pxToMm)  * pathH);
+		path.lnTo((x2 / pxToMm) * pathW, (y / pxToMm)  * pathH);
+
+		return pathId;
+	},
+
 	draw: function () {
 		if (!this.cChartDrawer || !this.cChartDrawer.calcProp || !this.cChartDrawer.cShapeDrawer || !this.cChartDrawer.cShapeDrawer.Graphics || !this.cChartDrawer.calcProp.chartGutter) {
 			return;
@@ -7888,10 +7917,12 @@ drawWaterfallChart.prototype = {
 		let oSeries = series[0];
 		if(oSeries) {
 			for (let i in this.paths) {
-				let nPtIdx = parseInt(i);
-				let pen = oSeries.getPtPen(nPtIdx);
-				let brush = oSeries.getPtBrush(nPtIdx);
-				this.cChartDrawer.drawPath(this.paths[i], pen, brush);
+				for (let j in this.paths[i]) {
+					let nPtIdx = parseInt(i);
+					let pen = (j === 0 ) ? oSeries.getPtPen(nPtIdx) : this.cChartSpace.chart.plotArea.axId[1].compiledMajorGridLines;
+					let brush = oSeries.getPtBrush(nPtIdx);
+					this.cChartDrawer.drawPath(this.paths[i][j], pen, brush);
+				}
 			}
 		}
 		
diff --git a/common/Drawings/Format/ChartEx.js b/common/Drawings/Format/ChartEx.js
index d89caa5d80..905898aaee 100644
--- a/common/Drawings/Format/ChartEx.js
+++ b/common/Drawings/Format/ChartEx.js
@@ -268,6 +268,10 @@ function (window, undefined) {
 		this.setParentToChild(pr);
 	};
 
+	CAxis.prototype.setAxPos = function (pos) {
+		this.axPos = pos ? window['AscFormat'].AX_POS_L : window['AscFormat'].AX_POS_B;
+	}
+
 	// AxisUnits
 	drawingsChangesMap[AscDFH.historyitem_AxisUnits_SetUnitsLabel] = function (oClass, value) {
 		oClass.unitsLabel = value;
@@ -2946,6 +2950,10 @@ function (window, undefined) {
 		}
 		return null;
 	};
+	CSeries.prototype.getValPts = function () {
+		const numLit = this.getValLit();
+		return numLit ? numLit.pts : [];
+	};
 	CSeries.prototype.getCatLit = function (type) {
 		let oSeriesData = this.getData();
 		if(!oSeriesData) {
diff --git a/common/Drawings/Format/ChartSpace.js b/common/Drawings/Format/ChartSpace.js
index 76db98a8ac..0add210264 100644
--- a/common/Drawings/Format/ChartSpace.js
+++ b/common/Drawings/Format/ChartSpace.js
@@ -4149,7 +4149,7 @@ function(window, undefined) {
 		const cachedData = this.chart.plotArea.plotAreaRegion.cachedData;
 		const results = obtainResults(cachedData);
 		//seria.dataLabels.visibility optional
-		if (seria && seria.dataLabels) {
+		if (cachedData && seria && seria.dataLabels) {
 			const default_lbl = new AscFormat.CDLbl();
 			const nDefaultPosition = seria.dataLabels.pos ? seria.dataLabels.pos : AscFormat.DATA_LABEL_POS_OUT_END;
 			default_lbl.initDefault(nDefaultPosition);
@@ -4185,6 +4185,18 @@ function(window, undefined) {
 	CChartSpace.prototype.calculateLabelsPositions = function (b_recalc_labels, b_recalc_legend) {
 		let layout;
 		let aDLbls = this.recalcInfo.dataLbls;
+
+		// TODO after new succefull implementation of new type remove option here
+		const isForChartEx = this.chart && this.chart.plotArea && this.chart.plotArea.isForChartEx ? true : false;
+		const type = this.chart && this.chart.plotArea && this.chart.plotArea.plotAreaRegion && this.chart.plotArea.plotAreaRegion.series && this.chart.plotArea.plotAreaRegion.series[0] ? this.chart.plotArea.plotAreaRegion.series[0].layoutId : null;
+		if (isForChartEx && type !== AscFormat.SERIES_LAYOUT_BOX_WHISKER && !type) {
+			return ;
+		}
+		if (isForChartEx && (type === AscFormat.SERIES_LAYOUT_BOX_WHISKER || type === AscFormat.SERIES_LAYOUT_FUNNEL || type === AscFormat.SERIES_LAYOUT_PARETO_LINE || type === AscFormat.SERIES_LAYOUT_REGION_MAP || type === AscFormat.SERIES_LAYOUT_SUNBURST || type === AscFormat.SERIES_LAYOUT_TREEMAP)) {
+			return ;
+		}
+		//----------------------------------
+		
 		if (!aDLbls || aDLbls.length === 0) {
 			this.calculateChartExLabelsPositions();
 		}
@@ -4367,7 +4379,7 @@ function(window, undefined) {
 		if (!this.chart || !this.chart.plotArea) {
 			return [];
 		}
-		if (oAxis.Id === this.chart.plotArea.axId[1].Id) {
+		if (this.chart.plotArea.axId.length > 1 && oAxis.Id === this.chart.plotArea.axId[1].Id) {
 			// for the val axis, regularly get labels
 			aStrings = this.getLabelsForAxis(oAxis, true);
 		} else {
@@ -4736,6 +4748,7 @@ function(window, undefined) {
 		if(this.chart.plotArea.layout && this.chart.plotArea.layout.layoutTarget === AscFormat.LAYOUT_TARGET_INNER) {
 			bWithoutLabels = true;
 		}
+		
 		let bCorrected = false;
 		let fL = oRect.x, fT = oRect.y, fR = oRect.x + oRect.w, fB = oRect.y + oRect.h;
 		const isChartEX = this.chart && this.chart.plotArea && this.chart.plotArea.isForChartEx ? true : false;
@@ -4754,6 +4767,9 @@ function(window, undefined) {
 				this.calculateAxisGrid(oCrossAxis, oRect);
 				oCalcMap[oCrossAxis.Id] = true;
 			}
+			if (!oCrossAxis) {
+				return;
+			}
 			let fCrossValue;
 			// posY seeks the zero position on the diagram
 			let posY = null;
@@ -5143,6 +5159,16 @@ function(window, undefined) {
 		this.cachedCanvas = null;
 		this.plotAreaRect = null;
 		this.bEmptySeries = this.checkEmptySeries();
+		// TODO after new succefull implementation of new type remove option here
+		const isForChartEx = this.chart && this.chart.plotArea && this.chart.plotArea.isForChartEx ? true : false;
+		const type = this.chart && this.chart.plotArea && this.chart.plotArea.plotAreaRegion && this.chart.plotArea.plotAreaRegion.series && this.chart.plotArea.plotAreaRegion.series[0] ? this.chart.plotArea.plotAreaRegion.series[0].layoutId : null;
+		if (isForChartEx && type !== AscFormat.SERIES_LAYOUT_BOX_WHISKER && !type) {
+			return ;
+		}
+		if (isForChartEx && (type === AscFormat.SERIES_LAYOUT_BOX_WHISKER || type === AscFormat.SERIES_LAYOUT_FUNNEL || type === AscFormat.SERIES_LAYOUT_PARETO_LINE || type === AscFormat.SERIES_LAYOUT_REGION_MAP || type === AscFormat.SERIES_LAYOUT_SUNBURST || type === AscFormat.SERIES_LAYOUT_TREEMAP)) {
+			return ;
+		}
+		//----------------------------------
 		if (this.chart && this.chart.plotArea) {
 			var oPlotArea = this.chart.plotArea;
 			for (i = 0; i < oPlotArea.axId.length; ++i) {
@@ -5771,7 +5797,8 @@ function(window, undefined) {
 			if (AscFormat.isRealNumber(legend.legendPos)) {
 				legend_pos = legend.legendPos;
 			}
-			var aCharts = this.chart.plotArea.charts;
+			const isChartEx = this.chart && this.chart.plotArea && this.chart.plotArea.isForChartEx ? true : false;
+			var aCharts = isChartEx ? [this.chart.plotArea.plotAreaRegion] : this.chart.plotArea.charts;
 			var oTypedChart;
 			//Order series for the legend
 			var aOrderedSeries = [];
@@ -5853,7 +5880,8 @@ function(window, undefined) {
 						entry = legend.findLegendEntryByIndex(i);
 						if(entry && entry.bDelete)
 							continue;
-						arr_str_labels.push(ser.getSeriesName());
+						const label = ser.getSeriesName ? ser.getSeriesName() : '';
+						arr_str_labels.push(label);
 					}
 					else {
 						entry = legend.findLegendEntryByIndex(i);
@@ -5884,7 +5912,7 @@ function(window, undefined) {
 
 					calc_entry.calcMarkerUnion = new AscFormat.CUnionMarker();
 					union_marker = calc_entry.calcMarkerUnion;
-					var pts = ser.getNumPts();
+					var pts = isChartEx ? ser.getValPts() : ser.getNumPts();
 					var nSerType = ser.getObjectType();
 					if(nSerType === AscDFH.historyitem_type_BarSeries ||
 						nSerType === AscDFH.historyitem_type_BubbleSeries ||
@@ -6084,6 +6112,9 @@ function(window, undefined) {
 			} else {
 				marker_size = 0.2 * max_font_size;
 				for (i = 0; i < calc_entryes.length; ++i) {
+					if (!calc_entryes[i].calcMarkerUnion || !calc_entryes[i].calcMarkerUnion.marker || !calc_entryes[i].calcMarkerUnion.marker.spPr || !calc_entryes[i].calcMarkerUnion.marker.spPr.geometry) {
+						continue;
+					}
 					calc_entryes[i].calcMarkerUnion.marker.spPr.geometry.Recalculate(marker_size, marker_size);
 				}
 				distance_to_text = marker_size * 0.7;
@@ -8458,6 +8489,16 @@ function(window, undefined) {
 		if (this.chartObj) {
 			this.chartObj.draw(this, graphics);
 		}
+		// TODO after new succefull implementation of new type remove option here
+		const isForChartEx = this.chart && this.chart.plotArea && this.chart.plotArea.isForChartEx ? true : false;
+		const type = this.chart && this.chart.plotArea && this.chart.plotArea.plotAreaRegion && this.chart.plotArea.plotAreaRegion.series && this.chart.plotArea.plotAreaRegion.series[0] ? this.chart.plotArea.plotAreaRegion.series[0].layoutId : null;
+		if (isForChartEx && type !== AscFormat.SERIES_LAYOUT_BOX_WHISKER && !type) {
+			return ;
+		}
+		if (isForChartEx && (type === AscFormat.SERIES_LAYOUT_BOX_WHISKER || type === AscFormat.SERIES_LAYOUT_FUNNEL || type === AscFormat.SERIES_LAYOUT_PARETO_LINE || type === AscFormat.SERIES_LAYOUT_REGION_MAP || type === AscFormat.SERIES_LAYOUT_SUNBURST || type === AscFormat.SERIES_LAYOUT_TREEMAP)) {
+			return ;
+		}
+		//----------------------------------
 		if (this.chart && !this.bEmptySeries) {
 			if (this.chart.plotArea) {
 				// var oChartSize = this.getChartSizes();
diff --git a/common/SerializeChart.js b/common/SerializeChart.js
index 56ddebb127..c757e73eb6 100644
--- a/common/SerializeChart.js
+++ b/common/SerializeChart.js
@@ -13507,6 +13507,17 @@ BinaryChartReader.prototype.ReadCT_ChartEx = function (type, length, val) {
         res = this.bcr.Read1(length, function (t, l) {
             return oThis.ReadCT_ChartExPlotArea(t, l, oNewVal);
         });
+        if (oNewVal && oNewVal.axId && Array.isArray(oNewVal.axId)) {
+            for (let i = 0; i < oNewVal.axId.length; i++) {
+                const axis = oNewVal.axId[i];
+                axis.setAxPos(i);
+            }
+            if (oNewVal.axId.length === 2) {
+                oNewVal.axId[0].crossAx = oNewVal.axId[1];
+                oNewVal.axId[1].crossAx = oNewVal.axId[0];
+                oNewVal.axId[1].crossBetween = 0;
+            }
+        }
         val.setPlotArea(oNewVal);
     }
     else if (c_oserct_chartExChartTITLE === type)