VueJS – Implement Oganization Chart with Title

I use this Vue Wrapper: OrgChart JS

At first, I could not figure out the chart to display: name + title.

Finally I got the point!

Here how I go…

Install

npm install vue-orgchart -S

And setting up the style per its website.

Implementation

export default {
        components: { VoBasic },
        data () {
            return {
                chartData : {
                    name: 'Department A', title: 'Manager A',
                    children: [
                        {
                            name: 'Department B', title: 'Manager B',
                        },
                        {
                            name: 'Department C', title: 'Manager B',
                            children: []
                        },
                        {
                            name: 'Department D', title: 'Manager C',
                            children: []
                        },
                        {
                            name: 'Department E', title: 'Manager E',
                            children: []
                        },
                        {
                            name: 'Department F', title: 'Manager F',
                            children: []
                        },
                        {
                            name: 'Department G', title: 'Manager G',
                            children: []
                        }
                    ]
                },
                titleData: 'title'
            }
        }
    }

And at template use this:

<template>
    <div class="row">
        <vo-basic :data="chartData" :nodeContent="titleData" class="col-12 col-sm-10 col-md-10"></vo-basic>
    </div>
</template>

 

Result