Update node size based on text size in Vue Diagram component

16 Mar 20233 minutes to read

You can update the size of the node based on the labels text size in two ways.

Step1

Without assigning the width and height properties for the nodes.

If you did not assign the width and height for the nodes by default, the nodes width and height will be updated based on the text size. Refer to the following code snippet for updating the node size based on the text size.

let nodes = [{
        id: 'industry', offsetX: 400, offsetY: 200, style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
    //Adding nodes annotation without specifying the nodes width and height
            annotations: [{ content: 'Node size based on the text size when the node is not assigned with a height and width property' }]
    }]

Step2

By assigning minimum width for the nodes.

If you assign minimum width for the nodes and if the text size exceeds the minimum width, the content inside the labels will be wrapped. Refer to the following code snippet for updating the node size based on the text size even though if you assign minimum width for the nodes.

let nodes = [{
        id: 'industry', offsetX: 400, offsetY: 200, minWidth: 100, minHeight: 50, style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
    //Adding nodes annotation by specifying the nodes minWidth and minHeight
            annotations: [{ content: 'Nodes size based on the text size even though the node is assigned with minimum width' }]
    }]

Refer to the following sample for updating the nodes size based on the text size without assigning the width and height property for the nodes.

app.vue

<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'>
        </ejs-diagram>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { DiagramPlugin} from '@syncfusion/ej2-vue-diagrams';
    Vue.use(DiagramPlugin);
    let nodes = [{
        id: 'industry', offsetX: 400, offsetY: 200, style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
            annotations: [{ content: 'Node size based on the text size when the node is not assigned with a height and width property' }]
    }]

export default {
    name: 'app',
    data() {
        return {
            width: "100%",
            height: "350px",
            nodes: nodes,
        }
    },
}
</script>
<style>
    @import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>