diff --git a/lib/demo_web/live/page_live.ex b/lib/demo_web/live/page_live.ex
index 10c540d..6ddce97 100644
--- a/lib/demo_web/live/page_live.ex
+++ b/lib/demo_web/live/page_live.ex
@@ -9,6 +9,7 @@ defmodule DemoWeb.PageLive do
   alias Uncharted.Axes.{BaseAxes, MagnitudeAxis, XYAxes}
   alias Uncharted.BarChart
   alias Uncharted.ColumnChart
+  alias Uncharted.DonutChart
   alias Uncharted.LineChart
   alias Uncharted.PieChart
   alias Uncharted.ProgressChart
@@ -137,13 +138,63 @@ defmodule DemoWeb.PageLive do
 
     progress_chart = progress_chart(from: column_chart)
 
+    donut_chart = %BaseChart{
+      title: "Best kind of donut",
+      colors: %{
+        rose_gradient: %Gradient{
+          start_color: "#642B73",
+          stop_color: "#C6426E"
+        },
+        blue_gradient: %Gradient{
+          start_color: "#36D1DC",
+          stop_color: "#5B86E5"
+        },
+        red_gradient: %Gradient{
+          start_color: "#FF9486",
+          stop_color: "#FF1379"
+        }
+      },
+      dataset: %DonutChart.Dataset{
+        data: [
+          %BaseDatum{
+            name: "Cake",
+            fill_color: :red_gradient,
+            values: [30.0]
+          },
+          %BaseDatum{
+            name: "Creamstick",
+            fill_color: :blue_gradient,
+            values: [28.0]
+          },
+          %BaseDatum{
+            name: "Glazed",
+            fill_color: :rose_gradient,
+            values: [25.0]
+          },
+          %BaseDatum{
+            name: "Powdered",
+            fill_color: :blue_gradient,
+            values: [17.0]
+          }
+        ],
+        data_name_label: "Donut Type",
+        data_value_label: "Percentage",
+        center_value: 100,
+        center_value_fill_color: :blue_gradient,
+        label: "Donuts Tasted",
+        label_fill_color: :rose_gradient,
+        secondary_label: "(all by me)"
+      }
+    }
+
     {:ok,
      assign(socket,
        bar_chart: bar_chart(),
        column_chart: column_chart,
        pie_chart: pie_chart,
        progress_chart: progress_chart,
-       line_chart: line_chart
+       line_chart: line_chart,
+       donut_chart: donut_chart
      )}
   end
 
diff --git a/lib/demo_web/live/page_live.html.leex b/lib/demo_web/live/page_live.html.leex
index 24d52e7..ae896b2 100644
--- a/lib/demo_web/live/page_live.html.leex
+++ b/lib/demo_web/live/page_live.html.leex
@@ -45,4 +45,10 @@
       <%= UnchartedPhoenix.render(@socket, @bar_chart)  %>
     </div>
   </div>
+  <div class="card__grid-1">
+    <div class="card">
+      <h3 class="u-center u-push-bottom"><%= Uncharted.Chart.title(@donut_chart) %><br /><span class="caption">the donut chart</span></h3>
+      <%= UnchartedPhoenix.render(@socket, @donut_chart) %>
+    </div>
+  </div>
 </section>