javascripthtmlcssorgchart

Best way to increase width to nodes with OrgChart

I'm using OrgChart to draw tree-like structures. The default string text will be truncated when long string is occured (e.g. Biostatistics and Bioinformatics Core).

enter image description here

My idea is to change the property width of .orgchart .bioinformatics in CSS file. However, if I have a dozen nodes in my cluster, I don't want to manually adjust the width of each node. How can I automatically increase nodes width then show string completely without truncate in each cell?

[Reproduce the Issue]

let datascource = {
  'name': '中心主任',
  'title': 'Director',
  'className': 'top-level',
  'children': [{
      'name': '表觀基因體核心',
      'title': 'Epigenomics Core',
      'className': 'epigenomics'
    },
    {
      'name': '蛋白質體核心',
      'title': 'Proteomics Core',
      'className': 'proteomics'
    },
    {
      'name': '定序核心',
      'title': 'Sequencing Core',
      'className': 'sequencing'
    },
    {
      'name': '藥物研發核心',
      'title': 'Drug Discovery Core',
      'className': 'drug'
    },
    {
      'name': '幹細胞核心',
      'title': 'Stem cell Core',
      'className': 'stem'
    },
    {
      'name': '免疫核心',
      'title': 'Immunology Core',
      'className': 'immunology'
    },
    {
      'name': '生物統計及生物資訊核心',
      'title': 'Biostatistics and Bioinformatics Core',
      'className': 'bioinformatics'
    }
  ]
};

var orgchart = $('#chart-container').orgchart({
  'data': datascource,
  'nodeContent': 'title',
  'direction': 'b2t'
});

document.querySelector('#chart-container').appendChild(orgchart);
#chart-container {
  font-family: Arial;
  height: 320px;
  max-width: 1110px;
  border-radius: 5px;
  overflow: auto;
  text-align: center;
}

.orgchart .bioinformatics {
  width: 200px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.3/css/jquery.orgchart.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.3/js/jquery.orgchart.min.js"></script>
<div id="chart-container"></div>

Solution

  • If you want to auto-resize the content of all nodes:

    #chart-container {
  font-family: Arial;
  height: 320px;
  max-width: 1110px;
  border-radius: 5px;
  overflow: auto;
  text-align: center;
}
.orgchart .node {
  width: auto !important;
}

    .orgchart .node is the base class of all nodes so you only have to add width:auto. No need to use .orgchart .bioinformatics.

    I left an example in CodePen: https://codepen.io/elopezp/pen/jONrWbN

    Hope it helps =).