Change font and border color of each node in Google Organizational Chart using CSS in ASP.Net MVC

Hi AkshayS,

Add this style to change the font family and border color.

CSS

.google-visualization-orgchart-node 
{
    font-family: Calibri !important;
    border: 2px solid red;
}

Sample

Refering the below article i have created sample.

Create Family Tree Hierarchy Chart from Database in ASP.Net using C# and VB.Net

Controller

public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetEmployee()
    {
        NorthwindEntities northwindEntities = new NorthwindEntities();
        var DbResult = northwindEntities.EmployeesHierarchies.ToList();
        return Json(DbResult, JsonRequestBehavior.AllowGet);
    }       
}

View

@model _210213_OrganisationChartMVC.EmployeesHierarchy

@{
    ViewBag.Title = "Google Organizational Chart";
}
<style>
    .google-visualization-orgchart-node {
        font-family: Calibri !important;
        border: 2px solid red;
    }
</style>


<h2 style="text-align: center;"> Organizational Chart in ASP.NET MVC using Entity Framework. </h2>
<div id="dvChart">
</div>

@section scripts
{
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["orgchart"] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            $.ajax({
                type: "POST",
                url: "Home/GetEmployee",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (dt) {
                    var dataArray = [];
                    $.each(dt, function (i, item) {
                        dataArray.push([item.EmployeeId, item.Name, item.Designation, item.ReportingManager]);
                    });
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'Entity');
                    data.addColumn('string', 'ReportEntity');
                    data.addColumn('string', 'ToolTip');
                    for (var i = 0; i < dataArray.length; i++) {
                        var id = dataArray[i][0].toString();
                        var name = dataArray[i][1];
                        var designation = dataArray[i][2];
                        var manager = dataArray[i][3] != null ? dataArray[i][3].toString() : '';
                        data.addRows([[{
                            v: id,
                            f: name + '<div>(<span>' + designation + '</span>)</div><img src = "Pictures/' + id + '.jpg" />'
                        }, manager, designation]]);
                    }
                    var chart = new google.visualization.OrgChart($('[id*=dvChart]')[0]);
                    chart.draw(data, { allowHtml: true });
                },
                failure: function (dt) {
                    alert(dt);
                },
                error: function (dt) {
                    alert(dt);
                }
            });
        }
    </script>
}

Screenshot