Merge pull request #402 from apexcharts/custom-tooltip-no-eval

Removed the need to run javascript eval for custom tooltip

Author: joadan

docs/BlazorApexCharts.Docs.Server/Properties/launchSettings.json

@@ -11,7 +11,7 @@
     "BlazorApexCharts.Docs.Server": {
       "commandName": "Project",
       "launchBrowser": true,
-      "launchUrl": "features/annotations",
+      "launchUrl": "features/tooltip",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       },

src/Blazor-ApexCharts/ApexChart.razor.cs

@@ -1045,17 +1045,7 @@ private void SetCustomTooltip()
         {
             if (ApexPointTooltip == null) { return; }
             if (Options.Tooltip == null) { Options.Tooltip = new Tooltip(); }
-
-            var customTooltip = @"function({series, seriesIndex, dataPointIndex, w}) {
-                                var sourceId = 'apex-tooltip-' + w.globals.chartID;
-                                var source = document.getElementById(sourceId);
-                                if (source) {
-                                return source.innerHTML;
-                                }
-                                return '...'
-                                }";
-
-            Options.Tooltip.Custom = customTooltip;
+            Options.Tooltip.CustomTooltip = true;
         }
 
         private async Task RenderChartAsync()

src/Blazor-ApexCharts/Models/ApexChartOptions.cs

@@ -94,7 +94,7 @@ public class ApexChartOptions<TItem> where TItem : class
 
         /// <inheritdoc cref="ApexCharts.Tooltip" />
         public Tooltip Tooltip { get; set; }
-
+                
         /// <inheritdoc cref="ApexCharts.XAxis" />
         public XAxis Xaxis { get; set; }
 
@@ -4128,10 +4128,22 @@ public class TitleStyle
     /// </remarks>
     public class Tooltip
     {
+
+        /// <summary>
+        /// Undocumented
+        /// </summary>
         public bool? HideEmptySeries { get; set; }
 
+        /// <summary>
+        /// Undocumented
+        /// </summary>
         public bool? HideEmptyShared { get; set; }
 
+        /// <summary>
+        /// Internal flag to indicate if there is a custom tooltip setup
+        /// </summary>
+        public bool CustomTooltip { get; internal set; }
+
         /// <inheritdoc cref="ApexCharts.CustomFunction"/>
         /// <summary>
         /// Draw a custom html tooltip instead of the default one based on the values provided in the function arguments.

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

@@ -212,6 +212,17 @@ window.blazor_apexchart = {
         options.dotNetObject = dotNetObject;
         options.chart.events = {};
 
+        if (options.tooltip != undefined && options.tooltip.customTooltip == true) {
+            options.tooltip.custom = function ({ series, seriesIndex, dataPointIndex, w }) {
+                var sourceId = 'apex-tooltip-' + w.globals.chartID;
+                var source = document.getElementById(sourceId);
+                if (source) {
+                    return source.innerHTML;
+                }
+                return '...'
+            };
+        }
+
         if (events.hasDataPointLeave === true) {
             options.chart.events.dataPointMouseLeave = function (event, chartContext, config) {
                 var selection = {