Remove default focus style and keep focus when move through the chart

[andreatricoli]

Hi everyone,

If I set this property keyNavigation: { focusId: 100 }, it focus properly on the node with id 100.

There is a way to remove the default focus effect style? in my case it show a orange circle which vanishes after a second.

I already read the docs in the official site and i tried to follow this example -> https://jsfiddle.net/9rjgqwdo/ - but the default style keeps appearing above my custom style

Another issue is that i lost the focus style when I move on the graph

Thank you

[ZornitsaPesheva]

Hi Andrea

Could you please create a code example in our Code app to show us what you have now? https://code.balkan.app/org-chart-js/simple-example#JS

[andreatricoli]

Hi! yes sure, I created this example -> https://code.balkan.app/focus-on-node-custom-style#JS

This is my current situation, as you can see in the example i created a custom style for my focused node but the default style (the circle effect wich vanishes after a few seconds) keep appearing above my custom style.

The second issue is that i lose the focus custom style when I move on the graph

Thank you

[ZornitsaPesheva]

So you'd like instead of adding a black border to change the color of the node when using keyboard navigation?

[andreatricoli]

no, i would like only to remove the default circle focus effect and i would like to keep my blue focus style also when i move on the graph

[ZornitsaPesheva]

So, you'd like to use blue color instead black border for the focused element when you use key navigation and you'd like to remove the ripple (circle) effect?

[andreatricoli]

Hi, yes, thank you I've made progress, I've figured out how to remove the ripple effect

OrgChart.templates.myTemplate.ripple = { radius: 0, color: 'none', rect: null, };

Now the only remaining problem is maintaining focus (blue fill effect on the node) when i move with the mouse on the graph, in this moment when the the graph is loaded the focused node is blue but as soon as I move with the mouse on the graph I lose my custom fill color

[ZornitsaPesheva]

You use key navigation too, right?

[andreatricoli]

yes i use the keyNavigation: { focusId: 2 }, property

[ZornitsaPesheva]

I see that, but do you navigate the chart using the keyboard?

[andreatricoli]

no, i use only the mouse to navigate

[ZornitsaPesheva]

Here is how you should change the color on center(focus): https://code.balkan.app/org-chart-js/change-color-on-center#JS

[andreatricoli]

It works! thank you very much!