ChartDataLabelsOptions/ChartDataLabelsDataset Does not work with complex data type

[Eltee-Taiwo]

I have a bar chart that uses a complex type for it's underlying values and I want the chart data label to be a custom value as well. Ideally, something as simple as a properly formatted string but it doesn't look like that option exists.

<BarChart @ref="_barChartStacked" TItem="DataPoint" Options="_barChartOptions2">
    <ChartDataLabels TItem="DataPoint" Datasets="@_barDataLabelsDatasets" Options="@_barDataLabelsOptions" />
</BarChart>

This produces the following:

However, I want to be able to have a custom Label so I can have that text be whatever I want.

Here is my ChartDataLabelsDataset:

readonly List<ChartDataLabelsDataset> _barDataLabelsDatasets = new()
{
    new()
    {
        DatasetIndex = 0,
        Options = new()
        {
            BackgroundColor = "#00ff00",
            BorderColor = "#00ff00",

        }
    },
    new ()
    {
        DatasetIndex = 1,
        Options = new ()
        {
            BackgroundColor = "Yellow",
            BorderColor = "Blue",
            // Labels = "Chicken" //I tried setting this property
        }
    }
};

I tried setting the Labels property on one of the datasets since the chartjs plugin seems to check if that property exists but no dice.

Anyone have any thoughts on if this is possible? Or would this need to be a feature reuest?

[Eltee-Taiwo]

Playing around with the underlying chartjs plugin, I see that I can set up a custom formatter like so. So my question ultimately boils down to is this currently possible with this nuget package? Digging into it I see that the Formatter property only takes an enum that represents Math.floor/ceeiling/round functions.

[stsrki]

We already have an enum that is defined as

Formater = ChartMathFormatter.Round,

Did you tried it?

---

In your screenshot, you are showing formatter as a JavaScript function. That is a little more tricky to do as JS functions must be executed on the client, not in C#. We have already done something similar in other Chart options where we transpile from C# to JS function. In case it is possible in this case we would have to introduce it in 1.4 or 2.0 as it could be somewhat of a breaking change.

[stsrki]

PS. maybe you can also try overriding ToString() on your complex object?

[Eltee-Taiwo]

Thanks for your input!

Formater = ChartMathFormatter.Round,

Yes I tried that but that seems to only work with numbers - specifically decimals.

Chart options where we transpile from C# to JS function

I was looking at how we currently do that here and I want to see if I can maybe get that to work by changing the data type of Formatter in C# to use a scriptable option instead.

In case it is possible in this case we would have to introduce it in 1.4 or 2.0 as it could be somewhat of a breaking change.

Agreed. I think it will have to be a breaking change if this works. Unless we add another property called something like ScriptableFormatter

[Eltee-Taiwo]

#5146

This is the best I could come up with at 4am but it works for my specific use case so I'll be moving this down my priotity list.

[Eltee-Taiwo]

#5146

readonly List<ChartDataLabelsDataset> _barDataLabelsDatasets = new()
{
    new()
    {
        DatasetIndex = 0,
        Options = new()
        {
            BackgroundColor = "#00ff00",
            BorderColor = "#00ff00",
            SoftCodeFormatter = "function(value, context) { return '£' + value.y; }"

        }
    },
    new ()
    {
        DatasetIndex = 1,
        Options = new ()
        {
            BackgroundColor = "Yellow",
            BorderColor = "Blue",
            SoftCodeFormatter = "function(value, context) { return '$' + value.y; }"
        }
    }
};

With the complex object looking like:

    public class DataPoint
    {
        public int Y { get; set; }
        public string X { get; set; } = null!;
    }

Produces: