Added suport for custom tooltip

apexcharts · Sep 7, 2021 · 119da0d · 119da0d
1 parent d923a01
commit 119da0d
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 11 deletions.
diff --git a/samples/DemoCharts/Pages/DateTimeChart.razor b/samples/DemoCharts/Pages/DateTimeChart.razor
@@ -42,11 +42,16 @@
 
         options.Subtitle = new Subtitle { OffsetY = 15, Text = "DateTime sample with options" };
 
-        options.Tooltip = new Tooltip {
-            Enabled = true,
-            Y = new TooltipY { 
-                Title = new TooltipYTitle {Formatter = @"function(name) { return name + ':' }" },
-                Formatter = @"function(value, { series, seriesIndex, dataPointIndex, w }) { return '$' + value }" },
+        //options.Tooltip = new Tooltip { Custom = "function({series, seriesIndex, dataPointIndex, w}) { return '<div> <span>' + series[seriesIndex][dataPointIndex] + '-Test </span></div>' }" };
+
+
+        options.Tooltip = new Tooltip
+        {
+            Y = new TooltipY
+            {
+                Title = new TooltipYTitle { Formatter = @"function(name) { return name + ':' }" },
+                Formatter = @"function(value, { series, seriesIndex, dataPointIndex, w }) { return '$' + value }"
+            },
         };
 
 

diff --git a/samples/DemoCharts/Pages/RadialBarChart.razor b/samples/DemoCharts/Pages/RadialBarChart.razor
@@ -25,14 +25,18 @@
     {
         options.Chart = new Chart { Sparkline = new ChartSparkline() };
 
+
         options.PlotOptions = new PlotOptions
         {
             RadialBar = new PlotOptionsRadialBar
             {
                 DataLabels = new RadialBarDataLabels
                 {
                     Name = new RadialBarDataLabelsName { FontSize = "26px", OffsetY = -20 },
-                    Value = new RadialBarDataLabelsValue { FontSize = "36px", FontWeight = "bold", Color = "lightgray" }
+                    Value = new RadialBarDataLabelsValue {
+                        Formatter = @"function (val) { return val + '%'}",
+                        FontSize = "36px", FontWeight = "bold",
+                        Color = "lightgray" }
                 }
             }
         };

diff --git a/src/Blazor-ApexCharts/Models/ApexChartOptions.cs b/src/Blazor-ApexCharts/Models/ApexChartOptions.cs
@@ -1131,7 +1131,7 @@ public class StickyStyle
     /// </summary>
     public class Tooltip
     {
-        //public Custom? Custom { get; set; }
+        public string Custom { get; set; }
         public bool Enabled { get; set; } = true;
         public List<double> EnabledOnSeries { get; set; }
         public bool? FillSeriesColor { get; set; }

diff --git a/src/Blazor-ApexCharts/wwwroot/js/blazor-apex-charts.js b/src/Blazor-ApexCharts/wwwroot/js/blazor-apex-charts.js
@@ -17,11 +17,9 @@
         }
 
         var options = JSON.parse(options, (key, value) =>
-            key === 'formatter' && value.length !== 0 ? eval("(" + value + ")") : value
-
-);
+            (key === 'formatter' || key === 'custom') && value.length !== 0 ? eval("(" + value + ")") : value
+        );
 
-
 
         if (options.debug == true) {
             console.log(options);