Merge pull request #212 from apexcharts/add-legend-formater

Added Legend Formatter

Author: joadan

docs/BlazorApexCharts.Docs/Components/Features/Legend/LegendCharts.razor

@@ -8,5 +8,10 @@
         </Snippet>
     </CodeSnippet>
 
+    <CodeSnippet Title="Formatter" ClassName=@typeof(LegendFormatter).ToString()>
+        <Snippet>
+            <LegendFormatter />
+        </Snippet>
+    </CodeSnippet>
 
 </DocExamples>

docs/BlazorApexCharts.Docs/Components/Features/Legend/LegendFormatter.razor

@@ -0,0 +1,30 @@
+<DemoContainer>
+
+    <ApexChart TItem="Order"
+               Title="Order Gross Value"
+               Options=options>
+
+        <ApexPointSeries TItem="Order"
+                         Items="orders"
+                         Name="Gross Value"
+                         SeriesType="SeriesType.Pie"
+                         XValue="@(e => e.Country)"
+                         YAggregate="@(e => e.Sum(e => e.GrossValue))"
+                         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.Legend = new Legend
+            {
+
+                Formatter = @"function(seriesName, opts) { return [seriesName, ' - ', opts.w.globals.series[opts.seriesIndex]] }"
+
+        };
+    }
+    }

src/Blazor-ApexCharts/Models/ApexChartOptions.cs

@@ -704,7 +704,11 @@ public class GridYAxis
     /// </summary>
     public class Legend
     {
+        [Obsolete("This property is no longer availabe")]
         public LegendContainerMargin ContainerMargin { get; set; }
+        [Obsolete("This property is no longer availabe")]
+        public string TextAnchor { get; set; }
+
         public bool? Floating { get; set; }
         public string FontFamily { get; set; }
         public string FontSize { get; set; }
@@ -724,8 +728,11 @@ public class Legend
         public bool? ShowForNullSeries { get; set; }
         public bool? ShowForSingleSeries { get; set; }
         public bool? ShowForZeroSeries { get; set; }
-        public string TextAnchor { get; set; }
+       
         public double? Width { get; set; }
+        public string Formatter { get; set; }
+        public string TooltipHoverFormatter { get; set; }
+        public List<string> CustomLegendItems { get; set; }
     }
 
     public class LegendContainerMargin

src/Blazor-ApexCharts/wwwroot/js/blazor-apex-charts.js

@@ -194,7 +194,7 @@
         }
 
         var options = JSON.parse(options, (key, value) =>
-            (key === 'formatter' || key === 'dateFormatter' || key === 'custom') && value.length !== 0 ? eval("(" + value + ")") : value
+            (key === 'formatter' || key === 'tooltipHoverFormatter' || key === 'dateFormatter' || key === 'custom') && value.length !== 0 ? eval("(" + value + ")") : value
         );
 
         if (options.debug == true) {