This is a migrated thread and some comments may be shown as answers.

Left-aligned Legend spacing and sizing

18 Answers 308 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
David A.
Top achievements
Rank 1
David A. asked on 10 Apr 2014, 05:46 AM
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.

18 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 14 Apr 2014, 08:38 AM
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.

 
0
David A.
Top achievements
Rank 1
answered on 14 Apr 2014, 08:39 PM
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.
0
Danail Vasilev
Telerik team
answered on 17 Apr 2014, 01:12 PM
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.

 
0
David A.
Top achievements
Rank 1
answered on 18 Apr 2014, 03:04 AM
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.
0
Danail Vasilev
Telerik team
answered on 22 Apr 2014, 11:36 AM
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.

 
0
David A.
Top achievements
Rank 1
answered on 22 Apr 2014, 07:25 PM
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.
0
Stamo Gochev
Telerik team
answered on 25 Apr 2014, 06:38 AM
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.

 
0
David A.
Top achievements
Rank 1
answered on 26 Apr 2014, 05:17 AM
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.
0
Stamo Gochev
Telerik team
answered on 30 Apr 2014, 10:57 AM
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.

 
0
David A.
Top achievements
Rank 1
answered on 30 Apr 2014, 04:32 PM
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
0
Marin Bratanov
Telerik team
answered on 02 May 2014, 02:39 PM

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.

 
0
David A.
Top achievements
Rank 1
answered on 02 May 2014, 05:47 PM
Thank you Marin!  I posted a suggestion previously, and the idea you posted is #3 in my list. 


David A. 
0
Marin Bratanov
Telerik team
answered on 07 May 2014, 08:34 AM

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.

 
0
asdrf
Top achievements
Rank 1
answered on 11 Sep 2016, 05:40 AM

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

0
Stamo Gochev
Telerik team
answered on 12 Sep 2016, 06:01 AM
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.
0
asdrf
Top achievements
Rank 1
answered on 13 Sep 2016, 12:22 PM

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

 

0
asdrf
Top achievements
Rank 1
answered on 13 Sep 2016, 12:23 PM
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
0
Stamo Gochev
Telerik team
answered on 16 Sep 2016, 05:00 AM
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.
Tags
Chart (HTML5)
Asked by
David A.
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
David A.
Top achievements
Rank 1
Stamo Gochev
Telerik team
Marin Bratanov
Telerik team
asdrf
Top achievements
Rank 1
Share this question
or