diff --git a/drawdata/static/scatter_widget.js b/drawdata/static/scatter_widget.js
index d3bbeac..adf10c8 100644
--- a/drawdata/static/scatter_widget.js
+++ b/drawdata/static/scatter_widget.js
@@ -9567,6 +9567,7 @@ function render({ model, el }) {
   container.appendChild(controls);
   let selectedClassButton = null;
   let selectedColor = colors[0];
+  let circle_brush;
   let classButtonsContainer = document.createElement("div");
   classButtonsContainer.style.display = n_classes === 1 ? "none" : "flex";
   classButtonsContainer.style.alignItems = "center";
@@ -9608,7 +9609,9 @@ function render({ model, el }) {
       button.style.backgroundColor = hexToRgba(colors[i], 0.25);
       button.style.borderColor = colors[i];
       button.style.color = "var(--dd-text-color)";
-      circle_brush.style("fill", selectedColor).style("fill-opacity", 0.3).style("stroke", selectedColor).style("stroke-width", 2);
+      if (circle_brush) {
+        circle_brush.style("fill", selectedColor).style("fill-opacity", 0.3).style("stroke", selectedColor).style("stroke-width", 2);
+      }
     };
     classButtonsContainer.appendChild(button);
     if (i === 0) {
@@ -9729,7 +9732,7 @@ function render({ model, el }) {
       redraw_from_scratch();
     }
   }
-  let circle_brush = svg.append("circle").attr("cx", width / 2).attr("cy", height / 2).attr("r", model.get("brushsize") * brushScale).style("fill", selectedColor).style("fill-opacity", 0.3).style("stroke", selectedColor).style("stroke-width", 2).style("stroke-opacity", 0.9).attr("class", "brush-indicator");
+  circle_brush = svg.append("circle").attr("cx", width / 2).attr("cy", height / 2).attr("r", model.get("brushsize") * brushScale).style("fill", selectedColor).style("fill-opacity", 0.3).style("stroke", selectedColor).style("stroke-width", 2).style("stroke-opacity", 0.9).attr("class", "brush-indicator");
   function drag_start(event) {
     isDragging = false;
   }
diff --git a/js/scatter_widget.js b/js/scatter_widget.js
index 97ddc54..f7dbe63 100644
--- a/js/scatter_widget.js
+++ b/js/scatter_widget.js
@@ -54,6 +54,7 @@ function render({ model, el }) {
 
   let selectedClassButton = null;
   let selectedColor = colors[0];
+  let circle_brush;
 
   // Container for class buttons (hidden when n_classes === 1)
   let classButtonsContainer = document.createElement("div");
@@ -105,11 +106,13 @@ function render({ model, el }) {
       button.style.borderColor = colors[i];
       button.style.color = "var(--dd-text-color)";
 
-      circle_brush
-        .style("fill", selectedColor)
-        .style("fill-opacity", 0.3)
-        .style("stroke", selectedColor)
-        .style("stroke-width", 2);
+      if (circle_brush) {
+        circle_brush
+          .style("fill", selectedColor)
+          .style("fill-opacity", 0.3)
+          .style("stroke", selectedColor)
+          .style("stroke-width", 2);
+      }
     };
 
     classButtonsContainer.appendChild(button);
@@ -321,7 +324,7 @@ function render({ model, el }) {
   }
 
   // Visual brush indicator with higher visibility
-  let circle_brush = svg
+  circle_brush = svg
     .append("circle")
     .attr("cx", width / 2)
     .attr("cy", height / 2)
diff --git a/tests/test_scatter_widget_init_order.py b/tests/test_scatter_widget_init_order.py
new file mode 100644
index 0000000..b83a30b
--- /dev/null
+++ b/tests/test_scatter_widget_init_order.py
@@ -0,0 +1,8 @@
+from pathlib import Path
+
+
+def test_scatter_widget_does_not_use_circle_brush_before_initialization():
+    js = Path("drawdata/static/scatter_widget.js").read_text(encoding="utf-8")
+
+    assert "let circle_brush;" in js
+    assert "if (circle_brush)" in js