Google organisational charts: styling with multiple attributes

Question

I'm using google organisational charts and I can set one property

data.setRowProperty(3, 'style', 'border: 1px solid green');

however I want to change the background also but putting in more than 1 attribute is not working for me

data.setRowProperty(0, 'style', 'background-color:red; border: 1px solid green');

does anyone know if this can be done?

drs9222 drs9222 · Accepted Answer · 2015-04-26T16:31:53

Is the issue truly that can't you set multiple or that you can't set the background-color?

If I apply your code to the example in the [documentation][1] both styles are added but the background-color isn't used because it is also setting background by default.

      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        data.addRows([
          [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'],
          [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ]);
          
        data.setRowProperty(0, 'style', 'background-color:red; border: 1px solid green');

        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, {allowHtml:true});
      }

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['orgchart']}]}"></script>
       <div id="chart_div""></div>

If you inspect "Mike" the style attribute is incorrectly added. Consider the above example with your line

data.setRowProperty(0, 'style', 'background-color:red; border: 1px solid green');

and compare it to the same thing using this line:

data.setRowProperty(0, 'style', 'background: none; background-color:red; border: 1px solid green');

Google organisational charts: styling with multiple attributes

1 Answers