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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to display the legend item in multiple rows?

Platform: ASP.NET Web Forms |
Control: Chart

Essential Chart supports displaying Legend items in multiple rows using rowCount and columnCount properties of Legend. It is used to display all the Legend items without a scrollbar, when there are a lot of Legend items. By default, the scrollbar appears to avoid overlapping of the Legend items in Chart. The following code illustrates this.

ASP

<ej:Chart ID="container" runat="server">
      . . . . . .
      . . . . . .
       <Legend Visible="true" RowCount="2"></Legend>
       . . . . . .
       . . . . . .       
</ej:Chart>

Screenshot

Chart with Legend items in multiple rows

Figure 1: Legend items in multiple rows

2X faster development

The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
Dharmraj Bhurtel
Dec 20, 2021

How to customize legend text like SeriesName (25%) eg. India (25%) USA (40%)

 Reply
Durga Gopalakrishnan [Syncfusion]
Dec 20, 2021

Hi Dharmraj,

We suggest you to use LegendItemRendering event to customize legend text based on your requirement.

API : https://help.syncfusion.com/api/js/ejchart#events:legenditemrendering

Please revert us if you have any concerns.

Regards, Durga G
Dharmraj Bhurtel
Jan 04, 2022

How to show multiple legend items with one series, I have only one series with multiple points with different colors so I want to show legends behalf of colors eg. legends: Red, Green, Blue, Yellow

 Reply
Durga Gopalakrishnan [Syncfusion]
Jan 05, 2022

Hi Dharmraj,

As of now, we don’t have support to display legend based on series points. We suggest you to use Annotations to display the custom elements in chart. Please check with the below snippet and sample.

<ej:Chart ID="Chart1">
            <Annotations>
                <ej:Annotations Visible="True" Content="annotation1" X="500" Y="420" CoordinateUnit="Pixels" Region="Chart"></ej:Annotations>
                <ej:Annotations Visible="True" Content="annotation2" X="520" Y="420" CoordinateUnit="Pixels" Region="Chart"></ej:Annotations>
                //…
            </Annotations>
            <Legend Visible="false"></Legend>
        </ej:Chart>

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/CustomLegend-1324496539.zip

Please let us know if you have any concerns.

Regards, Durga G

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile