OrgChartJS Docs

Vue.js

This document shows you haw you can create an OrgChart JS Vue.js project.

  1. Create a new project:
                vue create orgchart
            
  2. Go to the project root folder:
                cd orgchart
            
  3. Install the OrgChart JS NPM package:
                npm i @balkangraph/orgchart.js
            
  4. 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'
    
                    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>
            
  5. Change App.vue as follows:
                        <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>
                    
  6. Start the project:
                npm run serve