How to show legend in stock chart like Line chart?

[Gin]

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

[Srihari Muthukaruppan]

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,  

 Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TooltipAxisLabelDistinct22590304.zip  

 

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