[Change cursor when hovering on the data]

Hi, 

I'd like to implement a drill-down chart feature, and I think it'll be cool if the shape of the cursor changes to the finger ("pointer" cursor) if placed on a meaningful data point.

The cursor should basically change to the finger when the tooltip's being shown, and change back to normal if tooltip disappears.

Is there any way to do it?

Thank you very much!

 

[Custom ToolTip & Custom background]

Thank you very much for your answer, Juan.

But I use 3D charts, and the template apparently doesn't work for that case.

I think I'll just stick with the solution that I posted earlier (although it depends on the implementation detail) as it serves me well. 

[Custom ToolTip & Custom background]

Thanks for the answer, Juan.

But unfortunately, I use 3D charts and the template apparently doesn't work for that case.

[Custom ToolTip & Custom background]

Never mind. I figured it out.

 

Elements with id  "C0s" are the svg elements for the chart, and elements with id "C1s" are the svg elements for the legend.

You can investigate the bound rect (by calling getBoundingClientRect() function) for adjustment.

The following is the function that I used. Note that I made the function being called constantly in order to keep the shadow at a proper size. 

 

function adjustShadow() {

     $("[id=C0s]").each(function () {

    if ($(this).closest("div").attr("id") != "chrtPrimaryVector") return;

     var w = ($(this)[0].getBoundingClientRect().right - $(this)[0].getBoundingClientRect().left) * 1.1;

    var h = ($(this)[0].getBoundingClientRect().bottom - $(this)[0].getBoundingClientRect().top) * 1.1;

    var x = $(this)[0].getBoundingClientRect().left - $("#chrtPrimaryVector").offset().left;

    var y = $(this)[0].getBoundingClientRect().top - $("#chrtPrimaryVector").offset().top + h * 0.1;

     $("#chrtPrimaryVector").css({ "background-position": x + "px " + y + "px", "background-size": w + "px " + h + "px" });

// constantly repositioning the shadow

    setTimeout(adjustShadow, 200);

    });

    }

[Custom ToolTip & Custom background]

Thanks for the quick reply.

As for (3), what I'd like to do is:

 

 So I need to know the actual size of the chart to resize the shadow accordingly.

Is there a way to do that?

Thanks! 

[Custom ToolTip & Custom background]

Hi,

I've been using jChartFX for displaying some charts in my webpages and they worked great. I loved them.

However, I'm trying to implement some custom tooltips but I've been having some issues. 

 

1) It seems  

chart.on("gettip", onGetTip);

works fine, but

 chart.off("gettip", offGetTip);

doesn't seem to work although chart.off() function has been defined.

Is there anyway we can get a callback when the cursor is off the chart element?

 

2) when we are using a custom tooltip, we're supposed to "add" a div containing our custom tooltip to the standard tooltip div as a child like,

 args.tooltipDiv.appendChild(toolTip); 

 It's working fine w/r/t the issue above, but I don't like the fade-in/out feature.

Is there anyway I can turn it off? I managed to reduce the delay time for showing on/off the tooltip by modifying the library, but I can't find a place where the opacity is being changed...

 

3) I'd like to add a background shadow for a pie chart, and I wonder if there's any variable I can refer to in order to get the "acutal" chart being drown (not the size of div). I need to know it since the page size can vary, so the chart size changes.

 

I'd appreciated if you can give me answers or guideline where I can look for.

Thank you very much in advance for your reply.