Custom Tooltips (callbacks)

TheLazyLemur commented 4 years ago

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,
                    },

Joelius300 commented 4 years ago

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).

Joelius300 commented 3 years ago

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.

JezPops commented 3 years ago

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?

MattMckenzy commented 3 years ago

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

redar84 commented 2 years ago

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.