gradient problem

[Manolo Capdevila]

Hi,

I want set a gradient color in hierechiecal tree

But, in your example

https://ej2.syncfusion.com/angular/demos/#/material/diagram/hierarchical-tree

I can set the gradient color, but when the background color can not be gradient, so its ugly.

And if I remove the margin, I can't set the height of node

    if (linearGradient) {

      obj.style = { gradient: linearGradient };

      obj.backgroundColor = 'inherit';

    } else {

      obj.style = { fill: backgroundColor, strokeColor: 'none', color: 'white', strokeWidth: 2  };

      obj.backgroundColor = backgroundColor;

    }

     (obj.shape as TextModel).margin = { left: 5, right: 5, bottom: 5, top: 5 };

[Gowtham Gunashekar]

Hi Manolo, 

On our further analysis of the shared link, the margin for the text node has added, that cause the backgroundColor is applied as like node border. The gradient is only applicable for the node and the node had the margin “5px” in each side that cause the background color appeared a border. 

It’s the behavior of the diagram, we suggest you to remove the margin and apply width and height of the node or else use some other node instead of text node. We have added the sample link to demonstrate how to render text node and apply gradient. 

 

Sample link: https://stackblitz.com/edit/angular-vpqpw9-nl1bjs?file=app.component.ts 

Regards, 

Gowtham