diff --git a/lib/music_library_web/components/chart_components.ex b/lib/music_library_web/components/chart_components.ex
index 8d1bfe24..decf2008 100644
--- a/lib/music_library_web/components/chart_components.ex
+++ b/lib/music_library_web/components/chart_components.ex
@@ -21,7 +21,7 @@ defmodule MusicLibraryWeb.ChartComponents do
   attr :height, :integer, default: 300
   attr :color_class, :string, required: true
   attr :class, :string, default: ""
-  attr :label_click, :any, default: nil, doc: "the function for handling phx-click on each label"
+  attr :datum_click, :any, default: nil, doc: "the function for handling phx-click on each datum"
 
   def vertical_bar_chart(assigns) do
     assigns =
@@ -51,8 +51,11 @@ defmodule MusicLibraryWeb.ChartComponents do
             x="140"
             y={y + @bar_height / 2 + 4}
             text-anchor="end"
-            class={["text-xs fill-zinc-500 dark:fill-zinc-400", @label_click && "cursor-pointer"]}
-            phx-click={@label_click && @label_click.(datum)}
+            class={[
+              "text-xs font-medium fill-zinc-500 hover:fill-zinc-700 dark:fill-zinc-400 dark:hover:fill-zinc-200",
+              @datum_click && "cursor-pointer"
+            ]}
+            phx-click={@datum_click && @datum_click.(datum)}
           >
             {truncate_label(@label_fn.(datum), 20)}
           </text>
@@ -63,7 +66,12 @@ defmodule MusicLibraryWeb.ChartComponents do
             y={y}
             width={bar_width}
             height={@bar_height}
-            class={["opacity-80 hover:opacity-100 transition-opacity", @color_class]}
+            class={[
+              "opacity-80 hover:opacity-100 transition-opacity",
+              @color_class,
+              @datum_click && "cursor-pointer"
+            ]}
+            phx-click={@datum_click && @datum_click.(datum)}
           >
             <title>{@label_fn.(datum)}: {@value_fn.(datum)}</title>
           </rect>
@@ -72,7 +80,11 @@ defmodule MusicLibraryWeb.ChartComponents do
           <text
             x={150 + bar_width + 5}
             y={y + @bar_height / 2 + 4}
-            class="text-xs fill-zinc-500 dark:fill-zinc-400"
+            class={[
+              "text-xs font-semibold fill-zinc-500 dark:fill-zinc-400",
+              @datum_click && "cursor-pointer"
+            ]}
+            phx-click={@datum_click && @datum_click.(datum)}
           >
             {@value_fn.(datum)}
           </text>
diff --git a/lib/music_library_web/live/stats_live/index.html.heex b/lib/music_library_web/live/stats_live/index.html.heex
index e8988ded..cfe9319b 100644
--- a/lib/music_library_web/live/stats_live/index.html.heex
+++ b/lib/music_library_web/live/stats_live/index.html.heex
@@ -514,7 +514,7 @@
           color_class="fill-red-500"
           label_fn={fn datum -> datum.name end}
           value_fn={fn datum -> datum.count end}
-          label_click={
+          datum_click={
             fn datum ->
               JS.navigate(~p"/artists/#{datum.id}")
             end
@@ -536,7 +536,7 @@
           color_class="fill-zinc-500"
           label_fn={fn {genre, _count} -> genre end}
           value_fn={fn {_genre, count} -> count end}
-          label_click={
+          datum_click={
             fn {genre, _count} ->
               JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{genre}")}}")
             end