We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to show legend in stock chart like Line chart?

I read the docs, but seem no way to do it!?


1 Reply

SM Srihari Muthukaruppan Syncfusion Team February 5, 2020 07:37 AM

Hi Gin, 
 
We have analyzed your query. From that, we would like to let you know that as of now we do not have support for legend in stock chart. Hence we suggest you to use the below workaround solution to achieve your requirement. we have hidden the series on click of div element and made visible on the second click to achieve the legend behavior based on your requirement.  Please find below sample and code snippet,  

 
Code Snippet: 
 
    <div id="content" align="center" style="width: 80px; padding: 5px; height: 150; position:relative"> 
        <table style="width: 100%"> 
            <tr id="legend-series"> 
                <td><div id="first" style="width: 15px; height: 2px; background:skyblue"></div></td> 
                <td>Series1</td> 
            </tr> 
        </table> 
    </div> 
<script> 
    var data = window.aapl; 
    var firstClick = true; 
    document.getElementById('content').onclick = function (e) { 
        if (firstClick) { 
            var id = document.getElementById("container_stockChart_chart_Series_0"); 
            id.style.visibility = "hidden" 
            firstClick = !firstClick; 
        } else { 
            var id = document.getElementById("container_stockChart_chart_Series_0"); 
            id.style.visibility = "visible" 
            firstClick = !firstClick; 
        } 
    }; 
</script> 
 
 
Screenshot:  
 
Before Click: 
 
  
After Click: 
 

Let us know if you have any concerns. 

Regards, 
Srihari M 


Loader.
Live Chat Icon For mobile
Up arrow icon