vijaygudla
Posts: 93
Joined: Wed Sep 04, 2013 10:26 am

Left click not working in Legend dynamic Text box.

Hi Team,

I created a dynamic textbox while clicking on the legend and hide the legend. In dynamic text box left click event is not working.
Can anyone help us to identity the issue.



plotOptions: {
series: {
events: {
legendItemClick: function (e) {

var seri = this;
var legendTextbox = document.createElement("INPUT");
legendTextbox.setAttribute("type", "text");
legendTextbox.setAttribute("contentEditable", "true");
legendTextbox.setAttribute("value", e.target.name);
legendTextbox.setAttribute('style', "width:"
+ seri.legendItem.getBBox().width + "px" + ";height:10px");

seri.legendItem.hide();

$(seri.legendItem.parentGroup.div)[0].appendChild(legendTextbox);
return false;

}
}
}
},


Jsfiddler sample:
https://jsfiddle.net/x02kwu7b/2/



Thanks in advance.
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Left click not working in Legend dynamic Text box.

Hello vijaygudla!

We appreciate you reaching out to us!

What do you mean by "In dynamic text box left click event is not working"? In legendItemClick function, you've overwritten the functionality of this click event and you've replaced the legendItem with input field, right? When it's no longer a legendItem then the legendItemClick event won't work on that.

Best regards!
Dominik Chudy
Highcharts Developer
vijaygudla
Posts: 93
Joined: Wed Sep 04, 2013 10:26 am

Re: Left click not working in Legend dynamic Text box.

Thanks for quick response.

I created a dynamic text box over the legendItem position with in chart. If i left click in text box it is not selected any text or cursor.

I attached jsfiddler example:
https://jsfiddle.net/x02kwu7b/2/

steps:
1. After loading the chart click on legend.
2. text box will appear on legendItem
3. if i left click in text box , nothing is happening in text box.

Please help us to find root cause.

Thanks in advance.
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Left click not working in Legend dynamic Text box.

Hi again!

In this case, we can add .focus() to enable editing this input field. Check out the demo in the link below.

Demo: https://jsfiddle.net/BlackLabel/59re0dvh/1/

Best regards!
Dominik Chudy
Highcharts Developer
vijaygudla
Posts: 93
Joined: Wed Sep 04, 2013 10:26 am

Re: Left click not working in Legend dynamic Text box.

Thank you for fiddler demo.

i can set focus to text box. But left click in the text box not working. if we click left click in text box cursor is not displaying at clicked location.

And we are not able to select the text with left mouse click.


Thanks in advance.
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Left click not working in Legend dynamic Text box.

Hi again!

In this case, we can block the original onmousedown function, and rewrite it on our own so the textbox will be able to be selected by the mouse.

Demo: https://jsfiddle.net/BlackLabel/xqtkrw7L/

Best regards!
Dominik Chudy
Highcharts Developer
vijaygudla
Posts: 93
Joined: Wed Sep 04, 2013 10:26 am

Re: Left click not working in Legend dynamic Text box.

Hi,

Once i updated the legend text. i need to re enable this event. How can i do that.
chart.container.onmousedown = Highcharts.noop;
User avatar
KacperMadej
Posts: 4632
Joined: Mon Sep 15, 2014 12:43 pm

Re: Left click not working in Legend dynamic Text box.

Have you tried keeping the original event as some temporary variable and reassigning it later on?
Before it gets overridden with the noop save and later it could be used again.

On edit, after pressing enter the input will hide, and the original onmousedown event will be assigned back to the container - https://jsfiddle.net/BlackLabel/1aecow82/1/
Kacper Madej
Highcharts Developer

Return to “Highcharts Stock”