diff --git a/lib/plox.ex b/lib/plox.ex
index dcdf889..ba2ba8c 100644
--- a/lib/plox.ex
+++ b/lib/plox.ex
@@ -199,6 +199,7 @@ defmodule Plox do
   """
   @doc type: :component
 
+  attr :id, :string, default: nil
   attr :dataset, :any, required: true
 
   attr :x, :atom, default: :x, doc: "The dataset axis key to use for x values"
@@ -211,25 +212,29 @@ defmodule Plox do
 
   def line_plot(%{type: :line} = assigns) do
     ~H"""
-    <polyline
-      points={@dataset |> GraphDataset.to_graph_points(@x, @y) |> polyline_points()}
-      fill="none"
-      stroke={@color}
-      stroke-width={@width}
-      stroke-dasharray={stroke_dasharray(@line_style)}
-    />
+    <g id={@id}>
+      <polyline
+        points={@dataset |> GraphDataset.to_graph_points(@x, @y) |> polyline_points()}
+        fill="none"
+        stroke={@color}
+        stroke-width={@width}
+        stroke-dasharray={stroke_dasharray(@line_style)}
+      />
+    </g>
     """
   end
 
   def line_plot(%{type: :step_line} = assigns) do
     ~H"""
-    <polyline
-      points={@dataset |> step_points(@x, @y) |> polyline_points()}
-      fill="none"
-      stroke={@color}
-      stroke-width={@width}
-      stroke-dasharray={stroke_dasharray(@line_style)}
-    />
+    <g id={@id}>
+      <polyline
+        points={@dataset |> step_points(@x, @y) |> polyline_points()}
+        fill="none"
+        stroke={@color}
+        stroke-width={@width}
+        stroke-dasharray={stroke_dasharray(@line_style)}
+      />
+    </g>
     """
   end
 
@@ -250,6 +255,7 @@ defmodule Plox do
   """
   @doc type: :component
 
+  attr :id, :string, default: nil
   attr :dataset, :any, required: true
 
   attr :x, :atom, default: :x, doc: "The dataset axis key to use for x values"
@@ -262,27 +268,29 @@ defmodule Plox do
 
   def points_plot(assigns) do
     ~H"""
-    <circle
-      :for={point <- GraphDataset.to_graph_points(@dataset, @x, @y)}
-      phx-click={
-        if assigns[:"phx-click"],
-          do:
-            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;"}
-      fill={GraphDataset.to_color(@dataset, @color, point.data_point)}
-      cx={point.x}
-      cy={point.y}
-      r={@radius}
-    />
+    <g id={@id}>
+      <circle
+        :for={point <- GraphDataset.to_graph_points(@dataset, @x, @y)}
+        phx-click={
+          if assigns[:"phx-click"],
+            do:
+              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;"}
+        fill={GraphDataset.to_color(@dataset, @color, point.data_point)}
+        cx={point.x}
+        cy={point.y}
+        r={@radius}
+      />
+    </g>
     """
   end
 
@@ -291,6 +299,7 @@ defmodule Plox do
   """
   @doc type: :component
 
+  attr :id, :string, default: nil
   attr :dataset, :any, required: true
 
   attr :x, :atom, default: :x, doc: "The dataset axis key to use for x values"
@@ -308,34 +317,36 @@ defmodule Plox do
 
   def bar_plot(assigns) do
     ~H"""
-    <%= for point <- GraphDataset.to_graph_points(@dataset, @x, @y) do %>
-      <line
-        phx-click={
-          if assigns[:"phx-click"],
-            do:
-              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;"}
-        x1={point.x}
-        y1={point.y}
-        x2={point.x}
-        y2={
-          @dataset.dimensions.height - @dataset.dimensions.margin.bottom -
-            @dataset.dimensions.padding.bottom
-        }
-        stroke={GraphDataset.to_color(@dataset, @color, point.data_point)}
-        stroke-width={@width}
-        stroke-linecap={bar_style(@bar_style)}
-      />
-    <% end %>
+    <g id={@id}>
+      <%= for point <- GraphDataset.to_graph_points(@dataset, @x, @y) do %>
+        <line
+          phx-click={
+            if assigns[:"phx-click"],
+              do:
+                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;"}
+          x1={point.x}
+          y1={point.y}
+          x2={point.x}
+          y2={
+            @dataset.dimensions.height - @dataset.dimensions.margin.bottom -
+              @dataset.dimensions.padding.bottom
+          }
+          stroke={GraphDataset.to_color(@dataset, @color, point.data_point)}
+          stroke-width={@width}
+          stroke-linecap={bar_style(@bar_style)}
+        />
+      <% end %>
+    </g>
     """
   end
 
@@ -422,6 +433,7 @@ defmodule Plox do
   """
   @doc type: :component
 
+  attr :id, :string, default: nil
   attr :dataset, :any, required: true
 
   attr :area, :atom, required: true, doc: "The dataset axis key to use for the area plots"
@@ -434,67 +446,71 @@ defmodule Plox do
 
   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 %>
-      <rect
-        :if={!is_nil(rect_color)}
-        fill={rect_color}
-        height={
-          @dataset.dimensions.height - @dataset.dimensions.margin.top -
-            @dataset.dimensions.margin.bottom
-        }
-        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 %>
+    <g id={@id}>
+      <%= for [scalar1, scalar2] <- area_points(@dataset, @area, @orientation), rect_color = GraphDataset.to_color(@dataset, @color, scalar1.data_point) do %>
+        <rect
+          :if={!is_nil(rect_color)}
+          fill={rect_color}
+          height={
+            @dataset.dimensions.height - @dataset.dimensions.margin.top -
+              @dataset.dimensions.margin.bottom
+          }
+          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 %>
+    </g>
     """
   end
 
   def area_plot(%{orientation: :vertical} = assigns) do
     ~H"""
-    <%= for [scalar1, scalar2] <- area_points(@dataset, @area, @orientation), rect_color = GraphDataset.to_color(@dataset, @color, scalar1.data_point) do %>
-      <rect
-        :if={!is_nil(rect_color)}
-        fill={rect_color}
-        height={scalar1.value - scalar2.value}
-        width={
-          @dataset.dimensions.width - @dataset.dimensions.margin.left -
-            @dataset.dimensions.margin.right
-        }
-        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 %>
+    <g id={@id}>
+      <%= for [scalar1, scalar2] <- area_points(@dataset, @area, @orientation), rect_color = GraphDataset.to_color(@dataset, @color, scalar1.data_point) do %>
+        <rect
+          :if={!is_nil(rect_color)}
+          fill={rect_color}
+          height={scalar1.value - scalar2.value}
+          width={
+            @dataset.dimensions.width - @dataset.dimensions.margin.left -
+              @dataset.dimensions.margin.right
+          }
+          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 %>
+    </g>
     """
   end
 
diff --git a/mix.exs b/mix.exs
index 189c97a..af471cc 100644
--- a/mix.exs
+++ b/mix.exs
@@ -1,7 +1,7 @@
 defmodule Plox.MixProject do
   use Mix.Project
 
-  @version "0.3.2"
+  @version "0.3.3"
   @source_url "https://github.com/gridpoint-com/plox"
 
   def project do