diff --git a/package.json b/package.json
index b3c4abc8d42..414542c7c23 100644
--- a/package.json
+++ b/package.json
@@ -143,6 +143,7 @@
         "googleapis": "^108.0.0",
         "handsontable": "^12.3.3",
         "html-to-text": "^8.2.0",
+        "indefinite": "^2.4.3",
         "instantsearch.js": "^4.56.9",
         "js-base64": "^3.7.2",
         "js-cookie": "^3.0.1",
diff --git a/packages/@ourworldindata/grapher/package.json b/packages/@ourworldindata/grapher/package.json
index 9389ebfd557..2e4987d9ab0 100644
--- a/packages/@ourworldindata/grapher/package.json
+++ b/packages/@ourworldindata/grapher/package.json
@@ -35,7 +35,6 @@
     "decko": "^1.2.0",
     "expr-eval": "^2.0.2",
     "fuzzysort": "^1.1.4",
-    "indefinite": "^2.4.3",
     "js-cookie": "^3.0.1",
     "mobx": "^5.15.7",
     "mobx-formatters": "^1.0.2",
diff --git a/packages/@ourworldindata/grapher/src/controls/Checkbox.scss b/packages/@ourworldindata/grapher/src/controls/Checkbox.scss
index 97c43937408..dea408def82 100644
--- a/packages/@ourworldindata/grapher/src/controls/Checkbox.scss
+++ b/packages/@ourworldindata/grapher/src/controls/Checkbox.scss
@@ -33,7 +33,7 @@
 
         svg {
             font-size: 10px;
-            padding-left: 1px;
+            padding-left: 0.75px;
             color: $active-text;
         }
     }
diff --git a/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx b/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx
index 8b0eee25bfb..7d67cfc1172 100644
--- a/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx
@@ -80,6 +80,7 @@ export class EntitySelectionToggle extends React.Component<{
                     onClick={(): void => {
                         this.props.manager.isSelectingData = !active
                     }}
+                    data-track-note="chart_add_entity"
                 >
                     {label.icon}
                     <label>
diff --git a/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.scss b/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.scss
new file mode 100644
index 00000000000..b52aa44d74a
--- /dev/null
+++ b/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.scss
@@ -0,0 +1,98 @@
+$light-fill: #dadada;
+$active-fill: #dbe5f0;
+
+$light-text: #858585;
+$dark-text: #5b5b5b;
+
+$info-icon: #a1a1a1;
+$active-switch: #6e87a2;
+
+$medium: 400;
+$lato: $sans-serif-font-stack;
+
+@at-root {
+    // placed either directly in controls row or in settings menu
+    .controlsRow .controls,
+    .settings-menu-contents {
+        // on/off switch with label written to the right
+        .labeled-switch {
+            display: flex;
+            color: $light-text;
+            font: $medium 13px/16px $lato;
+            letter-spacing: 0.01em;
+
+            position: relative;
+            margin: 8px 0;
+            -webkit-user-select: none;
+            user-select: none;
+
+            label {
+                color: $dark-text;
+                padding-left: 35px;
+                white-space: nowrap;
+
+                &:hover {
+                    cursor: pointer;
+                }
+
+                svg {
+                    color: $info-icon;
+                    height: 13px;
+                    padding: 0 0.333em;
+                }
+            }
+
+            .labeled-switch-subtitle {
+                // only show subtitle in settings menu, otherwise use icon + tooltip
+                display: none;
+            }
+
+            input {
+                position: absolute;
+                opacity: 0;
+                left: 0;
+            }
+
+            .outer {
+                position: absolute;
+                left: 0;
+                top: 0;
+                content: " ";
+                width: 29px;
+                height: 16px;
+                background: $light-fill;
+                border-radius: 8px;
+                pointer-events: none;
+                .inner {
+                    position: relative;
+                    content: " ";
+                    width: 10px;
+                    height: 10px;
+                    background: $light-text;
+                    border-radius: 5px;
+                    top: 3px;
+                    left: 3px;
+                    pointer-events: none;
+                    transition: transform 333ms;
+                }
+            }
+
+            &:hover {
+                .outer .inner {
+                    background: $dark-text;
+                }
+            }
+
+            input:checked + .outer {
+                background: $active-fill;
+                .inner {
+                    background: $active-switch;
+                    transform: translate(13px, 0);
+                }
+            }
+            &:hover input:checked + .outer .inner {
+                background: darken($active-switch, 13%);
+            }
+        }
+    }
+}
diff --git a/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.tsx b/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.tsx
index 03cad0a11b8..72e954a0f4e 100644
--- a/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.tsx
@@ -9,20 +9,22 @@ export class LabeledSwitch extends React.Component<{
     value?: boolean
     label?: string
     tooltip?: string
+    tracking?: string
     onToggle: () => any
 }> {
     render(): JSX.Element {
-        const { label, value, tooltip } = this.props
+        const { label, value, tooltip, tracking } = this.props
 
         return (
-            <div className="config-switch">
+            <div className="labeled-switch">
                 <label>
                     <input
                         type="checkbox"
                         checked={value}
                         onChange={this.props.onToggle}
+                        data-track-note={tracking}
                     />
-                    <div className="outer">
+                    <div data-track-note="" className="outer">
                         <div className="inner"></div>
                     </div>
                     {label}
@@ -38,7 +40,9 @@ export class LabeledSwitch extends React.Component<{
                         </Tippy>
                     )}
                 </label>
-                {tooltip && <div className="config-subtitle">{tooltip}</div>}
+                {tooltip && (
+                    <div className="labeled-switch-subtitle">{tooltip}</div>
+                )}
             </div>
         )
     }
diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss
index c99c06ebc81..c460d8002a5 100644
--- a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss
+++ b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss
@@ -73,12 +73,12 @@ nav.controlsRow .controls .settings-menu {
             z-index: $zindex-controls-backdrop;
         }
 
-        .config-switch {
+        .labeled-switch {
             label > svg {
                 display: none;
             }
 
-            .config-subtitle {
+            .labeled-switch-subtitle {
                 display: block;
             }
         }
@@ -192,6 +192,7 @@ nav.controlsRow .controls .settings-menu {
                     }
                 }
 
+                .labeled-switch .labeled-switch-subtitle,
                 .config-subtitle {
                     font-size: 13px;
                     margin: 5px 0;
@@ -227,76 +228,9 @@ nav.controlsRow .controls .settings-menu {
                 }
 
                 // on/off switch with label written to the right
-                .config-switch {
-                    position: relative;
+                .labeled-switch {
                     margin: 14px 0;
-                    -webkit-user-select: none;
-                    user-select: none;
-
-                    label {
-                        color: $dark-text;
-                        padding-left: 35px;
-                        &:hover {
-                            cursor: pointer;
-                        }
-
-                        svg {
-                            color: $info-icon;
-                            height: 13px;
-                            padding: 0 0.333em;
-                        }
-                    }
-
-                    .config-subtitle {
-                        display: none;
-                    }
-
-                    input {
-                        position: absolute;
-                        opacity: 0;
-                        left: 0;
-                    }
-
-                    .outer {
-                        position: absolute;
-                        left: 0;
-                        top: 0;
-                        content: " ";
-                        width: 29px;
-                        height: 16px;
-                        background: $light-fill;
-                        border-radius: 8px;
-                        pointer-events: none;
-                        .inner {
-                            position: relative;
-                            content: " ";
-                            width: 10px;
-                            height: 10px;
-                            background: $light-text;
-                            border-radius: 5px;
-                            top: 3px;
-                            left: 3px;
-                            pointer-events: none;
-                            transition: transform 333ms;
-                        }
-                    }
-
-                    &:hover {
-                        .outer .inner {
-                            background: $dark-text;
-                        }
-                    }
-
-                    input:checked + .outer {
-                        background: $active-fill;
-                        .inner {
-                            background: $active-switch;
-                            transform: translate(13px, 0);
-                        }
-                    }
-                    &:hover input:checked + .outer .inner {
-                        background: darken($active-switch, 13%);
-                    }
+                    display: block;
                 }
 
                 // vertical list of options (for selecting faceting mode)
diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
index 58c0dcbdd97..5b1e02da6f7 100644
--- a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
@@ -53,7 +53,6 @@ export interface SettingsMenuManager
         FacetStrategySelectionManager {
     base?: React.RefObject<SVGGElement | HTMLDivElement> // the root grapher element
     showConfigurationDrawer?: boolean
-    isInIFrame?: boolean
 
     // ArchieML directives
     hideFacetControl?: boolean
@@ -266,8 +265,6 @@ export class SettingsMenu extends React.Component<{
     }
 
     @computed get drawer(): Element | null {
-        // use a drop-down menu when embedded in an iframe
-        if (this.manager.isInIFrame) return null
         // use the drawer `<nav>` element if it exists, otherwise render into a drop-down menu
         return this.manager.base?.current?.closest(".related-charts")
             ? null // also use a drop-down menu within the Related Charts section
@@ -310,7 +307,6 @@ export class SettingsMenu extends React.Component<{
             showFacetControl,
             showFacetYDomainToggle,
             showAbsRelToggle,
-            showTableFilterToggle,
         } = this
 
         const {
@@ -381,13 +377,6 @@ export class SettingsMenu extends React.Component<{
                         )}
                         {showZoomToggle && <ZoomToggle manager={manager} />}
                     </SettingsGroup>
-
-                    <SettingsGroup title="Data rows" active={isOnTableTab}>
-                        {showTableFilterToggle && (
-                            <TableFilterToggle manager={manager} />
-                        )}
-                    </SettingsGroup>
-
                     <SettingsGroup
                         title="Axis scale"
                         active={
@@ -417,20 +406,42 @@ export class SettingsMenu extends React.Component<{
         )
     }
 
-    render(): JSX.Element | null {
-        const { showSettingsMenuToggle, active } = this
-        return showSettingsMenuToggle ? (
+    renderChartSettings(): JSX.Element {
+        const { active } = this
+        return (
             <div className="settings-menu">
                 <button
                     className={classnames("menu-toggle", { active })}
                     onClick={this.toggleVisibility}
+                    data-track-note="chart_settings_menu_toggle"
+                    title="Chart settings"
                 >
                     <FontAwesomeIcon icon={faGear} />
                     <span className="label"> Settings</span>
                 </button>
                 {this.menu}
             </div>
-        ) : null
+        )
+    }
+
+    renderTableControls(): JSX.Element {
+        // Since tables only have a single control, display it inline rather than
+        // placing it in the settings menu
+        return <TableFilterToggle manager={this.manager} />
+    }
+
+    render(): JSX.Element | null {
+        const {
+            manager: { isOnChartTab, isOnTableTab },
+            showSettingsMenuToggle,
+            showTableFilterToggle,
+        } = this
+
+        return isOnTableTab && showTableFilterToggle
+            ? this.renderTableControls()
+            : isOnChartTab && showSettingsMenuToggle
+            ? this.renderChartSettings()
+            : null
     }
 }
 
diff --git a/packages/@ourworldindata/grapher/src/controls/settings/AbsRelToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/AbsRelToggle.tsx
index 8b1bc1c0c44..35548006997 100644
--- a/packages/@ourworldindata/grapher/src/controls/settings/AbsRelToggle.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/settings/AbsRelToggle.tsx
@@ -48,6 +48,7 @@ export class AbsRelToggle extends React.Component<{
                 value={this.isRelativeMode}
                 tooltip={this.tooltip}
                 onToggle={this.onToggle}
+                tracking="chart_abs_rel_toggle"
             />
         )
     }
diff --git a/packages/@ourworldindata/grapher/src/controls/settings/AxisScaleToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/AxisScaleToggle.tsx
index e603e286b2e..d0fa8992351 100644
--- a/packages/@ourworldindata/grapher/src/controls/settings/AxisScaleToggle.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/settings/AxisScaleToggle.tsx
@@ -28,12 +28,14 @@ export class AxisScaleToggle extends React.Component<{
                     <button
                         className={classnames({ active: isLinear })}
                         onClick={(): void => this.setAxisScale(linear)}
+                        data-track-note="chart_toggle_scale"
                     >
                         {label}Linear
                     </button>
                     <button
                         className={classnames({ active: !isLinear })}
                         onClick={(): void => this.setAxisScale(log)}
+                        data-track-note="chart_toggle_scale"
                     >
                         {label}Logarithmic
                     </button>
diff --git a/packages/@ourworldindata/grapher/src/controls/settings/FacetStrategySelector.tsx b/packages/@ourworldindata/grapher/src/controls/settings/FacetStrategySelector.tsx
index 8b7e8d7f5da..b810cc5994d 100644
--- a/packages/@ourworldindata/grapher/src/controls/settings/FacetStrategySelector.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/settings/FacetStrategySelector.tsx
@@ -83,6 +83,7 @@ export class FacetStrategySelector extends React.Component<{
                                 onClick={(): void => {
                                     this.props.manager.facetStrategy = value
                                 }}
+                                data-track-note={`chart_facet_${option}`}
                             >
                                 <div className="faceting-icon">
                                     {range(value === "none" ? 1 : 6).map(
diff --git a/packages/@ourworldindata/grapher/src/controls/settings/FacetYDomainToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/FacetYDomainToggle.tsx
index b033849443d..b8c4038c330 100644
--- a/packages/@ourworldindata/grapher/src/controls/settings/FacetYDomainToggle.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/settings/FacetYDomainToggle.tsx
@@ -39,6 +39,7 @@ export class FacetYDomainToggle extends React.Component<{
                 tooltip="Use the same minimum and maximum values on all charts or scale axes to fit the data in each chart"
                 value={this.isYDomainShared}
                 onToggle={this.onToggle}
+                tracking="chart_facet_ydomain_toggle"
             />
         )
     }
diff --git a/packages/@ourworldindata/grapher/src/controls/settings/NoDataAreaToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/NoDataAreaToggle.tsx
index 7a856facad5..81baf47af25 100644
--- a/packages/@ourworldindata/grapher/src/controls/settings/NoDataAreaToggle.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/settings/NoDataAreaToggle.tsx
@@ -26,6 +26,7 @@ export class NoDataAreaToggle extends React.Component<{
                 value={this.manager.showNoDataArea}
                 tooltip="Include entities for which ‘no data’ is available in the chart."
                 onToggle={this.onToggle}
+                tracking="chart_no_data_area_toggle"
             />
         )
     }
diff --git a/packages/@ourworldindata/grapher/src/controls/settings/TableFilterToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/TableFilterToggle.tsx
index c55f5d989e0..6f0c6751a69 100644
--- a/packages/@ourworldindata/grapher/src/controls/settings/TableFilterToggle.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/settings/TableFilterToggle.tsx
@@ -31,6 +31,7 @@ export class TableFilterToggle extends React.Component<{
                 tooltip={tooltip}
                 value={this.props.manager.showSelectionOnlyInDataTable}
                 onToggle={this.onToggle}
+                tracking="chart_filter_table_rows"
             />
         )
     }
diff --git a/packages/@ourworldindata/grapher/src/controls/settings/ZoomToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/ZoomToggle.tsx
index 8508546e2c9..0a160ceb37a 100644
--- a/packages/@ourworldindata/grapher/src/controls/settings/ZoomToggle.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/settings/ZoomToggle.tsx
@@ -24,6 +24,7 @@ export class ZoomToggle extends React.Component<{
                 tooltip="Scale axes to focus on the currently highlighted data points."
                 value={this.props.manager.zoomToSelection}
                 onToggle={this.onToggle}
+                tracking="chart_zoom_to_selection"
             />
         )
     }
diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
index 9f4dc303754..9b221d43580 100644
--- a/packages/@ourworldindata/grapher/src/core/grapher.scss
+++ b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -59,6 +59,8 @@ $zindex-controls-drawer: 140;
 // e.g. &.narrow is equivalent to .GrapherComponent.narrow
 .GrapherComponent {
     @import "../controls/CommandPalette.scss";
+    @import "../controls/LabeledSwitch.scss";
+    @import "../controls/Checkbox.scss";
     @import "../controls/Controls.scss";
     @import "../controls/SettingsMenu.scss";
     @import "../controls/MapProjectionMenu.scss";
@@ -79,7 +81,6 @@ $zindex-controls-drawer: 140;
     @import "../loadingIndicator/LoadingIndicator.scss";
     @import "../footer/Footer.scss";
     @import "../header/Header.scss";
-    @import "../controls/Checkbox.scss";
 }
 
 // These rules are currently used elsewhere in the site. e.g. Explorers
diff --git a/yarn.lock b/yarn.lock
index 1f1ae6422e2..374c007537a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4921,7 +4921,6 @@ __metadata:
     eslint-plugin-react-hooks: ^4.6.0
     expr-eval: ^2.0.2
     fuzzysort: ^1.1.4
-    indefinite: ^2.4.3
     jest: ^29.7.0
     jest-environment-jsdom: ^29.7.0
     js-cookie: ^3.0.1
@@ -13959,6 +13958,7 @@ __metadata:
     handsontable: ^12.3.3
     html-to-text: ^8.2.0
     http-server: ^14.1.1
+    indefinite: ^2.4.3
     instantsearch.js: ^4.56.9
     jest: ^29.7.0
     jest-environment-jsdom: ^29.7.0