@marimo-team/islands 0.25.1-dev17 → 0.25.1-dev19

package/dist/{swimlanes-42K2YHIH-BkSDcqDT.js → swimlanes-42K2YHIH-B_pMf0J4.js}

@@ -1,15 +1,15 @@
-import "./chunk-75Z2AOVW-5_HsvXwr.js";
+import "./chunk-75Z2AOVW-C4AOleKf.js";
 import { n as e } from "./src-CA_m4ONl.js";
 import { n as t } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
-import "./chunk-DU6HZSFF-BUgAHvnM.js";
-import "./chunk-P2QGCYS3-C0iGU29N.js";
-import "./chunk-PWAF6VOD-CTFCL0jI.js";
-import "./chunk-GMAD6QVW-Czynz8aA.js";
-import "./chunk-4HAMMTFA-D2qv8E0X.js";
-import "./chunk-GVQU2GXP-yQEdulRS.js";
-import "./chunk-L3NEJ4N5-DwRWnDDK.js";
-import { o as n } from "./chunk-OSK3NFVY-BBKU_Ign.js";
-import { c as r } from "./mermaid-DPNuhemn.js";
+import "./chunk-DU6HZSFF-1TwWR6gh.js";
+import "./chunk-P2QGCYS3-0TAWai9C.js";
+import "./chunk-PWAF6VOD-lNxB9k8z.js";
+import "./chunk-GMAD6QVW-vStrMz2P.js";
+import "./chunk-4HAMMTFA-BPTTOOC5.js";
+import "./chunk-GVQU2GXP-2HwWgs4u.js";
+import "./chunk-L3NEJ4N5-RhC7i0I2.js";
+import { o as n } from "./chunk-OSK3NFVY-CZV09N-U.js";
+import { c as r } from "./mermaid-Dnzoxjt1.js";
 //#region ../node_modules/.pnpm/mermaid@11.17.2/node_modules/mermaid/dist/chunks/mermaid.core/swimlanes-42K2YHIH.mjs
 var i = 5, a = 1e-5, o = 1e-6;
 function s(e) {

package/dist/swimlanesDiagram-VR7AAH4N-Ctgy-yGP.js

@@ -0,0 +1,30 @@
+import "./chunk-75Z2AOVW-C4AOleKf.js";
+import "./src-CA_m4ONl.js";
+import { n as e } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
+import "./chunk-DU6HZSFF-1TwWR6gh.js";
+import "./chunk-P2QGCYS3-0TAWai9C.js";
+import "./chunk-PWAF6VOD-lNxB9k8z.js";
+import "./chunk-GMAD6QVW-vStrMz2P.js";
+import "./chunk-4HAMMTFA-BPTTOOC5.js";
+import "./chunk-GVQU2GXP-2HwWgs4u.js";
+import "./chunk-L3NEJ4N5-RhC7i0I2.js";
+import "./chunk-OSK3NFVY-CZV09N-U.js";
+import "./mermaid-Dnzoxjt1.js";
+import "./chunk-F27PBJKO-DMI1PBe4.js";
+import "./chunk-XXDRQBXY-Dnl5VBqG.js";
+import "./chunk-POPQ4Y6H-Cc3_56GX.js";
+import { r as t, t as n } from "./chunk-SHT3W25Y-CrEPyWy1.js";
+//#region ../node_modules/.pnpm/mermaid@11.17.2/node_modules/mermaid/dist/chunks/mermaid.core/swimlanesDiagram-VR7AAH4N.mjs
+var r = n({
+	defaultLayout: "swimlane",
+	styles: /* @__PURE__ */ e((e) => `${t(e)}
+  .swimlane.cluster rect {
+    stroke: ${e.clusterBorder} !important;
+  }
+  [data-look="neo"].cluster rect {
+    filter: none;
+  }
+`, "getStyles")
+});
+//#endregion
+export { r as diagram };

package/dist/{timeline-definition-24CTP7MA-BuqJUIRZ.js → timeline-definition-24CTP7MA-DTXFjTTM.js}

@@ -1,9 +1,9 @@
 import { t as e } from "./arc-7ra3iNdN.js";
-import { p as t } from "./chunk-75Z2AOVW-5_HsvXwr.js";
+import { p as t } from "./chunk-75Z2AOVW-C4AOleKf.js";
 import { n, t as r } from "./src-CA_m4ONl.js";
 import { n as i, t as a } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
-import { $ as o, J as s, a as c, b as l, et as u, nt as d, o as f, x as p } from "./chunk-DU6HZSFF-BUgAHvnM.js";
-import { p as m } from "./mermaid-DPNuhemn.js";
+import { $ as o, J as s, a as c, b as l, et as u, nt as d, o as f, x as p } from "./chunk-DU6HZSFF-1TwWR6gh.js";
+import { p as m } from "./mermaid-Dnzoxjt1.js";
 //#region ../node_modules/.pnpm/mermaid@11.17.2/node_modules/mermaid/dist/chunks/mermaid.core/timeline-definition-24CTP7MA.mjs
 var h = (function() {
 	var e = /* @__PURE__ */ i(function(e, t, n, r) {

package/dist/{vega-component-CNf5gcrm.js → vega-component-tFOzgarw.js}

@@ -11,10 +11,10 @@ import { A as p, n as ee } from "./useTheme-DzXmYZ5V.js";
 import { c as m } from "./arrays-CN1djC4k.js";
 import { t as te } from "./objects-CzUgoMIF.js";
 import { t as h } from "./useAsyncData-BD6AStMt.js";
-import { a as ne, i as re, n as ie, t as g } from "./formats-C8rLgZT9.js";
-import { M as ae, n as oe } from "./vega-loader.browser-D95WfUcj.js";
-import { t as se } from "./react-vega-5AcMW8gG.js";
-import { a as ce, n as _ } from "./loader-D2W4oM-3.js";
+import { a as ne, i as re, n as ie, t as g } from "./formats-Cl_67ghI.js";
+import { M as ae, n as oe } from "./vega-loader.browser-DNST6uVf.js";
+import { t as se } from "./react-vega-ewj7q_U5.js";
+import { a as ce, n as _ } from "./loader-DEZSzvma.js";
 import { t as le } from "./useDeepCompareMemoize-D_HNdyvI.js";
 import { t as ue } from "./semaphore-89jsoHtS.js";
 import { t as de } from "./use-vega-container-remeasure-4DwJbPWu.js";

package/dist/{vega-embed-container-CbnTccZi.js → vega-embed-container-sSR5hAsy.js}

@@ -2,8 +2,8 @@ import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
 import { t } from "./react-ofJbxM4x.js";
 import { t as n } from "./compiler-runtime-Cj8ZWiNS.js";
 import { t as r } from "./jsx-runtime-DgDPJV9S.js";
-import { M as i } from "./vega-loader.browser-D95WfUcj.js";
-import { n as a } from "./react-vega-5AcMW8gG.js";
+import { M as i } from "./vega-loader.browser-DNST6uVf.js";
+import { n as a } from "./react-vega-ewj7q_U5.js";
 import { t as o } from "./use-vega-container-remeasure-4DwJbPWu.js";
 //#region src/components/charts/vega-embed-container.tsx
 var s = n(), c = /* @__PURE__ */ e(t(), 1), l = r();

package/dist/{vega-loader.browser-D95WfUcj.js → vega-loader.browser-DNST6uVf.js}

@@ -237,8 +237,8 @@ function Ye(e) {
 		if ("spec" in e) return Ye(e.spec);
 	}
 }
-function Xe(t) {
-	return !t || Object.keys(t).length === 0 ? "auto" : e.mapValues(t, (e) => e === "geometry" || e === "date" || e === "time" ? "string" : e === "datetime" ? "date" : e);
+function Xe(t, { parseDates: n = !1 } = {}) {
+	return !t || Object.keys(t).length === 0 ? "auto" : e.mapValues(t, (e) => e === "geometry" ? "string" : e === "date" ? n ? "date" : "string" : e === "time" ? "string" : e === "datetime" ? "date" : e);
 }
 //#endregion
 //#region ../node_modules/.pnpm/d3-dsv@3.0.1/node_modules/d3-dsv/src/dsv.js

package/dist/{vennDiagram-4TSXK5OY-CTUlJ2PK.js → vennDiagram-4TSXK5OY-BPHjZo0R.js}

@@ -1,9 +1,9 @@
-import { i as e } from "./chunk-75Z2AOVW-5_HsvXwr.js";
+import { i as e } from "./chunk-75Z2AOVW-C4AOleKf.js";
 import { t } from "./src-CA_m4ONl.js";
 import { n } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
-import { $ as r, H as i, K as a, U as o, a as s, b as c, c as l, et as u, f as d, nt as f, tt as p, v as m, w as h, y as g } from "./chunk-DU6HZSFF-BUgAHvnM.js";
+import { $ as r, H as i, K as a, U as o, a as s, b as c, c as l, et as u, f as d, nt as f, tt as p, v as m, w as h, y as g } from "./chunk-DU6HZSFF-1TwWR6gh.js";
 import { t as _ } from "./rough.esm-CtV9AnV1.js";
-import { p as v } from "./mermaid-DPNuhemn.js";
+import { p as v } from "./mermaid-Dnzoxjt1.js";
 //#region ../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/methods/transparentize.js
 var y = (e, t) => p(e, "a", -t), b = 1e-10;
 function x(e, t) {

package/dist/{wardleyDiagram-VM6X3IG4-3evLUb0M.js → wardleyDiagram-VM6X3IG4-6fTLYBuD.js}

@@ -1,8 +1,8 @@
-import { i as e } from "./chunk-75Z2AOVW-5_HsvXwr.js";
+import { i as e } from "./chunk-75Z2AOVW-C4AOleKf.js";
 import { n as t } from "./src-CA_m4ONl.js";
 import { n } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
-import { D as r, H as i, K as a, U as o, a as s, b as c, c as l, v as u, w as d, x as f, y as p } from "./chunk-DU6HZSFF-BUgAHvnM.js";
-import { p as m } from "./mermaid-DPNuhemn.js";
+import { D as r, H as i, K as a, U as o, a as s, b as c, c as l, v as u, w as d, x as f, y as p } from "./chunk-DU6HZSFF-1TwWR6gh.js";
+import { p as m } from "./mermaid-Dnzoxjt1.js";
 import { n as h } from "./mermaid-parser.core-DxuSfYwJ.js";
 import { t as g } from "./chunk-JWPE2WC7-DJvv1t8U.js";
 //#region ../node_modules/.pnpm/mermaid@11.17.2/node_modules/mermaid/dist/chunks/mermaid.core/wardleyDiagram-VM6X3IG4.mjs

package/dist/{xychartDiagram-S5SC5T6Z-DL2E3K8-.js → xychartDiagram-S5SC5T6Z-BYjwjrzE.js}

@@ -2,14 +2,14 @@ import { t as e } from "./linear-Cnaq3Tfb.js";
 import { n as t } from "./ordinal-c7efuCSS.js";
 import { t as n } from "./range-BAIvbVHp.js";
 import { q as r } from "./cubic-OaEBhQPK.js";
-import { i } from "./chunk-75Z2AOVW-5_HsvXwr.js";
+import { i } from "./chunk-75Z2AOVW-C4AOleKf.js";
 import { n as a } from "./init-Ix4LXMlt.js";
 import { n as o } from "./src-CA_m4ONl.js";
 import { n as s } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
-import { D as c, H as l, K as u, U as d, a as f, b as p, c as m, f as h, v as g, w as _, y as v, z as y } from "./chunk-DU6HZSFF-BUgAHvnM.js";
-import "./chunk-PWAF6VOD-CTFCL0jI.js";
-import { t as b } from "./chunk-GMAD6QVW-Czynz8aA.js";
-import { p as x } from "./mermaid-DPNuhemn.js";
+import { D as c, H as l, K as u, U as d, a as f, b as p, c as m, f as h, v as g, w as _, y as v, z as y } from "./chunk-DU6HZSFF-1TwWR6gh.js";
+import "./chunk-PWAF6VOD-lNxB9k8z.js";
+import { t as b } from "./chunk-GMAD6QVW-vStrMz2P.js";
+import { p as x } from "./mermaid-Dnzoxjt1.js";
 //#region ../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/band.js
 function S() {
 	var e = t().unknown(void 0), r = e.domain, i = e.range, o = 0, s = 1, c, l, u = !1, d = 0, f = 0, p = .5;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.25.1-dev17",
+  "version": "0.25.1-dev19",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -198,7 +198,6 @@
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.2",
     "@types/dompurify": "^3.2.0",
-    "@types/katex": "^0.16.8",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^24.13.3",
     "@types/plotly.js": "^2.35.16",

package/src/components/data-table/charts/__tests__/chart-panel.test.tsx

@@ -0,0 +1,286 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, waitFor } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { Tooltip } from "radix-ui";
+import type { ComponentProps } from "react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
+import { cellId } from "@/__tests__/branded";
+import { LazyVegaEmbed } from "@/components/charts/lazy";
+import { vegaLoader } from "@/plugins/impl/vega/loader";
+import { ChartPanel, TablePanel, type TablePanelProps } from "../charts";
+import { getChartTabName, tabsStorageAtom } from "../storage";
+import { ChartType, NONE_VALUE } from "../types";
+
+vi.mock("@/components/charts/lazy", () => ({
+  LazyVegaEmbed: vi.fn(() => null),
+}));
+
+beforeAll(() => {
+  SetupMocks.resizeObserver();
+});
+
+describe("ChartPanel", () => {
+  it.each([undefined, null, []] as const)(
+    "infers the full CSV through TablePanel without backend metadata (%s)",
+    async (fieldTypes) => {
+      vi.spyOn(vegaLoader, "load").mockResolvedValue(
+        "value,index\n,0\n2.5,1\n",
+      );
+      const store = createStore();
+      const id = cellId("csv-inference");
+      const tabName = getChartTabName(0, ChartType.BAR);
+      store.set(
+        tabsStorageAtom,
+        new Map([
+          [
+            id,
+            [
+              {
+                tabName,
+                chartType: ChartType.BAR,
+                config: {
+                  general: {
+                    xColumn: { field: "value", type: "number" },
+                    yColumn: {
+                      field: "index",
+                      type: "integer",
+                      aggregate: NONE_VALUE,
+                    },
+                  },
+                },
+              },
+            ],
+          ],
+        ]),
+      );
+      const sample = [{ value: null }];
+      const SampleTable = (_props: { data: typeof sample }) => null;
+      const props: TablePanelProps = {
+        cellId: id,
+        data: sample,
+        dataTable: <SampleTable data={sample} />,
+        totalRows: 2,
+        columns: 1,
+        displayHeader: true,
+        fieldTypes: fieldTypes == null ? fieldTypes : [...fieldTypes],
+        rowHeaders: [["index", ["integer", "int64"]]],
+        getDataUrl: vi
+          .fn()
+          .mockResolvedValue({ data_url: "chart.csv", format: "csv" }),
+      };
+      const { getByRole } = render(
+        <Provider store={store}>
+          <Tooltip.Provider>
+            <TablePanel {...props} />
+          </Tooltip.Provider>
+        </Provider>,
+      );
+      fireEvent.click(getByRole("tab", { name: tabName }));
+      await waitFor(() => {
+        expect(vi.mocked(LazyVegaEmbed).mock.lastCall?.[0].spec).toEqual(
+          expect.objectContaining({
+            data: {
+              values: [
+                { value: null, index: 0 },
+                { value: 2.5, index: 1 },
+              ],
+            },
+          }),
+        );
+      });
+    },
+  );
+
+  it("reloads CSV only when column types change, not their array identity", async () => {
+    vi.spyOn(vegaLoader, "load").mockResolvedValue("value\n001\n");
+    const getDataUrl = vi.fn().mockResolvedValue({
+      data_url: "chart.csv",
+      format: "csv",
+    });
+    const props: ComponentProps<typeof ChartPanel> = {
+      tableData: [{ value: "001" }],
+      chartConfig: {
+        general: {
+          xColumn: { field: "value", type: "string" },
+          yColumn: { field: "value", type: "integer", aggregate: NONE_VALUE },
+        },
+      },
+      chartType: ChartType.BAR,
+      saveChart: vi.fn(),
+      saveChartType: vi.fn(),
+      getDataUrl,
+      isLargeDataset: false,
+    };
+    const panel = (
+      fieldTypes: ComponentProps<typeof ChartPanel>["fieldTypes"],
+    ) => (
+      <Tooltip.Provider>
+        <ChartPanel {...props} fieldTypes={fieldTypes} />
+      </Tooltip.Provider>
+    );
+    const expectValues = async (value: string | number) => {
+      await waitFor(() => {
+        expect(vi.mocked(LazyVegaEmbed).mock.lastCall?.[0].spec).toEqual(
+          expect.objectContaining({ data: { values: [{ value }] } }),
+        );
+      });
+    };
+
+    const { rerender } = render(panel([["value", ["string", "object"]]]));
+    await expectValues("001");
+    expect(getDataUrl).toHaveBeenCalledTimes(1);
+
+    rerender(panel([["value", ["string", "object"]]]));
+    await expectValues("001");
+    expect(getDataUrl).toHaveBeenCalledTimes(1);
+
+    rerender(panel([["value", ["integer", "int64"]]]));
+    await expectValues(1);
+    expect(getDataUrl).toHaveBeenCalledTimes(2);
+  });
+
+  it("uses column types to parse numeric CSV values without coercing text", async () => {
+    vi.spyOn(vegaLoader, "load").mockResolvedValue(
+      "a.b,n,label,day,timestamp,active,duration\ninf,1,inf,2024-01-01,2024-01-01T12:00:00Z,True,1 days\n-inf,2,001,2024-01-02,2024-01-02T12:00:00Z,False,2 days\n2.5,3,2024-01-03,2024-01-03,2024-01-03T12:00:00Z,True,3 days\n,4,,,,,\n",
+    );
+
+    render(
+      <Tooltip.Provider>
+        <ChartPanel
+          tableData={[{ "a.b": 1, n: 1 }]}
+          chartConfig={{
+            general: {
+              xColumn: { field: "a.b", type: "number" },
+              yColumn: { field: "n", type: "integer", aggregate: NONE_VALUE },
+            },
+          }}
+          chartType={ChartType.BAR}
+          saveChart={vi.fn()}
+          saveChartType={vi.fn()}
+          getDataUrl={vi.fn().mockResolvedValue({
+            data_url: "chart.csv",
+            format: "csv",
+          })}
+          fieldTypes={[
+            ["a.b", ["number", "float64"]],
+            ["n", ["integer", "int64"]],
+            ["label", ["string", "object"]],
+            ["day", ["date", "date"]],
+            ["timestamp", ["datetime", "datetime64[ns]"]],
+            ["active", ["boolean", "bool"]],
+            ["duration", ["unknown", "timedelta64[ns]"]],
+          ]}
+          isLargeDataset={false}
+        />
+      </Tooltip.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(vi.mocked(LazyVegaEmbed).mock.lastCall?.[0].spec).toEqual(
+        expect.objectContaining({
+          data: {
+            values: [
+              {
+                "a.b": Infinity,
+                n: 1,
+                label: "inf",
+                day: new Date("2024-01-01"),
+                timestamp: new Date("2024-01-01T12:00:00Z"),
+                active: true,
+                duration: "1 days",
+              },
+              {
+                "a.b": -Infinity,
+                n: 2,
+                label: "001",
+                day: new Date("2024-01-02"),
+                timestamp: new Date("2024-01-02T12:00:00Z"),
+                active: false,
+                duration: "2 days",
+              },
+              {
+                "a.b": 2.5,
+                n: 3,
+                label: "2024-01-03",
+                day: new Date("2024-01-03"),
+                timestamp: new Date("2024-01-03T12:00:00Z"),
+                active: true,
+                duration: "3 days",
+              },
+              {
+                "a.b": null,
+                n: 4,
+                label: null,
+                day: "",
+                timestamp: "",
+                active: null,
+                duration: "",
+              },
+            ],
+          },
+        }),
+      );
+    });
+  });
+
+  it.each([true, false])(
+    "keeps dotted CSV columns aligned with the chart encodings (schema: %s)",
+    async (hasSchema) => {
+      vi.spyOn(vegaLoader, "load").mockResolvedValue("a.b,n\n1,1\n2,2\n3,3\n");
+
+      render(
+        <Tooltip.Provider>
+          <ChartPanel
+            tableData={[{ "a.b": 1, n: 1 }]}
+            chartConfig={{
+              general: {
+                xColumn: { field: "a.b", type: "number" },
+                yColumn: {
+                  field: "n",
+                  type: "number",
+                  aggregate: NONE_VALUE,
+                },
+              },
+            }}
+            chartType={ChartType.BAR}
+            saveChart={vi.fn()}
+            saveChartType={vi.fn()}
+            getDataUrl={vi.fn().mockResolvedValue({
+              data_url: "chart.csv",
+              format: "csv",
+            })}
+            fieldTypes={
+              hasSchema
+                ? [
+                    ["a.b", ["number", "float64"]],
+                    ["n", ["integer", "int64"]],
+                  ]
+                : undefined
+            }
+            isLargeDataset={false}
+          />
+        </Tooltip.Provider>,
+      );
+
+      await waitFor(() => {
+        expect(vi.mocked(LazyVegaEmbed).mock.lastCall?.[0].spec).toEqual(
+          expect.objectContaining({
+            data: {
+              values: [
+                { "a.b": 1, n: 1 },
+                { "a.b": 2, n: 2 },
+                { "a.b": 3, n: 3 },
+              ],
+            },
+            encoding: expect.objectContaining({
+              x: expect.objectContaining({ field: "a\\.b" }),
+              y: expect.objectContaining({ field: "n" }),
+            }),
+          }),
+        );
+      });
+    },
+  );
+});

package/src/components/data-table/charts/charts.tsx

@@ -23,9 +23,11 @@ import { Form } from "@/components/ui/form";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import type { CellId } from "@/core/cells/ids";
 import { useAsyncData } from "@/hooks/useAsyncData";
+import { useDeepCompareMemoize } from "@/hooks/useDeepCompareMemoize";
 import { useDebouncedCallback } from "@/hooks/useDebounce";
 import type { GetDataUrl } from "@/plugins/impl/DataTablePlugin";
 import { vegaLoadData } from "@/plugins/impl/vega/loader";
+import { getVegaFieldTypes } from "@/plugins/impl/vega/utils";
 import { useTheme } from "@/theme/useTheme";
 import { uniqueBy } from "@/utils/arrays";
 import { inferFieldTypes } from "../columns";
@@ -284,6 +286,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
               saveChart={saveChart}
               saveChartType={saveChartType}
               getDataUrl={getDataUrl}
+              hasSchema={Boolean(fieldTypes?.length)}
               fieldTypes={mergeIndexFields(
                 fieldTypes ?? inferFieldTypes(dataTable.props.data),
                 rowHeaders,
@@ -307,6 +310,7 @@ export const ChartPanel: React.FC<{
   saveChartType: (chartType: ChartType) => void;
   getDataUrl?: GetDataUrl;
   fieldTypes?: FieldTypesWithExternalType | null;
+  hasSchema?: boolean;
   isLargeDataset: boolean;
 }> = ({
   tableData,
@@ -316,6 +320,7 @@ export const ChartPanel: React.FC<{
   saveChartType,
   getDataUrl,
   fieldTypes,
+  hasSchema = Boolean(fieldTypes?.length),
   isLargeDataset,
 }) => {
   const { theme } = useTheme();
@@ -331,6 +336,8 @@ export const ChartPanel: React.FC<{
   const [renderLargeCharts, setRenderLargeCharts] = useState(!isLargeDataset);
 
   const { ref: chartContainerRef } = useResizeObserver();
+  // Sample-inferred types are useful for controls, but not full CSV parsing.
+  const csvFieldTypes = useDeepCompareMemoize(hasSchema ? fieldTypes : null);
 
   const { data, isPending, error } = useAsyncData(async () => {
     if (!getDataUrl || tableData.length === 0 || !renderLargeCharts) {
@@ -342,20 +349,26 @@ export const ChartPanel: React.FC<{
       return response.data_url;
     }
 
-    const chartData = await vegaLoadData(
-      response.data_url,
-      response.format === "arrow"
-        ? { type: "arrow" }
-        : response.format === "json"
-          ? { type: "json" }
-          : { type: "csv", parse: "auto" },
-      {
-        replacePeriod: true,
-      },
-    );
-    return chartData;
+    let format: Parameters<typeof vegaLoadData>[1];
+    if (response.format === "arrow") {
+      format = { type: "arrow" };
+    } else if (response.format === "json") {
+      format = { type: "json" };
+    } else {
+      format = {
+        type: "csv",
+        parse: getVegaFieldTypes(
+          csvFieldTypes &&
+            Object.fromEntries(
+              csvFieldTypes.map(([name, [type]]) => [name, type]),
+            ),
+          { parseDates: true },
+        ),
+      };
+    }
+    return vegaLoadData(response.data_url, format);
     // Re-run when the data table changes
-  }, [tableData, renderLargeCharts]);
+  }, [tableData, renderLargeCharts, csvFieldTypes]);
 
   const formValues = form.watch();