Tree Chart Component For Vue.js 2+

A Vue.js 2 component to render a tree chart from JSON data.

How to use it:

1. Import and register the tree chart component.

import TreeChart from "vue-tree-chart";

export default {
  components: {
    TreeChart
  },
}

2. Add the component to the template and define your own tree data as follows:

<TreeChart :json="treeData" />

export default {
  components: {
    TreeChart
  },
  data() {
    return {
      treeData: {
         {
          name: 'root',
          image_url: "avat.jpg",
          class: ["rootNode"],
          children: [
            {
              name: 'children1',
              image_url: "1.jpg"
            },
            {
              name: 'children2',
              image_url: "2.jpg",
              mate: [{
                name: 'mate',
                image_url: "3.jpg"
              }],
              children: [
                {
                  name: 'grandchild',
                  image_url: ".jpg"
                },
                {
                  name: 'grandchild2',
                  image_url: "1.jpg"
                },
                {
                  name: 'grandchild3',
                  image_url: "2.jpg"
                }
              ]
            },
            {
              name: 'children3',
              image_url: ".jpg"
            }
          ]
        }
      }
    }
  }
}

Preview:

Changelog:

06/14/2021

• v0.5.3: fix: svg link hover issue

07/09/2020

• Allows to customize the CSS class

Download Details:

Author: tower1229

Live Demo: https://refined-x.com/Vue-Tree-Chart/

Download Link: https://github.com/tower1229/Vue-Tree-Chart/archive/master.zip

Official Website: https://github.com/tower1229/Vue-Tree-Chart

Install & Download:

# NPM
$ npm install vue-tree-chart --save