Tooltip on the radar chart does not show the Dataset values

[devanshidiaries]

Tooltip on the radar chart does not show the Dataset values marked on the chart

Running the Blazor ChartJs RadarChart Sample at https://www.iheartblazor.com/RadarChart the Radar Chart Tooltip value for participant1 is blank:

But in the original ChartJs implementation has the values displayed from the Radar Dataset in the tooltip, at https://www.chartjs.org/samples/latest/charts/radar.html

[Joelius300]

Thanks for the report.

I'll look into it when I have more time.
As a side-note, the demo-website is behind on the updates and doesn't contain important fixes. I don't know if the radar-chart is affected by this but just to be sure, you should try to check it with the current nuget-release. You can copy the code in our sample or simply clone the repo and run our sample.

It would be great to have code that reproduces this issue on the current version (1.1.0 on nuget). Could you try to provide this? Otherwise it'll be a hunt for version differences and other time consuming stuff and I don't have enough capacity for that currently.

[devanshidiaries]

Here is the complete code example for the implementation of this repo, where Tooltip has no value from the Datasets.

This will help you reproduce the error of missing value on the tooltip.

[Joelius300]

Thanks for the code.

I did some investigation and it turns out that this is a bug within chart.js. Unfortunately I don't think there's a way you could fix this using this library without touching JavaScript. You could maybe fallback to invoking some javascript once the chart is initiated. I'm thinking something like this:

• Let the chart be setup (wait for the initialization of the chart component)
• Call some javascript code (with IJSRuntime, see here) which gets the js-object of the chart using window.ChartJsInterop.BlazorCharts (called in JavaScript) and _config.CanvasId (passed as param on the IJSRuntime call) and then sets the tooltips.callbacks.label function as described in the chart.js issue.

[devanshidiaries]

But, the ChartJs sample highlighted here, running the same implementation has the values displayed from the Radar Dataset in the tooltip.

If you could please share some code on the above guidance for implementing the js-object of the chart, it would be helpful.

[Joelius300]

Their sample uses release 2.9.3 while our library comes bundled with 2.8 (this bundling will be removed in a feature release anyway - see #95). Just reference the newer version of chart.js where this bug is fixed.

This means in your index.html or _Host.cshtml use a cdn or reference a manually downloaded version.

Instead of

<script src="_content/ChartJs.Blazor/Chart.min.js" type="text/javascript" language="javascript"></script>

you could use

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>

You don't have to use a CDN if you don't want to but with Version 2.9.3, I can confirm that the code you showed works (just tested it).

[devanshidiaries]

This is how to use version 2.9.3? <script src="_content/ChartJs.Blazor/Chart.min.js@2.9.3" type="text/javascript" language="javascript"></script>

Without this, my code as below is not working:

@using ChartJs.Blazor.ChartJS.Common.Properties
@using ChartJs.Blazor.ChartJS.RadarChart
@using ChartJs.Blazor.Charts
@using ChartJs.Blazor.Util

<h1>Radar Chart</h1>
<div class="row">
    <button class="btn btn-primary" @onclick="OnClick">Add Dataset</button>
</div>
<ChartJsRadarChart @ref="_radarChartJs" Config="@_config" Width="600" Height="300" />

@code {
    private RadarConfig _config;
    private ChartJsRadarChart _radarChartJs;

    private Random _rand = new Random();

    protected override void OnInitialized()
    {
        _config = new RadarConfig
        {
            Options = new RadarOptions
            {
                Title = new OptionsTitle
                {
                    Display = true,
                    Text = "Participant's scores"
                },
                Scale = new RadialScale
                {
                    Ticks = new ChartJs.Blazor.ChartJS.Common.Axes.Ticks.LinearRadialTicks
                    {
                        StepSize = 1
                    }
                }
            }
        };

        _config.Data.Labels = new List<string> { "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N"};

        List<int> x = new List<int> { 2, 5, 1, 3, 1, 1, 4, 2, 3, 4, 2, 2, 2, 3 };
        List<double> y = new List<double>();
        foreach (var i in x)
            y.Add(i);

        _config.Data.Datasets.Add(new RadarDataset
        {
            Data = y,
            Label = $"Participant {_config.Data.Datasets.Count + 1}",
            BorderColor = ColorUtil.RandomColorString()
        });
    }

    public async Task OnClick()
    {
        List<int> x = new List<int> { 1, 1, 1, 3, 1, 1, 4, 2, 3, 4, 5, 2, 5, 3 };
        List<double> y = new List<double>();
        foreach(var i in x)
            y.Add(i);

        _config.Data.Datasets.Add(new RadarDataset
        {
            Data = y,
            Label = $"Participant {_config.Data.Datasets.Count + 1}",
            BorderColor = ColorUtil.RandomColorString()
        });

        await _radarChartJs.Update();
    }
    private class RadialScale : Scale
    {
        public new ChartJs.Blazor.ChartJS.Common.Axes.Ticks.LinearRadialTicks Ticks { get; set; }
    }
}

[Joelius300]

You'd need to show me your index.html or _Host.cshtml. The razor code is fine.

Your script tag isn't going to work. We don't have a file ChartJs.Blazor/Chart.min.js@2.9.3. You can download the file from somewhere (see chartjs.org) and reference it directly OR you could use a CDN like I did in my example from the last comment. You can just follow that comment 1:1 and you'll see the result. It works, I've tested it.

[devanshidiaries]

I added the 2.9.3 version locally as directed here.

And rerun my code with the same _host.cshtml as below, but same missing value.

@page "/"
@namespace BlazorAppProj.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlazorAppProj</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
    <!-- Reference the included moment.js javascript file. -->
    <script src="_content/ChartJs.Blazor/moment-with-locales.min.js" type="text/javascript" language="javascript"></script>

    <!-- Reference the included ChartJs javascript file. -->
    <script src="_content/ChartJs.Blazor/Chart.min.js" type="text/javascript" language="javascript"></script>

    <!-- This is the glue between the C# code and the ChartJs charts -->
    <script src="_content/ChartJs.Blazor/ChartJsBlazorInterop.js" type="text/javascript" language="javascript"></script>

    <!-- Some styling -->
    <link rel="stylesheet" href="_content/ChartJs.Blazor/ChartJSBlazor.css" />
</body>
</html>

[Joelius300]

Unfortunately, I'm assuming that won't work because the files share the same name. As I already mentioned in #95, we shouldn't have Chart.js bundled with our library. Try doing it without that Chart.js nuget and instead just reference the JS either locally or through a CDN.

[devanshidiaries]

The CDN fix worked for me. I was trying to avoid it, but seems like, it's the only workaround for now.

[devanshidiaries]

Thank you @Joelius300 !

[Joelius300]

You don't have to use a CDN. You can choose any source you'd like (see the chart.js installation docs). If you want to avoid linking a CDN, you can download the latest build (from here or here), put that into your wwwroot folder and then use a script tag with that local path.

If you download the latest version as "Chart.min.js" and copy it to wwwroot/chartjs/Chart.min.js (just an example), you'd use a script tag like with src="/chartjs/Chart.min.js". I haven't done this in a while maybe it's also src="chartjs/Chart.min.js" or src="~/chartjs/Chart.min.js" but at least one of them should work 😅