Chart Events for Axis Text

[VanCleefParticipant]

Hello,

Is it possible to create a mouseOver event for the axis text of a chart? I would like to underline axis text when I move my cursor over it.

I know that it is possible to create events for the series, as shown in the event sample on your website, but this is not what I am looking for.

Regards,

VanCleef

[DimitarParticipant]

Hello VanCleef,

To achieve this, bind to the mouseenter and mouseleave events as follows:

$(".jqx-chart-axis-text").mouseenter(function (event) {
    $(event.target).css("text-decoration", "underline");
});
$(".jqx-chart-axis-text").mouseleave(function (event) {
    $(event.target).css("text-decoration", "none");
});

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[VanCleefParticipant]

Hello Dimitar,

Thank you for your help, this is what I needed. I forgot to mention that I only had to underline the chart axis text on the x-axis. While looking through the stylesheet I noticed that both the x-axis and y-axis use the same identifier (.jqx-chart-axis-text). After a bit of trial and error I managed to find a solution. I would like to post the code here, in case somebody else is having the same problem.

function mouseOverEvent()
{
	$(".jqx-chart-axis-text").each(function()
	{
		var data = $(this).text();
		if (isNaN(data))
		{		                
			$(this).mouseenter(function(event)
			{
				$(event.target).css("text-decoration", "underline");
			});
			$(this).mouseleave(function(event)
			{
				$(event.target).css("text-decoration", "none");
			});
		}
	});
};

This code is triggered when the pointer moves over the chart. The code checks if the axis-text contains a number, if it doesn’t then the text will be underlined when the pointer moves over the text.

Ofcourse if there happens to be a proper solution to seperate the x-axis and y-axis then please let me know.

Regards,

VanCleef

[Author]

Posts