diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
index c5e7b0af9654f..0bf5c139e2403 100644
--- a/x-pack/plugins/lens/public/xy_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
@@ -648,6 +648,14 @@ export function XYChart({
             layersAlreadyFormatted
           );
 
+          const isStacked = seriesType.includes('stacked');
+          const isPercentage = seriesType.includes('percentage');
+          const isBarChart = seriesType.includes('bar');
+          const enableHistogramMode =
+            isHistogram &&
+            (isStacked || !splitAccessor) &&
+            (isStacked || !isBarChart || !chartHasMoreThanOneBarSeries);
+
           // For date histogram chart type, we're getting the rows that represent intervals without data.
           // To not display them in the legend, they need to be filtered out.
           const rows = tableConverted.rows.filter(
@@ -674,7 +682,7 @@ export function XYChart({
 
           const seriesProps: SeriesSpec = {
             splitSeriesAccessors: splitAccessor ? [splitAccessor] : [],
-            stackAccessors: seriesType.includes('stacked') ? [xAccessor as string] : [],
+            stackAccessors: isStacked ? [xAccessor as string] : [],
             id: `${splitAccessor}-${accessor}`,
             xAccessor: xAccessor || 'unifiedX',
             yAccessors: [accessor],
@@ -710,13 +718,8 @@ export function XYChart({
               );
             },
             groupId: yAxis?.groupId,
-            enableHistogramMode:
-              isHistogram &&
-              (seriesType.includes('stacked') || !splitAccessor) &&
-              (seriesType.includes('stacked') ||
-                !seriesType.includes('bar') ||
-                !chartHasMoreThanOneBarSeries),
-            stackMode: seriesType.includes('percentage') ? StackMode.Percentage : undefined,
+            enableHistogramMode,
+            stackMode: isPercentage ? StackMode.Percentage : undefined,
             timeZone,
             areaSeriesStyle: {
               point: {
@@ -797,7 +800,11 @@ export function XYChart({
             case 'area_stacked':
             case 'area_percentage_stacked':
               return (
-                <AreaSeries key={index} {...seriesProps} fit={getFitOptions(fittingFunction)} />
+                <AreaSeries
+                  key={index}
+                  {...seriesProps}
+                  fit={isPercentage ? 'zero' : getFitOptions(fittingFunction)}
+                />
               );
             case 'area':
               return (