diff --git a/docs/BlazorApexCharts.Docs.Server/Properties/launchSettings.json b/docs/BlazorApexCharts.Docs.Server/Properties/launchSettings.json
index 8cefca5d..654a294f 100644
--- a/docs/BlazorApexCharts.Docs.Server/Properties/launchSettings.json
+++ b/docs/BlazorApexCharts.Docs.Server/Properties/launchSettings.json
@@ -11,7 +11,7 @@
     "BlazorApexCharts.Docs.Server": {
       "commandName": "Project",
       "launchBrowser": true,
-      "launchUrl": "heatmap-charts#events",
+      "launchUrl": "tree-map-charts",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       },
diff --git a/docs/BlazorApexCharts.Docs/Components/ChartTypes/TreeMapCharts/Basic.razor b/docs/BlazorApexCharts.Docs/Components/ChartTypes/TreeMapCharts/Basic.razor
new file mode 100644
index 00000000..9ead8573
--- /dev/null
+++ b/docs/BlazorApexCharts.Docs/Components/ChartTypes/TreeMapCharts/Basic.razor
@@ -0,0 +1,32 @@
+<DemoContainer>
+    <ApexChart TItem="Order"
+               Title="Order Net Value">
+
+        <ApexPointSeries TItem="Order"
+                         Items="Orders"
+                         Name="Gross Value"
+                         ShowDataLabels="true"
+                         SeriesType="SeriesType.Treemap"
+                         XValue="@(e => e.Country)"
+                         YAggregate="@(e => e.Sum(e => e.GrossValue))"
+                         PointColor="e => GetPointColor(e)"
+                         OrderByDescending="e=>e.Y" />
+
+    </ApexChart>
+</DemoContainer>
+
+@code {
+    private List<Order> Orders { get; set; } = SampleData.GetOrders();
+
+    public string GetPointColor(Order order)
+    {
+        return order.Country switch
+        {
+            "Brazil" => "#008FFB",
+            "Sweden" => "#00E396",
+            "Spain" => "#FEB019",
+            "France" => "#775DD0",
+            _ => "#546E7A",
+        };
+    }
+}
\ No newline at end of file
diff --git a/docs/BlazorApexCharts.Docs/Components/ChartTypes/TreeMapCharts/TreeMapCharts.razor b/docs/BlazorApexCharts.Docs/Components/ChartTypes/TreeMapCharts/TreeMapCharts.razor
new file mode 100644
index 00000000..76d78e12
--- /dev/null
+++ b/docs/BlazorApexCharts.Docs/Components/ChartTypes/TreeMapCharts/TreeMapCharts.razor
@@ -0,0 +1,13 @@
+@page "/tree-map-charts"
+
+<DocExamples Title="TreeMap Charts">
+
+   <CodeSnippet Title=Basic ClassName=@typeof(Basic).ToString()>
+        <Snippet>
+            <Basic />
+        </Snippet>
+    </CodeSnippet>
+
+  
+
+</DocExamples>
diff --git a/docs/BlazorApexCharts.Docs/Shared/MainNavigation.razor b/docs/BlazorApexCharts.Docs/Shared/MainNavigation.razor
index bca1e9ea..e838e6fa 100644
--- a/docs/BlazorApexCharts.Docs/Shared/MainNavigation.razor
+++ b/docs/BlazorApexCharts.Docs/Shared/MainNavigation.razor
@@ -123,6 +123,12 @@
                     </MenuItemIcon>
                 </NavbarMenuItem>
 
+                <NavbarMenuItem Href="tree-map-charts" Text="TreeMap">
+                    <MenuItemIcon>
+                        <Icon class="icon" IconType="@Icons.Chart_infographic" />
+                    </MenuItemIcon>
+                </NavbarMenuItem>
+
                 <NavbarMenuItem Href="rangearea-charts" Text="RangeArea">
                     <MenuItemIcon>
                         <Icon class="icon" IconType="@Icons.Chart_area_line" />