Formatting the OrgChart

[semochka]

This is not a bug report, but a question.

The most basic example of working with OrgCharts allows one to customize the view:

data = [ [{v:'Mike', f:'Mike

President

'}, '', 'The President'], [{v:'Jim', f:'Jim

Vice President

'}, 'Mike', 'VP'], ['Alice', 'Mike', ''], ['Bob', 'Jim', 'Bob Sponge'], ['Carol', 'Bob', ''] ];

But the component understands this directly - as a text passed. Is there a way to customize the OrgChart? And make it collapsible?

Thank you, -Simon

[kussmaul]

Hi @semochka , The main docs for Google Charts describe option allowCollapse, which defaults to false. https://developers.google.com/chart/interactive/docs/gallery/orgchart#configuration-options

To customize the OrgChart in other ways, the above docs might be helpful.

[semochka]

Thank you for your answer @kussmaul - appreciate it.

I actually did try to set options="{ allowCollapse : true}" but I don't see its affect - that's why I asked the question . Also how do style the content of the diagrams. If you follow the basic example data = [ [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'], [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'], ['Alice', 'Mike', ''], ['Bob', 'Jim', 'Bob Sponge'], ['Carol', 'Bob', ''] ];

The 'div style=...' becomes part of the text, when one would expect President to be written in red. allowHtml is set to true.

[kussmaul]

Hi @semochka, here is an example with allowCollapse and styling: https://stackblitz.com/edit/angular-ivy-ur6j7n

[semochka]

Hi @kussmaul . Thank you so much!!!