Left-aligned Legend spacing and sizing

19 posts, 0 answers
  1. David A.
    David A. avatar
    126 posts
    Member since:
    Aug 2008

    Posted 10 Apr 2014 Link to this post

    Hi,

    We are trying to convert a site from a competitor's chart to Telerik, but are having problems with the legend spacing and sizing.  We are looking for the following:

    1) Legend color box to be larger
    2) Left-aligned legend vertically aligned to top
    2) Legend vertical spacing between items to be larger
    3) Not a biggie, but Legend Color box with border

    Are these items possible?  Legend Margin seems to only work left and right, and Legend Padding seems to have no effect.

    Thank you,
    David A.
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 14 Apr 2014 Link to this post

    Hi David,

    Please find my answers to your questions:

    1) Legend color box to be larger - Currently it is not possible to modify the shape of the legend icons.
    2) Left-aligned legend vertically aligned to top - The position property of the legend has the following values - Top, Bottom, Left and Right. You can, however, manually offset the legend through the chartObject, as illustrated in this feedback item.
    3) Legend vertical spacing between items to be larger - Feature is not available.
    4) Not a biggie, but Legend Color box with border - You can set the property through the chartObject, as illustrated in this feedback item.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. David A.
    David A. avatar
    126 posts
    Member since:
    Aug 2008

    Posted 14 Apr 2014 in reply to Danail Vasilev Link to this post

    Thank you for your response Danail. The offsetY works, but unfortunately the border only works for the entire legend and not individual legend items.  A bigger problem I found is that there doesn't appear to be a consistent way to display multiple pie charts so that the plot areas are all aligned together (see attached).  I'm not sure if the legend width can be set so that multiple pie charts would have the plot areas aligned or if there is another way to go about this.

    Thanks,
    David A.
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 17 Apr 2014 Link to this post

    Hi David,

    The distance between the chart's elements is automatically calculated based on the chart's dimensions, length of the labels and other elements. In order to handle that you can set an appropriate left margin for the plot area. For example:
    <telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true" Width="500px" Height="500px">
        <Legend>
            <Appearance Position="Left"></Appearance>
        </Legend>
        <PlotArea>
            <Appearance>
                <TextStyle Margin="0 0 0 0" />
            </Appearance>
            <Series>
                <telerik:PieSeries StartAngle="90">
                    <SeriesItems>
                        <telerik:PieSeriesItem BackgroundColor="Purple" Exploded="true" Name="Name 1 Name 1 Name 1" Y="18.3" />
                        <telerik:PieSeriesItem BackgroundColor="Orange" Exploded="false" Name="Name 2 Name 2 Name 2" Y="35.8" />
                        <telerik:PieSeriesItem BackgroundColor="Green" Exploded="false" Name="Name 3 Name 3 Name 3" Y="38.3" />
                        <telerik:PieSeriesItem BackgroundColor="Blue" Exploded="false" Name="Name 4 Name 4 Name 4" Y="4.5" />
                        <telerik:PieSeriesItem BackgroundColor="Red" Exploded="false" Name="Name 5 Name 5 Name 5" Y="2.3" />
                    </SeriesItems>
                </telerik:PieSeries>
            </Series>
        </PlotArea>
        <ChartTitle Text="Browser Usage for April 2012">
        </ChartTitle>
    </telerik:RadHtmlChart>
    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Transitions="true" Width="500px" Height="500px">
        <Legend>
            <Appearance Position="Left"></Appearance>
        </Legend>
        <PlotArea>
            <Appearance>
                <TextStyle Margin="0 0 0 80" />
            </Appearance>
            <Series>
                <telerik:PieSeries StartAngle="90">
                    <SeriesItems>
                        <telerik:PieSeriesItem BackgroundColor="Purple" Exploded="true" Name="Name 1" Y="18.3" />
                        <telerik:PieSeriesItem BackgroundColor="Orange" Exploded="false" Name="Name 2" Y="35.8" />
                        <telerik:PieSeriesItem BackgroundColor="Green" Exploded="false" Name="Name 3" Y="38.3" />
                        <telerik:PieSeriesItem BackgroundColor="Blue" Exploded="false" Name="Name 4" Y="4.5" />
                        <telerik:PieSeriesItem BackgroundColor="Red" Exploded="false" Name="Name 5" Y="2.3" />
                    </SeriesItems>
                </telerik:PieSeries>
            </Series>
        </PlotArea>
        <ChartTitle Text="Browser Usage for April 2012">
        </ChartTitle>
    </telerik:RadHtmlChart>



    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. David A.
    David A. avatar
    126 posts
    Member since:
    Aug 2008

    Posted 17 Apr 2014 in reply to Danail Vasilev Link to this post

    Thank you for your response Danail.  Unfortunately the charts position will change depending on the data, so if I set the margins to align the charts for one page, another page with different data will not align.  I'll just submit a user voice request for my issues.   

    David A.
  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 22 Apr 2014 Link to this post

    Hi David,

    Another approach I can suggest is that you create a custom legend and align it over the chart. Such an example is illustrated in this online demo.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. David A.
    David A. avatar
    126 posts
    Member since:
    Aug 2008

    Posted 22 Apr 2014 in reply to Danail Vasilev Link to this post

    Thank you for the suggestion Danail. That would fix the legend issue but multiple pie charts still do not align properly (see attached).

    David A.
  9. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 25 Apr 2014 Link to this post

    Hi David ,

    Could you send me a sample page, where the issue is reproduced? There might be certain Margin or Padding definitions, which cause the misplacement, so I need to investigate the case in order to give you the proper assistance.

    Regards,
    Stamo Gochev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  10. David A.
    David A. avatar
    126 posts
    Member since:
    Aug 2008

    Posted 26 Apr 2014 in reply to Stamo Gochev Link to this post

    Hi Stamos,

    Attached is the output of a sample page, showing the misaligned charts. When a width is placed on the chart with a left aligned legend, the plot area will center itself inside the remaining space.  Since the legend sizes have different widths, this causes multiple charts to misalign.  I have tried changing the margin & padding for each, but each time the page gets new data the charts are skewed again.

    ASPX:

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <div>
            <telerik:RadHtmlChart runat="server" ID="chart1" Width="700" Height="275"  Transitions="true" >
                <Legend>
                    <Appearance Position="Left" >
                        <TextStyle FontFamily="Verdana, Tahoma, Arial" FontSize="11" Margin="0 0 0 5" Padding="0"/>
                    </Appearance>
                </Legend>
                <PlotArea >
                    <Appearance>
                        <FillStyle BackgroundColor="Yellow" />
                         
                    </Appearance>
                <Series  >
                    <telerik:PieSeries StartAngle="90" DataFieldY="Value" NameField="Text" ColorField="Color">
                        <LabelsAppearance  >
                            <ClientTemplate>
                                    #if(value  > 0){##= value# %#}#
                            </ClientTemplate>
                            <TextStyle FontFamily="Verdana, Tahoma, Arial" FontSize="11" Margin="-2"   />
                        </LabelsAppearance>
                        <TooltipsAppearance Color="#555" Visible="False">
                            <ClientTemplate>
                                #=dataItem.Text#
                            </ClientTemplate>
                                                 
                        </TooltipsAppearance>
                    </telerik:PieSeries>
                    </Series>
                    <YAxis>
                    </YAxis>
                </PlotArea>
            </telerik:RadHtmlChart>
        </div>
     
            <div>
            <telerik:RadHtmlChart runat="server" ID="chart2" Width="700" Height="275"  Transitions="true" >
                <Legend>
                    <Appearance Position="Left" >
                        <TextStyle FontFamily="Verdana, Tahoma, Arial" FontSize="11" Margin="0 0 0 5" Padding="0"/>
                    </Appearance>
                </Legend>
                <PlotArea >
                    <Appearance>
                        <FillStyle BackgroundColor="Yellow" />
                         
                    </Appearance>
                <Series  >
                    <telerik:PieSeries StartAngle="90" DataFieldY="Value" NameField="Text" ColorField="Color">
                        <LabelsAppearance  >
                            <ClientTemplate>
                                    #if(value  > 0){##= value# %#}#
                            </ClientTemplate>
                            <TextStyle FontFamily="Verdana, Tahoma, Arial" FontSize="11" Margin="-2"   />
                        </LabelsAppearance>
                        <TooltipsAppearance Color="#555" Visible="False">
                            <ClientTemplate>
                                #=dataItem.Text#
                            </ClientTemplate>
                                                 
                        </TooltipsAppearance>
                    </telerik:PieSeries>
                    </Series>
                    <YAxis>
                    </YAxis>
                </PlotArea>
            </telerik:RadHtmlChart>
        </div>
     
            <div>
            <telerik:RadHtmlChart runat="server" ID="chart3" Width="700" Height="275"  Transitions="true" >
                <Legend>
                    <Appearance Position="Left">
                        <TextStyle FontFamily="Verdana, Tahoma, Arial" FontSize="11" Margin="0 0 0 5" Padding="0"/>
                    </Appearance>
                </Legend>
                <PlotArea >
                    <Appearance>
                        <FillStyle BackgroundColor="Yellow"/>
                         
                    </Appearance>
                <Series  >
                    <telerik:PieSeries StartAngle="90" DataFieldY="Value" NameField="Text" ColorField="Color">
                        <LabelsAppearance  >
                            <ClientTemplate>
                                    #if(value  > 0){##= value# %#}#
                            </ClientTemplate>
                            <TextStyle FontFamily="Verdana, Tahoma, Arial" FontSize="11" Margin="-2"   />
                        </LabelsAppearance>
                        <TooltipsAppearance Color="#555" Visible="False">
                            <ClientTemplate>
                                #=dataItem.Text#
                            </ClientTemplate>
                                                 
                        </TooltipsAppearance>
                    </telerik:PieSeries>
                    </Series>
                    <YAxis>
                    </YAxis>
                </PlotArea>
            </telerik:RadHtmlChart>
        </div>



    Code Behind:

    public class ChartInfo
       {
           public string Text { get; set; }
           public double Value { get; set; }
           public string Color { get; set; }
       }
     
     
       protected void Page_Load(object sender, EventArgs e)
       {
           var count = 20;
     
           chart1.DataSource = GetChartData(new[] { "Exceeded", "Completely", "Mostly", "Somewhat", "Not at all" }, new double[] { 2, 6, 1, 2, 9 }, count);
           chart1.DataBind();
     
           chart2.DataSource = GetChartData(new[] { "Very Well Maintained", "Average", "Poor", "Terrible" }, new double[] { 4, 5, 6, 5 }, count);
           chart2.DataBind();
     
           chart3.DataSource = GetChartData(new[] { "About Right", "Somewhat Overpriced", "Significantly Way Overpriced" }, new double[] { 8, 2, 10 }, count);
           chart3.DataBind();
       }
     
       public List<ChartInfo> GetChartData(string[] labels, double[] values, int count)
       {
           var list = new List<ChartInfo>();
           var colors = new[] { "#EFC706", "#1E46BE", "#F67206", "#538F13", "#D70005" };
     
           foreach (var i in Enumerable.Range(0, labels.Length)) {
               var item = new ChartInfo();
     
               item.Value = Math.Round((values[i] / (double)count) * 100, 1);
               item.Text = string.Format("{0} - {1}%", labels[i], item.Value);
               item.Color = colors[i];
     
               list.Add(item);
           }
     
           return list;
     
       }





    Thank you,
    David A.
  11. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 30 Apr 2014 Link to this post

    Hi David ,

    Thank you for providing me with a runnable page, which helped me investigate the case. It turns out that this is a limitation of the chart  - as the width of the chart components (Legend, PlotArea, ChartTitle, etc.) is dependent on the overall chart 's width, there is no ultimate way to calculate the components' width so that all the elements look aligned.

    Actually, the reason for the misalignment is the different length of the corresponding legend items. There is no way to unify this behavior. This means that the only workaround here is to use a custom legend, which my colleague Danail suggested and which is not applicable in your case.

    Regards,
    Stamo Gochev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  12. David A.
    David A. avatar
    126 posts
    Member since:
    Aug 2008

    Posted 30 Apr 2014 in reply to Stamo Gochev Link to this post

    Thank you for your response Stamo.  If we could set a fixed width for the legend wouldn't this fix the problem?  That way, I could set the legend width to say 300px for all charts, and the plot area would take up the remaining space, which would be equal for all charts.  Wouldn't that work?

    Thanks,
    David A
  13. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 02 May 2014 Link to this post

    Hello David,

    I am logging your idea here: http://feedback.telerik.com/Project/108/Feedback/Details/127331. You can use this page to track its progress, cast your vote and leave any comments you have. I have also updated your Telerik points for your suggestion.


    Regards,

    Marin Bratanov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  14. David A.
    David A. avatar
    126 posts
    Member since:
    Aug 2008

    Posted 02 May 2014 in reply to Marin Bratanov Link to this post

    Thank you Marin!  I posted a suggestion previously, and the idea you posted is #3 in my list. 


    David A. 
  15. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 07 May 2014 Link to this post

    Hello David,

    Thank you for the pointer, it seems I had missed that. I have marked the relation between the two ideas.


    Regards,

    Marin Bratanov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  16. asdrf
    asdrf avatar
    3 posts
    Member since:
    Sep 2006

    Posted 11 Sep Link to this post

    Hi,

    I Used a RadHtmlChart in my project. 

    When I upload pages the chart was deformed. The Chart Area is not center and also when mouse moved on left side appears series Item label and it's point. but it is ok in my client. 

    Please Help me

  17. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 12 Sep Link to this post

    Hello,

    Can you send us a separate support ticket describing the issues you are facing, so that we can keep this thread dedicated to a single topic and thus ensure it stays as useful as possible?

    You can check out the following blog post for more information on how to submit a new support ticket:

    http://www.telerik.com/blogs/how-to-submit-a-support-ticket

    It will be very helpful if you can attach a runnable page that demonstrates the problem, so that our team can investigate the case and provide you with the necessary suggestions.

    For now, I can confirm that it looks like there is an issue with the chart (judging from the screenshot), but it is hard to guess what might be the actual cause for it.

    Regards,
    Stamo Gochev
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  18. asdrf
    asdrf avatar
    3 posts
    Member since:
    Sep 2006

    Posted 13 Sep in reply to Stamo Gochev Link to this post

    Hi,

    Thank you for your answer.

    but I have to say, I can not go to Support Page. because I was employed here fr 1 month. and I'm passing testing dies.

    I really need your guide. please let me know why the chart area shift to right after uploading?

    does it have any property for fixing it? I think it was appear for conflicting iis version. is it possible? 

    The server is: windows 2003,  and iis version is: 6. but my local has windows 7 ultimate and iis 6.1

    my you guide me?

    please please

    thanks

     

  19. asdrf
    asdrf avatar
    3 posts
    Member since:
    Sep 2006

    Posted 13 Sep in reply to asdrf Link to this post

    Hi,
    Thank you for your answer.
    but I have to say, I can not go to Support Page. because I was employed here fr 1 month. and I'm passing testing dies.
    I really need your guide. please let me know why the chart area shift to right after uploading?
    does it have any property for fixing it? I think it was appear for conflicting iis version. is it possible? 
    The server is: windows 2003,  and iis version is: 6. but my local has windows 7 ultimate and iis 6.1
    my you guide me?
    please please
    thanks
  20. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 16 Sep Link to this post

    Hello,

    Judging by the provided information, I will need an isolated runnable example, which reproduces the issue, so that I can investigate the exact configuration of the chart and find a resolution in your specific scenario.

    Please ask the license holder at your company to assign you as a licensed developer. This will allow you to create a new support ticket with a detailed description of the problem and attach a runnable project, so that our team can handle the case within the 24h response time, which the license provides.

    More information can be found at:

    http://www.telerik.com/purchase/faq/devcraft

    Stamo Gochev
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017