node text going out of node

[Abhishekkhh]

Please create a template which increases its node width and height automatically as per the content. Check last node text going out of the node. My text needs to be single line and it can be long like 100 chars. Text must not break, so it has to be in single line and node width must increase automatically

Kindly check the below link: https://code.balkan.app/displaytogether#JS

[naveganth]

This code demo could help you: https://code.balkan.app/org-chart-js/dynamic-width#JS

[ZornitsaPesheva]

And this is for the height: https://code.balkan.app/org-chart-js/dynamic-height#JS

[Abhishekkhh]

why is the color not applied for the node having :

OrgChart.templates.displaytogether.node = '';

[ZornitsaPesheva]

Please isolate the issue in our code app: https://code.balkan.app/org-chart-js/simple-example#JS

[Abhishekkhh]

PFA, why is the color not changing of this node.

[ZornitsaPesheva]

Please post the link of the code example where we can reproduce the issue.

[Abhishekkhh]

Kindly check the below link: https://code.balkan.app/displaytogether#JS

[ZornitsaPesheva]

You should change the size of the node. This is the default one: OrgChart.templates.ana.size = [250, 120];

[Abhishekkhh]

I want the node color to be "#b5d9ea" of that node also i have set the same in the template. Still it is not getting applied to that node.

[ZornitsaPesheva]

You have a mistake here:

    tags: {
        'y': {
            template: 'color0'
        },
        'individuals': {
            template: 'color5'
        },
        'purp': {
            template: 'color1'
        }
    },
    'sh': {
        template: 'color3'
    },
    'shcontrol': {
        template: 'color4'
    },
    'dt': {
        template: 'displaytogether'
    }

All tags should be inside the tags object.

[Abhishekkhh]

OK Thanks it helped, can you please tell me what is the default font style for Balkan Charts

[ZornitsaPesheva]

You can see the font size in template definitions. Here is the ana field_0 definition:

    OrgChart.templates.ana.field_0 = 
        '<text data-width="230" style="font-size: 18px;" fill="#ffffff" x="125" y="95" text-anchor="middle">{val}</text>';

And here is the CSS: https://code.balkan.app/org-chart-js/simple-example#CSS

[Abhishekkhh]

i meant what is the Chart font style? is the default font style Roboto for charts ?

[ZornitsaPesheva]

font-family: Helvetica; You can see it here: https://code.balkan.app/org-chart-js/simple-example#CSS

[Abhishekkhh]

Hi Zornitsa, Hi I have multiple charts in same page, How can i use the OrgChart.events.on('node-created') event chartwise, in the answer https://code.balkan.app/org-chart-js/dynamic-width#JS

[ZornitsaPesheva]

Every chart should have unique name, so you do this: var data = chart_name._get(node.id); then it will work for that chart only

[Abhishekkhh]

Hi,

So for multiple charts it would look like the below, however now even the charts are not getting displayed. Can you correct the below?

OrgChart.events.on('node-created', function(node) { var data = chartBI00000270._get(node.id); if (data.tags == 'dt') { document.getElementById('test_field').innerHTML = data.name; var rect = document.getElementById('test_field').getBoundingClientRect(); node.w = 800; } var data = chartBI00000271._get(node.id); if (data.tags == 'dt') { document.getElementById('test_field').innerHTML = data.name; var rect = document.getElementById('test_field').getBoundingClientRect(); node.w = 800; } var data = chartBI00000277._get(node.id); if (data.tags == 'dt') { document.getElementById('test_field').innerHTML = data.name; var rect = document.getElementById('test_field').getBoundingClientRect(); node.w = 800; } var data = chartBI00000275._get(node.id); if (data.tags == 'dt') { document.getElementById('test_field').innerHTML = data.name; var rect = document.getElementById('test_field').getBoundingClientRect(); node.w = 800; } var data = chartBI00000273._get(node.id); if (data.tags == 'dt') { document.getElementById('test_field').innerHTML = data.name; var rect = document.getElementById('test_field').getBoundingClientRect(); node.w = 800; } var data = chartBI00000272._get(node.id); if (data.tags == 'dt') { document.getElementById('test_field').innerHTML = data.name; var rect = document.getElementById('test_field').getBoundingClientRect(); node.w = 800; } var data = chartBI00000274._get(node.id); if (data.tags == 'dt') { document.getElementById('test_field').innerHTML = data.name; var rect = document.getElementById('test_field').getBoundingClientRect(); node.w = 800; } });

[ZornitsaPesheva]

Looks like it is better to use node-initialized: https://code.balkan.app/org-chart-js/two-charts-with-dynamic-width#JS

[Abhishekkhh]

Thanks i used the same yesterday, and it worked. Still Thanks