DataLabels list of Colors for series does not work when passing in functions

[simeyla]

I'm using a heatmap, so the color of the label on each cell needs to vary based on the intensity. ApexCharts supports using a function OR a string value for a color, but Blazor-ApexCharts always passes the value as a string.

Here is some example data passed to the JS library:

    "style": {
        "colors": [
            "function(opts) { return 'red'; }"
        ]
    }

In the DataLabelsStyle class, here is the Colors list – which of type string with no converter. It should be able to support a function, but doesn't.

public class DataLabelsStyle
{
    // Summary:
    //     Fore colors for the dataLabels. Accepts an array of string colors (['#333', '#999'])
    //     or an array of functions ([function(opts) { return '#333' }]) (Each index in
    //     the array corresponds to the series).
    public List<string> Colors { get; set; }
}

In other places a function is created like this, but that only works when it's always going to be a function.

public class DataLabels
{
    [JsonConverter(typeof(FunctionStringConverter))]
    public string Formatter { get; set; }
}

Right now I'm going to just have to settle for a single color, but maybe FunctionStringConverter could be modified such that if the string begins with function (or whatever it needs to do to support lambdas) then it will become a function, then it could be added to the list of Colors. Or maybe a FunctionOrStringListConverter that just checks for StartsWith("function") to avoid being a potential breaking change.

[peterboccia]

I confirm this issue, as on Heatmap I cannot pass the array of function as done in this pen.
I'm trying to edit the source code but this is probably the only case where the property is a list of string or list of functions. In other parts of the solution some property are serialized as List or Function.
Here probably I need help from whom create all the JsonConverters

[peterboccia]

Oh guys, hey @joadan @simeyla, I've been working on this issue for a few days now. Yesterday afternoon I read the ticket and left a comment to let you know I was on it. Well, I think I’ve just solved it!

I created a new JsonConverter for the Colors property that prints the color when it's a regular value, or outputs a function object with eval if it detects a function in the code. I just tested it and it seems to work.

I've created this 2 files: one static for implement the utility method to recognize a JS function, and the JsonConverter
/src/Blazor-ApexCharts/Internal/ChartUtilities.cs

using System;
using System.Text.RegularExpressions;

namespace ApexCharts.Internal;

/// <summary>
/// Provides JavaScript related helper utilities for ApexCharts internal processing.
/// </summary>
internal static class ChartUtilities
{
    /// <summary>
    /// Regex that matches the beginning of a JavaScript function or arrow function (including optional leading comments).
    /// </summary>
    private static readonly Regex JsFunctionStartRegex = new(
        @"^\s*(?:/\*[\s\S]*?\*/\s*|//[^\n]*\n\s*)*(?:async\s+)?(?:
              function\b
            | \([^)]*\)\s*=>          # (args) =>
            | [A-Za-z_$][\w$]*\s*=>   # identifier =>
        )",
        RegexOptions.IgnoreCase | RegexOptions.Compiled | RegexOptions.CultureInvariant | RegexOptions.IgnorePatternWhitespace);

    /// <summary>
    /// Regex that matches immediately-invoked function expressions (IIFE) using the traditional function keyword.
    /// </summary>
    private static readonly Regex IifeFunctionRegex = new(
        @"^\s*\(\s*(?:async\s+)?function\b",
        RegexOptions.IgnoreCase | RegexOptions.Compiled | RegexOptions.CultureInvariant);

    /// <summary>
    /// Regex that matches immediately-invoked arrow function expressions.
    /// </summary>
    private static readonly Regex IifeArrowRegex = new(
        @"^\s*\(\s*(?:async\s+)?\([^)]*\)\s*=>",
        RegexOptions.IgnoreCase | RegexOptions.Compiled | RegexOptions.CultureInvariant);

    /// <summary>
    /// Determines whether the provided string appears to represent a JavaScript function
    /// (standard function declaration, arrow function, or IIFE).
    /// </summary>
    /// <param name="candidate">The string to inspect.</param>
    /// <returns>
    /// <see langword="true"/> if the string structurally resembles a JavaScript function;
    /// otherwise, <see langword="false"/>.
    /// </returns>
    internal static bool IsJavaScriptFunction(string? candidate)
    {
        if (string.IsNullOrWhiteSpace(candidate))
            return false;

        // Quick cheap pre-filter: avoid regex if no plausible tokens
        if (!(candidate.Contains("function", StringComparison.OrdinalIgnoreCase) ||
              candidate.Contains("=>", StringComparison.Ordinal)))
            return false;

        // Direct structural check at start
        if (JsFunctionStartRegex.IsMatch(candidate))
            return true;

        // IIFE patterns: (function(...) {...})(), (() => {...})(), etc.
        if (IifeFunctionRegex.IsMatch(candidate) || IifeArrowRegex.IsMatch(candidate))
            return true;

        return false;
    }
}

/src/Blazor-ApexCharts/Internal/Converters/ListStringOrFunctionConverter.cs

using System;
using System.Collections.Generic;
using System.Text.Json;
using System.Text.Json.Serialization;

namespace ApexCharts.Internal;

/// <summary>
/// Converter for lists of strings that detects entries containing a JavaScript function definition
/// (case-insensitive search for the word "function") and serializes those as an object with the "@eval" key
/// so that ApexCharts interprets them as executable functions instead of plain strings.
///
/// Output behavior:
/// - Normal strings are written as JSON string elements inside the array.
/// - Strings representing functions are written as:
///   { "@eval": "function(x) { return x; }" }
///
/// Example:
/// C# input:
/// <code>
/// new List&lt;string&gt;
/// {
///     "Label 1",
///     "function(w) { return w; }",
///     "Another label"
/// };
/// </code>
///
/// JSON output:
/// <code>
/// [
///   "Label 1",
///   { "@eval": "function(w) { return w; }" },
///   "Another label"
/// ]
/// </code>
///
/// Note: Deserialization (Read) is not implemented because this converter is intended only for outgoing
/// serialization to the client.
/// </summary>
internal class ListStringOrFunctionConverter : JsonConverter<List<string>>
{
    public override bool CanConvert(Type typeToConvert) => typeToConvert == typeof(List<string>);

    public override List<string> Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options)
    {
        throw new NotImplementedException();
    }

    public override void Write(Utf8JsonWriter writer, List<string> value, JsonSerializerOptions options)
    {
        writer.WriteStartArray();

        foreach (var item in value)
        {
            if (item.Contains("function", StringComparison.OrdinalIgnoreCase))
            {
                writer.WriteStartObject();
                writer.WritePropertyName("@eval");
                JsonSerializer.Serialize(writer, item, options);
                writer.WriteEndObject();
            }
            else
            {
                writer.WriteStringValue(item);
            }
        }

        writer.WriteEndArray();
    }
}

Then in the DataLabelStyle class inside /src/Blazor-ApexCharts/Models/ApexChartOptions.cs file I added simply the converter and enhanced the XML comments:

        /// <summary>
        /// Fore colors for the dataLabels (each index in the array corresponds to the series).
        /// </summary>
        /// <remarks>
        /// Accepts:
        /// <list type="bullet">
        /// <item><description>An array of string colors (e.g. <c>{ "#333", "#999" }</c>)</description></item>
        /// <item><description>An array of JavaScript functions serialized as strings (e.g. <c>{ "function(opts) { return '#333' }" }</c>)</description></item>
        /// </list>
        /// Each index in the array corresponds to the series index.
        /// <para>Examples:</para>
        /// <code>
        /// // Using static colors
        /// var style = new DataLabelsStyle
        /// {
        ///     Colors = new List&lt;string&gt; { "#333", "#999" }
        /// };
        ///
        /// // Using JavaScript functions (strings will be passed through the converter)
        /// var styleWithFunctions = new DataLabelsStyle
        /// {
        ///     Colors = new List&lt;string&gt;
        ///     {
        ///         "function(opts) { return '#333'; }",
        ///         "function(opts) { return opts.seriesIndex % 2 ? '#999' : '#555'; }"
        ///     }
        /// };
        /// </code>
        /// For short inline snippets use the inline code tag, e.g. <c>"#333"</c>.
        /// </remarks>
        [JsonConverter(typeof(ListStringOrFunctionConverter))]
        public List<string> Colors { get; set; }

I’m about to fork, commit, and open a pull request so you can check if it works for you too.
Waiting your feedback, thank you in advance @joadan