diff --git a/frontend/src/metabase/modes/lib/drilldown.js b/frontend/src/metabase/modes/lib/drilldown.js
index 93fa3db689115b68213ba4b221bc263d284f9061..b711a8959526bb65938723d84952cfefb40c46fd 100644
--- a/frontend/src/metabase/modes/lib/drilldown.js
+++ b/frontend/src/metabase/modes/lib/drilldown.js
@@ -166,7 +166,8 @@ function breakoutForBreakoutTemplate(breakoutTemplate, dimensions, table) {
     : breakoutTemplate;
   const dimensionColumns = dimensions.map(d => d.column);
   const field =
-    _.find(dimensionColumns, fieldFilter) || _.find(table.fields, fieldFilter);
+    dimensionColumns.find(fieldFilter) ||
+    (table && table.fields.find(fieldFilter));
   if (!field) {
     return null;
   }
diff --git a/frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx b/frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx
index e6e2f2aef18e43b85823b12c9479157ebb75ca9a..182e478f897e9f26ad581f8d9ec300b053e52bd2 100644
--- a/frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx
+++ b/frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx
@@ -335,7 +335,7 @@ function transformSingleSeries(s, series, seriesIndex) {
   const { card, data } = s;
 
   // HACK: prevents cards from being transformed too many times
-  if (card._transformed) {
+  if (data._transformed) {
     return [s];
   }
 
@@ -396,7 +396,6 @@ function transformSingleSeries(s, series, seriesIndex) {
         ]
           .filter(n => n)
           .join(": "),
-        _transformed: true,
         _breakoutValue: breakoutValue,
         _breakoutColumn: cols[seriesColumnIndex],
       },
@@ -404,6 +403,7 @@ function transformSingleSeries(s, series, seriesIndex) {
         rows: breakoutRowsByValue.get(breakoutValue),
         cols: rowColumnIndexes.map(i => cols[i]),
         _rawCols: cols,
+        _transformed: true,
       },
       // for when the legend header for the breakout is clicked
       clicked: {
@@ -439,7 +439,6 @@ function transformSingleSeries(s, series, seriesIndex) {
         card: {
           ...card,
           name: name,
-          _transformed: true,
           _seriesIndex: seriesIndex,
           // use underlying column name as the seriesKey since it should be unique
           // EXCEPT for dashboard multiseries, so check seriesIndex == 0
@@ -453,6 +452,7 @@ function transformSingleSeries(s, series, seriesIndex) {
             return newRow;
           }),
           cols: rowColumnIndexes.map(i => cols[i]),
+          _transformed: true,
           _rawCols: cols,
         },
       };
diff --git a/frontend/test/metabase/scenarios/chart_drill.cy.spec.js b/frontend/test/metabase/scenarios/chart_drill.cy.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..5e85f38018911f529ac94c4bcfbb07b8db5719d9
--- /dev/null
+++ b/frontend/test/metabase/scenarios/chart_drill.cy.spec.js
@@ -0,0 +1,90 @@
+import { signInAsAdmin, restore } from "__support__/cypress";
+
+describe("chart drill", () => {
+  before(restore);
+  beforeEach(signInAsAdmin);
+
+  it("should allow brush date filter", () => {
+    cy.request("POST", "/api/card", {
+      name: "Orders by Product → Created At (month) and Product → Category",
+      dataset_query: {
+        database: 1,
+        query: {
+          "source-table": 2,
+          aggregation: [["count"]],
+          breakout: [
+            [
+              "datetime-field",
+              ["fk->", ["field-id", 11], ["field-id", 7]],
+              "month",
+            ],
+            ["fk->", ["field-id", 11], ["field-id", 6]],
+          ],
+        },
+        type: "query",
+      },
+      display: "line",
+      visualization_settings: {},
+    }).then(response => {
+      cy.visit(`/question/${response.body.id}`);
+
+      // wait for chart to expand and display legend/labels
+      cy.contains("Gadget");
+      cy.contains("January, 2017");
+      cy.wait(500); // wait longer to avoid grabbing the svg before a chart redraw
+
+      // drag across to filter
+      cy.get(".dc-chart svg")
+        .trigger("mousedown", 100, 200)
+        .trigger("mousemove", 200, 200)
+        .trigger("mouseup", 200, 200);
+
+      // new filter applied
+      cy.contains("Created At between May, 2016 July, 2016");
+      // more granular axis labels
+      cy.contains("June, 2016");
+      // confirm that product category is still broken out
+      cy.contains("Gadget");
+      cy.contains("Doohickey");
+      cy.contains("Gizmo");
+      cy.contains("Widget");
+    });
+  });
+
+  it("should drill through a nested query", () => {
+    // save a question of people in CA
+    cy.request("POST", "/api/card", {
+      name: "CA People",
+      display: "table",
+      visualization_settings: {},
+      dataset_query: {
+        database: 1,
+        query: { "source-table": 3, limit: 5 },
+        type: "query",
+      },
+    });
+
+    // build a new question off that grouping by City
+    cy.visit("/question/new");
+    cy.contains("Simple question").click();
+    cy.contains("Saved Questions").click();
+    cy.contains("CA People").click();
+    cy.contains("Hudson Borer");
+    cy.contains("Summarize").click();
+    cy.contains("Summarize by")
+      .parent()
+      .parent()
+      .contains("City")
+      .click();
+
+    // drill into the first bar
+    cy.get(".bar")
+      .first()
+      .click({ force: true });
+    cy.contains("View this CA Person").click();
+
+    // check that filter is applied and person displayed
+    cy.contains("City is Beaver Dams");
+    cy.contains("Dominique Leffler");
+  });
+});