dabeng / OrgChart.js

It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cannot collapse children

bcourtney5965 opened this issue · comments

I would like to collapse children nodes, but its's not working, I'm not even getting the little chevrons to popup on-hover & allow you to collapse/hide the children nodes.

I think I'm having two problems:
1.) Getting the Chevron's to appear and the functionality associated with them
2.) perhaps some logic that I've failed to implement or implemented in correctly

Here's the output:
screen shot 2017-10-27 at 11 50 57 am

And here's the output when I hover on the root node (notice no chevrons):
screen shot 2017-10-27 at 11 53 04 am

I'm using React but it's pretty simple - here's my code:

var myData = {
  'name': 'Lao Lao',
  'title': 'general manager',
  'children': [
    { 'name': 'Bo Miao', 'title': 'department manager' },
    {
      'name': 'Su Miao', 'title': 'department manager',
      'children': [
        { 'name': 'Tie Hua', 'title': 'senior engineer' },
        {
          'name': 'Hei Hei', 'title': 'senior engineer',
          'children': [
            { 'name': 'Pang Pang', 'title': 'engineer' },
            { 'name': 'Xiang Xiang', 'title': 'UE engineer' }
          ]
        }
      ]
    },
    { 'name': 'Yu Jie', 'title': 'department manager' },
    { 'name': 'Yu Li', 'title': 'department manager' },
    { 'name': 'Hong Miao', 'title': 'department manager' },
    { 'name': 'Yu Wei', 'title': 'department manager' },
    { 'name': 'Chun Miao', 'title': 'department manager' },
    { 'name': 'Yu Tie', 'title': 'department manager' }
  ]
}
export class HierarchyComponent extends React.Component {
  componentDidMount() {
    new OrgChart({
      'chartContainer': '#chart-container',
      'data': myData,
      'nodeContent': 'title'
    });
  }

  render() {
    return (
      <div id="chart-container"  style={{ width: "91%" }}>
      </div>
    );
  }
}


Nevermind, I needed to add in font awesome. Now everything works

How are you getting the OrgChart variable? import OrgChart from 'orgchart'