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

Left-aligned Legend spacing and sizing

18 Answers 360 Views

Chart (HTML5)

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

David A. asked on 10 Apr 2014, 05:46 AM

competitor.png

telerik.png

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

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.

answered on 14 Apr 2014, 08:39 PM

multiple-charts.png

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.

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.

answered on 26 Apr 2014, 05:17 AM

chart-alignment.png

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.

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.

answered on 11 Sep 2016, 05:40 AM

untitled-2.png

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

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.

answered on 13 Sep 2016, 12:23 PM

untitled.png

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

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.