ChartJs.Blazor Custom Tooltips (callbacks)

Describe your question

Is it possible to have tool tips customized not only visually but also what text is displayed inside the toolptip? It seems to be dont using tooltips and callbacks, but im not too sure how to use callbacks with this bridge.

Which Blazor project type is your question related to?

Server-Side

Which charts is this question related to?

All Charts

JavaScript equivalent

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';

                    if (label) {
                        label += ': ';
                    }
                    label += Math.round(tooltipItem.yLabel * 100) / 100;
                    return label;
                }
            }
        }
    }
});

Additional context

My Current way of handing tooltips, I cant seem to access the Callbacks from here.

   Tooltips = new Tooltips()
                    {
                        BackgroundColor = EdenColors.hoverWhite,
                        Mode = InteractionMode.Nearest,
                        Intersect = false,
                        DisplayColors = false,
                        Position = TooltipPosition.Average,
                        CornerRadius = 5,
                        XPadding = 10,
                        YPadding = 10,
                        BodyFontFamily = "Poppins",
                        TitleFontFamily = "Poppins",
                        BorderWidth = 1,
                        BorderColor = EdenColors.inactiveColor,
                        TitleFontSize = 12,
                        TitleFontColor = EdenColors.darkGrey,
                        BodyFontSize = 25,
                        BodyFontColor = EdenColors.edenBlue,
                    },

Jun 12 '20 08:06 TheLazyLemur

Thank you for the detailed report.

You're correct on pretty much everything :)
You'd need to use the callbacks but as you've noticed correctly, we've not implemented them yet. Since #70, we can implement them and we will do that for 2.0 (this issue is now the reference for that). Other callbacks that'll be implemented in 2.0 include the custom tick callbacks (#62) and more.

As a disclaimer, you will have to use JavaScript for the custom tooltip callback because Callbacks with return value are not supported on server-side blazor (as far as I understand you're using Server-side).

Jun 12 '20 09:06 Joelius300

Hey @TheLazyLemur

2.0 is right around the corner and unfortunately I won't have time to fit this feature in. This should be a non-breaking change and can be done later. If you'd like to submit a PR, feel free to do so. Otherwise it'll be fixed at some later time when there's more resources available.

I'm really sorry, I hope you can work with your alternative solution for the time being.

Nov 01 '20 21:11 Joelius300

I am having issues with formatting currency values in the tooltips. Project is aspNet.Core 5. Using SQL Server for account verification and another dbContext connected to firebird. Since it seems to be impossible to upgrade to Firebird 3 I have to use Dapper. BlazorServer app

For each firebird currency datatype in the sales model I have to do this:
[DataType(DataType.Currency)] [Column(TypeName = "decimal(18, 2)")] public double Cost { get; set; } /// or public decimal? Cost {get ;set;)

I am trying to find out how to cast it back to a formatted currency value for the tooltip and parts of the cardbody. Along with other values that should be customer friendly formatted in either the card header or card footer.

How do you get to the chart option property tooltips in order to display the correct currency formatted values?

May 29 '21 23:05 JezPops

Any updates on formatting tooltips? Can't find if the callback handlers are implemented yet.

Jun 09 '21 14:06 MattMckenzy

Thank you very much for the chart. I am using it in my project. However, I am having a problem adding % inside the tooltip. I also tried passing a list of strings to the dataset object but the chart did not show anything.