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

Left click not working in Legend dynamic Text box.

Mon Mar 29, 2021 10:54 am

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: 1487
Joined: Fri Aug 07, 2020 7:07 am

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

Tue Mar 30, 2021 5:15 am

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: 91
Joined: Wed Sep 04, 2013 10:26 am

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

Tue Mar 30, 2021 7:23 am

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: 1487
Joined: Fri Aug 07, 2020 7:07 am

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

Wed Mar 31, 2021 8:45 am

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: 91
Joined: Wed Sep 04, 2013 10:26 am

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

Wed Mar 31, 2021 10:50 am

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: 1487
Joined: Fri Aug 07, 2020 7:07 am

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

Thu Apr 01, 2021 10:31 am

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: 91
Joined: Wed Sep 04, 2013 10:26 am

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

Tue May 04, 2021 3:28 pm

Hi,

Once i updated the legend text. i need to re enable this event. How can i do that.
chart.container.onmousedown = Highcharts.noop;

KacperMadej
Posts: 4588
Joined: Mon Sep 15, 2014 12:43 pm

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

Wed May 05, 2021 9:04 am

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”