[SalesForce] How to create chart in Lightning Component using SLDS

There is a Report Chart component that can be added to the lightning app builder, however, it is currently not available in the community builder. Documentation have a lightning component in the AppExchange which can be used in the Community Builder, however, it does still require some code/configuration to get it working, but it will handle the rendering for you.

You have to toggle the slds-is-open class from the top most div of the dropdown.

Let's say this is your dropdown:

<div class="slds">
        <div aura:id="ddId" class="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open" onclick="{!c.toggleVisibility}">
            ..... 
        </div>
    </div>

Now in the controller:

toggleVisibility : function(component, event, helper)
{
var ddDiv = component.find('ddId');
$A.util.toggleClass(ddDiv,'slds-is-open');
}

This should do. You can call this toggleVisibility function from blur of the button as well to close the dropdown.

Have this on the button :

onblur="{!c.toggleVisibility}"

UPDATE:

After VarunC's comment that the dropdown hides as soon as you click on it. To avoid that, update the toggleVisibility function which will hide the menu options after small delay.

    toggleVisibility : function(component, event, helper)
        {
            setTimeout(function(){
              var ddDiv = component.find('ddId');
              $A.util.toggleClass(ddDiv,'slds-is-open');
            }, 300);
        }