Is there anyway to add a class to a specific node when using google orgchart API?

Question

I am using google org chart API. I would like to style a particular node but i don't see anyway to add a className or an id on a specific node to then use css to style.

I see you can change the style on all nodes but i don't see anyway to do it on a single node

Is this possible?

Answer 1

You can set "style" and "selectedStyle" properties on the DataTable row for the node you want to style (see the OrgChart custom properties).

If you specifically need to use a class, then your only option is to set the formatted value of the cell to wrap the contents in a <div> with the desired class.

Answer 2

If you want to specify styling in JSON literal you can use the p:{style: 'some styling here'} property for the row object. However you cannot specify class definition in p attribute :(

JSON Example:

var dataAsJSON = {
      cols:[{type:'string'},{type:'string'},{type:'string'}],
      rows:[
        {c:[{v: '0', f: 'Final Fantasy'}, null, {v: 'First Root'}], p:{style: 'background-color:violet;'}},
        {c:[{v: '1', f: 'DmC'}, null, {v: 'Second Root'}], p:{style: 'background-color:lime;'}},
        {c:[{v: '2', f: 'Cloud Strife'}, {v: '0'}, null]},
        {c:[{v: '3', f: getFormattedCell('Vincent Valentine')}, {v: '0'}, null]},
        {c:[{v: '4', f: 'Sephiroth'}, {v: '2'}, null]},
        {c:[{v: '5', f: 'Dante'}, {v: '1'}, null]},
        {c:[{v: '6', f: 'Nero'}, {v: '1'}, null]}
      ]
    };