diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/bar_decorator.js b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/bar_decorator.js
index 9cc8931b48d9f..6ddd43bcf72c3 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/bar_decorator.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/bar_decorator.js
@@ -21,7 +21,7 @@ import React from 'react';
 import { ScaleType, BarSeries } from '@elastic/charts';
 import { getBarStyles } from '../utils/series_styles';
 import { ChartsEntities } from '../model/charts';
-import { X_ACCESSOR_INDEX, Y_ACCESSOR_INDEXES } from '../../../constants';
+import { X_ACCESSOR_INDEX, Y_ACCESSOR_INDEXES, Y0_ACCESSOR_INDEXES } from '../../../constants';
 
 export function BarSeriesDecorator({
   seriesId,
@@ -54,6 +54,7 @@ export function BarSeriesDecorator({
     hideInLegend,
     xAccessor: X_ACCESSOR_INDEX,
     yAccessors: Y_ACCESSOR_INDEXES,
+    y0Accessors: bars.mode === 'band' ? Y0_ACCESSOR_INDEXES : undefined,
     stackAccessors,
     stackAsPercentage,
     xScaleType,
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/index.js b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/index.js
index 9e45235271027..75554a476bdea 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/index.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/index.js
@@ -88,7 +88,7 @@ export const TimeSeries = ({
   const tooltipFormatter = decorateFormatter(xAxisFormatter);
   const uiSettings = getUISettings();
   const timeZone = timezoneProvider(uiSettings)();
-  const hasBarChart = series.some(({ bars }) => bars?.show);
+  const hasBarChart = series.some(({ bars }) => bars.show);
 
   // compute the theme based on the bg color
   const theme = getTheme(darkMode, backgroundColor);
@@ -162,7 +162,7 @@ export const TimeSeries = ({
           const isPercentage = stack === STACKED_OPTIONS.PERCENT;
           const key = `${id}-${label}`;
 
-          if (bars?.show) {
+          if (bars.show) {
             return (
               <BarSeriesDecorator
                 key={key}
diff --git a/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/percentile.js b/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/percentile.js
index 2888ce9f256d1..856fb4d736911 100644
--- a/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/percentile.js
+++ b/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/percentile.js
@@ -52,7 +52,17 @@ export function percentile(resp, panel, series, meta) {
             color: split.color,
             label,
             data,
-            lines: { show: true, fill: percentile.shade, lineWidth: 0, mode: 'band' },
+            lines: {
+              show: series.chart_type === 'line',
+              fill: Number(percentile.shade),
+              lineWidth: 0,
+              mode: 'band',
+            },
+            bars: {
+              show: series.chart_type === 'bar',
+              fill: Number(percentile.shade),
+              mode: 'band',
+            },
             points: { show: false },
           });
         } else {
diff --git a/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/percentile.test.js b/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/percentile.test.js
index 9cb08de8dad23..9761aa408f2ba 100644
--- a/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/percentile.test.js
+++ b/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/percentile.test.js
@@ -89,63 +89,45 @@ describe('percentile(resp, panel, series)', () => {
   test('creates a series', () => {
     const next = results => results;
     const results = percentile(resp, panel, series)(next)([]);
-    expect(results).toHaveLength(3);
+    expect(results).toHaveLength(2);
 
     expect(results[0]).toHaveProperty('id', 'test:10-90');
     expect(results[0]).toHaveProperty('color', 'rgb(255, 0, 0)');
-    expect(results[0]).toHaveProperty('fillBetween', 'test:10-90:90');
     expect(results[0]).toHaveProperty('label', 'Percentile of cpu (10)');
-    expect(results[0]).toHaveProperty('legend', false);
     expect(results[0]).toHaveProperty('lines');
     expect(results[0].lines).toEqual({
       fill: 0.2,
       lineWidth: 0,
       show: true,
+      mode: 'band',
     });
     expect(results[0]).toHaveProperty('points');
     expect(results[0].points).toEqual({ show: false });
     expect(results[0].data).toEqual([
-      [1, 1],
-      [2, 1.2],
+      [1, 1, 5],
+      [2, 1.2, 5.3],
     ]);
 
-    expect(results[1]).toHaveProperty('id', 'test:10-90:90');
+    expect(results[1]).toHaveProperty('id', 'test:50');
     expect(results[1]).toHaveProperty('color', 'rgb(255, 0, 0)');
-    expect(results[1]).toHaveProperty('label', 'Percentile of cpu (10)');
-    expect(results[1]).toHaveProperty('legend', false);
+    expect(results[1]).toHaveProperty('label', 'Percentile of cpu (50)');
+    expect(results[1]).toHaveProperty('stack', false);
     expect(results[1]).toHaveProperty('lines');
     expect(results[1].lines).toEqual({
-      fill: false,
-      lineWidth: 0,
-      show: true,
-    });
-    expect(results[1]).toHaveProperty('points');
-    expect(results[1].points).toEqual({ show: false });
-    expect(results[1].data).toEqual([
-      [1, 5],
-      [2, 5.3],
-    ]);
-
-    expect(results[2]).toHaveProperty('id', 'test:50');
-    expect(results[2]).toHaveProperty('color', 'rgb(255, 0, 0)');
-    expect(results[2]).toHaveProperty('label', 'Percentile of cpu (50)');
-    expect(results[2]).toHaveProperty('stack', false);
-    expect(results[2]).toHaveProperty('lines');
-    expect(results[2].lines).toEqual({
       fill: 0,
       lineWidth: 1,
       show: true,
       steps: false,
     });
-    expect(results[2]).toHaveProperty('bars');
-    expect(results[2].bars).toEqual({
+    expect(results[1]).toHaveProperty('bars');
+    expect(results[1].bars).toEqual({
       fill: 0,
       lineWidth: 1,
       show: false,
     });
-    expect(results[2]).toHaveProperty('points');
-    expect(results[2].points).toEqual({ show: true, lineWidth: 1, radius: 1 });
-    expect(results[2].data).toEqual([
+    expect(results[1]).toHaveProperty('points');
+    expect(results[1].points).toEqual({ show: true, lineWidth: 1, radius: 1 });
+    expect(results[1].data).toEqual([
       [1, 2.5],
       [2, 2.7],
     ]);