Radzen chart tooltip is not showing

Radzen.Blazor Components
1

Hi Radzen Team,
I found a problem with the chart components which if the mouse pointer is already hovered over a chart when it initially renders, the tooltip does not show . To activate the tooltip, the mouse pointer must be hovered over a different element first on the page and hover back. This issue is also occurring on the Radzen demo site.

Taking the donut chart as an example, here's how to reproduce the problem.
1.) Browse to the donut chart demo page at Blazor Donut Chart | a free UI component by Radzen
2.) While the chart is still being rendered, hover mouse pointer above the donut chart element
3.) When the chart finishes rendering, move the mouse pointer on the series doesn't show the tooltip
4.) Move the mouse pointer to some other elements outside of the donut chart div
5.) Now hover back over the series on the donut chart, the tooltip starts showing

This problem is occurring on the donut chart and the line chart that I have been using.

Thank you,
John

2

Hi @chiku31,

This happens because the tooltip is displayed with JavaScript. If you don't move the mouse the chart does not receive any mouse events hence it won't display the tooltip. Unfortunately I am not sure how we could solve that problem.

3

Hi Korchev,
Thank you for the quick response. I think the issue that I tried to address is that the tooltip doesn't work when the pointer is already on the chart object while it's being rendered and moving the pointer within the chart object after it's being rendered doesn't trigger the tooltip to show. I didn't find this behavior in the previous release of the chart components.

With the JavaScript reference that you provided, I compared the createChart function between the latest release and a previous release (not exactly sure from which release but the Radzen.Blacor.dll is 3.9.9.0). I see the difference is the introduction of the "inside" variable/condition.

Latest release:
createChart: function (ref, instance) {
var inside = false;
ref.mouseMoveHandler = this.throttle(function (e) {
if (inside) {
var rect = ref.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
instance.invokeMethodAsync('MouseMove', x, y);
}
}, 100);

Previous release:
createChart: function (ref, instance) {
ref.mouseMoveHandler = function (e) {
var rect = ref.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
instance.invokeMethodAsync('MouseMove', x, y);
};

If I set the inside variable to true, that seems to correct the issue but I am unsure if doing that may introduce other problem that I don't see.

Please advise.

Thank you,
John

4

Yes. I understand that and I explained why it happens.

This was introduced in order to avoid making server requests on every mouse move.

Still if you prefer the older behavior you can patch the createChart function by including your own implementation in a <script> tag:

<script>
Radzen.createChart = function (ref, instance) {
   ref.mouseMoveHandler = function (e) {
       var rect = ref.getBoundingClientRect();
       var x = e.clientX - rect.left;
       var y = e.clientY - rect.top;
       instance.invokeMethodAsync('MouseMove', x, y);
   };
   ref.clickHandler = function (e) {
      var rect = ref.getBoundingClientRect();
      var x = e.clientX - rect.left;
      var y = e.clientY - rect.top;
      instance.invokeMethodAsync('Click', x, y);
   };
   ref.addEventListener('mousemove', ref.mouseMoveHandler);
   ref.addEventListener('click', ref.clickHandler);
}
</script>
5

Understood. Thank you for the explanation.

Thank you,
John