Merge pull request #552 from apexcharts/update-apexcharts.js-4.1.0

Updated Apexcharts.js to 4.1.0

docs/BlazorApexCharts.Docs/BlazorApexCharts.Docs.csproj

@@ -25,6 +25,9 @@
     <Content Update="Components\ChartService\Usage.razor">
       <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
     </Content>
+    <Content Update="Components\ChartTypes\LineCharts\ColorThreshold.razor">
+      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+    </Content>
   </ItemGroup>
 
 </Project>

docs/BlazorApexCharts.Docs/Components/ChartTypes/AreaCharts/AreaCharts.razor

@@ -3,7 +3,8 @@
 <DocExamples Title="Area Charts">
 
 
-    <CodeSnippet Title=Basic ClassName=@typeof(Basic).ToString()>
+
+   <CodeSnippet Title=Basic ClassName=@typeof(Basic).ToString()>
         <Snippet>
             <Basic />
         </Snippet>
@@ -20,6 +21,6 @@
         <Snippet>
             <AreaPlotOptions />
         </Snippet>
-    </CodeSnippet>
+    </CodeSnippet> 
 
 </DocExamples>

docs/BlazorApexCharts.Docs/Components/ChartTypes/LineCharts/ColorThreshold.razor

@@ -0,0 +1,47 @@
+<DemoContainer>
+    <ApexChart TItem="Order"
+    Title="Basic Sample"
+    Options="options">
+
+        <ApexPointSeries TItem="Order"
+        Items="orders"
+        SeriesType="@SeriesType.Line"
+        Name="Gross Value"
+        XValue="@(e => e.Country)"
+        YAggregate="@(e => e.Sum(e => e.GrossValue))"
+        OrderByDescending="e=>e.X" />
+
+        <ApexPointSeries TItem="Order"
+        Items="orders"
+        SeriesType="@SeriesType.Line"
+        Name="Net Value"
+        XValue="@(e => e.Country)"
+        YAggregate="@(e => e.Sum(e => e.NetValue))"
+        OrderByDescending="e=>e.X" />
+    </ApexChart>
+</DemoContainer>
+
+@code {
+    private List<Order> orders { get; set; } = SampleData.GetOrders();
+    private ApexChartOptions<Order> options { get; set; } = new();
+
+    protected override void OnInitialized()
+    {
+        options.PlotOptions = new PlotOptions
+            {
+                Line = new PlotOptionsLine
+                {
+                    Colors = new LineColors
+                    {
+                        Threshold = 150000,
+                        ColorAboveThreshold = "#0088ee",
+                        ColorBelowThreshold = "#ff0000"
+                    }
+                }
+            };
+
+
+    }
+
+
+}

docs/BlazorApexCharts.Docs/Components/ChartTypes/LineCharts/LineCharts.razor

@@ -44,4 +44,10 @@
         </Snippet>
     </CodeSnippet>
 
+    <CodeSnippet Title="Color Threshold" ClassName=@typeof(ColorThreshold).ToString()>
+        <Snippet>
+            <ColorThreshold />
+        </Snippet>
+    </CodeSnippet>
+
 </DocExamples>

src/Blazor-ApexCharts/Models/ApexChartOptions.cs

@@ -2746,6 +2746,30 @@ public class PlotOptionsLine
         /// Default is false
         /// </summary>
         public bool? IsSlopeChart { get; set; }
+
+        /// <inheritdoc cref="ApexCharts.LineColors" />
+        public LineColors Colors { get; set; }
+
+    }
+
+    /// <summary>
+    /// Options for line colors
+    /// </summary>
+    public class LineColors
+    {
+        /// <summary>
+        /// Value that indicates the threshold for different colors
+        /// Default is 0
+        /// </summary>
+        public decimal? Threshold { get; set; }
+        /// <summary>
+        /// Color of the line above threshold
+        /// </summary>
+        public string ColorAboveThreshold { get; set; }
+        /// <summary>
+        /// Color of the line below threshold
+        /// </summary>
+        public string ColorBelowThreshold { get; set; }
     }
 
         /// <summary>

src/Blazor-ApexCharts/wwwroot/js/blazor-apexcharts.js

@@ -1,4 +1,4 @@
-import ApexCharts from './apexcharts.esm.js?ver=4.0.0'
+import ApexCharts from './apexcharts.esm.js?ver=4.1.0'
 
 // export function for Blazor to point to the window.blazor_apexchart. To be compatible with the most JS Interop calls the window will be return.
 export function get_apexcharts() {