Diagrams

Use this shortcode to insert diagrams in your content:

Summary: defines the summary text for your diagram

Type: choose the type of diagram to be displayed – lines/bars or circles.

Content: here you can edit the conten of your diagram by editing its shortcode

{"title":"Skill1","amount":"70","color":"#ff0000"}
{"title":"Skill2","amount":"70","color":"#ffff00"}
{"title":"Skill3","amount":"70","color":"#ff00ff"}
{"title":"Skill4","amount":"70","color":"#f0f0f0"}

• tag  {gem_skill}  defines one parameter/value/skill to be displayed in diagram. You can add as much values/skills as you wish
• attribute “title” inside of tag [skill] defines the label/title of this parameter/skill
• attribute “color” defines the color whioch should be used in diagram to represent this parameter/skill
• attribute “amount” defines the value in percent of this parameter/skill

Style: choose one of three pre-made styles of displaying horizontal (line) diagrams

Useful CSS

Circle

Legend colors and font-size:

.diagram-circle .diagram-legend .legend-element .title {
    font-size: 14px !important;
    font-weight: 300;
    color: #ccc;
    line-height: 2;
}

Line

Legend colors and font-size:

.digram-line-box .skill-title {
    font-size: 15px;
    font-weight: 100;
    color: #ccc;
}

Style-1 background color:

.digram-line-box {
    background-color: #eee;
}

Skill – line background color:

.diagram-wrapper .digram-line-box .skill-line {
    background-color: #ccc !important;
}

You can modify this css and insert it in Theme Options -> Custom CSS to apply on all diagrams:

To apply this custom CSS on a single content element only, use the "Extra class name" field in this element in WPBakery:

The example of the css selector for the "custom-diagram" class name in this case:

.custom-diagram .digram-line-box .skill-title {
    font-size: 15px;
    font-weight: 100;
    color: #ccc;
}