diff --git a/src/routes/Chart.svelte b/src/routes/Chart.svelte
index 73f3dc5..1250892 100644
--- a/src/routes/Chart.svelte
+++ b/src/routes/Chart.svelte
@@ -57,9 +57,6 @@
 				chart.deleteLine(line)
 				chart.save()
 			}}
-			onVisibleChange={(visible) => {
-				line.instance.applyOptions({ visible })
-			}}
 		/>
 	{/each}
 </div>
diff --git a/src/routes/Label.svelte b/src/routes/Label.svelte
index d2f268c..d85e631 100644
--- a/src/routes/Label.svelte
+++ b/src/routes/Label.svelte
@@ -7,8 +7,6 @@
 	export let line: Line
 	$: hex = hexColors[line.color]
 	export let onDelete: () => void
-	let visible = true
-	export let onVisibleChange: (visible: boolean) => void
 </script>
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
@@ -17,14 +15,16 @@
 	style:--color-1={hex}
 	style:--color-2={hex + '77'}
 	in:scale={{ duration: 200, easing: cubicOut, start: 0.75, opacity: 0 }}
-	class:hidden={!visible}
+	class:hidden={line.hidden}
 	tabindex="0"
 	on:keydown={(e) => {
 		if (e.key === ' ' || e.key === 'Enter') {
-			visible = !visible
-			onVisibleChange(visible)
+			line.hidden = !line.hidden
+			line.instance.applyOptions({ visible: !line.hidden })
+			e.preventDefault()
 		} else if (e.key === 'Backspace' || e.key === 'Delete') {
 			onDelete()
+			e.preventDefault()
 		}
 	}}
 >
@@ -33,8 +33,8 @@
 		class="name"
 		tabindex="-1"
 		on:click={() => {
-			visible = !visible
-			onVisibleChange(visible)
+			line.hidden = !line.hidden
+			line.instance.applyOptions({ visible: !line.hidden })
 		}}
 	>
 		{line.name}
diff --git a/src/routes/chart.ts b/src/routes/chart.ts
index 15744f2..8e012ac 100644
--- a/src/routes/chart.ts
+++ b/src/routes/chart.ts
@@ -21,6 +21,7 @@ type LineBase = {
 export interface Line extends LineBase {
 	instance: ISeriesApi<'Area'>
 	deleted: boolean
+	hidden?: boolean
 }
 
 type LineJson = {