diff --git a/package-lock.json b/package-lock.json
index d904601..4f98fce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,16 @@
 {
 	"name": "agx",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "agx",
-			"version": "0.1.0",
+			"version": "0.2.0",
 			"license": "MIT",
 			"dependencies": {
 				"@agnosticeng/cache": "^0.0.3",
-				"@agnosticeng/dv": "^0.0.12",
+				"@agnosticeng/dv": "^0.0.14",
 				"@agnosticeng/migrate": "^0.0.2",
 				"@agnosticeng/sqlite": "^0.0.5",
 				"@floating-ui/dom": "^1.6.13",
@@ -54,9 +54,9 @@
 			"integrity": "sha512-sSi8wX3UkcG/1rXcDPGi2PQc8SP9arFM2ycKmbFqIwR2cmaYaZjUXIphZLXf8XywGSqxSzbbr2AR62KM2MwctA=="
 		},
 		"node_modules/@agnosticeng/dv": {
-			"version": "0.0.12",
-			"resolved": "https://registry.npmjs.org/@agnosticeng/dv/-/dv-0.0.12.tgz",
-			"integrity": "sha512-fUcXuQZOi7M6nf1QcxQuYlykSFhyo6JKzUe/pRaGIC9JyFKvKYKeYFkkX1HqRYqCbiCQ8VYtqiHEwJYDkloFRw==",
+			"version": "0.0.14",
+			"resolved": "https://registry.npmjs.org/@agnosticeng/dv/-/dv-0.0.14.tgz",
+			"integrity": "sha512-mXwUTiaLUZvI2N4NZQOpmTPcxaSPsw9QLh8L6L8SG4qj8krzdOeAUEpGrK8H5Sm1xNZUKilpBumZN6OZdR1EGw==",
 			"dependencies": {
 				"@observablehq/plot": "^0.6.17",
 				"d3": "^7.9.0"
diff --git a/package.json b/package.json
index 5519ea7..a7d30d3 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
 	"license": "MIT",
 	"dependencies": {
 		"@agnosticeng/cache": "^0.0.3",
-		"@agnosticeng/dv": "^0.0.12",
+		"@agnosticeng/dv": "^0.0.14",
 		"@agnosticeng/migrate": "^0.0.2",
 		"@agnosticeng/sqlite": "^0.0.5",
 		"@floating-ui/dom": "^1.6.13",
diff --git a/src/lib/components/Chart/Settings.svelte b/src/lib/components/Chart/Settings.svelte
index 8cd3e4e..bb43b04 100644
--- a/src/lib/components/Chart/Settings.svelte
+++ b/src/lib/components/Chart/Settings.svelte
@@ -42,6 +42,13 @@
 		settings.z = options[select.selectedIndex];
 		if (!settings.z) settings.z = undefined;
 	};
+
+	const handleLegendChange = (event: Event) => {
+		const select = event.target as HTMLSelectElement;
+		const options = Array.from(select.options).map((o) => o.value);
+		settings.legend = options[select.selectedIndex] as 'x' | 'y' | 'z';
+		if (!settings.legend) settings.legend = undefined;
+	};
 </script>
 
 {#if showChartSettings}
@@ -49,11 +56,12 @@
 		<form>
 			<div class="setting">
 				<span>type</span>
-				<select value={settings.type} onchange={handleChartTypeChange} size={4}>
+				<select value={settings.type} onchange={handleChartTypeChange} size={5}>
 					<option value="line">line</option>
 					<option value="candle">candle</option>
 					<option value="bar">bar</option>
 					<option value="h-bar">h-bar</option>
+					<option value="bubble">bubble</option>
 				</select>
 			</div>
 
@@ -95,6 +103,17 @@
 						</select>
 					</div>
 				</div>
+				<div class="setting">
+					<span>legend</span>
+					<div style="display: flex; gap: 5px;">
+						<select value={settings.legend} onchange={handleLegendChange} size={4}>
+							<option value="">none</option>
+							<option value="x">x</option>
+							<option value="y">y</option>
+							<option value="z">z</option>
+						</select>
+					</div>
+				</div>
 			{/if}
 		</form>
 	</section>