diff --git a/lib/plox.ex b/lib/plox.ex
index 6a92b12..26dc04a 100644
--- a/lib/plox.ex
+++ b/lib/plox.ex
@@ -234,7 +234,14 @@ defmodule Plox do
       phx-click={
         if assigns[:"phx-click"],
           do:
-            JS.push(assigns[:"phx-click"], value: %{id: point.data_point.id, dataset_id: @dataset.id})
+            JS.push(assigns[:"phx-click"],
+              value: %{
+                id: point.data_point.id,
+                dataset_id: @dataset.id,
+                x_pixel: point.x,
+                y_pixel: point.y
+              }
+            )
       }
       phx-target={assigns[:"phx-target"]}
       style={if assigns[:"phx-click"], do: "cursor: pointer;"}
@@ -274,7 +281,12 @@ defmodule Plox do
           if assigns[:"phx-click"],
             do:
               JS.push(assigns[:"phx-click"],
-                value: %{id: point.data_point.id, dataset_id: @dataset.id}
+                value: %{
+                  id: point.data_point.id,
+                  dataset_id: @dataset.id,
+                  x_pixel: point.x,
+                  y_pixel: point.y
+                }
               )
         }
         phx-target={assigns[:"phx-target"]}
@@ -304,32 +316,31 @@ defmodule Plox do
 
   attr :dataset, :any, required: true
   attr :point_id, :any, required: true
-
   attr :x, :atom, default: :x, doc: "The dataset axis key to use for x values"
   attr :y, :atom, default: :y, doc: "The dataset axis key to use for y values"
 
+  attr :x_pixel, :any, required: true
+  attr :y_pixel, :any, required: true
+
   attr :"phx-click-away", :any
   attr :"phx-target", :any, default: nil
 
   slot :inner_block, required: true
 
   def tooltip(assigns) do
-    point = GraphDataset.to_graph_point(assigns.dataset, assigns.x, assigns.y, assigns.point_id)
-
-    assigns =
-      assign(assigns, point: point)
+    assigns = assign(assigns, data_point: GraphDataset.get_point(assigns.dataset, assigns.point_id))
 
     ~H"""
     <div
       style={[
         "position: absolute; padding: 1rem; font-size: 0.75rem; background: #4B4C4D; color: #CACBCC; z-index: 10; border-radius: 0.75rem; transform: translate(-50%);",
-        "left: #{@point.x}px; bottom: #{@dataset.dimensions.height - @point.y + 12}px;",
+        "left: #{@x_pixel}px; bottom: #{@dataset.dimensions.height - @y_pixel + 12}px;",
         "box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);"
       ]}
       phx-click-away={assigns[:"phx-click-away"]}
       phx-target={assigns[:"phx-target"]}
     >
-      <%= render_slot(@inner_block, @point.data_point.original) %>
+      <%= render_slot(@inner_block, @data_point.original) %>
       <div style="transform: translate(-50%) rotate(45deg); position: absolute; left: 50%; bottom: -0.5rem; width: 1rem; height: 1rem; z-index: -10; background: #4B4C4D" />
     </div>
     """
@@ -347,6 +358,9 @@ defmodule Plox do
 
   attr :orientation, :atom, values: [:vertical, :horizontal], default: :horizontal
 
+  attr :"phx-click", :any, default: nil
+  attr :"phx-target", :any, default: nil
+
   def area_plot(%{orientation: :horizontal} = assigns) do
     ~H"""
     <%= for [scalar1, scalar2] <- area_points(@dataset, @area, @orientation), rect_color = GraphDataset.to_color(@dataset, @color, scalar1.data_point) do %>
@@ -360,6 +374,21 @@ defmodule Plox do
         width={scalar2.value - scalar1.value}
         x={scalar1.value}
         y={@dataset.dimensions.margin.top}
+        phx-click={
+          if assigns[:"phx-click"],
+            do:
+              JS.push(assigns[:"phx-click"],
+                value: %{
+                  start_area_point_id: scalar1.data_point.id,
+                  end_area_point_id: scalar2.data_point.id,
+                  dataset_id: @dataset.id,
+                  x_pixel: scalar1.value + (scalar2.value - scalar1.value) / 2,
+                  y_pixel: @dataset.dimensions.margin.top + @dataset.dimensions.height / 2
+                }
+              )
+        }
+        style={if assigns[:"phx-click"], do: "cursor: pointer;"}
+        phx-target={assigns[:"phx-target"]}
       />
     <% end %>
     """
@@ -378,6 +407,21 @@ defmodule Plox do
         }
         x={@dataset.dimensions.margin.left}
         y={scalar1.value - (scalar1.value - scalar2.value)}
+        phx-click={
+          if assigns[:"phx-click"],
+            do:
+              JS.push(assigns[:"phx-click"],
+                value: %{
+                  start_area_point_id: scalar1.data_point.id,
+                  end_area_point_id: scalar2.data_point.id,
+                  dataset_id: @dataset.id,
+                  x_pixel: @dataset.dimensions.margin.left + @dataset.dimensions.width / 2,
+                  y_pixel: scalar2.value + (scalar1.value - scalar2.value) / 2
+                }
+              )
+        }
+        style={if assigns[:"phx-click"], do: "cursor: pointer;"}
+        phx-target={assigns[:"phx-target"]}
       />
     <% end %>
     """
diff --git a/lib/plox/graph_dataset.ex b/lib/plox/graph_dataset.ex
index 254b463..b7043b3 100644
--- a/lib/plox/graph_dataset.ex
+++ b/lib/plox/graph_dataset.ex
@@ -14,6 +14,12 @@ defmodule Plox.GraphDataset do
     %__MODULE__{id: id, dataset: dataset, dimensions: dimensions}
   end
 
+  def get_point(dataset, point_id) do
+    Enum.find_value(dataset.dataset.data, fn data_point ->
+      if data_point.id == point_id, do: data_point
+    end)
+  end
+
   def get_scale!(%__MODULE__{dataset: dataset, dimensions: dimensions}, key) do
     case Map.fetch(dataset.scales, key) do
       {:ok, scale} ->