Vue tree chart is a vue2 component for displaying a tree charts diagram.

javascript tree, tree chart jquery, tree chart drawing, javascript tree library, javascript library for drawing tree diagrams, tree view chart, vue tree list, vue org tree example

How to make use of it:

Install and download:

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

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 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"
            }
          ]
        }
      }
    }
  }
}

Tree Chart Component, vue tree chart Plugin/Github, vue tree menu, chart js tree, dynamic tree diagram, tree chart landscape vue

See Demo And Download

Official Website(tower1229): Click Here

This superior jQuery/javascript plugin is developed by tower1229. For extra Advanced Usages, please go to the official website.