OrgChart JS Documentation

Vue.js

This document shows you haw you can add OrgChart JS to your Vue.js project.

  1. Install the OrgChart JS NPM package, starting this command in your project root folder:
                npm i @balkangraph/orgchart.js
            
  2. Create file OrgChart.vue in /src/components folder with the following content:
                <template>
                    <div id="tree" ref="tree"></div>
                </template>
    
                <script>
    
                    import OrgChart from '@balkangraph/orgchart.js/orgchart'
    
                    export default {
    
                        name: 'tree',
                        data() {
                            return {
                                nodes: [
                                    { id: 1, name: "Denny Curtis", title: "CEO", img: "https://cdn.balkan.app/shared/2.jpg" },
                                    { id: 2, pid: 1, name: "Ashley Barnett", title: "Sales Manager", img: "https://cdn.balkan.app/shared/3.jpg" },
                                    { id: 3, pid: 1, name: "Caden Ellison", title: "Dev Manager", img: "https://cdn.balkan.app/shared/4.jpg" },
                                    { id: 4, pid: 2, name: "Elliot Patel", title: "Sales", img: "https://cdn.balkan.app/shared/5.jpg" },
                                    { id: 5, pid: 2, name: "Lynn Hussain", title: "Sales", img: "https://cdn.balkan.app/shared/6.jpg" },
                                    { id: 6, pid: 3, name: "Tanner May", title: "Developer", img: "https://cdn.balkan.app/shared/7.jpg" },
                                    { id: 7, pid: 3, name: "Fran Parsons", title: "Developer", img: "https://cdn.balkan.app/shared/8.jpg" }
                                ]
                            }
                        },
    
                        methods: {
                            oc: function(domEl, x) {
    
                              this.chart = new OrgChart(domEl, {
                                nodes: x,
                                nodeBinding: {
                                    field_0: "name",
                                    field_1: "title",
                                    img_0: "img"
                                }
                              });
    
                            }
                      },
    
                      mounted(){
                        this.oc(this.$refs.tree, this.nodes)
                      }
                    }
                </script>
    
                <style scoped>
                </style>
            
  3. Change App.vue as follows:
    • add
                          import OrgChart from './components/OrgChart.vue'
                      
    • in <div id="app"> add
                          <OrgChart />
                      
    • In Components add OrgChart
    • In <style> add this css:
                          html, body{
                            width: 100%;
                            height: 100%;
                            padding: 0;
                            margin:0;
                            overflow: hidden;
                            font-family: Helvetica;
                          }
                          #tree{
                            width:100%;
                            height:100%;
                          }
                      
    • The file shoud look like this:
                          <template>
                              <div id="app">
                                  <OrgChart />
                              </div>
                          </template>
      
                          <script>
                          import OrgChart from './components/OrgChart.vue'
      
                          export default {
                            name: 'app',
                            components: {
                              OrgChart,
                            }
                          }
                          </script>
      
                          <style>
                              #app {
                                  font-family: 'Avenir', Helvetica, Arial, sans-serif;
                                  -webkit-font-smoothing: antialiased;
                                  -moz-osx-font-smoothing: grayscale;
                                  text-align: center;
                                  color: #2c3e50;
                                  margin-top: 60px;
                              }
      
                              html, body {
                                  width: 100%;
                                  height: 100%;
                                  padding: 0;
                                  margin: 0;
                                  overflow: hidden;
                                  font-family: Helvetica;
                              }
      
                              #tree {
                                  width: 100%;
                                  height: 100%;
                              }
                          </style>
                      

Now you can start your project and see the OrgChart.