Added Mixed Scatter sample

apexcharts · May 22, 2023 · 672a05e · 672a05e
1 parent 9dc3d44
commit 672a05e
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 1 deletion.
diff --git a/docs/BlazorApexCharts.Docs/Components/ChartTypes/AreaCharts/Basic.razor b/docs/BlazorApexCharts.Docs/Components/ChartTypes/AreaCharts/Basic.razor
@@ -1,6 +1,6 @@
 <DemoContainer>
 <ApexChart TItem="Order"
-           Title="Scatter Sample">
+           Title="Basic Sample">
 
     <ApexPointSeries TItem="Order"
                 Items="orders"

diff --git a/docs/BlazorApexCharts.Docs/Components/ChartTypes/ScatterCharts/Mixed.razor b/docs/BlazorApexCharts.Docs/Components/ChartTypes/ScatterCharts/Mixed.razor
@@ -0,0 +1,42 @@
+<DemoContainer>
+    <ApexChart TItem="Order"
+               Title="Scatter Sample" XAxisType="XAxisType.Numeric" Debug Options="options">
+
+        <ApexPointSeries TItem="Order"
+                         Items="orders"
+                         Name="% Gross"
+                         SeriesType="SeriesType.Scatter"
+                         XValue="@(e => e.DiscountPercentage)"
+                         YValue="@(e => e.GrossValue)"
+                         OrderByDescending="e=>e.X" />
+
+        <ApexPointSeries TItem="Order"
+                         Items="GetTrendOrders()"
+                         SeriesType="SeriesType.Line"
+                         Name="Trend"
+                         XValue="@(e => e.DiscountPercentage)"
+                         YValue="@(e => e.GrossValue)"
+                         OrderByDescending="e=>e.X" />
+    </ApexChart>
+</DemoContainer>
+
+    @code {
+    private List<Order> orders = SampleData.GetOrders();
+    private ApexChartOptions<Order> options = new();
+
+    protected override void OnInitialized()
+    {
+        options.Tooltip = new ApexCharts.Tooltip { Shared = false, Intersect = true };
+        options.Markers = new Markers {  Size = 6 };
+    }
+
+    private List<Order> GetTrendOrders()
+    {
+        var trendOrders = new List<Order>();
+        trendOrders.Add(new Order { DiscountPercentage = 5, GrossValue = 30000 });
+        trendOrders.Add(new Order { DiscountPercentage = 70, GrossValue = 70000 });
+
+        return trendOrders;
+    }
+
+    }
diff --git a/docs/BlazorApexCharts.Docs/Components/ChartTypes/ScatterCharts/ScatterCharts.razor b/docs/BlazorApexCharts.Docs/Components/ChartTypes/ScatterCharts/ScatterCharts.razor
@@ -8,5 +8,10 @@
         </Snippet>
     </CodeSnippet>
 
+    <CodeSnippet Title="Mixed" ClassName=@typeof(Mixed).ToString()>
+        <Snippet>
+            <Mixed />
+        </Snippet>
+    </CodeSnippet>
 
 </DocExamples>