@@ -32,6 +32,7 @@ import { AxisDomain } from 'recharts/types/util/types';
 import { convertGranularityToSeconds } from '@hyperdx/common-utils/dist/core/utils';
 import {
   DisplayType,
+  getDefaultLineInterpolation,
   LineInterpolation,
 } from '@hyperdx/common-utils/dist/types';
 import { Popover } from '@mantine/core';
@@ -1158,16 +1159,13 @@ const CURVE_TYPE_BY_INTERPOLATION: Record<LineInterpolation, CurveType> = {
   step: 'stepAfter',
 };
 
-// Monotone curves fit each stacked edge independently, so adjacent edges can
-// cross between points and the bands overlap; linear segments stay ordered
-// wherever the points are. Hence stacked lines default to linear.
 export function getLineCurveType(
   displayType: DisplayType,
   lineInterpolation: LineInterpolation | undefined,
 ): CurveType {
-  const fallback =
-    displayType === DisplayType.StackedLine ? 'linear' : 'smooth';
-  return CURVE_TYPE_BY_INTERPOLATION[lineInterpolation ?? fallback];
+  return CURVE_TYPE_BY_INTERPOLATION[
+    lineInterpolation ?? getDefaultLineInterpolation(displayType)
+  ];
 }
 
 // A stacked bar's rendered height sums its series at each timestamp - leave
 
@@ -8,6 +8,7 @@ import { isTimeSeriesDisplayType } from '@hyperdx/common-utils/dist/core/utils';
 import {
   ChartConfigWithDateRange,
   DisplayType,
+  getDefaultLineInterpolation,
   LineInterpolation,
   LineInterpolationSchema,
   MAX_LEGEND_TEMPLATE_LENGTH,
@@ -232,8 +233,7 @@ export default function ChartDisplaySettingsDrawer({
 
   const showLineInterpolation =
     displayType === DisplayType.Line || displayType === DisplayType.StackedLine;
-  const defaultLineInterpolation =
-    displayType === DisplayType.StackedLine ? 'linear' : 'smooth';
+  const defaultLineInterpolation = getDefaultLineInterpolation(displayType);
 
   // Series Limit applies to every time chart. On builder group-by charts a
   // positive value drives the __hdx_series_limit SQL CTE (trimming what's
 
@@ -179,6 +179,7 @@ type ChartPreviewPanelProps = {
   /** Required dashboard filters with nothing selected that block this tile. */
   missingRequiredFilterNames?: string[];
   setValue: (name: 'orderBy', value: string) => void;
+  setDisplayType: (displayType: DisplayType) => void;
   onSubmit: () => void;
 };
 
@@ -197,6 +198,7 @@ export function ChartPreviewPanel({
   dbTimeChartConfig,
   missingRequiredFilterNames,
   setValue,
+  setDisplayType,
   onSubmit,
 }: ChartPreviewPanelProps) {
   const [isSampleEventsOpen, setIsSampleEventsOpen] = useState(false);
@@ -305,6 +307,7 @@ export function ChartPreviewPanel({
           <DBTimeChart
             sourceId={sourceId}
             config={dbTimeChartConfig}
+            setDisplayType={setDisplayType}
             onTimeRangeSelect={onTimeRangeSelect}
             referenceLines={
               alert &&
 
@@ -15,6 +15,7 @@ import { isReducibleRangeQuery } from '@hyperdx/common-utils/dist/core/promql';
 import {
   displayTypeSupportsBuilderAlerts,
   displayTypeSupportsRawSqlAlerts,
+  isTimeSeriesDisplayType,
 } from '@hyperdx/common-utils/dist/core/utils';
 import {
   displayTypeRequiresSource,
@@ -1168,8 +1169,16 @@ export default function EditTimeChartForm({
             name="displayType"
             render={({ field: { onChange, value } }) => (
               <Tabs
-                value={value}
-                onChange={onChange}
+                // Stacked variants are picked from the preview's display
+                // switcher and live under the Time Series tab.
+                value={
+                  isTimeSeriesDisplayType(value) ? DisplayType.Line : value
+                }
+                onChange={v => {
+                  if (v === DisplayType.Line && isTimeSeriesDisplayType(value))
+                    return;
+                  onChange(v);
+                }}
                 radius={'xs'}
                 mb="md"
                 data-testid="chart-type-input"
@@ -1352,6 +1361,9 @@ export default function EditTimeChartForm({
             previewDashboardFilters?.missingRequiredFilterNames
           }
           setValue={(name, value) => setValue(name, value)}
+          setDisplayType={type =>
+            setValue('displayType', type, { shouldDirty: true })
+          }
           onSubmit={onSubmit}
         />
         <SaveToDashboardModal
 
@@ -114,6 +114,7 @@ const renderPanel = (
       showSampleEvents={false}
       showGeneratedPromql={false}
       setValue={jest.fn()}
+      setDisplayType={jest.fn()}
       onSubmit={jest.fn()}
       {...overrides}
     />,
 
@@ -646,12 +646,20 @@ function DBTimeChartComponent({
   const [displayTypeLocal, setDisplayTypeLocal] = useState(displayTypeProp);
 
   const displayType = useMemo(() => {
-    if (setDisplayType) {
+    // Stacking would sum the current and previous periods together.
+    if (config.compareToPreviousPeriod) {
+      return DisplayType.Line;
+    } else if (setDisplayType) {
       return displayTypeProp;
     } else {
       return displayTypeLocal;
     }
-  }, [displayTypeLocal, displayTypeProp, setDisplayType]);
+  }, [
+    config.compareToPreviousPeriod,
+    displayTypeLocal,
+    displayTypeProp,
+    setDisplayType,
+  ]);
 
   const handleSetDisplayType = useCallback(
     (type: DisplayType) => {
@@ -664,12 +672,6 @@ function DBTimeChartComponent({
     [setDisplayType],
   );
 
-  useEffect(() => {
-    if (config.compareToPreviousPeriod) {
-      setDisplayTypeLocal(DisplayType.Line);
-    }
-  }, [config.compareToPreviousPeriod]);
-
   const [activeClickPayload, setActiveClickPayload] = useState<
     ActiveClickPayload | undefined
   >(undefined);
 
@@ -1,4 +1,5 @@
 import React from 'react';
+import { DisplayType } from '@hyperdx/common-utils/dist/types';
 import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
@@ -219,6 +220,29 @@ describe('DBTimeChart', () => {
     expect(options?.enabled).toBe(true);
   });
 
+  it.each([
+    ['controlled', jest.fn()],
+    ['uncontrolled', undefined],
+  ])(
+    'renders a stacked chart as lines when comparing to the previous period (%s)',
+    (_, setDisplayType) => {
+      renderWithMantine(
+        <DBTimeChart
+          config={{
+            ...baseTestConfig,
+            displayType: DisplayType.StackedBar,
+            compareToPreviousPeriod: true,
+          }}
+          setDisplayType={setDisplayType}
+        />,
+      );
+
+      expect(
+        screen.getByTestId(`display-switcher-${DisplayType.Line}`),
+      ).toHaveAttribute('data-active', 'true');
+    },
+  );
+
   describe('load-all series escape hatch', () => {
     // A high-cardinality group-by response: MAX_RENDERED_TIME_CHART_SERIES (250)
     // default cap + 50 extra groups, so 50 series are hidden and the
 
@@ -1255,6 +1255,11 @@ export class ChartEditorComponent {
     await this.applyDisplaySettings();
   }
 
+  /** Switch line / stacked bar / stacked line from the preview's toolbar. */
+  async setPreviewDisplayType(type: 'line' | 'stacked_bar' | 'stacked_line') {
+    await this.editorForm().getByTestId(`display-switcher-${type}`).click();
+  }
+
   /** A "Line interpolation" option's (visually hidden) radio in the open drawer. */
   lineInterpolationOption(mode: 'Smooth' | 'Linear' | 'Step'): Locator {
     return this.page
 
@@ -334,6 +334,17 @@ test.describe('Dashboard', { tag: ['@dashboard'] }, () => {
     });
   });
 
+  test('should warn when closing tile editor after changing only the chart type', async () => {
+    await dashboardPage.openNewTileEditor();
+    await dashboardPage.chartEditor.waitForDataToLoad();
+    await dashboardPage.chartEditor.setPreviewDisplayType('stacked_bar');
+
+    await dashboardPage.page.keyboard.press('Escape');
+    await expect(dashboardPage.unsavedChangesConfirmModal).toBeAttached({
+      timeout: 5000,
+    });
+  });
+
   test('should warn when closing tile editor with unsaved display settings changes', async () => {
     await dashboardPage.openNewTileEditor();
 
 
@@ -43,4 +43,38 @@ test.describe('Line interpolation', { tag: ['@dashboard'] }, () => {
       await expect(editor.lineInterpolationOption('Step')).toBeChecked();
     });
   });
+
+  test('stacked line picked in the editor saves and defaults to linear', async ({
+    page,
+  }) => {
+    const dashboardPage = new DashboardPage(page);
+    const editor = dashboardPage.chartEditor;
+
+    await dashboardPage.goto();
+    await dashboardPage.createNewDashboard();
+    await dashboardPage.addTile();
+    await expect(editor.nameInput).toBeVisible();
+    await editor.waitForDataToLoad();
+    await editor.setChartName('Stacked line tile');
+    await editor.setPreviewDisplayType('stacked_line');
+
+    await editor.openDisplaySettings();
+    await expect(editor.lineInterpolationOption('Linear')).toBeChecked();
+    await editor.applyDisplaySettings();
+
+    await editor.save();
+    await expect(dashboardPage.getTiles()).toHaveCount(1, { timeout: 10000 });
+    await expect(
+      dashboardPage
+        .getTiles()
+        .first()
+        .getByTestId('display-switcher-stacked_line'),
+    ).toHaveAttribute('data-active', 'true');
+
+    await dashboardPage.editTile(0);
+    await expect(editor.nameInput).toBeVisible();
+    await editor.setPreviewDisplayType('stacked_bar');
+    await editor.openDisplaySettings();
+    await expect(page.getByTestId('line-interpolation-control')).toBeHidden();
+  });
 });