Customized Chart 3
We can customize chart at any level, with filters and custom css. Here we are representing chart with custom design of each node.
Click on Name to view popup.
CSS
To achieve similar chart as above, add CSS shown below to area from where you are managing your theme’s style, it can be style.css under theme folder, Additional CSS under customizer or under theme option panel.
As shown below “.chart_682″ , replace 682 with your chart ID used in shortcode. You must have noticed this style is not for mobile and media query is used to avoid any conflicts.
@media only screen and (min-width:767px) {
.chart_682 .jOrgChart .node {
position: unset;
font-size: 15px;
border: 0px solid #e5e5e5;
color: #333;
width: 200px ;
max-width: 200px ;
border-radius: 7px;
box-shadow: 0 1px 0 1px rgb(230, 232, 233);
padding:0;
border-top: 1px solid #f1f1f1;
-webkit-transition: -webkit-box-shadow .3s;
transition: -webkit-box-shadow .3s;
transition: box-shadow .3s;
transition: box-shadow .3s,-webkit-box-shadow .3s;
}
.chart_682 .jOrgChart .node:hover {
-webkit-box-shadow: 0 1px 1px 0 rgba(90,122,190,.1), 0 10px 20px 0 rgba(90,122,190,.2);
box-shadow: 0 1px 1px 0 rgba(90,122,190,.1), 0 10px 20px 0 rgba(90,122,190,.2);
}
.chart_682 .jOrgChart .node img {
width: 75px;
float: left;
margin: 0 10px !important;
border-radius: 5%;
margin-bottom: 10px !important;
}
.chart_682 .jOrgChart .node > a {
display: inline-block;
text-align: left;
float:left;
padding-top:12px !important;
font-size:16px;
text-transform: capitalize;
font-weight: 500;
color:rgb(34, 45, 56);
width:100%;
background-color: #fff !important;
border-radius: 7px;
}
.chart_682 .jOrgChart .node > a small {
font-style: normal;
clear: none;
display: block;
font-size: 14px;
font-weight: normal;
color: rgb(97, 112, 128);
}
.social_popup {
padding: 20px 0 0;
}
.social_popup i {
font-size: 21px;
margin-right: 15px;
}
i.fa.fa-facebook {
color: #3B5997;
}
i.fa.fa-twitter {
color: #1DA0F1;
}
i.fa.fa-linkedin {
color: #0077B5;
}
.white-popup {
border-radius: 13px;
}
}
PHP
In order to display social media icon on popup like demo, copy PHP code shown below to your theme or child-theme functions.php file. You can modify it to display any information after popup content. Social media links can be pulled using “$user_id“.
Minimum version – 1.0.2
add_action("popup_content", "org_social_icon", 15, 2);
function org_social_icon($chart_id, $user_id) {
$out = "";
$out .= "<div class='social_popup'>";
$out .= '<i class="fa fa-facebook"></i>';
$out .= '<i class="fa fa-twitter"></i>';
$out .= '<i class="fa fa-linkedin"></i>';
$out .= "</div>";
echo $out;
}