Category: Chart & Graph

Latest free Vue.js Charting components, plugins, and other related libraries for modern mobile & web applications.

View more: Best Vue.js Chart Components

Node-based Visual Graph Components In Vue – vnodes

vnodes is a set of components that help you draw interactive, SVG-based visual graphs and diagrams using SVG and Vue.js. How to use it: 1. Import vnodes components. import { Screen, Node, Edge, Group, Label, Port, Markers, graph } from ‘vnodes’ export default { components: { Screen, Node, Edge, // … } // … } 2. Create a basic node-based graph. <template> <screen ref=”screen”> <edge v-for=”edge in graph.edges” :data=”edge” :nodes=”graph.nodes” :key=”edge.id”> </edge> <node v-for=”node in graph.nodes” :data=”node” :key=”node.id”> HTML Here </node> </screen> </template> export default { components: { Screen, Node, Edge // … } data () { return { graph: