diff --git a/package-lock.json b/package-lock.json
index 3f841cf79a9..292010666bc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28819,21 +28819,6 @@
         "svelte": "^4.0.0"
       }
     },
-    "node_modules/svelte-vega": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/svelte-vega/-/svelte-vega-2.1.0.tgz",
-      "integrity": "sha512-9IM1L3Wai+wsARRr0joquZ2mPPzPFCOKXsVzla35kAWhLw7J4DwOWbLpKcF9t0MApULzp+gdC+A4Qip1TAISJg==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3",
-        "vega-embed": "^6.22.1"
-      },
-      "peerDependencies": {
-        "svelte": "^3.54.0 || ^4.0.0",
-        "vega": "*",
-        "vega-lite": "*"
-      }
-    },
     "node_modules/svelte/node_modules/aria-query": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
@@ -31500,15 +31485,13 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/vega-event-selector/-/vega-event-selector-3.0.1.tgz",
       "integrity": "sha512-K5zd7s5tjr1LiOOkjGpcVls8GsH/f2CWCrWcpKy74gTCp+llCdwz0Enqo013ZlGaRNjfgD/o1caJRt3GSaec4A==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/vega-expression": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/vega-expression/-/vega-expression-5.1.0.tgz",
       "integrity": "sha512-u8Rzja/cn2PEUkhQN3zUj3REwNewTA92ExrcASNKUJPCciMkHJEjESwFYuI6DWMCq4hQElQ92iosOAtwzsSTqA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@types/estree": "^1.0.0",
         "vega-util": "^1.17.1"
@@ -31613,7 +31596,6 @@
       "resolved": "https://registry.npmjs.org/vega-lite/-/vega-lite-5.17.0.tgz",
       "integrity": "sha512-PPm1HRdDFDdl2fga3cHm3lHjJV/xcB+Cn77xe7Av1yRLY1GMbPaJS42s+e7XHGmbeDee+H/KK9lUdQK28xs7nA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "json-stringify-pretty-compact": "~3.0.0",
         "tslib": "~2.6.2",
@@ -31640,7 +31622,6 @@
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
       "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "string-width": "^4.2.0",
         "strip-ansi": "^6.0.1",
@@ -31654,15 +31635,13 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/vega-lite/node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -31677,7 +31656,6 @@
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -31695,7 +31673,6 @@
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
       "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "cliui": "^8.0.1",
         "escalade": "^3.1.1",
@@ -31714,7 +31691,6 @@
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
       "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -33423,13 +33399,14 @@
         "svelte-forms-lib": "^2.0.1",
         "svelte-headless-table": "^0.18.1",
         "svelte-preprocess": "^5.0.4",
-        "svelte-vega": "^2.1.0",
+        "svelte-vega": "^2.2.0",
         "tailwind-merge": "^2.1.0",
         "tailwind-variants": "^0.1.19",
         "tailwindcss": "^3.2.7",
         "tsx": "^4.7.0",
         "ua-parser-js": "^1.0.2",
         "uuid": "^9.0.0",
+        "vega-lite": "^5.17.0",
         "vitest": "^0.31.0",
         "yaml": "^2.1.3",
         "yup": "^0.32.11"
@@ -33532,6 +33509,21 @@
         "orval": "dist/bin/orval.js"
       }
     },
+    "web-common/node_modules/svelte-vega": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/svelte-vega/-/svelte-vega-2.2.0.tgz",
+      "integrity": "sha512-NNZxYVzd9UriGAWg3RRyxYHYJvZtVVQVKF1Kcc/PanwfbbCq0sIO9CDp5HZmxD41gE4M24gMeMakiqnAttrubA==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "vega-embed": "^6.24.0"
+      },
+      "peerDependencies": {
+        "svelte": "^3.54.0 || ^4.0.0",
+        "vega": "*",
+        "vega-lite": "*"
+      }
+    },
     "web-common/node_modules/yaml": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
diff --git a/web-common/package.json b/web-common/package.json
index dc0aa052411..885d9618b59 100644
--- a/web-common/package.json
+++ b/web-common/package.json
@@ -66,13 +66,14 @@
     "svelte-forms-lib": "^2.0.1",
     "svelte-headless-table": "^0.18.1",
     "svelte-preprocess": "^5.0.4",
-    "svelte-vega": "^2.1.0",
+    "svelte-vega": "^2.2.0",
     "tailwind-merge": "^2.1.0",
     "tailwind-variants": "^0.1.19",
     "tailwindcss": "^3.2.7",
     "tsx": "^4.7.0",
     "ua-parser-js": "^1.0.2",
     "uuid": "^9.0.0",
+    "vega-lite": "^5.17.0",
     "vitest": "^0.31.0",
     "yaml": "^2.1.3",
     "yup": "^0.32.11"
diff --git a/web-common/src/features/charts/render/VegaLiteRenderer.svelte b/web-common/src/features/charts/render/VegaLiteRenderer.svelte
index 14ea9c6a7d9..78e7e1201b5 100644
--- a/web-common/src/features/charts/render/VegaLiteRenderer.svelte
+++ b/web-common/src/features/charts/render/VegaLiteRenderer.svelte
@@ -1,17 +1,11 @@
 <script lang="ts">
   import { getRillTheme } from "@rilldata/web-common/features/charts/render/vega-config";
-  import { VegaLite, View } from "svelte-vega";
+  import { VegaLite, View, type EmbedOptions } from "svelte-vega";
 
   export let data: Record<string, unknown> = {};
   export let spec; // VisualizationSpec;
 
-  // EmbedOptions type missing from svelte-vega
-  interface Options {
-    config: undefined | Record<string, unknown>;
-    renderer: "canvas" | "svg";
-  }
-
-  let options: Options = {
+  let options: EmbedOptions = {
     config: getRillTheme(),
     renderer: "svg",
   };
diff --git a/web-common/src/features/charts/render/vega-config.ts b/web-common/src/features/charts/render/vega-config.ts
index 9091bc5ce3b..cad48025cb3 100644
--- a/web-common/src/features/charts/render/vega-config.ts
+++ b/web-common/src/features/charts/render/vega-config.ts
@@ -3,16 +3,17 @@ import {
   MainAreaColorGradientLight,
   MainLineColor,
 } from "@rilldata/web-common/features/dashboards/time-series/chart-colors";
+import type { Config } from "vega-lite";
 
 const markColor = MainLineColor;
 const axisColor = "#E5E7EB";
 const axisLabelColor = "#4b5563"; // gray-600
 
-export const getRillTheme = () => ({
+export const getRillTheme: () => Config = () => ({
   arc: { fill: markColor },
   area: {
+    line: { stroke: markColor },
     stroke: null,
-    line: markColor,
     color: {
       x1: 1,
       y1: 1,