Fix composite chart layout (#18195)

frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js

@@ -535,12 +535,12 @@ function getCharts(
   const { settings, chartType, series, onChangeCardAndRun } = props;
   const { yAxisSplit } = yAxisProps;
 
-  const isHeterogenous =
-    _.uniq(series.map(single => getSeriesDisplay(settings, single))).length > 1;
-  const isHeterogenousOrdinal =
-    settings["graph.x_axis.scale"] === "ordinal" && isHeterogenous;
+  const displays = _.uniq(series.map(s => getSeriesDisplay(settings, s)));
+  const isMixedBar = displays.includes("bar") && displays.length > 1;
+  const isOrdinal = settings["graph.x_axis.scale"] === "ordinal";
+  const isMixedOrdinalBar = isMixedBar && isOrdinal;
 
-  if (isHeterogenousOrdinal) {
+  if (isMixedOrdinalBar) {
     // HACK: ordinal + mix of line and bar results in uncentered points, shift by
     // half the width
     parent.on("renderlet.shift", () => {
@@ -601,7 +601,7 @@ function getCharts(
       settings,
       seriesChartType,
       seriesSettings,
-      isHeterogenousOrdinal,
+      isMixedOrdinalBar,
     );
 
     return chart;

frontend/test/metabase-visual/visualizations/line.cy.spec.js

@@ -118,4 +118,45 @@ describe("visual tests > visualizations > line", () => {
 
     cy.percySnapshot();
   });
+
+  it("with multiple series and different display types (metabase#11216)", () => {
+    visitQuestionAdhoc({
+      dataset_query: {
+        type: "query",
+        query: {
+          "source-table": ORDERS_ID,
+          aggregation: [["count"], ["sum", ["field", ORDERS.TOTAL, null]]],
+          breakout: [
+            [
+              "field",
+              ORDERS.CREATED_AT,
+              {
+                "temporal-unit": "year",
+              },
+            ],
+          ],
+        },
+        database: 1,
+      },
+      display: "line",
+      visualization_settings: {
+        series_settings: {
+          sum: {
+            display: "line",
+          },
+          count: {
+            display: "area",
+          },
+        },
+        "graph.dimensions": ["CREATED_AT"],
+        "graph.x_axis.scale": "ordinal",
+        "graph.show_values": true,
+        "graph.metrics": ["count", "sum"],
+      },
+    });
+
+    cy.wait("@dataset");
+
+    cy.percySnapshot();
+  });
 });